// JavaScript Document
var speed = 30;
$("#ImgMarquee").children().wrap('<div id="tmpDiv"></div>');
$("#tmpDiv").append('<ul id="TmpUl">');
$("#TmpUl").html($("#TmpUl").prev().html());
$("li img").each(function(i){
	$(this).attr("id","OKYOGalleriaSmallImage");
	$(this).fadeTo(1,0.5)
	$("#tmpDiv").width($("#tmpDiv").width()+$(this).width() + 5);
})


$("img[@id=OKYOGalleriaSmallImage]").click(function(){
	var imgUrl = $(this).attr("src");
	var imgExp = $(this).attr("alt");
	$("#BigImg").fadeOut(300,function(){
		$("#BigImg").attr("src",imgUrl);
		$("#BigImg").fadeIn(1000);	
	});
	$("#divImgExplain span").fadeOut(300,function(){
		$("#divImgExplain span").html(imgExp);
		$("#divImgExplain span").fadeIn(1300);	
	});
})

$("img[@id=OKYOGalleriaSmallImage]").mouseover(function(){
	$(this).fadeTo(300,1);
});

$("img[@id=OKYOGalleriaSmallImage]").mouseout(function(){
	$(this).fadeTo(300,0.5);
});

function ScrollLeft(){
	if( $("#TmpUl").width() - $("#ImgMarquee").get(0).scrollLeft <= 0){
		$("#ImgMarquee").get(0).scrollLeft -= $("#TmpUl").width();
	}else{
		$("#ImgMarquee").get(0).scrollLeft ++;
	}
}

function ScrollRight(){
		if($("#ImgMarquee").get(0).scrollLeft <= 0){
			$("#ImgMarquee").get(0).scrollLeft += $("#TmpUl").width()
		}else{
			$("#ImgMarquee").get(0).scrollLeft --;
		}
}

var MyMar=setInterval(ScrollLeft,speed);
var NowMar = "left";
var StopMar = "";



$("#ScrollBtnLeft").mouseover(function(){
	$(this).addClass("ScrollBtnLeft_Over");
	speed = 3;
	clearInterval(MyMar);
	MyMar=setInterval(ScrollLeft,speed);
	NowMar = "left";
});

$("#ScrollBtnLeft").mouseout(function(){
	$(this).removeClass("ScrollBtnLeft_Over");
	speed = 30;
	clearInterval(MyMar);
	MyMar=setInterval(ScrollLeft,speed);
	NowMar = "left";
});

$("#ScrollBtnRight").mouseover(function(){
	$(this).addClass("ScrollBtnRight_Over");
	speed = 3;
	clearInterval(MyMar);
	MyMar=setInterval(ScrollRight,speed);
	NowMar = "right";
});

$("#ScrollBtnRight").mouseout(function(){
	$(this).removeClass("ScrollBtnRight_Over");
	speed = 30;
	clearInterval(MyMar);
	MyMar=setInterval(ScrollRight,speed);
	NowMar = "right";
});

$("#ImgMarquee").mouseover(function(){
	clearInterval(MyMar);
});

$("#ImgMarquee").mouseout(function(){
	if(NowMar == "left"){
		MyMar=setInterval(ScrollLeft,speed);
	}else{
		MyMar=setInterval(ScrollRight,speed);
	}
});