// home slideShow
function xSlideShow() {
	
	// Check Browser
	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();
	var ieFlag=false;
	
	if ((userAgent.indexOf("msie") > -1)&&((appVersion.indexOf("msie 6.0") > -1)||(appVersion.indexOf("msie 7.0") > -1)||(appVersion.indexOf("msie 8.0") > -1))) {
		ieFlag=true;
	}
	
	var nTotal = 4;
	var interval = 6000;
	var nAct = 0;
	var tabObj = $('#products-navi a');
	var paneObj = $('#products-slideshow div.images>div');
	
	
	jQuery.each(tabObj, function(i,val) {
		$(this).click(function () {
			xChangePane(i);
			return false;
		});
	});
	
	//timer
	var myTimer;
	var myTimerFlag=false;
	function setTimer() {
		if(!myTimerFlag){
			myTimer = setInterval(function(){xChangePane(nAct+1)}, interval);
			myTimerFlag=true;
		}
	}
	function clearTimer() {
		clearInterval(myTimer);

		clearTimeout(animeTimerBtn);

		clearTimeout(animeTimer1);
		clearTimeout(animeTimer2);
		clearTimeout(animeTimer3);
		clearTimeout(animeTimer4);
		clearTimeout(animeTimer5);
		clearTimeout(animeTimer6);
		clearTimeout(animeTimer7);

		clearInterval(animeLoop1);
		clearInterval(animeLoop2);

		myTimerFlag=false;
	}
	
	//change
	function xChangePane(num) {
		if(num!=nAct){
			clearTimer();
			$(tabObj[nAct]).removeClass('current');
			$(paneObj[nAct]).fadeOut();
			if(num<nTotal){
				nAct=num;
			}else{
				nAct=0;
			}
			$(tabObj[nAct]).addClass('current');
			$(paneObj[nAct]).fadeIn('slow');

			if(ieFlag){
				setTimer();
			}else{
				xAnimation(nAct);
			}
		}
	}
	
	//Animation
	var animeTimerBtn,animeTimer1,animeTimer2,animeTimer3,animeTimer4,animeTimer5,animeTimer6,animeTimer7,animeLoop1,animeLoop2;
	function xAnimation(num) {
		switch (num) {
			case 0:
				clearTimer();

				$('#pane01 .btn,#pane01 .p01,#pane01 .p02,#pane01 .p03,#pane01 .p04,#pane01 .p05,#pane01 .p06,#pane01 .p07,#pane01 .p08,#pane01 .p09,#pane01 .p10').css('display','none').css('opacity',0);

				animeTimer1 = setTimeout(function(){
					$('#pane01 .p01').css('left','90px').css('display','block').animate(
						{opacity:1,left:'11px'},400,'swing');
				},300);

				animeTimer2 = setTimeout(function(){
					$('#pane01 .p02').css('opacity',0).css('display','block').animate(
						{opacity:1},1000,'swing');
				},800);

				//circle
				$('#pane01 .p03,#pane01 .p04,#pane01 .p05,#pane01 .p06,#pane01 .p07,#pane01 .p08,#pane01 .p09,#pane01 .p10').stop();
				$('#pane01 .p03').css('top','315px').css('display','block').css('opacity',1).animate(
					{top:'-48px'},4400,'swing');
				$('#pane01 .p04').css('top','415px').css('display','block').css('opacity',1).animate(
					{top:'-38px'},4400,'swing');
				$('#pane01 .p05').css('top','365px').css('display','block').css('opacity',1).animate(
					{top:'-58px'},4400,'swing');
				$('#pane01 .p06').css('top','265px').css('display','block').css('opacity',1).animate(
					{top:'-28px'},4400,'swing');

				animeTimer3 = setTimeout(function(){
					$('#pane01 .p07').css('top','365px').css('display','block').css('opacity',1).animate(
						{top:'-58px'},4400,'swing');
					$('#pane01 .p08').css('top','265px').css('display','block').css('opacity',1).animate(
						{top:'-28px'},4400,'swing');
					$('#pane01 .p09').css('top','315px').css('display','block').css('opacity',1).animate(
						{top:'-68px'},4400,'swing');
					$('#pane01 .p10').css('top','415px').css('display','block').css('opacity',1).animate(
						{top:'-38px'},4400,'swing');
				},2200);

				animeLoop1 = setInterval(function(){
					$('#pane01 .p03,#pane01 .p04,#pane01 .p05,#pane01 .p06').stop();
					$('#pane01 .p03').css('top','315px').css('display','block').css('opacity',1).animate(
						{top:'-50px'},4400,'swing');
					$('#pane01 .p04').css('top','415px').css('display','block').css('opacity',1).animate(
						{top:'-68px'},4400,'swing');
					$('#pane01 .p05').css('top','365px').css('display','block').css('opacity',1).animate(
						{top:'-43px'},4400,'swing');
					$('#pane01 .p06').css('top','265px').css('display','block').css('opacity',1).animate(
						{top:'-28px'},4400,'swing');
				},4410);
				animeTimer4 = setTimeout(function(){
					animeLoop2 = setInterval(function(){
						$('#pane01 .p07,#pane01 .p08,#pane01 .p09,#pane01 .p10').stop();
						$('#pane01 .p07').css('top','365px').css('display','block').css('opacity',1).animate(
							{top:'-58px'},4400,'swing');
						$('#pane01 .p08').css('top','265px').css('display','block').css('opacity',1).animate(
							{top:'-28px'},4400,'swing');
						$('#pane01 .p09').css('top','315px').css('display','block').css('opacity',1).animate(
							{top:'-68px'},4400,'swing');
						$('#pane01 .p10').css('top','415px').css('display','block').css('opacity',1).animate(
							{top:'-38px'},4400,'swing');
					},4410);
				},2200);


				//btn
				animeTimerBtn = setTimeout(function(){
					$('#pane01 .btn').css('top','214px').css('display','block').animate(
						{opacity:1,top:'204px'},300,'swing');
					setTimer();
				},1500);

				break;
			
			case 1:
				clearTimer();

				$('#pane02 .btn,#pane02 .p01,#pane02 .p02,#pane02 .p03,#pane02 .p04,#pane02 .p05,#pane02 .p06').css('display','none').css('opacity',0);

				//p
				animeTimer1 = setTimeout(function(){
					$('#pane02 .p01').css('opacity',0).css('display','block').animate(
						{opacity:1},400);
				},600);
				animeTimer2 = setTimeout(function(){
					$('#pane02 .p02').css('opacity',0).css('display','block').animate(
						{opacity:1},400);
				},800);
				animeTimer3 = setTimeout(function(){
					$('#pane02 .p03').css('opacity',0).css('display','block').animate(
						{opacity:1},400);
				},1000);
				animeTimer4 = setTimeout(function(){
					$('#pane02 .p04').css('opacity',0).css('display','block').animate(
						{opacity:1},400);
				},1200);


				//text
				animeTimer5 = setTimeout(function(){
					$('#pane02 .p05').css('left','418px').css('display','block').animate(
						{opacity:1,left:'348px'},400,'swing');
				},1600);

				animeTimer6 = setTimeout(function(){
					$('#pane02 .p06').css('opacity',0).css('display','block').animate(
						{opacity:1},1000,'swing');
				},2100);

				//btn
				animeTimerBtn = setTimeout(function(){
					$('#pane02 .btn').css('top','135px').css('display','block').animate(
						{opacity:1,top:'125px'},300,'swing');
					setTimer();
				},2800);

				break;
			
			case 2:
				clearTimer();

				$('#pane03 .btn,#pane03 .p01,#pane03 .p02,#pane03 .p03,#pane03 .p04,#pane03 .p05,#pane03 .p06,#pane03 .p07').css('display','none').css('opacity',0);

				//dot
				$('#pane03 .p01').css('opacity',0).css('display','block').animate({rotate: '0deg'},0).animate(
					{opacity:1,rotate: '360deg'},1500,'swing');

				//p
				animeTimer2 = setTimeout(function(){
					$('#pane03 .p02').css('opacity',0).css('display','block').animate(
						{opacity:1},400);
				},800);
				animeTimer3 = setTimeout(function(){
					$('#pane03 .p03').css('opacity',0).css('display','block').animate(
						{opacity:1},400);
				},1100);
				animeTimer4 = setTimeout(function(){
					$('#pane03 .p04').css('opacity',0).css('display','block').animate(
						{opacity:1},400);
				},1400);
				animeTimer5 = setTimeout(function(){
					$('#pane03 .p05').css('opacity',0).css('display','block').animate(
						{opacity:1},400);
				},1700);


				//text
				animeTimer6 = setTimeout(function(){
					$('#pane03 .p06').css('left','82px').css('display','block').animate(
						{opacity:1,left:'12px'},400,'swing');
				},2100);

				animeTimer7 = setTimeout(function(){
					$('#pane03 .p07').css('opacity',0).css('display','block').animate(
						{opacity:1},1000,'swing');
				},2600);

				//btn
				animeTimerBtn = setTimeout(function(){
					$('#pane03 .btn').css('top','222px').css('display','block').animate(
						{opacity:1,top:'212px'},300,'swing');
					setTimer();
				},3300);
				break;
			
			case 3:
				clearTimer();

				$('#pane04 .btn,#pane04 .p01,#pane04 .p02,#pane04 .p03,#pane04 .p04,#pane04 .p05,#pane04 .p06,#pane04 .p07').css('display','none').css('opacity',0);

				//p
				animeTimer1 = setTimeout(function(){
					$('#pane04 .p01').css('opacity',0).css('display','block').animate(
						{opacity:1},400,'swing');
				},500);
				animeTimer2 = setTimeout(function(){
					$('#pane04 .p02').css('opacity',0).css('display','block').animate(
						{opacity:1},400,'swing');
				},850);
				animeTimer3 = setTimeout(function(){
					$('#pane04 .p03').css('opacity',0).css('display','block').animate(
						{opacity:1},400,'swing');
				},950);
				animeTimer4 = setTimeout(function(){
					$('#pane04 .p04').css('opacity',0).css('display','block').animate(
						{opacity:1},400,'swing');
				},1150);
				animeTimer5 = setTimeout(function(){
					$('#pane04 .p05').css('opacity',0).css('display','block').animate(
						{opacity:1},400,'swing');
				},1300);


				//text
				animeTimer6 = setTimeout(function(){
					$('#pane04 .p06').css('left','389px').css('display','block').animate(
						{opacity:1,left:'319px'},400,'swing');
				},1700);

				animeTimer7 = setTimeout(function(){
					$('#pane04 .p07').css('opacity',0).css('display','block').animate(
						{opacity:1},1000,'swing');
				},2200);

				//btn
				animeTimerBtn = setTimeout(function(){
					$('#pane04 .btn').css('top','222px').css('display','block').animate(
						{opacity:1,top:'212px'},300,'swing');
					setTimer();
				},2900);

				break;
			
			default:
					setTimer();
				break;
		}
	}


	
	// for IE
	if(ieFlag){
		$('#pane01 .p-bg').css('display','none');
	}else{
		$('#products-slideshow .images div .base').css('display','none');
	}

	//start
	$(tabObj[nAct]).addClass('current');
	$(paneObj[nAct]).fadeIn('slow',function(){
		if(ieFlag){
			setTimer();
		}else{
			xAnimation(0);
		}
	});

}