var boxWidth = 0;
var boxWidthVal = 0;
var slideValFix = 0;
var boxWidthSum = 0;

var i = 0;
var j = 0;

function changeBoxUp(slideValFix){
	
	
	
	if(j < slideValFix){
		document.getElementById("listctsbox").style.left = -j+"px";
		j=j+5;
		
		timerID=setTimeout('changeBoxUp(slideValFix)',1);
	}else{
		document.getElementById("listctsbox").style.left = -j+"px";
		
	}
	
}

function changeBoxDown(){
	
	if(j > 0){
		
		document.getElementById("listctsbox").style.left = -j+"px";
		j=j-5;
		timerID=setTimeout('changeBoxDown()',1);
	}else{
		document.getElementById("listctsbox").style.left = -j+"px";
		timerID=setTimeout('changeBoxDown()',1);
	}
	
}

function stopBox(){
	if(timerID){
		clearTimeout(timerID);
	}
}


window.onload = function(){
	
	
	var boxSlide = productSlide();
	
	var wrapWidth = Element.getWidth("listbox");
	wrapWidthVal = parseInt(wrapWidth);
	
	slideValFix = parseInt(boxSlide)-wrapWidthVal;
	
	
	document.getElementById('button01').onmouseover = function(){
		changeBoxDown();
	}
	document.getElementById('button01').onmouseout = function(){
		if(slideValFix >= 0){
			stopBox();
		}
	}
	document.getElementById('button02').onmouseover = function(){
		
		changeBoxUp(slideValFix);
	}
	document.getElementById('button02').onmouseout = function(){
		if(slideValFix >= 0){
			stopBox();
		}
	}
}

// preparation
function productSlide(){
	
	
	var classname='thumb';
	var imageSum = document.getElementsByClassName(classname).length;
	imageSumVal = new String(imageSum);
	
	
	boxWidth = new Array();
	boxWidthVal = new Array();
	
	imageSumVal--;
	for(i=0; i<=imageSumVal; i++){
		
		boxWidth[i] = document.getElementsByClassName(classname)[i].width;
		boxWidthVal[i] = parseInt(boxWidth[i]);
		
	}
	
	var boxWidthSum=0;
	for(i=0; i<=imageSumVal; i++){
		boxWidthSum += boxWidthVal[i];
	}
	
	return(boxWidthSum);
}