var distance = 0;
var from = 0;
//var indice = Array("collé", "un peu loin", "à moitié chemin", "au 3/4", "ben loin")
var indice = Array(5, 15, 50, 100, 250, 500, 1000000);
var step = indice.length-1;
var display;

function beginDrag(elementToDrag, event, d) {
display = d;
distance = (display == "upper" || display == "ov") ? 89 : 137;
// Compute the distance between the upper-left corner of the element
// and the mouse click. The moveHandler function below needs these values.
var deltaX = event.clientX - parseInt(elementToDrag.style.left);

// Register the event handlers that will respond to the mousemove events
// and the mouseup event that follow this mousedown event.  

if (document.addEventListener) {  // DOM Level 2 Event Model
	// Register capturing event handlers
	//alert("test dom");
	document.addEventListener("mousemove", moveHandler, true);
	document.addEventListener("mouseup", upHandler, true);
}
else if (document.attachEvent) {  // IE 5+ Event Model
	// In the IE Event model, we can't capture events, so these handlers
	// are triggered when only if the event bubbles up to them.
	// This assumes that there aren't any intervening elements that
	// handle the events and stop them from bubbling.
	//alert("test ie");
	document.attachEvent("onmousemove", moveHandler);
	document.attachEvent("onmouseup", upHandler);
}

// We've handled this event.  Don't let anybody else see it.  
if (event.stopPropagation) event.stopPropagation();   // DOM Level 2
else event.cancelBubble = true;                       // IE

// Now prevent any default action.
if (event.preventDefault) event.preventDefault();     // DOM Level 2
else event.returnValue = false;                       // IE

/**
* This is the handler that captures mousemove events when an element
* is being dragged.  It is responsible for moving the element.
**/
function moveHandler(e) {
	if (!e) e = window.event;  // IE event model
	v = (document.getElementById(display + "cur").style.left) ? parseInt(document.getElementById(display + "cur").style.left) : 0;
	pos = Math.round(v * step / distance) * distance/step;
	document.getElementById(display + "udist").value = indice[Math.round(v * step / distance)];
	var displayVal;
	if(indice[Math.round(v * step / distance)] == 1000000){
		displayVal = defaultSliderDisplayVal;
	}
	else{
		displayVal = indice[Math.round(v * step / distance)] + ' KM'
	}
	document.getElementById(display + "sliderdisplaybox").innerHTML = displayVal;
	
	// Move the element to the current mouse position, adjusted as
	// necessary by the offset of the initial mouse click.
	pos = e.clientX - deltaX;
	pos = (pos > distance) ? distance : pos;
	pos = (pos < 0) ? 0 : pos;
	elementToDrag.style.left = pos + "px";


	// And don't let anyone else see this event.
	if (e.stopPropagation) e.stopPropagation();       // DOM Level 2
	else e.cancelBubble = true;                       // IE
	
	// Now prevent any default action.
	if (e.preventDefault) e.preventDefault();     // DOM Level 2
	else e.returnValue = false;                       // IE
}

/**
* This is the handler that captures the final mouseup event that
* occurs at the end of a drag.
**/
function upHandler(e) {
	if (!e) e = window.event;  // IE event model
	v = (document.getElementById(display + "cur").style.left) ? parseInt(document.getElementById(display + "cur").style.left) : 0;
	pos = Math.round(v * step / distance) * distance/step;
	
	document.getElementById(display + "udist").value = indice[Math.round(v * step / distance)];
	var displayVal;
	if(indice[Math.round(v * step / distance)] == 1000000){
		displayVal = defaultSliderDisplayVal;
	}
	else{
		displayVal = indice[Math.round(v * step / distance)] + ' KM'
	}
	document.getElementById(display + "sliderdisplaybox").innerHTML = displayVal;

	pos = (pos > distance) ? distance : pos;
	pos = (pos < 0) ? 0 : pos;
	elementToDrag.style.left = pos + "px";
	
	// Unregister the capturing event handlers.
	if (document.removeEventListener) {    // DOM Event Model
		document.removeEventListener("mouseup", upHandler, true);
		document.removeEventListener("mousemove", moveHandler, true);
	}
	else if (document.detachEvent) {       // IE 5+ Event Model
		document.detachEvent("onmouseup", upHandler);
		document.detachEvent("onmousemove", moveHandler);
	}
	
	
	// And don't let the event propagate any further.
	if (e.stopPropagation) e.stopPropagation();       // DOM Level 2
	else e.cancelBubble = true;                       // IE
	}
}

function setCursor(elementToDrag, udist){
	var curpos = 0;
	var xpos = (elementToDrag.indexOf("upper")!=-1 || elementToDrag.indexOf("ov")!=-1) ? 89 : 137;
	if(udist == 1000000){
		displayVal = defaultSliderDisplayVal;
		curpos = xpos;
	}
	else{
		if(udist == 500){
			curpos = Math.round(xpos/step) * 5;
		}
		else if(udist == 250){
			curpos = Math.round(xpos/step) * 4;
		}
		else if(udist == 100){
			curpos = Math.round(xpos/step) * 3;
		}
		else if(udist == 50){
			curpos = Math.round(xpos/step) * 2;
		}
		else if(udist == 15){
			curpos = Math.round(xpos/step);
		}
		else if(udist == 0){
			udist = 5;
		}
		displayVal = udist + ' KM'
	}
	if(elementToDrag.indexOf("upper")!=-1){
		document.getElementById("uppersliderdisplaybox").innerHTML = displayVal;
	}
	else if(elementToDrag.indexOf("ov")!=-1){
		document.getElementById("ovsliderdisplaybox").innerHTML = displayVal;
	}
	else{
		document.getElementById("lowersliderdisplaybox").innerHTML = displayVal;
	}
	document.getElementById(elementToDrag).style.left = curpos + "px";
}