function $(id){ return(document.getElementById(id)); }


function getTargetElement(evt) {
    return (evt.target) ? ((evt.target.nodeType == 3) ? evt.target.parentNode : evt.target) : evt.srcElement;
}

function addEvent ( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj["e"+type+fn] = fn;
    obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
    obj.attachEvent( "on"+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}
	
function removeEvent ( obj, type, fn ) {
      if ( obj.detachEvent ) {
        obj.detachEvent( "on"+type, obj[type+fn] );
		    obj[type+fn] = null;
      } else
        obj.removeEventListener( type, fn, false );
}

Function.prototype.bind = function(obj) {
	
    var _method = this;
    return function() {
        return _method.apply(obj, arguments);
    };
    
} 

function slider() {
this.style = {
 backgroundColor:"#828282"
,height:"4px"
,width:"300px"
,borderBottom:"#cfcfcf 1px solid"
,borderRight:"#cfcfcf 1px solid"
};
this.pointer = {
top: "0px"
,width:"6px"
,height:"12px"
,backgroundColor:"#008c00"

};
this.values = {
min:0
,mid:50
,max:100
,fontSize:"14px"
};
};

slider.prototype = { 

	init : function(settings) {
		
		for(var i in settings){
		    if (typeof(this[i])=="undefined") {
		        this[i] = settings[i];
		    }
		    else
		    for(var j in settings[i]){
    		     //if (typeof(this[i][j])=="undefined")
    		            this[i][j]=settings[i][j]; 
    		               		    
		     }				
		}
						
		this.createslider();
		this._event_docMouseMove = this._docMouseMove.bind(this);		
		this._event_docMouseUp = this._docMouseUp.bind(this);		
		this.point.onmousedown = this._mouseDown.bind(this);
		this.slider_bar.onclick = this._sliderClick.bind(this);
				 
	},
	
	createslider:function(){
		var $ = document.getElementById(this.id)
		$.appendChild(this.valuebox());
				
		this.slider_bar = this.sliderbar();		
		this.colorbar =  this.setcolorbar();
		
		if (this.pointer.isarrow ==null) {
		this.point = this.setpoint();}
		else{
		this.point = this.arrows();
		}	
			
		this.slider_bar.appendChild(this.colorbar);
		this.slider_bar.appendChild(this.point);
		var div = document.createElement('div');
		div.style.clear="both";
		$.appendChild(div);
		$.appendChild(this.slider_bar);
	   
	},
	
	valuebox:function () {
		var div = document.createElement('div');
		div.style.width = this.style.width;		
		div.style.fontSize =  this.values.fontSize;
		var min = div.cloneNode(false);
		
		var divfloat = (document.all)  ? "styleFloat" : "cssFloat";
		min.style[divfloat] ="left";
		
		var mid = min.cloneNode(false);
		this.display = mid;
		var max = document.createElement('div');
		max.style[divfloat]="right";
				
		min.innerHTML = this.values.min;
		mid.innerHTML = this.values.mid;
		max.innerHTML = this.values.max;
		min.style.width = 2/5*parseInt(this.style.width)+"px";
		mid.style.width = 2/5*parseInt(this.style.width)+"px";
		
		div.appendChild(min);
		div.appendChild(mid);
		div.appendChild(max);
		return div;
	},
	
	sliderbar: function () {
		var div = document.createElement('div');		
		div.style.position = "relative";
		div.style.backgroundColor = this.style.backgroundColor;
		div.style.height = this.style.height;
		div.style.width = this.style.width;
		div.style.fintSize = "1px";		
		div.style.borderBottom = this.style.borderBottom;
		div.style.borderRight = this.style.borderRight;
		
		return div;
	},
	
    arrows: function () {
        var w =parseInt(this.pointer.width),h=parseInt(this.pointer.height);
        var par = this.setpoint();        
        par.style.backgroundColor = "transparent";
        par.style.top = parseInt(this.style.height)+"px";
        t0 = this.divnode();
        t0.style.backgroundColor =this.pointer.backgroundColor;
        par.appendChild(t0);
        for (var i=1;i<h;i++) {
            t = t0.cloneNode(false);
            t.style.backgroundColor = this.pointer.backgroundColor;
            t.style.marginLeft = 1/2*w/h*i+"px";
            t.style.marginRight = 1/2*w/h*i+"px";
            par.appendChild(t);

        }
        //return par
        return this.reverseNodes(par);      

},

    divnode: function () {
        var o=document.createElement("div");
        o.style.height = "1px";
        o.style.overflow="hidden";
        return o;
    },

    reverseNodes: function (n) { 
       
        var kids = n.childNodes;
       
        var rekids = n.cloneNode(false);
        var numkids = kids.length;
        for(var i = numkids-1; i >= 0; i--) {       
         
            rekids.appendChild(kids[i]);
           
        }
     return rekids;
    },
	setcolorbar: function() {
	
		var div = document.createElement('div');	
		div.style.width= parseInt((this.values.mid-this.values.min)/(this.values.max-this.values.min)*parseInt(this.style.width)) + "px";
		div.style.backgroundColor = this.pointer.backgroundColor;
		div.style.height = this.style.height;
		div.style.overflow = "hidden";
		
		return div;
	},
	 setpoint: function() {
	 	
		var div = document.createElement('div');
		div.style.width = this.pointer.width;
		div.style.backgroundColor = this.pointer.backgroundColor;
		div.style.height = this.pointer.height;
		div.style.overflow = "hidden";		
		div.style.position = "absolute";		
		div.style.top = this.pointer.top;
		div.style.left= parseInt((this.values.mid-this.values.min)/(this.values.max-this.values.min)*parseInt(this.style.width)) - parseInt(this.pointer.width)/2  + "px";
		 return div;
	 },
	_sliderClick: function(e){
	e = (e) ? e : ((window.event) ? window.event : "");
	var o = getTargetElement(e);
	
	if (o!=this.point) {
	  this.setValuesClick(e);
	   if (this.fire)
		    addEvent(this.slider_bar, 'click', this.fire);
		    }
		    	
		this.noBubbleDefault();
	
	}, 
	_mouseDown: function(e) {
		
		addEvent(document, 'mousemove', this._event_docMouseMove);
		if (this.fire)
		    addEvent(document, 'mousemove', this.fire);		
		addEvent(document, 'mouseup', this._event_docMouseUp);
		this.noBubbleDefault()
		
	},
	 _docMouseMove: function(e) {
		this.setValuesClick(e)	
		this.noBubbleDefault();
	   
},

_docMouseUp: function(e) {

removeEvent(document, 'mouseup', this._event_docMouseUp);
removeEvent(document, 'mousemove', this._event_docMouseMove);
if (this.fire) {
  removeEvent(document, 'mousemove', this.fire);}
this.noBubbleDefault();

},
setValuesClick: function(e){

	var x = e.clientX+document.documentElement.scrollLeft;	
	var offsetX = this.getPosition(this.slider_bar)[0];	
	//var x_x = x - offsetX - parseInt(this.pointer.width)/2
	var x_x = x - offsetX
    this.setPosition(x_x);	
 	
},

setPosition: function(x) {
    if (x>parseInt(this.style.width)) {
	 x = parseInt(this.style.width); 
    }	
	else if (x<0) {x = 0;this.point.style.left = x + "px";
	} 
				
	this.colorbar.style.width= x + "px"; 
 	this.point.style.left = x - parseInt(this.pointer.width)/2 +"px";
 	this.values.mid = parseInt( x/parseInt(this.style.width)*(this.values.max - this.values.min) + this.values.min)
 	this.display.innerHTML = this.values.mid;
},

noBubbleDefault:function (e)
{
	if (e && e.stopPropagation) {
		e.stopPropagation();
		e.preventDefault();
		}
	else
		window.event.cancelBubble = true;	
        window.event.returnValue = false; // IE	
},




getPosition: function(el) {   
    var curLeft = 0,curTop = 0, s = this.getScrolls(el);   
  
    if (el.offsetParent) {   
        do {   
            curLeft += el.offsetLeft;          
            curTop += el.offsetTop;   
        } while (el = el.offsetParent);         
        return [ (curLeft - s[0]), (curTop - s[1]) ];   
    }   
},
 
getScrolls: function(el) {  
    var curX = 0, curY = 0;   
    do {   
        curX += el.scrollLeft;   
        curY += el.scrollTop;   
        if (el.nodeName == 'BODY')   
            break;   
    } while (el = el.parentNode);   
    return [curX, curY];   
}

}