var dbgCrossTheStreams = false;
var dbgSnap = true;

var sliderOffset;
//var sliderOffset = 454;

var ballWidth  = 7;
var minLeft   = 0;
var maxRight  = 300;

var currLeft = 0;
var currRight = 0;

var initialRangeDrag = null;
var	initialLeft = null;
var	initialRight = null;

function dragStart(e, side) {
  if(document.captureEvents) {
    document.captureEvents(Event.MOUSEMOVE);
    document.captureEvents(Event.MOUSEUP);
    document.captureEvents(Event.MOUSEDOWN);
    
  }
  if(!e) e = window.event;
  
	document.onmousedown = function(e) { setInitialRange(e) };
    document.onmousemove = function(e) { drag(e, side); };
	document.onmouseup = function(e) { endDrag(e, side); };

/*
	if(typeof side == 'undefined')
		document.body.style.cursor='move';
	else if(side=='L')
		document.body.style.cursor='e-resize';
	else
		document.body.style.cursor='w-resize';
*/
}

function setInitialRange(e)
{
  if(!e) e = window.event;

	// ***************** saf versus ie & fire *******************
	var relativePos = e.clientX - document.getElementById('slidergrayimg').offsetLeft - sliderOffset;

	if(relativePos > currLeft && relativePos < currRight)
	{
		initialRangeDrag = relativePos;
		initialLeft = currLeft;
		initialRight = currRight;
	}
}

function drag(e, side)
{
	if(!e) e = window.event;
	
	// position sliders at both ends
	var offsetL = 5;
	var offsetR = 6;
	
	var sideOffset = ((side == 'R')? offsetR: offsetL);
	
	// slider draggable point
	var relOffset =  (typeof side == 'undefined'? 0 : ((side == 'R')? 8 : 1));
	
	var relativePos = e.clientX - sliderOffset + 6 - relOffset;
	
	if(typeof side != 'undefined' && dbgSnap)
		relativePos = Math.round((relativePos+sideOffset) / 50) * 50 - sideOffset;
	
	if (relativePos < minLeft - sideOffset) {
		relativePos = minLeft - sideOffset;
	}
	if (relativePos > maxRight - sideOffset) {
		relativePos = maxRight - sideOffset;
	}
	
	if(typeof side != 'undefined')
	{
		if(!dbgCrossTheStreams)
		{
			if(side=='L')
			{
				if(relativePos > currRight - 49)
					relativePos = currRight - 49;
			}
			else if(side=='R')
			{
				if(relativePos < currLeft + 49)
					relativePos = currLeft + 49;
			}
		}
		
		moveSlider(relativePos, side);
	}
	else
	{
		if(initialRangeDrag != null)
		{	
			var newL = initialLeft - (initialRangeDrag - relativePos);
			var newR = initialRight - (initialRangeDrag - relativePos);
			
			newL = Math.round((newL+offsetL) / 50) * 50 - offsetL;
			newR = Math.round((newR+offsetR) / 50) * 50 - offsetR;
	
	
			if (newL < minLeft - sideOffset) {
				// keep the same gap
				newR = (newR - newL) + minLeft - sideOffset;
				newL = minLeft - sideOffset;
			}
			if (newR > maxRight - offsetR) {
				newL = maxRight - offsetR - (newR - newL);
				newR = maxRight - offsetR;
			}
			
			// onmousedown on background / rail / bar
			moveSlider(newL, 'L');
			moveSlider(newR, 'R');
		}
	}
}

function endDrag(e, side) {

//	document.body.style.cursor='default';

	if(!e) e = window.event;
	if(document.captureEvents) {
		document.releaseEvents(Event.MOUSEMOVE);
		document.releaseEvents(Event.MOUSEUP);
		document.releaseEvents(Event.MOUSEDOWN);
	}

	document.onmousemove = null;
	document.onmouseup = null;
	document.onmousedown = null;

	initialRangeDrag = null;
	initialLeft = null;
	initialRight = null;

	updateTimePanel();
}

function drawInterval()
{
	if(currRight > currLeft)	// as it always should be
	{
    // ***************** saf versus ie & fire - offsetLeft vs. y *******************
		document.getElementById('slidercolorimg').style.left = document.getElementById('sliderballL').offsetLeft + 'px';
		document.getElementById('slidercolorimg').width = currRight - currLeft + 8;
    // ***************** saf versus ie & fire *******************
		document.getElementById('slidercolorimg').style.top = document.getElementById('sliderballR').offsetTop - 11 + 'px';
	}
}

function moveSlider (relativePos, side)
{
	var centerPoint = (maxRight - minLeft) / 2;
	
	//the ball position is relative
	var ballPos = (-(maxRight - minLeft)) + (relativePos-(ballWidth/2));

	document.getElementById('sliderball'+side).style.left = ballPos+'px';
	
	if(side=='L')
		currLeft = relativePos;
	else
		currRight = relativePos;
	
	// saf needs some time to update the sliderball position (i.e. style.left to .y)
	if((navigator.userAgent.search(/Safari/) >= 0))
		setTimeout('drawInterval()', 0);
	else
		drawInterval();
}