$('document').ready(function(){	
	//---------------- thumnail ------------------

	//$("#thum li:nth-child(3n)").css("margin-right","0");
	
	/*$('#thum').children().hover(
		function(){
			$(this).siblings().stop().fadeTo(500,0.3);
		},
		function(){
			$(this).siblings().stop().fadeTo(500,1);
	});*/
	var url=new Array();
	url[1]="http://www.facebook.com/pages/MASA%E3%81%AE%E6%96%99%E7%90%86ABC/134812985946?sk=app_175637955843056";
	url[2]="http://www.masa.tw/category/%E5%BD%B1%E7%89%87%E5%8B%95%E7%95%AB";
	url[3]="http://www.masa.tw/%e7%b0%a1%e5%96%ae%e6%96%99%e7%90%86%e9%a3%9f%e8%ad%9c/%e7%be%8e%e9%a3%9f%e9%a3%9f%e8%ad%9c%e6%b2%99%e6%8b%89%e9%a3%9f%e8%ad%9c%e4%b8%8b%e9%85%92-%e9%bb%91%e6%a3%ae%e6%9e%97%e7%81%ab%e8%85%bf%e6%b2%99%e6%8b%89with-blue-cheese-dressing%e8%97%8d%e4%b9%be.html";
	url[4]="http://www.masa.tw/%e7%b0%a1%e5%96%ae%e6%b8%9b%e8%82%a5%e9%a3%9f%e8%ad%9c/%e6%b8%9b%e8%82%a5%e9%a3%9f%e8%ad%9c%e6%97%a5%e6%9c%ac%e6%96%99%e7%90%86-%e5%86%8d%e7%99%bc%e7%8f%be%e6%b8%9b%e8%82%a5%e6%95%88%e6%9e%9c%e8%b1%90%e5%af%8c%e7%ba%96%e7%b6%ad%e6%97%a5%e6%9c%ac.html";
	url[5]="http://www.masa.tw/%e5%b9%bc%e5%85%92%e9%a3%9f%e8%ad%9c/%e8%9b%8b%e7%b3%95%e9%a3%9f%e8%ad%9c-%e5%82%b3%e7%b5%b1%e3%81%ae%e6%b4%8b%e8%8f%93%e5%ad%90%e8%91%a1%e8%90%84custard-cream%e6%9d%8f%e4%bb%81%e5%a1%94.html";
	url[6]="http://www.masa.tw/category/%E5%BD%B1%E7%89%87%E5%8B%95%E7%95%AB";
	

	// *******  variables ************ //
	var move = 0;	
	var fadeTime = 400;	
	var num_count = 2;
	var sliderTimer = 0;
	var sliderTime = 4000;
	var srollupTimer = 0;
	var srolldownTimer = 0;	
	var itemsShow = 4;
	var items = $('#thum').children().size();
	var child = 0;

	//****************** functions **************//
	function scrollup(){
		if(move<0){			
			move = move+60;
			$('#thum').children().animate({ 'top':+move+'px' },"slow");	
			$(this).css("opacity","1");
			$('#scrolldown').css("opacity","1");
			if(move == 0){				
				setTimeout(function() { 
					$('#scrollup').css("opacity","0.5");
				}, 500); 				
			}
		/*}else{
			//$('#scrollup').css("opacity","0.5");
			clearInterval(srollupTimer);*/
		}	
	}
	function scrolldown(){			
		if(move != ( items - itemsShow ) * -60 ){
			move = move - 60;
			$('#thum').children().animate({ 'top':+move+'px' },"slow");
			$('#scrollup').css("opacity","1");
			if(move == (items - itemsShow) * -60){
				clearInterval(srolldownTimer);
				setTimeout(function() { 
					$('#scrolldown').css("opacity","0.5");
				}, 500); 				
			}
		}
	}		
	function changeImage(){
		
		/*$('#large').fadeOut("slow", function(){
			//debugger;
			//console.log('now item is' + num_count+ ' scroll move' + move + 'px');
			$('#large').attr('src', "img/eyecatch/masa_eye" + num_count + ".jpg").fadeIn(fadeTime);	
		});*/
		//debugger;
		/*$('#large').fadeOut('slow');*/
		$('#large').attr('src', "/img/eyecatch/masa_eye" + num_count + ".png");
		$('#gotomenu').attr('href', url[num_count]);
		console.log('now item is' + num_count+ ' scroll move' + move + 'px');
		/*$('#large').fadeOut("slow", function(){
			$('#large').attr('src', 'img/eyecatch/masa_eye'+num_count+'.jpg').fadeIn(fadeTime);
		});		*/
	}
	
	
	//core animate functinon
	function animate(){
		//if( move <= (items - itemsShow) * -60){
		if( num_count == items+1){
			//debugger;
			num_count = 1;
			move = 0;
			$('#thum').children().animate({ 'top':'0px' },"slow");
			$('#scrollup').css("opacity","0.5");
			$('#scrolldown').css("opacity","1");
			//console.log('back to first move is' + move);
		}
		
		/*if(move == -120 && number_count < itemsShow){
			scrollup();
		}*/
		//if(num_count >= itemsShow+1 && move != (items - itemsShow) * -60){
		if(num_count >= itemsShow+1){
			//if( move != (items - itemsShow) * -60 )
			move = (num_count - (itemsShow) ) * -60;
			//debugger;
			$('#thum').children().animate({ 'top':+move+'px' },"slow");	
		}
		//debugger;
		//child = num_count;
		$("#thum li img").css("opacity","0.5");		
		$("#thum li:nth-child(" + (num_count) + ") img").css("opacity","1");
		
		$("#picture ul.button li").css('background-image','url(http://www.masa.tw/img/point02.png)');
		$("#picture ul.button li:nth-child(" + (num_count) + ")").css('background-image','url(http://www.masa.tw/img/point01.png)');
		changeImage();
		/*$('#large').fadeOut("slow", function(){
			$('#large').attr('src', 'img/eyecatch/masa_eye'+num_count+'.jpg').fadeIn(fadeTime);
		});*/
	}
	
	// change the eyecatch
	function slider(){
		animate();
		num_count++;
	}
	

	//********* page start ******* //
	
	//load image
	var imgs = new Array();
	for(i =1;i <= items ; i++){
		imgs[i] = new Image();
		imgs[i].src= '/img/eyecatch/masa_eye'+i +'.png';	
	}
	
	$('#scrollup').css("opacity","0.5");

	// start slider
	sliderTimer = setInterval(function(){
		slider()
	}, sliderTime);
	
	$("#thum li img").css("opacity","0.5");
	$("#thum li:nth-child(1) img").css("opacity","1");

	
	
	//************ make button ****************//
	$('#picture').append("<ul class=\"button\"></ul>");
	for(var i = 1; i <= items;i++){
		$('#picture ul.button').append('<li class=\"button' + i + '\"></li>');
	}
	$("#picture ul.button li").css('background-image','url(http://www.masa.tw/img/point02.png)');
	$("#picture ul.button li:nth-child(1)").css('background-image','url(http://www.masa.tw/img/point01.png)');

	
	
	//******************   events ************************ //
	$('#picture ul.button li').hover(
		function(){
			clearInterval(sliderTimer);
			$(this).css('cursor','pointer');
			
			num_count = $(this).attr('class').slice(-1) - 0;

			animate();
			//only on hover
			if(num_count < itemsShow-1 && move < 0){
				if( num_count == 1){
					move = 0;
				}else{
					move = move + 60 ;
				}
				$('#thum').children().animate({ 'top':+move+'px' },"slow");
				//debugger;
			}			
			$('#picture ul.button li').css('background-image','url(http://www.masa.tw/img/point02.png)');
			$(this).css('background-image','url(http://www.masa.tw/img/point01.png)');			
		},function(){
			sliderTimer = setInterval(function(){
				slider()
			}, sliderTime);		
		}
	);
	
	$('#large').hover(
		function(){
			clearInterval(sliderTimer);
		},
		function(){
			sliderTimer = setInterval(function(){
				slider()
			}, sliderTime);
		}
	);
		
	$('#thum > li ').hover(
		function(){
			clearInterval(sliderTimer);
			
			var filename = $(this).children().children().attr('src');
			var url = $(this).children().attr('href');
			// -0 covert to integer
			var this_num = filename.slice(-5,-4) - 0;
			
			//if( this_num == num_count && num_count != 2){
			if( this_num == num_count){
				//do nothing
			}else{
				num_count = this_num;
				var gotomenu = $('#gotomenu');
				$("#thum li img").css("opacity","0.5");
				$(this).find('img').css("opacity","1");
				$("#picture ul.button li").css('background-image','url(http://www.masa.tw/img/point02.png)');
				$("#picture ul.button li:nth-child(" + (num_count) + ")").css('background-image','url(http://www.masa.tw/img/point01.png)');				
				//large.attr('src', 'eyecatch/masa_eye'+num+'.jpg').siblings().stop().fadeTo(500,1);
			
				$('#large').fadeOut("slow", function(){
					$('#large').attr('src', '/img/eyecatch/masa_eye'+num_count+'.png').fadeIn(fadeTime);
				});
				////console.log('now item is' + num_count+ ' scroll move' + move + 'px');
				gotomenu.attr('href', url);
				//debugger;
			}
			

		},
		function(){
			//$('#large').siblings().stop().fadeTo(500,1);			
			sliderTimer = setInterval(function(){
				slider()
			}, sliderTime);
		}	
	);
	
	$('#scrollup').hover(
		function(){
			clearInterval(sliderTimer);
			$(this).css('cursor','pointer');
			scrollup();
			srollupTimer = setInterval(function(){
				scrollup();
			}, fadeTime)			
		},function(){
			clearInterval(srollupTimer);
			sliderTimer = setInterval(function(){
				slider()
			}, sliderTime);			
		}
	);

	$('#scrolldown').hover(
		function(){
			clearInterval(sliderTimer);
			$(this).css('cursor','pointer');
			scrolldown()
			srolldownTimer = setInterval(function(){
				scrolldown()
			}, fadeTime)				
		},function(){
			clearInterval(srolldownTimer);
			sliderTimer = setInterval(function(){
				slider()
			}, sliderTime);			
		}
	);
});