var coords = { 1: 0, 10:600, 24:1200, 16:1800, 6:2400, 36:3000, 30:3600 };
var cogImages = new Array();
var animmax = 36;
var timer = 150;
var animstep = 1;
var isanim = 0;

function start() {
	for (var i = 1; i <= animmax; i++){
		var pImg = new Image(370,530);
		var pn = (i < 10)? '0'+i : ''+i;
		pImg.src = "gfx/cogwheel_all_"+pn+".png";
		cogImages.push(pImg);
	}
}



function startanim(tostep){
	if ( isanim )
		return;

	var dDest = ( (coords[tostep] - coords[animstep]) / Math.abs(tostep - animstep) );
	if ( isNaN(dDest) )
		return;

	anim(tostep*1, dDest);
}

function anim(tostep, dDest){
	//alert(tostep);
	isanim = 1;

	if ( tostep > animstep )
		animstep++;
	else
		animstep--;

	var cc = document.getElementById("conveyorcontent");
	cc.style.visibility = 'hidden';
	if (document.defaultView){
		var ccl = Math.round( parseInt( document.defaultView.getComputedStyle(cc, null).getPropertyValue("left") ) );
		cc.style.left = ccl-dDest + "px";
	} else {
		var ccl = cc.style.pixelLeft;
		cc.style.left = ccl-dDest;
	}
	cc.style.visibility = 'visible';

	document.getElementById("ca").src = cogImages[animstep-1].src;

	if ( animstep == tostep ){
		cc.style.visibility = 'hidden';
		cc.style.left = (-1*coords[tostep]) + "px";
		cc.style.visibility = 'visible';
		isanim = 0;
	} else {
		setTimeout("anim("+tostep+","+dDest+")", timer);
	}
}



window.onload=function() {
	if(document.getElementById && document.createTextNode){
		start();
	}
}