var Slider = Class.create();
var v = new Array();
	
Slider.prototype = {

	initialize: function() {
		this.options = Object.extend(
		{
			minValue:1,
			maxValue:100
		}, arguments[0]);

		this.bar = $(this.options.bar);
		this.element = $(this.options.element);

		var offset = this.bar.positionedOffset();
		this.top = offset[1];
		this.bottom = offset[1] + this.bar.getHeight() - this.element.getHeight();
		this.left = offset[0] - this.element.getWidth()/2;
		
		this.element.style.position = 'absolute';
		this.element.style.left = this.left + 'px';
		this.element.style.top = this.bottom + 'px';

		this.position = this.bottom;

		this._changeValue();
		this._changeColor();
		this._changeValue();

		this.eventMouseDown = this._initDrag.bindAsEventListener(this);
		this.eventMouseUp   = this._endDrag.bindAsEventListener(this);
		this.eventMouseMove = this._updateDrag.bindAsEventListener(this);

		Event.observe(this.element, "mousedown", this.eventMouseDown);
	},

	_initDrag: function(event) {
		Event.observe(document, "mouseup", this.eventMouseUp, false);
    	Event.observe(document, "mousemove", this.eventMouseMove, false);
		Event.stop(event);
	},

	_endDrag: function(event) {
		Event.stopObserving(document, "mouseup", this.eventMouseUp, false);
		Event.stopObserving(document, "mousemove", this.eventMouseMove, false);

		if (this.options.afterDrag)
			this.options.afterDrag(this.value);
		Event.stop(event);
	},

	_updateDrag: function(event) {
		y = Math.max(this.top,event.clientY);
		y = Math.min(this.bottom,y);
		this.element.style.top = y + 'px';

		this.position = y;

		this._changeValue();
		this._changeColor();
		Event.stop(event);
	},

	_changeValue: function() {
		this.value = this.options.minValue + ((this.bottom-this.position)/(this.bottom-this.top))*(this.options.maxValue-this.options.minValue);
		if (this.options.valueChange)
			this.options.valueChange(this.value, this.element.style.backgroundColor);
	},

	_changeColor: function() {
		for(i=0;i<this.options.colorRanges.length;i++) {
			if (this.value<this.options.colorRanges[i]) {
				this.element.style.backgroundColor = this.options.colors[i];
				return;
			}
		}
	},

	getValue: function() {
		return this.value;
	},
	
	doReset: function() {
		this.element.style.position = 'absolute';
		this.element.style.left = this.left + 'px';
		this.element.style.top = this.bottom + 'px';

		this.position = this.bottom;

		this._changeValue();
		this._changeColor();
		this._changeValue();	
	}

};

function callback(ele, value, pos, color) {
	$(ele).innerHTML = '<span style="color:' + color + '">' + parseInt(value) + "</span>";
	v[pos] = parseInt(value);
}

function callback1(value, color) {
	callback('value1',value, 1, color);		
}

function callback2(value, color) {
	callback('value2',value, 2, color);		
}

function callback3(value, color) {
	callback('value3',value, 3, color);		
}

function callback4(value, color) {
	callback('value4',value, 4, color);		
}

var slider1 = new Slider({
						bar:'bar1',
						element:'element1',
						valueChange:callback1,
						colors: ['#df0024','#e77c17','#f1c300','#f8f400','#a1d20e', '#2c9f29', '#007e2e'],
						colorRanges: [21,39,55,69,81,92,100]
						});

var slider2 = new Slider({
						bar:'bar2',
						element:'element2',
						valueChange:callback2,
						colors: ['#df0024','#e77c17','#f1c300','#f8f400','#a1d20e', '#2c9f29', '#007e2e'],
						colorRanges: [21,39,55,69,81,92,100]
						});
						
var slider3 = new Slider({
						bar:'bar3',
						element:'element3',
						valueChange:callback3,
						colors: ['#807f83','#919194','#a5a6a9','#4e84c4','#73a2d6', '#97c0e6', '#cde2f5'],
						colorRanges: [21,39,55,69,81,92,100]							
						});
						
var slider4 = new Slider({
						bar:'bar4',
						element:'element4',
						valueChange:callback4,
						colors: ['#807f83','#919194','#a5a6a9','#4e84c4','#73a2d6', '#97c0e6', '#cde2f5'],
						colorRanges: [21,39,55,69,81,92,100]		
						});
						
function genGraph() {
    if (document.getElementById('email').value == '') {
        location.href="GenGraph.aspx?s1=" + v[1] + "&s2=" + v[2] + "&s3=" + v[3] + "&s4=" + v[4];
    } else if (document.getElementById('email').value == 'Enter your email address then click the \'Create Graph\' button above') {
        location.href="GenGraph.aspx?s1=" + v[1] + "&s2=" + v[2] + "&s3=" + v[3] + "&s4=" + v[4];
    } else {
        location.href="GenGraph.aspx?s1=" + v[1] + "&s2=" + v[2] + "&s3=" + v[3] + "&s4=" + v[4] + "&email=" + document.getElementById('email').value;
    }       
}

function showEmailField() {
    if (document.getElementById('email').style.visibility == '') {
        document.getElementById('email').style.visibility = 'hidden';
    } else {
        document.getElementById('email').style.visibility = '';
    }       
}

function doReset() {
    slider1.doReset();
    slider2.doReset();
    slider3.doReset();
    slider4.doReset();
}