// show the page dots.
function pageTab(input) {
	var numbers = $$('.pagenumbers' );
	var len= numbers.length;
	var width = len*15;
	var margin = Math.ceil( width /2 );

	$('producttabs').setStyle( 'width', width+'px' );
	$('producttabs').setStyle( 'margin-left', '-'+margin+'px' );
	$('producttabs').setStyle( 'display', 'block' );
	$('producttabs').setOpacity( 1 );
	$('thumb-arrow-left').setOpacity(1);
	$('thumb-arrow-right').setOpacity(1);

	numbers.each( function( pagenumber ) {
		pagenumber.removeClass( 'current' );
	} );
	if ( $('pagenumber-'+input ) ) {
		$( 'pagenumber-'+input ).addClass('current');
	}
	checkThumbPages();
}

function showPage( showme ) {
	pageTab(showme);
	currentpage=showme;

	// assume there's stuff in it.
	var tempdiv=$('prodnav').clone();
	tempdiv.addClass('temporary');
	tempdiv.setStyle( 'top', '32px' );
	tempdiv.setProperty( 'id', 'tempdiv' );
	$ES('.product-thumb', tempdiv).each( function(element) {
		element.setStyle('backgroundImage', 'url(/assets/misc/blank.gif)' );
		var foo=element.getStyle( 'backgroundImage' );
		});
	tempdiv.injectInside( $('prodnav').getParent() );

	// clear the current stuff
	$('prodnav').empty();

// build the page.
	var thispage=pagination[showme];
	for( var i=0; i < thispage.length; i++ ) {
		// create each pagination item
		// add them each to the product page area.
		var main = new Element ( 'div' , {'id':'thumb-'+thispage[i].pid } );
		main.addClass( 'product-thumb' );
		var me = thispage[i].pid;

		if ( pageType=='desktopextra' ) {
			var a = new Element( 'a' , {'href':'/desktopextras.php?p='+me, 'id':'a_'+me } );
			var d = new Element( 'a' , {'href':'/desktopextras.php?p='+me, 'id':'d_'+me } );
		}
		else if ( pageType == 'playstation3' ) {
			var a = new Element( 'a' , {'href':'/playstation3.php?p='+me, 'id':'a_'+me } );
			var d = new Element( 'a' , {'href':'/playstation3.php?p='+me, 'id':'d_'+me } );
		}
    else if ( pageType == 'vistathemes' ) {
			var a = new Element( 'a' , {'href':'/vistathemes.php?p='+me, 'id':'a_'+me } );
			var d = new Element( 'a' , {'href':'/vistathemes.php?p='+me, 'id':'d_'+me } );
    }
		else if ( pageType == 'windows7' ) {
			var a = new Element( 'a' , {'href':'/windows7.php?p='+me, 'id':'a_'+me } );
			var d = new Element( 'a' , {'href':'/windows7.php?p='+me, 'id':'d_'+me } );
		}
		else {
			var a = new Element( 'a' , {'href':'/products.php?p='+me, 'id':'a_'+me } );
			var d = new Element( 'a' , {'href':'/products.php?p='+me, 'id':'d_'+me } );
		}

		d.addClass( 'more' );
		d.setText( 'View details' );
		// ---
		if ( pageType=='desktopextra' ) {
			var tnail='/images/desktopextras/'+thispage[i].thumbnail;
		}
		else if ( pageType == 'playstation3' ) {
			var tnail='/images/playstation3/'+thispage[i].thumbnail;
		}
		else if ( pageType == 'vistatheme' ) {
			var tnail='/images/vistathemes/'+thispage[i].thumbnail;
		}
		else if ( pageType == 'windows7' ) {
			var tnail='/images/windows7/'+thispage[i].thumbnail;
		}
		else {
			var tnail='/images/products/'+thispage[i].thumbnail;
		}

		var t = false;
		if ( $defined( preloaded ) ) {
			for ( var m=0; m<preloaded.length;m++ ) {
				if ( preloaded[m].src == 'http://www.hyperdesk.com'+tnail ) {
					t = preloaded[m].clone();
					t.setProperty('title', thispage[i].name );
				}
			}
		}
		// --- 
		if ( ! t ) {
			var t = new Asset.image( tnail, { title:thispage[i].name } );
		}
			
		var firstimg = new Asset.image( coronaryInfo[ thispage[i].pid ].productimages[0] );
			
		var n = new Element( 'span' );
		n.addClass( 'name' );
		n.setText( thispage[i].name );

		var p = new Element( 'span' );
		p.addClass( 'price' );
		p.setText( '$'+thispage[i].price +' USD');

		t.setStyle( 'height', '79px' );
		t.setStyle( 'width', '194px' );

		t.injectInside( a );

		a.injectInside( main );
		n.injectAfter( a );
		d.injectAfter( n );
		p.injectAfter( d );

		main.injectInside( $('prodnav' ) );

		// add the on click events to a and d.
		a.addEvent( 'click', updateProduct.pass( me ));
		a.addEvent( 'click', function( evt ){ evt=new Event(evt).stop() } );
		d.addEvent( 'click', updateProduct.pass( me ));
		d.addEvent( 'click', function( evt ){ evt=new Event(evt).stop() } );
	}

	var mfx = new Fx.Style(tempdiv, 'opacity', { 
		duration: 400, // 200 
		onComplete : function(){
			$('tempdiv').remove();
			resetThumbPageTimer();	
		}
	});
	mfx.start(1, 0);			
 checkThumbPages();
}

pageTab( currentpage );

var thumbPageTimer=function() { 
	if ( productthumb_timing == 0 ) {
		return false;
	}
	showNextPage();
}.delay( productthumb_timing*1000 );

function showNextPage() {
	var nextpage = currentpage+1;
	if ( nextpage >= pagination.length ) {
		nextpage=1;
	}
	currentpage=nextpage;
	showPage( nextpage );
	checkThumbPages();
 	resetThumbPageTimer();
}

function showPrevPage() {
	var nextpage = currentpage-1;
	if ( nextpage <= 0 ) {
		nextpage= ( pagination.length-1 );
	}
	currentpage=nextpage;
	showPage( nextpage );
	checkThumbPages();
 	resetThumbPageTimer();
}

function resetThumbPageTimer() {
	if ( productthumb_timing == 0 ) { 
		return false;
	}
	$clear( thumbPageTimer );
	thumbPageTimer=function() { 
		showNextPage();
	}.delay( productthumb_timing*1000 );
}

function checkThumbPages() {
				if ( currentpage == 1 ) {
								//disable thumb arrow left 
								$('thumb-arrow-left' ).removeEvents('click');
								$('thumb-arrow-left' ).addEvent('click', function(evt) { evt=new Event(evt).stop(); }  );
								$('thumb-arrow-left' ).addClass('arrows-black-grey-left-disabled');
								$('thumb-arrow-left' ).removeClass('arrows-black-grey-left');
				}
				else {
								// enable thumb arrow left
								$('thumb-arrow-left' ).removeEvents('click');
								$('thumb-arrow-left' ).addEvent('click', function(evt) { showPrevPage(); evt=new Event(evt).stop(); }  );
								$('thumb-arrow-left' ).removeClass('arrows-black-grey-left-disabled');
								$('thumb-arrow-left' ).addClass('arrows-black-grey-left');
				}
				// pagination has an artificial empty 0 entry
				// in order to make the array match the pagination.
				if ( currentpage >= pagination.length-1 ) {
								// disable thumb arrow right 
								$('thumb-arrow-right' ).removeEvents('click');
								$('thumb-arrow-right' ).addEvent('click', function(evt) { evt=new Event(evt).stop(); }  );
								$('thumb-arrow-right' ).addClass('arrows-black-grey-right-disabled');
								$('thumb-arrow-right' ).removeClass('arrows-black-grey-right');
				}
				else {
								// enable thumb arrow right
								$('thumb-arrow-right' ).removeEvents('click');
								$('thumb-arrow-right' ).addEvent('click', function(evt) { showNextPage(); evt=new Event(evt).stop(); }  );
								$('thumb-arrow-right' ).removeClass('arrows-black-grey-right-disabled');
								$('thumb-arrow-right' ).addClass('arrows-black-grey-right');
			 }



}

// these are the thumbnail left and right arrows
// $('thumb-arrow-left' ).removeEvents('click');
// $('thumb-arrow-left' ).addEvent('click', function(evt) { showPrevPage(); evt=new Event(evt).stop(); }  );
// $('thumb-arrow-right').removeEvents('click');
// $('thumb-arrow-right').addEvent('click', function(evt) { showNextPage(); evt=new Event(evt).stop(); }  );