//Flag for slider updates on / off so the slider does not update while 
//dragging the slider to a different point
var blockTrackerUpdate = false;

function addEvent(event, elm, handler, bubble) 
{
	if (elm.addEventListener)
		elm.addEventListener(event, handler, bubble);
	else if (elm.attachEvent)
		elm.attachEvent("on"+event, handler);
}

function delEvent(event, elm, handler, bubble) 
{
	if (elm.removeEventListener)
		elm.removeEventListener(event, handler, bubble);
	else if (elm.detachEvent)
		elm.detachEvent("on"+event, handler);
}

function getObjectMethodClosure(object, method) 
{
	return function(arg) {
		return object[method](arg); 
	}
}

var element = getObjectMethodClosure(document, "createElement");
var txtNode = getObjectMethodClosure(document, "createTextNode");

/*
 * Slider
 */
function Slider(id, orientation, resolution, myWidth, myHeight, multiple) 
{
	this.s = false;
	
	this.enabled = true;
	
	if (document.getElementById(id)) {
		if (document.getElementById(id).childNodes[0]) {
			document.getElementById(id).removeChild(document.getElementById(id).childNodes[0]);
		}
	}
		
	
	if (!multiple) {
		multiple = 1;
	}
	
	this.enable = function() {
		this.enabled = true;
	}
	
	this.disable = function() {
		this.enabled = false;
	}
	
	this.setSize = function (width, height) {
		this.width = myWidth;
		this.height = myHeight;
	}

	this.drag = function (event) {
		if (!event) var event = window.event;
		var deltaX=event.clientX - parseInt(sl.s.style.left);
		var deltaY=event.clientY - parseInt(sl.s.style.top);

		if (sl.enabled) {
			addEvent("mousemove", document, moveHandler, true);
			addEvent("mouseup", document, upHandler, true);
		}

		function moveHandler(e) {
            //Flag the slider as not updatable
			blockTrackerUpdate = true;
			var x; var y; var newvalue; var val;
			if (!e) e=window.event;
	
			if (sl.orientation != "vertical") {
				x = e.clientX - deltaX;
				size = (sl.width / (sl.width - sl.handleWidth));
				val = (x * size);
				if (x<0) { x = 0; val = 0; }
				if (x>sl.width-sl.handleWidth) { x=sl.width-sl.handleWidth; val = sl.width}
				sl.s.style.left=(x) + "px";
				newvalue = (sl.multiple > -1) ? (val/sl.width) * sl.resolution : sl.resolution - parseInt((val/sl.width) * sl.resolution);
				newvalue = newvalue / 100;
			}
			else if (sl.orientation != "horizontal") {
				y = e.clientY - deltaY;
				val = y;
					
				if (y<0) { y = 0; val = 0; }
				if (y>sl.height) { y=sl.height; val = sl.height; }
				sl.s.style.top=(y) + "px";
				newvalue = (this.multiple > -1) ? parseInt((val/sl.height) * sl.resolution) : sl.resolution - parseInt((val/sl.height) * sl.resolution);
				newvalue = newvalue / 100;
			}
			if (newvalue != sl.value) {
				sl.value = newvalue;
				sl.onChange(newvalue);
			}
			
			this.value = newvalue;
		}
	
		function upHandler(e) {
            //Flag the slider as updatable
			blockTrackerUpdate = false;            
			if (!e) e=window.event;
			
			if (sl.enabled) {
				delEvent("mouseup", document, upHandler, true);
				delEvent("mousemove", document, moveHandler, true);
			}
			
			if (typeof(sl.onSet) == "function") {
				sl.onSet(sl.value);
			} 
			
		}
	}

	this.onChange = function (value) {
		alert(value);
	}
	
	this.setHandle = function(imgURL, width, height) { 
	
		if (document.getElementById(this.id + "sliderHandle")) {
		
			this.handleWidth = width;
			this.handleHeight = height;
			
			this.height = this.height - height;
			
			img = document.getElementById(this.id + "sliderHandle");
			img.style.backgroundImage='url(video/' + imgURL + ')';
			img.style.backgroundRepeat="no-repeat";
			img.style.width=width + "px";
			img.style.height=height + "px";
			img.style.padding="0px";
			img.style.position = "absolute";
			img.style.left="0px";
			img.style.top="0px";
			
			
			/* Set Background */
			rel = document.getElementById(this.id+"_slider");
			if (this.orientation == "horizontal") {
				rel.style.height = this.handleHeight + "px";
			} 
			else {
				rel.style.width = this.handleWidth + "px";
			}
			
		}
		
	}
	
	this.setPosition = function (value) {
		
		// Use only AFTER you defined onChange
		
		if (value > sl.resolution) {
			this.value = sl.resolution; 
		} else {
			if (value < 0) {
				this.value = 0;
			} else {
				this.value = value;
			}
		}
		
		this.onChange(this.value);
		this.moveSlide(this.value);
	}
	
	this.moveTo = function(value) {
		this.moveSlide(value);
	}
	
	this.moveSlide = function (value) {
		var length = this.height;
		var l;
		
		if (this.orientation == "horizontal") {
			length = this.width;
			l = (value/sl.resolution) * length;
		} else {
			l = (this.multiple > -1) ? (value / sl.resolution) * length : length - ((value / sl.resolution) * length);
		}

		if (this.orientation == "horizontal") {
			this.s.style.left=(l)+"px";
		} else {
			this.s.style.top=(l)+"px";
		}
		
	}

	this.setBackground = function(backgroundImage) {
		
		/* Set Background */
		rel = document.getElementById(this.id+"_slider");
		
		bar = document.getElementById(this.id+"_bar");
		bar.style.backgroundColor = "";
		bar.style.backgroundImage = "url(video/" + backgroundImage + ")";
		bar.style.backgroundRepeat = "repeat-x";
		
	}

	this.createSlider = function() {
		
		var rel = element("div");
		rel.style.display="none";
		rel.style.position = "relative";
		rel.setAttribute("id", this.id+"_slider");

		var bar = element("div");
		bar.style.position = "absolute";
		bar.style.backgroundColor = "#ccc";
		bar.setAttribute("id", this.id+"_bar");
		if (this.orientation == "horizontal") {
			bar.style.left = "0px";
			bar.style.top = (parseInt(this.height/2)-1)+"px";
			bar.style.width = (this.width) + "px";
			bar.style.height = "4px";
			rel.style.height = this.handleHeight + "px";
		} else {
			bar.style.left = (parseInt(this.width/2)-1)+"px";
			bar.style.top = "0px";
			bar.style.width = "1px";
			bar.style.height = (this.height)+"px";
			rel.style.height = (this.height)+"px";
		}
		rel.appendChild(bar);
		
		// Set slider image as background element to fix IE quirk
		var img = element("div");
		img.id = this.id + "sliderHandle";
		img.style.backgroundImage='url("video/img/button.png")';
		img.style.backgroundRepeat="no-repeat";
		img.style.width="11px";
		img.style.height="10px";
		img.style.padding="0px";
		img.style.position = "absolute";
		img.style.left="0px";
		img.style.top="0px";
	
		img.onmousedown = this.drag;
		this.s = img;

		rel.appendChild(img);
		
		document.getElementById(this.id).appendChild(rel);
	}
	
	this.show = function() {
		this.s.parentNode.style.display="block";
	}
	
	this.showDisabled = function() {
		this.s.parentNode.style.display="block";
		this.s.parentNode.style.opacity = "0.4";
		this.s.parentNode.style.filter = "alpha(opacity=40)";
		this.enabled = false;
	}
	
	this.showEnabled = function() {
		this.s.parentNode.style.display="block";
		this.s.parentNode.style.opacity = "1.0";
		this.s.parentNode.style.filter = "alpha(opacity=100)";
		this.enabled = true;
	}

	// Initialize class
	this.id = id;
	this.orientation = "horizontal";
	this.resolution = resolution;
	this.handleWidth = 10;
	this.handleHeight = 10;
	this.height = myHeight;
	this.width = myWidth;
	this.s = "";
	this.value=0;
	var sl = this;
	this.multiple = multiple;
	
	if (orientation != undefined && orientation == "vertical") {
		this.orientation = "vertical";
		this.setSize(10, 100);
	}
	if (resolution != undefined)
		this.resolution = resolution;
		
	if (!this.s) {
		this.createSlider();
	}
	
}