$(document).ready(function(){
	var lastLiElement = $('#tabNaviagtion li:last a').attr('href');
	var firstLiElement = $('#tabNaviagtion li:first a').attr('href');
	//console.log('firstLiElement', firstLiElement);
	//console.log('lastLiElement', lastLiElement);
	var liElements = $('#tabNaviagtion li');	
	var liWidth = liElements.width(); 
	var liCount = liElements.length;
	var margin = 18;
	var scrollWidth = liWidth +  margin;
	$('#tabNaviagtion').width(scrollWidth * liCount);
	
	$('#tabNaviagtion img').click(function(){
		updateBigImage(this);
		return false;
	});
	
	$('#bigImage').delegate('img', 'click', function() {
		showNextPreview(1);
		var curElm = $('#tabNaviagtion .cur');
		var curElmHref = $('#tabNaviagtion .cur a').attr('href');
		//console.log('cur Url: ', curElmHref);
		if (curElmHref !== lastLiElement){
			var nextElm = curElm.next();
			//console.log('nextElm: ', nextElm);
			// img -> nextElm
			var imgNextElm = $('img', nextElm);
			updateBigImage(imgNextElm);
		}
		return false;
	});
	
	$('.nextImage').click(function() {
		showNextPreview(3);
		return false;
	});

	$('.prevImage').click(function() {
		showPrevPreview(3);
		return false;
	});

	function updateBigImage(elm){

	 	var elm = $(elm);
		liElements.removeClass('cur');
		var curLiElm = elm.parent().parent();
		curLiElm.addClass('cur');
		
		var imgSrc = elm.parent().attr("href");
		var pText = elm.parent().next().text(); 
		//var downloadLink ='';
		var downloadLink = $('.downloadLink', curLiElm).attr('href');	
		//console.log('downloadLink: ', downloadLink);		
		//$('#bigImage img').attr('src', imgSrc);
		var tmp = '<img src="'+ imgSrc +'" alt="'+  pText +'"><p>'+  pText +'</p><a href="'+ downloadLink +'">Download</a>';
		$('#bigImage').html(tmp);
	
		//updateNavi(imgSrc); 
		
		//console.log('pos: ', $('#tabNaviagtion li:first').position().left) ;
	}
	
	function updateNavi(imgSrc) {
		
		if(imgSrc == firstLiElement ){
			$('.prevImage').css('visibility', 'hidden');
		}else {
			$('.prevImage').css('visibility', 'visible');
		}
		
		if(imgSrc == lastLiElement ){
			$('.nextImage').css('visibility', 'hidden');
		}else {
			$('.nextImage').css('visibility', 'visible');
		}
		
	}
	
	function showNextPreview(i) {
		$("#tabNaviagtionWrapper").scrollTo({top:'0px', left:'+=' + i * scrollWidth +'px'}, 700 );
	}

	function showPrevPreview(i) {
		$("#tabNaviagtionWrapper").scrollTo({top:'0px', left:'-=' + i *  scrollWidth +'px'}, 700 );
	}	

});