// Global vars. You don't need to make changes here to change your sliders.
// Changing the attributes in your (X)HTML file is enough.
var Slidermouseover                = false;
var SliderDefaultSliderLength      = 100;
var SliderDefaultOrientation = 'horizontal';
var SliderClassName          = 'slider';
var SliderDisplayClassName   = 'slider_display';
var Sliders                  = [];
var Sliderdisplays                 = [];
var Slider                   = {};
var Sliderdisplay                  = {};

// SliderAddLoadEvent
function SliderAddLoadEvent(func)
{
		var oldonload = window.onload;
		if (typeof window.onload != 'function') {
			window.onload = func;
		}
		else {
			window.onload = function() {
				oldonload();
				func();
			};
		}
}
// SliderGetElementsByClass: Cross-browser function that returns
// an array with all elements that have a class attribute that
// contains className
function SliderGetElementsByClass(className)
{
	var classElements = new Array();
	var els = document.getElementsByTagName("*");
	var elsLen = els.length;
	var pattern = new RegExp("\\b" + className + "\\b");
	for (var i = 0, j = 0; i < elsLen; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}
// SliderLeft: Cross-browser version of "element.style.left"
// Returns or sets the horizontal position of an element.
function SliderLeft(elmnt, pos)
{
	if (!(elmnt = document.getElementById(elmnt))) return 0;
	if (elmnt.style && (typeof(elmnt.style.left) == 'string')) {
		if (typeof(pos) == 'number') elmnt.style.left = pos + 'px';
		else {
			pos = parseInt(elmnt.style.left);
			if (isNaN(pos)) pos = 0;
		}
	}
	else if (elmnt.style && elmnt.style.pixelLeft) {
		if (typeof(pos) == 'number') elmnt.style.pixelLeft = pos;
		else pos = elmnt.style.pixelLeft;
	}
	return pos;
}
// SliderTop: Cross-browser version of "element.style.top"
// Returns or sets the vertical position of an element.
function SliderTop(elmnt, pos)
{
	if (!(elmnt = document.getElementById(elmnt))) return 0;
	if (elmnt.style && (typeof(elmnt.style.top) == 'string')) {
		if (typeof(pos) == 'number') elmnt.style.top = pos + 'px';
		else {
			pos = parseInt(elmnt.style.top);
			if (isNaN(pos)) pos = 0;
		}
	}
	else if (elmnt.style && elmnt.style.pixelTop) {
		if (typeof(pos) == 'number') elmnt.style.pixelTop = pos;
		else pos = elmnt.style.pixelTop;
	}
	return pos;
}
// moveSlider: Handles slider and display while dragging
function moveSlider(e)
{
	var e = (e) ? e : window.event;
	if (Slidermouseover) { // Only if slider is dragged
		Slider.x = Slider.startOffsetX + e.screenX; // Horizontal mouse position relative to allowed slider positions
		Slider.y = Slider.startOffsetY + e.screenY; // Horizontal mouse position relative to allowed slider positions
		if (Slider.x > Slider.xMax) Slider.x = Slider.xMax; // Limit horizontal movement
		if (Slider.x < 0) Slider.x = 0; // Limit horizontal movement
		if (Slider.y > Slider.yMax) Slider.y = Slider.yMax; // Limit vertical movement
		if (Slider.y < 0) Slider.y = 0; // Limit vertical movement
		SliderLeft(Slider.id, Slider.x);  // move slider to new horizontal position
		SliderTop(Slider.id, Slider.y); // move slider to new vertical position
		var sliderVal = Slider.x + Slider.y; // pixel value of slider regardless of orientation
		var sliderPos = (Slider.distance / Sliderdisplay.valuecount) * 
			Math.round(Sliderdisplay.valuecount * sliderVal / Slider.distance);
		var v = Math.round((sliderPos * Slider.scale + Slider.from) * // calculate display value
			Math.pow(10, Sliderdisplay.decimals)) / Math.pow(10, Sliderdisplay.decimals);
		if (Sliderdisplay.value != v)
		{
			Sliderdisplay.value = v; // put the new value in the slider display element
			if (Sliderdisplay.onchange)
				Sliderdisplay.onchange();
		}
		return false;
	}
	return
}
// slide: Handles the start of a slider move.
function slide(e)
{
	var e = (e) ? e : window.event;
	Slider = (e.target) ? e.target : e.srcElement; // Get the activated slider element.
	var dist = parseInt(Slider.getAttribute('distance')); // The allowed slider movement in pixels.
	Slider.distance = dist ? dist : SliderDefaultSliderLength; // Deafault distance from global var.
	var ori = Slider.getAttribute('orientation'); // Slider orientation: 'horizontal' or 'vertical'.
	var orientation = ((ori == 'horizontal') || (ori == 'vertical')) ? ori : SliderDefaultOrientation;
		// Default orientation from global variable.
	var displayId = Slider.getAttribute('display'); // ID of associated display element.
	Sliderdisplay = document.getElementById(displayId); // Get the associated display element.
	Sliderdisplay.sliderId = Slider.id; // Associate the display with the correct slider.
	var dec = parseInt(Sliderdisplay.getAttribute('decimals')); // Number of decimals to be displayed.
	Sliderdisplay.decimals = dec ? dec : 0; // Default number of decimals: 0.
	var val = parseInt(Sliderdisplay.getAttribute('valuecount'))  // Allowed number of values in the interval.
	Sliderdisplay.valuecount = val ? val : Slider.distance + 1 // Default number of values: the sliding distance.
	var from = parseFloat(Sliderdisplay.getAttribute('from')) // Min/start value for the display.
	from = from ? from : 0 // Default min/start value: 0.
	var to = parseFloat(Sliderdisplay.getAttribute('to')) // Max value for the display.
	to = to ? to : Slider.distance // Default number of values: the sliding distance.
	Slider.scale = (to - from) / Slider.distance // Slider-display scale [value-change per pixel of movement].
	if (orientation == 'vertical') { // Set limits and scale for vertical sliders.
		Slider.from = to // Invert for vertical sliders. "Higher is more."
		Slider.xMax = 0
		Slider.yMax = Slider.distance
		Slider.scale = -Slider.scale // Invert scale for vertical sliders. "Higher is more."
	}
	else { // Set limits for horizontal sliders.
		Slider.from = from;
		Slider.xMax = Slider.distance;
		Slider.yMax = 0;
	}
	Slider.startOffsetX = SliderLeft(Slider.id) - e.screenX; // Slider-mouse horizontal offset at start of slide.
	Slider.startOffsetY = SliderTop(Slider.id) - e.screenY; // Slider-mouse vertical offset at start of slide.
	Slidermouseover = true;
	document.onmousemove = moveSlider; // Start the action if the mouse is dragged.
	document.onmouseup = sliderMouseUp; // Stop sliding.
	return false;
}
// sliderMouseUp: Handles the mouseup event after moving a slider.
// Snaps the slider position to allowed/displayed value. 
function sliderMouseUp()
{
	if (Slidermouseover) {
		var v = (Sliderdisplay.value) ? Sliderdisplay.value : 0 // Find last display value.
		var pos = (v - Slider.from)/(Slider.scale) // Calculate slider position (regardless of orientation).
		if (Slider.yMax == 0) {
			pos = (pos > Slider.xMax) ? Slider.xMax : pos;
			pos = (pos < 0) ? 0 : pos;
			SliderLeft(Slider.id, pos); // Snap horizontal slider to corresponding display position.
		}
		if (Slider.xMax == 0) {
			pos = (pos > Slider.yMax) ? Slider.yMax : pos;
			pos = (pos < 0) ? 0 : pos;
			SliderTop(Slider.id, pos); // Snap vertical slider to corresponding display position.
		}
		if (document.removeEventListener) { // Remove event listeners from 'document' (W3C).
			document.removeEventListener('mousemove', moveSlider, false);
			document.removeEventListener('mouseup', sliderMouseUp, false);
		}
		else if (document.detachEvent) { // Remove event listeners from 'document' (IE).
			document.detachEvent('onmousemove', moveSlider);
			document.detachEvent('onmouseup', sliderMouseUp);
			document.releaseCapture();
		}
	}
	Slidermouseover = false; // Stop the sliding.
}
function focusDisplay(e)
{
	var e = (e) ? e : window.event;
	var Sliderdisplay = (e.target) ? e.target : e.srcElement; // Get the activated display element.
	var lock = Sliderdisplay.getAttribute('typelock'); // Is the user allowed to type into the display?
	if (lock == 'on') {
		Sliderdisplay.blur();
	}
	return;
}
function SliderInit() // Set up the sliders and the displays.
{
	Sliders = SliderGetElementsByClass(SliderClassName) // Find the horizontal sliders.
	for (var i = 0; i < Sliders.length; i++) {
		Sliders[i].onmousedown = slide; // Attach event listener.
	}
	Sliderdisplays = SliderGetElementsByClass(SliderDisplayClassName) // Find the displays.
	for (var i = 0; i < Sliderdisplays.length; i++) {
		Sliderdisplays[i].value = Sliderdisplays[i].defaultValue; // Resets display on page reload.
		Sliderdisplays[i].onfocus = focusDisplay; // Attach event listener.
	}
}
SliderAddLoadEvent(SliderInit);