//	*********************************************************************************************		Constants
//	*********************************************************************************************		

var PARENT_CONTAINER_ID = "sliders";
var SLIDER_DEFAULT_VALUE = 0;

//	*********************************************************************************************		Variables
//	*********************************************************************************************	

var persistance = new Persistance();

var sliders = new Array();

var movingSlider;

//	*********************************************************************************************		Functions
//	*********************************************************************************************	

//	***************************************************************************		createSlider

function createSlider(title, minValue, maxValue, stepWidth, labelsURL)
{
	var info = new Array();
	
	info["title"] = title;
	info["minValue"] = minValue;
	info["maxValue"] = maxValue;
	info["stepWidth"] = stepWidth;
	info["labelsURL"] = labelsURL;
	
	sliders[sliders.length] = info;
}

//	***************************************************************************		init

function init()
{
	var parentContainer = document.getElementById(PARENT_CONTAINER_ID);
	
	for(var i = 0; i < sliders.length; i++)
		sliders[i] = new Slider(parentContainer, sliders[i]["title"], sliders[i]["minValue"], sliders[i]["maxValue"], sliders[i]["stepWidth"], sliders[i]["labelsURL"], SLIDER_DEFAULT_VALUE);	
		
	document.onmouseup = function()
	{
		if(movingSlider != null)
			movingSlider.mouseUp();
	};

	document.onmouseout = function(e)
	{
		if(e == null)
			e = window.event;
				
		if (!e.relatedTarget && !e.toElement)	
		{
			if(movingSlider != null)
				movingSlider.mouseUp();
		}
		
		return false;
	};
	
	document.getElementById("submit").onclick = onSubmit;
}

//	***************************************************************************		getSliderValues

function getSliderValues()
{
	var csv = "";
	
	for(var i = 0; i < sliders.length; i++)
	{
		if(i > 0)
			csv += ",";
	
		csv += sliders[i].getValue();	
	}
	
	return csv;
}

//	***************************************************************************		onSubmit

function onSubmit()
{
	document.getElementById("results").value = getSliderValues();
	
	var email = document.getElementById("email");
	
	if( email.value == "" ) {
        return true;	
	}
	if( (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email.value))) )
	{
		alert("The email address entered was not in the correct format");
		return false;
	}
	
}

//	*********************************************************************************************		Objects
//	*********************************************************************************************		

//	***************************************************************************		Slider

function Slider(parentContainer, title, minValue, maxValue, stepWidth, labelsURL, defaultValue)
{
	this.ref = persistance.addObject(this);
	
	this.handle = null;
	this.groove = null;
	
	this.minValue = minValue;
	this.maxValue = maxValue;
	this.stepWidth = stepWidth;
	
	this.hover = false;
	this.moving = false;
	
	var width = ((maxValue - minValue) * stepWidth);	
	
	this.createWidget(parentContainer, title, labelsURL, width);
	
	this.value = Math.floor(width / 2) + (stepWidth * defaultValue);
	this.offset = Math.round(this.handle.offsetWidth / 2);
	
	this.handle.style.left = this.value - this.offset + "px";
	
	eval("this.handle.onmousedown = function(){persistance.item(" + this.ref + ").mouseDown();};");
	eval("this.handle.onmouseover = function(){persistance.item(" + this.ref + ").mouseOver();};");
	eval("this.handle.onmouseout = function(){persistance.item(" + this.ref + ").mouseOut();};");	
	
	eval("this.groove.onclick = function(e){persistance.item(" + this.ref + ").grooveClick(e);};");	
}

Slider.prototype.createWidget = function(parentContainer, titleText, labelsURL, width)
{
	var container = document.createElement("div");
	container.className = "slider";
	
	var title = document.createElement("p");
	title.className = "title";
	title.innerHTML = titleText;
	container.appendChild(title);
	
	this.groove = document.createElement("div");
	this.groove.className = "groove";
	this.groove.style.width = width + "px";
	
	this.handle = document.createElement("div");
	this.handle.className = "handle";
	this.groove.appendChild(this.handle);
	
	container.appendChild(this.groove);
	
	var labels = document.createElement("img");
	labels.className = "labels";
	labels.src = labelsURL;
	container.appendChild(labels);	
	
	parentContainer.appendChild(container);
}

Slider.prototype.mouseOver = function()
{
	if(!this.moving)
		this.handle.className = "handle_hover";
		
	this.hover = true;
}

Slider.prototype.mouseOut = function()
{
	if(!this.moving)
		this.handle.className = "handle";
	
	this.hover = false;
}

Slider.prototype.mouseDown = function()
{
	eval("document.onmousemove = function(e){persistance.item(" + this.ref + ").mouseMove(e);};");
	this.handle.className = "handle_move";
	
	this.moving = true;
	
	movingSlider = this;
}

Slider.prototype.mouseUp = function()
{
	document.onmousemove = null;
	this.handle.className = this.hover ? "handle_hover" : "handle";

	this.moving = false;		
	
	// quantise value
	this.value = (Math.round(this.value / this.stepWidth) * this.stepWidth);
	
	this.handle.style.left = this.value - this.offset + "px";
}

Slider.prototype.mouseMove = function(e)
{
	var grooveLeft = this.groove.offsetLeft > 0 ? this.groove.offsetLeft : this.groove.offsetParent.offsetLeft;

	e = e || window.event
	var xPos = this.getMouseCoords(e)["x"];
	
	if(xPos > grooveLeft + this.groove.offsetWidth)
		xPos = grooveLeft + this.groove.offsetWidth;
	
	if(xPos < grooveLeft)
		xPos = grooveLeft;
	
	this.value = xPos - grooveLeft;		
	
	this.handle.style.left = this.value - this.offset + "px";
}

Slider.prototype.getMouseCoords = function(mouseMoveEvent)
{
	var mouseCoords = new Array();
	
	if(mouseMoveEvent.pageX || mouseMoveEvent.pageY)
	{
		mouseCoords["x"] = mouseMoveEvent.pageX;
		mouseCoords["y"] = mouseMoveEvent.pageY;
	}
	else
	{
		mouseCoords["x"] = mouseMoveEvent.clientX + document.body.scrollLeft - document.body.clientLeft;
		mouseCoords["y"] = mouseMoveEvent.clientY + document.body.scrollTop - document.body.clientTop;
	}
	
	return mouseCoords;
}

Slider.prototype.getValue = function()
{
	return Math.floor(this.value / this.stepWidth) + this.minValue;
}

Slider.prototype.grooveClick = function(e)
{
	this.mouseMove(e);
	this.mouseUp();
}

//	***************************************************************************		Persistance

function Persistance()
{
	this.objects = new Array();
}

Persistance.prototype.addObject = function(obj)
{
	var ref = this.objects.length;
	this.objects[ref] = obj;
	
	return ref;
};

Persistance.prototype.item = function(ref)
{
	return this.objects[ref];
};

//	*********************************************************************************************		Execute
//	*********************************************************************************************

window.onload = function(){init();};