var dv;
var store;
var start = 0;
var limit = 8;
var page = 1;
var numPages = 0;
var thumbCache = new Array();
var mainCache = new Array();

function init(){
	// if we're here, we have javascript on (obviously), so nuke whatever PHP has put in the 'imagelist' div
	Ext.get('imagelist').dom.innerHTML = '';
	
	// attach click event for next page
	Ext.get('next-link').on('click', nextPage);
	Ext.get('prev-link').dom.style.visibility = 'hidden';
}

function createStore( nodeId )
{
	store = new Ext.data.JsonStore({
		url: '/wca/classes/modules/gallery/view/ajax/load-items.php',
		root: 'items',
		fields: [ 'id', 'filename', 'thumb-filepath', 'main-filepath', 'name', 'keywords' ],
		autoload: true,
		remoteSort: true,
		totalProperty: 'numItems'
	});
	store.baseParams.nodeId = nodeId;
	store.load({ 
		params: { start: start, limit: limit },
		callback: function() {
			numPages = Math.ceil( store.getTotalCount() / limit );
			updatePageBar();
		} 
	});
}
var fullsizeImageName = "";

function setupDataView(){
	var tpl = new Ext.XTemplate(
	    '<tpl for=".">',
	        '<li class="thumb" id="item-{id}">',
	        '</li>',
	    '</tpl>'
	);

	dv = new Ext.DataView({
		store: store,
		autoHeight: true,
		tpl: tpl,
		itemSelector: 'li.thumb',
		selectedClass: 'selected',
		singleSelect: true,
		renderTo: 'imagelist'
	});
	
	dv.on('selectionchange', function(dv, selections){
		var records = dv.getSelectedRecords();
		var record = records[0];
		if (record) {
			fullsizeImageName = record.data.name;
			// load up new image, put in loading placeholder until loaded
			Ext.get("fullsize").dom.src = "/s.gif";
			var image = new Image();
			image.onload = function(){
				var el = Ext.get('fullsize');
				el.fadeOut({
					remove: false,
					useDisplay: true,
					callback: function(){
						el.dom.src = image.src;
						el.dom.alt = fullsizeImageName;
						el.dom.style.marginLeft = '0px';
						el.dom.style.marginTop = '0px';
						el.fadeIn({
							duration: 1
						});
					}
				});
			}
			image.src = record.data['main-filepath'];
		}
	});
}

function nextPage()
{
	// change page and enable/disable links as appropriate
	Ext.get( "fullsize" ).dom.src = "/s.gif";
	updatePageBar( 'next' );
}

function prevPage()
{
	Ext.get( "fullsize" ).dom.src = "/s.gif";
	updatePageBar( 'prev' );
}

function updatePageBar( dir )
{
	if( dir == 'prev' )
	{
		start = start - limit;
	}
	else if( dir == 'next' )
	{
		start = start + limit;
	}

	store.load({ 
		params: { start: start, limit: limit },
		callback: function( records ) {
			
			// now select the new first item
			for( var i=0, len=records.length; i<len; i++ )
			{
				var data = records[i].data;
				var thumb = new PreloadThumbImage({
					id: data["id"],
					name: data["name"]
				});
				thumb.loadImage( data["thumb-filepath"] );
			}
			dv.select( 0, false, false );
			var lower = start + 1;
	
			if( dir == 'prev' )
			{
				if( page == numPages )
				{
					Ext.get( 'next-link' ).on( 'click', nextPage );
					Ext.get( 'next-link' ).dom.style.visibility = 'visible';
				}
				page--;
				if( page == 1 )
				{
					Ext.get( 'prev-link' ).un( 'click', prevPage );
					Ext.get( 'prev-link' ).dom.style.visibility = 'hidden';
				}
			}
			else if( dir == 'next' )
			{
				if( page == 1 )
				{
					Ext.get( 'prev-link' ).on( 'click', prevPage );
					Ext.get( 'prev-link' ).dom.style.visibility = 'visible';
				}
				page++;
				if( page == numPages )
				{
					Ext.get( 'next-link' ).un( 'click', nextPage );
					Ext.get( 'next-link' ).dom.style.visibility = 'hidden';
				}
			}
			else
			{
				if( page == numPages )
				{
					Ext.get( 'next-link' ).un( 'click', nextPage );
					Ext.get( 'next-link' ).dom.style.visibility = 'hidden';
				}
			}
	
			Ext.get( "lower" ).dom.innerHTML = lower;
			var upper = lower + limit - 1;
			var total = store.getTotalCount();
			if( upper > total ) upper = total;
			Ext.get( "upper" ).dom.innerHTML = upper;
			Ext.get( "total" ).dom.innerHTML = store.getTotalCount();
	
			Ext.get( 'paging-text' ).dom.style.visibility = 'visible';
		}
	});
}