//globals
var gDragging = "";
var gDragOffset = 0;

var slider1value=0;
var slider2value=180;

var slider3value=0;
var slider4value=180;

var myf;

function gg(id) {
	return document.getElementById(id);
}
//
//get the ratio between the slider length and the slider's value maximum
function calibrate(target) {
	var rail = target.parentNode;
	var sliderLength = rail.clientWidth - target.clientWidth ;
	var max = 180;
	return(1.25);
	return sliderLength / max;
}

//get the left offset of the rail, needed for conversion of mouse coordinates
function getHOffset(elem) {
	var node = elem;
	var offset = node.offsetLeft;
		while(node.offsetParent) {
			node = node.offsetParent;
			if (node.nodeName.toLowerCase() != "html") {	
				offset += node.offsetLeft;
			}
		}
	return offset;
}

function getHScrollOffset() {
	var scrollOffset
	if (window.pageLeft !== undefined) {
			scrollOffset = window.pageLeft;
	}
	else if (document.documentElement && document.documentElement.scrollLeft !== undefined) {
		scrollOffset = document.documentElement.scrollLeft;
	} 
	else if (document.body.scrollLeft !== undefined) {
		scrollOffset = document.body.scrollLeft;
	}
	return scrollOffset;
}

function handleRailMouseDown(event) {
	event = event || window.event;
	var target = event.target || event.srcElement;
	var thumb = gg(target.id.replace(/Rail/, 'Thumb'));
	var newPos = event.clientX - getHOffset(target)+ getHScrollOffset() - (thumb.clientWidth / 2);
	changeValue(thumb, mapPositionToValue(thumb, newPos));
	if (!document.activeElement || !document.activeElement !== thumb) {
		thumb.focus();
	}
	return false;
}

function handleThumbMouseDown(event) {
	event = event || window.event;
	var target = event.target || event.srcElement;
	gDragging = target.id;
	gDragOffset = event.clientX - getHOffset(target.parentNode) - target.offsetLeft + getHScrollOffset();
	document.onmousemove = handleDrag;
	document.onmouseup = stopDrag;
	if (!document.activeElement || document.activeElement !== target) {
		target.focus();
	}
	cancelEvent(event);
	return false;
}

function handleDrag(event) {
	event = event || window.event;
	if (gDragging === "") {
		return;
	}
	else {
		var target = gg(gDragging);
		var newPos = event.clientX - getHOffset(target.parentNode) + getHScrollOffset() - gDragOffset;
		changeValue(target, mapPositionToValue(target, newPos));
	}
}

this.stopDrag = function(event) {
	gDragging = "";
	gDragOffset = 0;
	
	document.onmousemove = null;
	document.onmouseup = null;

	datchanged=1;
	myf(0,0);	  
}

function mapPositionToValue(target, pos) {
	return Math.round(pos / calibrate(target));
}
function update_slider_newvaluejq(id,newValue,newPos)
{	
  $("#"+id).css("left",newPos);

  //$("#"+id).attr("aria-valuenow",newValue);
  //$("#"+id).attr("aria-valuetext",newValue+"%");
  var nid=id.replace(/Thumb/, 'Value');
  $("#"+nid).html(newValue + " €");
}

function changeValue(target, value) {
	if(target.getAttribute('id')=="sliderThumb1" || target.getAttribute('id')=="sliderThumb2") {
		if(target.getAttribute('id')=="sliderThumb1") {
			if(value>slider2value-10) {
				value=slider2value-10;
			}
			if(value<0) value=0;
			slider1value=value;
			slider3value=value;
		} else {
			if(value<slider1value+10) {
				value=slider1value+10;
			}
			if(value>180) value=180;
			slider2value=value;
			slider4value=value;
		}
	}
	if(target.getAttribute('id')=="sliderThumb3" || target.getAttribute('id')=="sliderThumb4") {
		if(target.getAttribute('id')=="sliderThumb3") {
			if(value>slider4value-10) {
				value=slider4value-10;
			}
			if(value<0) value=0;
			slider3value=value;
			slider1value=value;
		} else {
			if(value<slider3value+10) {
				value=slider3value+10;
			}
			if(value>180) value=180;
			slider2value=value;
			slider4value=value;
		}
	}
	var ratio = calibrate(target);
	var min = 0;
	var max = 180;
	var newValue = Math.min(Math.max(value, min), max);
	var newPos = Math.round(newValue * ratio) ;		
	//target.style.left = newPos + "px";

  if(target.getAttribute('id')=="sliderThumb1" || target.getAttribute('id')=="sliderThumb3") {
  	update_slider_newvaluejq("sliderThumb1",newValue,newPos);
  	update_slider_newvaluejq("sliderThumb3",newValue,newPos);
  } else {
  	update_slider_newvaluejq("sliderThumb2",newValue,newPos);
  	update_slider_newvaluejq("sliderThumb4",newValue,newPos);
  }
  update_preisanzeige();  
}

function updateValueIndicator(id, value) {
	var elem = gg(id);
	elem.replaceChild(document.createTextNode(value), elem.firstChild);
}

function setHandlers(slider,startvalue) {
  if(!slider) return;
  var v=jQuery(slider);
	slider.parentNode.onmousedown 	= handleRailMouseDown;
	slider.onmousedown 	= handleThumbMouseDown;
	
	//slider.onmouseup 	= handleThumbMouseUp;
	
	var xr='#'+v.attr('id');
	$(xr).mouseup(function () {    
  	//datchanged=1;
  	//myf(0);	  
	});
	
	slider.parentNode.onfocus = function(event) { //temp IE fix
		event = event || window.event;
		var target = event.target || event.srcElement;
		var thumb = gg(target.id.replace(/Rail/, 'Thumb'));
		if (thumb)
			thumb.focus();
	}
	changeValue(slider,startvalue);
}

function cancelEvent(event) {
	if (typeof event.stopPropagation == "function") {
		event.stopPropagation();
	}
	else if (typeof event.cancelBubble != "undefined") {
		event.cancelBubble = true;	
	}
	if (event.preventDefault) {
		event.preventDefault();
	}
	return false;
}

function initsliders2(val1,val2) {
	setHandlers(gg('sliderThumb1'),val1);
	setHandlers(gg('sliderThumb2'),val2);

	setHandlers(gg('sliderThumb3'),val1);
	setHandlers(gg('sliderThumb4'),val2);
}

function initsliders(fp) {
  myf=fp;
	initsliders2(0,180);
}