// GILFY STORE top.js for jQuery



$(function(){
		   
	//TOP PAGE 	   
		   
	var swapTime=5000;
	var scrlSpd=400;
	////INITIALIZE////
	var p=0;
	var n,f,movImg; 
	var imgW=$("#visual_box li img").attr("width");
	var imgH=$("#visual_box li img").attr("height");
	var imgNum=$("#visual_box li").length;
	var imgBoxW=imgW*(imgNum+1);
	var btnW=Number($("#navibtn_area li img").attr("width"));
	var btnMgn=Number($("#navibtn_area li").css("margin-right").replace("px",""));
	var btnBoxW=(btnW*(imgNum))+(btnMgn*(imgNum));
	var btnFlg=false;
	
	////BG VISUAL SETTING////
	$("#topbnr_body,.bgvisual").css({"width":imgW*3+"px","height":imgH+"px"});
	$("#visual_area").before("<div class='bgvisual_area' id='bg2'></div>").after("<div class='bgvisual_area' id='bg1'></div>");
	$(".bgvisual_area").append("<div class='imgmask'><img src='/spc/images/common/box.gif' width='"+imgW+"' height='"+imgH+"'/></div>");
	$("#visual_box").clone().appendTo(".bgvisual_area").addClass("bgvisual_box").attr("id","").fadeTo(0,0.5);
	$("#visual_box ,.bgvisual_box").css({"width":imgBoxW+"px","height":imgH+"px"});
	
	$("#bg1 li").eq(0).remove("li").appendTo("#bg1 .bgvisual_box");
	$("#bg2 li").eq(imgNum-1).remove("li").prependTo("#bg2 .bgvisual_box");
	$("#visual_box li").eq(0).clone().appendTo("#visual_box");
	$("#bg1 .bgvisual_box li").eq(0).clone().appendTo("#bg1 .bgvisual_box");
	$("#bg2 .bgvisual_box li").eq(0).clone().appendTo("#bg2 .bgvisual_box");



	////VISUAL ACTION////
	function imgMove(){
		if(btnFlg==false){
			btnFlg=true;
			movImg=imgW;
			
			//MAIN VISUAL
			if(p<imgNum-1){
				p=p+1;
				btnMove(p);
				if(!jQuery.support.checkOn){//webkit css3
					$("#visual_box").css({"-webkit-transition":"0.7s ease","left":"-="+movImg+"px"
					}).one("webkitTransitionEnd", function(){
						btnFlg=false;
					});
					$(".bgvisual_box").css({"-webkit-transition":"0.7s ease","left":"-="+movImg+"px"});	
				}else{//oher
					$("#visual_box").animate({"left":"-="+movImg+"px"},scrlSpd,function(){
						btnFlg=false;
					});
					$(".bgvisual_box").animate({"left":"-="+movImg+"px"},scrlSpd);
				};
			}else if(p>=imgNum-1){
				p=0;
				btnMove(p);
				if(!jQuery.support.checkOn){
					$("#visual_box").css({"-webkit-transition":"0.7s ease","left":"-="+movImg+"px"
					}).one("webkitTransitionEnd", function(){
						$(this).css({"-webkit-transition":"0","left":"0"});
						btnFlg=false;
					});
					$(".bgvisual_box").css({"-webkit-transition":"0.7s ease","left":"-="+movImg+"px"
					}).one("webkitTransitionEnd", function(){
						$(this).css({"-webkit-transition":"0","left":"0"});
					});
					
				}else{
					$("#visual_box,.bgvisual_box").animate({"left":"-="+movImg+"px"},scrlSpd,function(){
						$(this).css("left","0");
						btnFlg=false;
					});
				};
			};
		};
	};

	

	function timeOut(){
		setInterval(function(){
			if(btnFlg==false){
				imgMove();
			};
		},swapTime);
	};

	timeOut();
	

	$("#visual_area").hover(function(){
		btnFlg=true;
	},function(){								  
		btnFlg=false;
	});
	
	
	
	
	////BUTON AREA SETTING////
	for(var i=0;i<imgNum-1;i++){	
		$("#navibtn_area li").eq(0).clone().appendTo("#navibtn_area");
	};
	if($.browser.msie && $.browser.version<7){
		$("#navibtn_area li img").attr("src","/spc/images/common/btn_navi.gif");
	};
	$("#navibtn_body").css({"width":btnBoxW+"px","padding-left":btnMgn+"px"});
	
	////BUTON ACTION////
	$("#navibtn_area li").hover(function(){	
		$("img",this).css({"top":"-18px"});
		btnFlg=true;
		om=true;
	},function(){
		$("img",this).not($("#navibtn_area li img").eq(p)).css({"top":"0"});
		btnFlg=false;
		om=false;
	}).click(function(){
		btnFlg=false;
		n=$("#navibtn_area li").index(this);
		btnAction(n);
	});	
	
	function btnAction(n){
		if(btnFlg==false){
			btnFlg=true;
			f=n-p;
			movImg=imgW*f;
			p=n;
			btnMove(p);
			$("#visual_box,.bgvisual_box").css({"-webkit-transition":"0"}).animate({"left":"-="+movImg+"px"},scrlSpd,function(){	
				if(om==false){
				btnFlg=false;
				};
			});	
		};
	};
	
	function btnMove(p){
		$("#navibtn_area li img").css({"top":"0px"});
		$("#navibtn_area li img").eq(p).css({"top":"-18px"});
	};
	btnMove(p);




	//BRAND MENU
	$("#brand_menu div").fadeTo(0,0.8);
	$("#brand_menu div").hover(function(){
		$(this).fadeTo(200,1);
	},function(){
		$(this).fadeTo(200,0.8);
	
	});
	
	
	

	//INFORMATION BANNER
	var d=1;
	var infoH=92;
	if(jQuery.browser.msie && parseInt(jQuery.browser.version) <= 6){//ie6
		infoH=93;
	}
	
	var infoNum=$("#info_box li").length;
	$("#infobtn_area div").fadeTo(0,0.5);
	$("#infobtn_area #up").fadeTo(0,0);
	$("#infobtn_area div").hover(function(){
		if($(this).attr("id")=="down"&&d>=1&&d<=infoNum-3){
			$(this).fadeTo(0,1).css("cursor","pointer");
		}else if($(this).attr("id")=="up"&&d>1&&d<=infoNum-2){
			$(this).fadeTo(0,1).css("cursor","pointer");
		};
		
	},function(){
		if(d>1&&d<=infoNum-3){
			$(this).fadeTo(0,0.5);
		}else if(d==1&&$(this).attr("id")=="down"){
			$(this).fadeTo(0,0.5);
		}else if(d==infoNum-2&&$(this).attr("id")=="up"){
			$(this).fadeTo(0,0.5);
		};
	
	}).click(function(){
		if($(this).attr("id")=="down"&&d<=infoNum-3){
			$("#info_box").animate({"top":"-="+infoH+"px"},500);
			d=d+1;	
			if(d==2){
				$("#infobtn_area #up").fadeTo(0,0.5).css("cursor","pointer");
			}else if(d==infoNum-2){
				$(this).fadeTo(0,0).css("cursor","default");
			}else{
				$(this).fadeTo(0,1);
			}
		}
		
		if($(this).attr("id")=="up"&&d>1){
			$("#info_box").animate({"top":"+="+infoH+"px"},500);
			d=d-1;
			if(d==infoNum-3){
				$("#infobtn_area #down").fadeTo(0,0.5).css("cursor","pointer");
			}else if(d==1){
				$(this).fadeTo(0,0).css("cursor","default");
			}else{
				$(this).fadeTo(0,1);
			}
		}
			  
										  
	});

	$("#topbnr_wide,#navibtn_area li").fadeIn(1000);

});