MediaDataView = function(params,callbackFunc,callbackScope) {
	this.callback = callbackFunc;
	this.callbackScope = callbackScope;
	this.thumbTemplate = new Ext.XTemplate(
		'<tpl for=".">',
			'<div class="thumb-wrap" id="{title}">',
			'<div class="thumb"><img src="{thumburl}" title="{title}"></div>',
			'<div><span class="bluetxt">by</span> {username}', //'<br /><span class="bluetxt">in </span>{category_name}',
			'</div></div>',
		'</tpl>'
	);
	this.thumbTemplate.compile();
    this.store = new Ext.data.JsonStore({
        url: HOME_DIR+'user_images/index',
		baseParams: params,
		method: 'POST',
        root: 'images',
		totalProperty: 'totalCount',
        fields: ['image_id','username','category_name','image','thumb_image','title', 'thumburl', 'fullurl','keywords','artist_comments','image_width','image_height','flag_count']
    });
	MediaDataView.superclass.constructor.call(this,{
		id: 'images-view',
		store: this.store,
		tpl: this.thumbTemplate,
		region: 'center',
		autoHeight:true,
		singleSelect: true,
		overClass:'x-view-over',
		itemSelector:'div.thumb-wrap',
		emptyText: '<div id="no_images">No images to display</div>',
		loadingText: 'Loading...',
		listeners: {
			'selectionchange': {fn:this.showDetails, scope:this, buffer:100}
		}
	});
}
Ext.extend(MediaDataView, Ext.DataView, {
	showDetails: function() {
		var data = this.getSelectedRecords();
		if(data && data.length > 0){
			data = data[0].data;
			if ( typeof(this.callback) == "function" ) {
				this.callback.call(this.callbackScope, this, data);
			}
			else {
				document.location.href = HOME_DIR+'user_images/view/'+data.image_id;
			}
		}
	}
});
var mediaDV = null;
var mediaPanel = null;
var toolBar1 = null;
var toolBar2 = null;
var renderID = 'media_thumbs';
function displayMedia(params,hidebuttons) {
	if ( typeof(hidebuttons) != 'boolean' ) hidebuttons = false;
	if ( mediaDV == null ) {
		$(renderID).innerHTML = '';
		mediaDV = new MediaDataView(params);
		toolbarConfig = {
				pageSize: 16,
				store: mediaDV.store,
				displayInfo: true,
				displayMsg: 'Displaying images {0} - {1} of {2}',
				emptyMsg: "No media to display"
		};
		if ( ! hidebuttons ) {
			Ext.apply(toolbarConfig,{items: ['|',{ text: 'Popular', handler: displayPopularMedia }]});
			/* ,'|',{ text: 'New', handler: displayNewMedia } */
		}
		toolBar1 = new Ext.PagingToolbar(toolbarConfig);
		toolBar2 = new Ext.PagingToolbar(toolbarConfig);
		mediaPanel = new Ext.Panel({
			frame:false,
			layout:'fit',
			width: 800,
			items: [ mediaDV ],
			tbar: toolBar1,
			bbar: toolBar2
		});
		mediaPanel.render(renderID);
	}
	else {
		mediaDV.store.baseParams = params;
	}
	mediaDV.store.load();
}
function displayNewMedia() {
	// $('category_breadcrumbs').innerHTML = ''; /************** REMOVED CATEGORY */
	displayMedia({ browse_type: 'new', dataview: 'true' });
}
function displayPopularMedia() {
	// $('category_breadcrumbs').innerHTML = ''; /************** REMOVED CATEGORY */
	displayMedia({ browse_type: 'popular', dataview: 'true' });
}
function displayUserMedia(user_id) {
	displayMedia({ browse_type: 'user', site_user_id: user_id, dataview: 'true' });
}
function displayFavorites(user_id) {
	displayMedia({ browse_type: 'favorites', site_user_id: user_id, dataview: 'true' },true);
}
function displayCategoryMedia(category_id) {
	displayMedia({ browse_type: 'category', category_id: category_id, dataview: 'true' });
}
function displaySearchResults(q) {
	// $('category_breadcrumbs').innerHTML = ''; /************** REMOVED CATEGORY */
	displayMedia({ browse_type: 'search', q: q, dataview: 'true' });
}
function findMedia(render_to) {
	if ( typeof(render_to)=="string" ) {
		renderID = render_to;
	}
	displaySearchResults($('media_search_box').value);
}
Event.observe(window, 'load', function() {
	if ( $('media_search_box') ) {
		Event.observe('media_search_box','keypress',function(e) { 
			if (e.keyCode == Event.KEY_RETURN) {
				$('media_search_box').blur();
				//document.location.href=HOME_DIR+'user_images/search?q='+escape($('media_search_box').value);
				findMedia();
			}
		});
	}
});