var scrollerLeft = 0;
var scrollerWidth = 0;
var timeframeViewportWidth = 0;
var handleWidth = 0;

var handleFx = null;
var timeframeFx = null;

function initTimeframeScroller(scrollerId)
{
	$(scrollerId).addEvent('mouseup', scrollTimeframe);
	
	scrollerLeft = $('timeframe_scroller').getLeft();
	
	scrollerWidth = $('timeframe_scroller').getSize().size.x;
	
	timeframeViewportWidth = $('timeframe_container').getSize().size.x;
	
	attachScrollHandle();
	
	addSmoothScroll();
	
	setTimeframeTo(currentMinutes);
}

function scrollTimeframe(event)
{
	var event = new Event(event);
	
	var diff = event.client.x - scrollerLeft;
	
	//var viewportLeft = (timeframeViewportWidth - timeframeWidth) * diff / scrollerWidth;
	
	var viewportLeft = timeframeViewportWidth / 2 - timeframeWidth * diff / scrollerWidth;
	
	viewportLeft = normalizeTimeframeLeft(viewportLeft);
	
	timeframeFx = new Fx.Style('timeframe', 'left', {duration:1000});
	
	timeframeFx.start(viewportLeft);
	
	handleFx = new Fx.Style('timeframe_scoller_handle', 'left', {duration:1000});
	
	handleFx.start(diff - handleWidth / 2);

}

function attachScrollHandle()
{
	handleWidth = scrollerWidth * timeframeViewportWidth / timeframeWidth;
	
	var handle = new Element('div', {
		'id': 'timeframe_scoller_handle',
		'styles': {
			'width' : handleWidth
		}
	});
	$('timeframe_scroller').adopt(handle);
}

function addSmoothScroll()
{
	if($('timeframe'))
	{
		var distance = 0;
		
		var prevX = 0;
		
		var draggable = $('timeframe');
		
		draggable.makeDraggable(
		{
			modifiers:{x:'left', y: null},
			
			onDrag: function()
			{
				distance = draggable.getStyle('left').toInt() -  prevX;

				prevX = draggable.getStyle('left').toInt();
				
				var scrollerTo = - prevX * scrollerWidth / timeframeWidth;
				
				$('timeframe_scoller_handle').effect('left',{
					transition: Fx.Transitions.cubicOut,
					duration: 0
				}).set(scrollerTo);
			},
			
			onComplete: function()
			{
				var to = normalizeTimeframeLeft
				(
					draggable.getStyle('left').toInt() + distance * 10
				);
				
				var scrollerTo = - scrollerWidth * to / timeframeWidth;
				
				var dura = 500 + Math.abs(distance * 10);

				draggable.effect('left',{
					transition: Fx.Transitions.cubicOut,
					duration: dura
				}).start(to);
				
				$('timeframe_scoller_handle').effect('left',{
					transition: Fx.Transitions.cubicOut,
					duration: dura
				}).start(scrollerTo);
				
				distance = 0;
			}
		});
	}
}

function normalizeTimeframeLeft(left)
{
	var pad = 300;
	
	return Math.max(
		Math.min(
			pad,
			left
		),
		timeframeViewportWidth - timeframeWidth - pad
	);
}
function setTimeframeTo(minutes)
{
	var timeframeLeft = (- timeframeWidth) * minutes / 1440 + timeframeViewportWidth / 2;
	var handleLeft = scrollerWidth * minutes / 1440 - handleWidth / 2;
	
	timeframeFx = new Fx.Style('timeframe', 'left', {duration: 1500}).start(timeframeLeft);
	handleFx = new Fx.Style('timeframe_scoller_handle', 'left', {duration:1500}).start(handleLeft);
}