var dragger = null;
var thumbOn = false;

function addEventHandler(node, type, f) {
	node["on" + type] = f;
}

function nslider(x, y, w, h) {
	var value = 100;
	var div = document.createElement("div");
	//div.style.border = "solid 1px #ffffff";
	div.style.width = w + "px";
	div.style.height = h + "px";
	div.style.left = x + "px";
	div.style.top = y + "px";
	div.style.position = "absolute";
	div.style.margin = "0 auto";
	div.style.padding = "0px";
	//div.style.background = "#222222";
	
	
	div.style.textAlign = "center";
	
	div.style.background =  "url('slider_groove.png') repeat-y center"; 


	

	
	var thumb = document.createElement("div");
	div.thumb = thumb;
	var tw = w - 8;
	var th = 84;
	//var tm = 0;//3;
	thumb.style.width = tw + "px";
	thumb.style.height = th + "px";
	//thumb.style.border = "solid 1px #000000";
	thumb.style.position = "relative";
	//thumb.style.margin = tm + "px";
	thumb.style.margin = "0 auto";
	thumb.style.padding = "0px";
	thumb.style.cursor = "pointer";
	//thumb.style.background = "#555555";
	thumb.style.color = "#e4e4e4";
	//thumb.style.opacity = ".55";
	//thumb.style.filter = "alpha(opacity=55)";
	thumb.style.textAlign = "center";
	thumb.style.lineHeight = "26pt";
	thumb.style.zIndex = 5;
	//thumb.innerHTML = value;
	thumb.h = h;
	thumb.th = th;
	thumb.y = y;
	//thumb.tm = tm;
	thumb.tw = tw;
	thumb.value = value;
	div.value = thumb.value;
	
	thumb.style.background =  "url('slider_knob.png') no-repeat"; 
	div.appendChild(thumb);
	
	var bar = document.createElement("div");
	var bw = 12; //w-50; //w - 10;
	var ty = parseInt( thumb.style.top.substr(0, thumb.style.top.length - 2) );
	thumb.ty = ty;
	var bh = h - th - 10;
	
	bar.style.width = bw + "px";
	bar.style.height = bh + "px";
	bar.style.position = "relative";
	bar.style.background = "#6Dffc8";
	bar.style.margin = "0 auto";
	bar.style.opacity = ".45";
	bar.style.filter = "alpha(opacity=45)";
	bar.style.padding = "0px";
	//bar.style.paddingTop = "10px";
	//bar.style.paddingBottom = "10px";
	
	bar.style.border = "0px";
	
	div.bar = bar;
	thumb.bar = bar;
	
	div.appendChild(bar);
	
	function thumbDown(e) {
		e = e || window.event;
		thumbOn = true;
		var target;
		if ( e.currentTarget ) {
			target = e.currentTarget.thumb;
		} else {
			target = e.srcElement;
		}
		dragger = target;
		//dragger.style.background = "#ba7a00";
		return false;
	}

	function thumbUp(e) {
		thumbOn = false;
		//dragger.style.background = "#FFFFFF";
		//dragger.style.background =  "url('http://noojo.com/filiment.png') repeat-x #050C14"; 
		dragger = null;
	}

	function thumbScroll(e) {		
		if ( thumbOn == false) { return true; }
		e = e || window.event;
		//dragger.style.background = "#ffff88";
		//dragger.style.background =  "url('http://noojo.com/filiment-on.png') repeat-x #050C14"; 
		var h = dragger.h;
		var th = dragger.th;
		var y = dragger.y;
		//var tm = dragger.tm;
		var ty = dragger.ty;
		
		
		ty = e.clientY - y - (th/2);
		if ( ty < 0) { ty = 0; }
		if ( ty  > h - (th) ) { ty = h - th;}
		dragger.style.top = ty + 'px';

		var bt = (ty);
		dragger.bar.style.top = ty + 'px';
		bt = h - bt - th - 10;
		if ( bt < 0 ) { bt = 0; }
		dragger.bar.style.height = bt + 'px';
		
		dragger.value = Math.floor(100 - ( 100 * (ty / (h-th)) ));
		
		return false;
	}
	
	function setValue(v,d) {
		box2.innerHTML = d.thumb.value;
		d.thumb.value = v;
		var y = -1 * (h-th)*(v-100)/100;
		//box2.innerHTML = d.thumb.value + ' ' + y + ' ' + v + ' ' + d.thumb.style.top;
		d.thumb.style.top = y + 'px';
		d.bar.style.top = y + 'px';
		var bt = h - y - th;// - (5 * tm);
		if ( bt < 0 ) { bt = 0; }
		d.bar.style.height = bt + 'px';
		//d.style.top = y + 'px';
	}
	
	div.scroller = thumbScroll;
	div.thumbUp = thumbUp;
	div.thumbDown = thumbDown;
	div.setValue = setValue;
	
	// default handlers
	addEventHandler(document, "mousemove", thumbScroll);
	addEventHandler(document, "mouseup", thumbUp);
	addEventHandler(div, "mousedown", thumbDown);
	
	document.body.appendChild(div);
	return div;
}

//<script>
//var box1 = document.getElementById("box1");
//var a = new nslider(100,15, 70, 500);
//var b = new nslider(220,155, 70, 300);
//</script>