$(document).ready(function(){
	
	/*alert('works...');*/
	var allImages=[];
	var divH=0;
	var divW=0;
	var HTML_CONTENT="";
	var counter=0;
	var totalCounter=0;
	var scrollamount=0;
	var slideShowID=null;
	var timeInterval=3500;
	
	var lftArrow="images/lft-arrow.jpg";
	var rgtArrow="images/rgt-arrow.jpg";
	
	
	function addArrows()
	{
		var IMG_CONTENT="<img src='"+lftArrow+"' class='lftArrow'/><img src='"+rgtArrow+"' class='rgtArrow'/>";
		$('#mygallery').append(IMG_CONTENT);
		
		$('.lftArrow').bind('click',arrowClick);
		$('.rgtArrow').bind('click',arrowClick);
	}
	
	function setImages()
	{
	 	$('.belt').find('img').each(function(n){ 
											 	allImages[n] = $(this).attr('src'); 
												divH = $(this).height(); 
												divW=$(this).width();
												HTML_CONTENT = HTML_CONTENT+"<img src='"+allImages[n]+"' style='float:left;'/>";
											   });
		
		HTML_CONTENT=HTML_CONTENT+"<img src='"+allImages[0]+"' style='float:left;'/>";
		HTML_CONTENT=HTML_CONTENT+"<img src='"+allImages[1]+"' style='float:left;'/>";
		HTML_CONTENT=HTML_CONTENT+"<img src='"+allImages[2]+"' style='float:left;'/>";
		
		totalCounter = Math.ceil(allImages.length/3)+1;
		
		$('#mask').css('width',Number(divW*3));
		$('#mask').css('height',divH);
		//$('#mask').css('background','#00FF00');
		$('#mygallery').css('position','relative');
		$('#mask').css('position','absolute');
		$('#mask').css('left','32px')
		$('#mask').css('overflow','hidden');
		
		scrollamount = divW*3;
		
	}
	
	function assembleBelt()
	{
		$('.belt').html("");
		$('.belt').css('position','absolute');
		$('.belt').css('float','left');
		$('.belt').html(HTML_CONTENT);
		$('.belt').css('height',divH)
		$('.belt').css('width',divW*(allImages.length+3))
		
	}
	
	function gotoNext()
	{
		var settings='';
		if(counter<totalCounter-1)
		{
		counter++;
		settings={left:(-1)*scrollamount*counter}
		}
		if(counter==totalCounter-1)
		{
			$('.belt').animate(settings,1500,"easeInOutSine",function(){
													  	$('.belt').css('left','0px');
														counter=0;
													    });
		}
		else
		{
			$('.belt').animate(settings,1500,"easeInOutSine");
		}
		//$('.content-col-str h2 span').html(counter+"/"+totalCounter);
	}
	
	function play()
	{
	  slideShowID = setInterval(gotoNext,timeInterval);	
	}
	
	function arrowClick()
	{
	  
	   switch($(this).attr('class'))
	   {
		   case "lftArrow":
		   if(counter>0)
		   {
			 clearInterval(slideShowID);
			 counter=counter-2;
			 gotoNext();
		   }
		   
		   break;
		   
		   case "rgtArrow":
		   clearInterval(slideShowID);
		   gotoNext();
		   break;
		   
		   
	   }
	}
	
	
	setImages();
	assembleBelt();	
	addArrows();
	play();
});