var interface = '';
var appThumbs = '';
var colorThumbImages = '';
var appDesctiptions = '';
var appLarges = '';
var currentAppName = '';
var previousAppName = '';
var currentAppIndex = 0;
var currentPage = 0;
var appsPerPage = 0;
var totalPages = 0;
var pagePixelOffset = 0;

window.addEvent('domready', function(){
	if($('ourWork')){
		//determine which app we're dealing with
		if($('ourWork').hasClass('byAppHorizontal')){
			interface = 'byAppHorizontal';
			appsPerPage = 6;
		}else{		
			interface = 'byApp';
			appsPerPage = 9;
			pagePixelOffset = 8;
		}
		
		
		appThumbs = $$('.appThumb');
		colorThumbImages = $$('.colorThumb');
		appDesctiptions = $$('.description');
		appLarges = $$('.appLarge');
		totalPages = appThumbs/appsPerPage;
			
		if (interface == 'byApp') {
			//hide the descriptions
			appDesctiptions.each(function(appDescription){
				$(appDescription.id.split('_')[0] + "_description").fade('hide');
			});
			
			//hide the large pics of the app
			appLarges.each(function(appLarge){
				appLarge.fade('hide');
			});	
		}
		
		
		
		//hide the color thumbs
		colorThumbImages.each(function(colorThumbImage){
			colorThumbImage.fade('hide');
		});
		
		
		//add hover & click events to the thumbnails, and determine which app is the current app
		tempAppIndex = 0;
		appThumbs.each(function(appThumb){			
			//determine which app page we're on 
			if (interface == 'byAppHorizontal' && currentAppName == ''){
				if (appThumb.getElementsByTagName('a').length) {
					//console.log(appThumb.getElementsByTagName('a')[0].href);
				}
				if(appThumb.getElementsByTagName('a').length && appThumb.getElementsByTagName('a')[0].href ==  window.location){
					currentAppName = appThumb.id.split('_')[0];
					previousAppName = currentAppName;
					switchApp(appThumb);
				}
			}	
			//determine the selected app by looking at which thumb has 'selected' marked
			if(appThumb.hasClass('selected')){
				currentAppIndex = tempAppIndex;
				currentAppName = appThumb.id.split('_')[0];
				previousAppName = currentAppName;
				switchApp(appThumb);
				
				pagesToTurn = Math.floor(tempAppIndex/appsPerPage);
				for(i=0; i<pagesToTurn; i++){
					nextPage();
				}
			}
			
			appThumb.addEvents({
				'mouseover': function(){
					appThumb.toggleClass('hover');
				},			
				'mouseout': function(){
					appThumb.toggleClass('hover');
				},			
				'click': function(){
					switchApp(appThumb);
				}
			});	
			
			//increase counter
			tempAppIndex ++;	
		});
		
		$('next').addEvents({		
			'click': function(){ 
				nextPage(); 
			}
			
		});
			
		
		$('previous').addEvents({		
			'click': function(){ 
				previousPage(); 
			}
		});		
		
		
	}
	
});

function nextPage(){
	scrollToAppIndex = ((currentPage + 1) * appsPerPage) ;
	//console.log(scrollToAppIndex);
	if(scrollToAppIndex > appThumbs.length){
		return false;
	}
	//console.log(scrollToAppIndex);
			
	x = $(appThumbs[scrollToAppIndex]).getPosition('gallery').x - pagePixelOffset;
	y = $(appThumbs[scrollToAppIndex]).getPosition('gallery').y - pagePixelOffset;	
	var myFx = new Fx.Scroll($('galleryWindow')).start(x,y);


	currentPage++;
}

function previousPage(){
	scrollToAppIndex = ((currentPage - 1) * appsPerPage) ;
	//console.log(scrollToAppIndex);
	if(scrollToAppIndex < 0){
		return false;
	}
	
	x = $(appThumbs[scrollToAppIndex]).getPosition('gallery').x - pagePixelOffset;
	y = $(appThumbs[scrollToAppIndex]).getPosition('gallery').y - pagePixelOffset;	
	var myFx = new Fx.Scroll($('galleryWindow')).start(x,y);
	

	currentPage--;
}

function switchApp(appThumb){	
	previousAppName = currentAppName;
	currentAppName = appThumb.id.split("_")[0];
	
	//go through each app thumb and remove selected class
	appThumbs.each(function(item2){
		item2.removeClass('selected');
	});								
	
	//mark the clicked thumb as selected
	appThumb.addClass('selected');	
			
	//fade out the previous app thumb and fade in the current app thumb 
	$(previousAppName + '_' + 'thumb').getElements('.colorThumb').fade('out');		 			
	$(currentAppName + '_' + 'thumb').getElements('.colorThumb').fade('in');	
	
	
	if (interface == 'byApp') {
		//fade out the previous large thumb and fade in the current app thumb 
		$(previousAppName + '_' + 'large').fade('out');
		$(currentAppName + '_' + 'large').fade('in');
		
		//hide the old description and display the current description 	
		$(previousAppName + "_description").fade('out');			
		$(currentAppName + "_description").fade('in');	
	}									
					

}