var slidable = null;
var timer = null;
var startSlidable = 0;
var startTime = 0;
var timerlen = 5;
var slideAniLen = 2000;
var d = 0;
var stopFlag = false;

window.onload = function () {
	var container = document.getElementById('slidable_container');
	container.style.overflow = 'hidden';
	slidable = document.getElementById('slidable');
	
	var left_ho = document.getElementById('left_ho');
	var right_ho = document.getElementById('right_ho');

	slide(-1);
	
	left_ho.onmouseover = function () {
		stopFlag = false;
		slide(1);
	}
	right_ho.onmouseover = function () {
		stopFlag = false;
		slide(-1);
	}
	right_ho.onmouseout = stopSlide;
	left_ho.onmouseout = stopSlide;
	
}



function slide(direction)
{
	if (timer)
	{
		clearInterval(timer);
	}
		
	if (slidable && !stopFlag)
	{
		if ((!(slidable.offsetLeft <= (548-slidable.clientWidth)) && direction < 0) || (!(slidable.offsetLeft >=0) && direction > 0))
		{
			startSlidable = slidable.offsetLeft;
			startTime = (new Date()).getTime();
			timer = setInterval("animatedSlide("+direction+")", timerlen);
		}
	}
}

function animatedSlide(direction)
{
	var elapsed = (new Date()).getTime() - startTime;
	if (elapsed > slideAniLen)
	{
		clearInterval(timer);
		var diff = 182 - d*direction;
		slidable.style.left = parseInt(slidable.style.left) + diff*direction + 'px';
		slide(direction);
	}
	else
	{
	    d =Math.round((elapsed / slideAniLen) * (182*direction));
		slidable.style.left = startSlidable + d + 'px';
	}
}

function stopSlide()
{
	stopFlag = true;
}