// JavaScript Document

var totalItems = 0;
var currPosition = 0;
var thumbWidth = 0;
var totalScroll = 0;
var holderpadding = 10;


$(document).ready( function(){
	
	setUpKeyBoard();
	
	totalItems = $("#thumbs").children(".thumb").size();
	thumbWidth = $(".thumb").width() + parseFloat($(".thumb").css('margin-left')) + parseFloat($(".thumb").css('margin-right'));
	
	thumbSet =   Math.ceil( ( $('.thumbholder').width()-holderpadding ) / thumbWidth ) ;
	totalScroll =   Math.ceil( totalItems / thumbSet ) ; 
	
	$("#thumbs").css("width", totalItems*thumbWidth + 'px');
	
	// SET UP BUTTONS
	
	$('#rbutton').click(function(){
		
			if(currPosition < totalScroll -1){
				next();
			}
			
		});
		
	$('#lbutton').click(function(){
			if (currPosition > 0){
				prev();
			}
	});
	
	setUpThumbs();
	openImage("0thumb");

	

});



// Define Functions

function setUpThumbs(){
	$('.thumb').each(function(){
	
		$(this).click(function(){
		
			openImage($(this).attr('id'));
				
			});
			
			 
			
		
	});
}

function openImage( imageTarget ){

			var myItem = $( '#' + imageTarget );
			var largeImg = myItem.attr('rel');
			var currImage= + parseInt( myItem.attr('id') ) + "largeimg" ;
				
			$("#featureview").html('<div id="imageloader"><img src="images/loader.gif"></div><div class="displayimage" id="'+ currImage +'"><img src=\"'+largeImg+'\"></div>');
			
			$('img',"#"+currImage).css('opacity',0);
			$("#"+currImage).css('display','none');
			$('img', "#"+currImage).load(function(){
				$(this).animate( { opacity:1 } , 400 , "swing" , null );
				$('#imageloader').css('display','none');
				$("#"+currImage).css('display','table-cell');
			});
		
}

function setUpKeyBoard(){
	
	$(document).keydown( function(e) {
		
		
		if(e.which == 39 && currPosition < totalScroll -1){
			// Do something when right key pressed
			next();
			
			
		}else if (e.which == 37 && currPosition > 0){
			// Do something when left key pressed
			
			prev();
				
		}
		
		
		
		});// end keydown
	
	} // end setUpKeyboard
	
function next(){
	currPosition ++;
	var newPos = -currPosition*($('.thumbholder').width()-10) ;

	if(currPosition == totalScroll-1  && totalItems%thumbSet != 0){
		newPos = (-(currPosition-1)*($('.thumbholder').width()-10)) - ((totalItems%thumbSet)*thumbWidth);
	}
	
	$("#thumbs").animate( { left: newPos + 'px'} , 200 , "swing" , null );
	
	$('#alertwindow').html(currPosition + " " + totalScroll  + " " + totalItems%thumbSet);
	}
	
function prev(){
	currPosition --;
	var newPos = -currPosition*($('.thumbholder').width()-10) ;

	if(currPosition == 0 ){
		 newPos = 0;
	}
		$("#thumbs").animate( { left: newPos + 'px'} , 200 , "swing" , null );

		
		
		$('#alertwindow').html(currPosition + " " + totalScroll )	
	
	}