function Slidebar(t, s, h) {
	this.track = document.getElementById(t);
	this.slider = document.getElementById(s);
	this.handle = document.getElementById(h);

	if (this.track != null) {
		this.track.onmousedown = this.onmousedown;
		this.track.slider = this;
		this.track.onselectstart = this.slider.onselectstart = this.handle.onselectstart = function() {
			return false;
		};

		this.style = this.slider.style;
	}

	this.maxSliderValue = 5.0;
};

function getCursorPosition(evt) {
	var pos = {
		x : 0,
		y : 0
	};

	if (evt.pageX)
		pos.x = evt.pageX;
	else if (evt.clientX)
		pos.x = evt.clientX
				+ (document.documentElement.scrollLeft ? document.documentElement.scrollLeft
						: document.body.scrollLeft);

	if (evt.pageY)
		pos.y = evt.pageY;
	else if (evt.clientY)
		pos.y = evt.clientY
				+ (document.documentElement.scrollTop ? document.documentElement.scrollTop
						: document.body.scrollTop);

	return pos;
}

function getPosition(obj) {
	var pos = {
		x : 0,
		y : 0
	};

	do {
		pos.x += obj.offsetLeft;
		pos.y += obj.offsetTop;
	} while (obj = obj.offsetParent);

	return pos;
}

function getHex(f) {
	var number = new Number(Math.round(f));

	var hex = number.toString(16);

	if (hex.length == 1) {
		hex = "0" + hex;
	}

	return hex;
}

function updateRatePoints(x) {
	var num = new Number(x);

	num = Math.round(num * 10) / 10.0;

	document.getElementById("rate_points").innerHTML = num.toLocaleString();

	ratePointsStyle = document.getElementById("rate_points").style;

	/*
	 * var ratio; var red; var green; if (num < this.maxSliderValue/2.0) { ratio =
	 * num / (this.maxSliderValue/2.0);
	 * 
	 * red = 255.0; green = 255.0 * ratio; } else { ratio = (num -
	 * this.maxSliderValue/2.0)/(this.maxSliderValue/2.0);
	 * 
	 * red = 255.0 * (1.0-ratio); green = 255.0; }
	 * 
	 * ratePointsStyle.color = "#" + this.getHex(red) + "" + this.getHex(green) +
	 * "00";
	 */

	ratePointsStyle.color = "#21a4ee";
};

function removeListener(s) {
	if (document.removeEventListener) {
		document.removeEventListener("mousemove", s.onmousemove, true);
		document.removeEventListener("mouseup", s.onmouseup, true);
	} else if (document.detachEvent) {
		document.detachEvent("onmousemove", s.onmousemove);
		document.detachEvent("onmouseup", s.onmouseup);
		document.detachEvent("onlosecapture", s.onmouseup);
	}
}

Slidebar.prototype.startDrag = function(e) {
	Slidebar.currentInstance = this;

	if (!e) {
		e = window.event;
	}

	if (!this.handleWidth) {
		this.handleWidth = this.handle.offsetWidth;
		this.initialWidth = this.slider.offsetWidth;
		this.width = this.initialWidth;
		this.maxWidth = this.track.offsetWidth;
	}
	this.screenX = e.screenX;
	this.screenY = e.screenY;

	var target = e.target || e.srcElement;
	if (target != this.handle) {
		var middlePoint = e.offsetX ? e.offsetX : e.layerX;

		// middlePoint = middlePoint + this.handleWidth / 2;

		this.moveTo(middlePoint);
	}

	this.initialWidth = this.width;
};

Slidebar.prototype.onmousedown = function(e) {
	this.slider.startDrag(e);

	var s = this.slider;

	if (document.addEventListener) {
		document.addEventListener("mousemove", s.onmousemove, true);
		document.addEventListener("mouseup", s.onmouseup, true);
	} else if (document.attachEvent) {
		document.attachEvent("onmousemove", s.onmousemove);
		document.attachEvent("onmouseup", s.onmouseup);
		document.attachEvent("onlosecapture", s.onmouseup);
	}

	return false;
};

Slidebar.prototype.onmouseup = function(e) {
	var s = Slidebar.currentInstance;

	s.initialWidth = s.width;

	removeListener(s);
};

Slidebar.prototype.onmousemove = function(e) {
	if (!e) {
		e = window.event;
	}

	var s = Slidebar.currentInstance;

	var cursorPos = getCursorPosition(e);

	if (getPosition(s.handle).y + s.handle.offsetHeight - cursorPos.y < 0) {
		removeListener(s);
		return;
	}
	if (cursorPos.y - getPosition(s.slider).y < 0) {
		removeListener(s);
		return;
	}

	s.moveTo(s.initialWidth + (e.screenX - s.screenX));
};

Slidebar.prototype.moveTo = function(x) {
	if (x < 0) {
		x = 0;
	} else if (x > this.maxWidth) {
		x = this.maxWidth;
	}

	this.width = x;
	this.style.width = "" + x + "px";

	this.handle.left = (x - this.handle.offsetWidth / 2);
	this.handle.style.left = "" + (x - this.handle.offsetWidth / 2) + "px";

	document.rating.rate_value.value = Math.round(slideBar.getValue() * 10); // We
	// give
	// back
	// an
	// integer
	// value
	// ...

	this.updateRatePoints(slideBar.getValue());
};

Slidebar.prototype.moveBy = function(x) {
	this.moveTo(this.width + x);
};

Slidebar.prototype.getValue = function() {
	return Math.round((this.width / (this.maxWidth)) * 100)
			/ (100.0 / this.maxSliderValue);
};

Slidebar.prototype.setValue = function(x) {
	x /= 10.0; // We pass an integer value ...

	if (x < 0.0) {
		x = 0.0;
	}
	if (x > this.maxSliderValue) {
		x = this.maxSliderValue;
	}

	if (this.slider != null) {
		this.moveTo((x / this.maxSliderValue) * this.slider.offsetWidth);

		this.updateRatePoints(x);
	}
};

var slideBar = new Slidebar("track", "slider", "handle");
slideBar.getHex = getHex;
slideBar.updateRatePoints = updateRatePoints;