var defaultBoxLeft = -670;
var boxWidth       = 250;

function initBox(){
	document.getElementById("jsMoveBox").style.left = defaultBoxLeft + "px";
	for(var i = 0; i <9; i++){
		document.getElementById("jsImg" + i).style.bottom = "0px";
	}
}


function initShadow(){
	var html = '';
	
	for(var i = 0; i < 9; i++){
		html += '<img src="./index_img/index_header_shadow.gif" id="jsImgShadow' + i + '" style="left:' + (boxWidth * i) + 'px;" width="240" height="25" alt="" />';
	}

	document.getElementById("jsShadow").innerHTML = html;
}



function selectImg(num){
	for(var i = 0; i <9; i++){
		var tgt1 = document.getElementById("jsImg" + i);
		tgt1.style.opacity = "0.6";
		tgt1.style.MozOpacity = "0.6";
		tgt1.style.filter = "alpha(opacity=60)";
		var tgt11 = document.getElementById("jsImgShadow" + i);
		tgt11.style.opacity = "0.6";
		tgt11.style.MozOpacity = "0.6";
		tgt11.style.filter = "alpha(opacity=60)";
	}
	
	var tgt2 = document.getElementById("jsImg" + num);
	tgt2.style.opacity = "1";
	tgt2.style.MozOpacity = "1";
	tgt2.style.filter = "alpha(opacity=100)";
	
	var tgt22 = document.getElementById("jsImgShadow" + num);
	tgt22.style.opacity = "1";
	tgt22.style.MozOpacity = "1";
	tgt22.style.filter = "alpha(opacity=100)";
}

function resetImg(){
	for(var i = 0; i <9; i++){
		var tgt1 = document.getElementById("jsImg" + i);
		tgt1.style.opacity = "1";
		tgt1.style.MozOpacity = "1";
		tgt1.style.filter = "alpha(opacity=100)";
		var tgt11 = document.getElementById("jsImgShadow" + i);
		tgt11.style.opacity = "1";
		tgt11.style.MozOpacity = "1";
		tgt11.style.filter = "alpha(opacity=100)";
	}
}

var startX = 0;
var goalX = 0;
var timer = 0;


var currentBox = 4;


function moveBox(v){
	currentBox += v;
	
	goalX  = (4 * boxWidth + defaultBoxLeft) - (currentBox * boxWidth);
	
	if(timer != 0){
		clearInterval(timer);
	}
	timer = setInterval(stepBox, 50);
	
	if(goalX >= 80){
		//左の矢印を消す
		document.getElementById("jsArrowL").style.display = "none";
		document.getElementById("spacerL").style.display = "block";
	}else{
		document.getElementById("jsArrowL").style.display = "block";
		document.getElementById("spacerL").style.display = "none";
		
	}
	if(goalX <= -1420){
		//右の矢印を消す
		document.getElementById("jsArrowR").style.display = "none";
		document.getElementById("spacerR").style.display = "block";
	}else{
		document.getElementById("jsArrowR").style.display = "block";
		document.getElementById("spacerR").style.display = "none";
	}
}

function stepBox(){
	var s = Number(document.getElementById("jsMoveBox").style.left.split("px")[0]);
	var d = (goalX - s)/5;
	document.getElementById("jsMoveBox").style.left = (s + d) + "px";

	if(Math.abs(goalX - s) <= 1){
		clearInterval(timer);
		timer = 0;
		document.getElementById("jsMoveBox").style.left = goalX + "px";
	}
	upBox();
}




function upBox(){
	for(var i = 0; i <9; i++){
		var s = Number(document.getElementById("jsMoveBox").style.left.split("px")[0]);
		var p = s + (boxWidth * i) + ((boxWidth-10) /2);
		
		if(p <= 0 || p >= 900){
			document.getElementById("jsImg" + i).style.bottom = "0px";
			document.getElementById("jsImgShadow" + i).style.top = "0px";
		}
		else if(p <= 450){
			document.getElementById("jsImg" + i).style.bottom = (p / 450 * 30) + "px";
			document.getElementById("jsImgShadow" + i).style.top = (p / 450 * 20) + "px";
		}
		else{
			document.getElementById("jsImg" + i).style.bottom = ((900-p) / 450 * 30) + "px";
			document.getElementById("jsImgShadow" + i).style.top = ((900-p) / 450 * 20) + "px";
		}
	}
}