UsersDataView = function(params,callbackFunc,callbackScope) {
	this.callback = callbackFunc;
	this.callbackScope = callbackScope;
	this.thumbTemplate = new Ext.XTemplate(
		'<tpl for=".">',
			'<div class="thumb-wrap" id="{username}">',
			'<div class="thumb"><img src="{thumb}" title="{username}"></div>',
			'<div>{username}</div>',
			'</div>',
		'</tpl>'
	);
	this.thumbTemplate.compile();
    this.store = new Ext.data.JsonStore({
        url: HOME_DIR+'user_profiles/index',
		baseParams: params,
		method: 'POST',
        root: 'users',
		totalProperty: 'totalCount',
        fields: ['site_user_id','username','thumb']
    });
	UsersDataView.superclass.constructor.call(this,{
		id: 'users-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_users">No users to display</div>',
		loadingText: 'Loading...',
		listeners: {
			'selectionchange': {fn:this.showDetails, scope:this, buffer:100}
		}
	});
}
Ext.extend(UsersDataView, 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_profiles/view/'+data.site_user_id;
			}
		}
	}
});
var usersDV = null;
var usersPanel = null;
var toolBar1 = null;
var toolBar2 = null;
var renderID = 'user_thumbs';
function displayUsers(params,buttons) {
	if ( typeof(params) != "object" ) {
		params = { browse_type: 'all', dataview: 'true' };
	}
	if ( usersDV == null ) {
		$(renderID).innerHTML = '';
		usersDV = new UsersDataView(params);
		toolbarConfig = {
				pageSize: 16,
				store: usersDV.store,
				displayInfo: true,
				displayMsg: 'Displaying images {0} - {1} of {2}',
				emptyMsg: "No users to display"
		};
		if ( typeof(buttons) == "boolean" ) {
			if ( buttons ) {
				Ext.apply(toolbarConfig, { items: ['|',{ text: 'Popular', handler: displayPopularUsers }] });
				/* ,'|',{ text: 'New', handler: displayNewUsers } */
			}
		}
		else {
			Ext.apply(toolbarConfig, { items: ['|',{ text: 'Popular', handler: displayPopularUsers }] });
			/* ,'|',{ text: 'New', handler: displayNewUsers } */
		}
		toolBar1 = new Ext.PagingToolbar(toolbarConfig);
		toolBar2 = new Ext.PagingToolbar(toolbarConfig);
		usersPanel = new Ext.Panel({
			frame:false,
			layout:'fit',
			width: 800,
			items: [ usersDV ],
			tbar: toolBar1,
			bbar: toolBar2
		});
		usersPanel.render(renderID);
	}
	else {
		usersDV.store.baseParams = params;
	}
	usersDV.store.load();
}
function displayNewUsers() {
	displayUsers({ browse_type: 'new', dataview: 'true' });
}
function displayPopularUsers() {
	displayUsers({ browse_type: 'popular', dataview: 'true' });
}
function displayFriends() {
	displayUsers({ browse_type: 'friends', dataview: 'true' },false);
}
function displayFavorites(image_id) {
	displayUsers({ browse_type: 'favorites', image_id: image_id, dataview: 'true' },false);
}
function displaySearchResults(q) {
	displayUsers({ browse_type: 'search', q: q, dataview: 'true' });
}
function findUsers(render_to) {
	if ( typeof(render_to)=="string" ) {
		renderID = render_to;
	}
	if ( $(renderID) ) {
		displaySearchResults($('user_search_box').value);
	}
	else {
		document.location.href = HOME_DIR+'user_profiles/index?browse_type=search&q='+escape($('user_search_box').value);
	}
}
Event.observe(window, 'load', function() {
	if ( $('user_search_box') ) {
		Event.observe('user_search_box','keypress',function(e) { 
			if (e.keyCode == Event.KEY_RETURN) {
				$('user_search_box').blur();
				findUsers();
			}
		});
	}
});