Number.prototype.NaN0=function(){return isNaN(this)?0:this;}
function sld_msoffset(target, ev){
	ev = ev || window.event;
	var docPos    = sld_pos(target);
	var mousePos  = sld_msCoords(ev);
	return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
};
function sld_pos(e){
	var left = 0;
	var top  = 0;
	while (e.offsetParent){
		left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
		top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
		e  = e.offsetParent;
	}
	left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
	top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
	return {x:left, y:top};
}

function sld_msCoords(ev){
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
}
function sld_addEvent(targetObj,eventName,eventFunc)
{
	if(typeof targetObj == "string")
	targetObj = document.getElementById(targetObj);
	if(targetObj)
	{
		if(targetObj.attachEvent)
		{
			targetObj.attachEvent(eventName,eventFunc);
		}
		else if(targetObj.addEventListener)
		{
			eventName = eventName.toString().replace(/on(.*)/i,'$1');
			targetObj.addEventListener(eventName,eventFunc,true);
		}
	}   
}
function MakeSlider(track,slider,iniPos,OnMoveFunc,OnUpFunc){
	if(typeof track == "string") track = document.getElementById(track);
	if(typeof slider == "string") slider = document.getElementById(slider);
	if(!slider||!track) return;
    var preLocation  = iniPos;
	var MethodOnMove = OnMoveFunc?OnMoveFunc:function(){};
	var MethodOnUp   = OnUpFunc?OnUpFunc:function(){};
	var iMouseDown  = false;
	var sliderObj  = null;
	var trackObj   = null;
	var preMousePos = null;
	var slideRange  = {min:null,max:null};
	var prePosition = sld_pos(slider);   
	slideRange.min = sld_pos(track).x;
	slideRange.max = sld_pos(track).x+track.offsetWidth;
	var lengthTrack = track.offsetWidth;
	var lengthSlider = slider.offsetWidth;
	var outInterface = preLocation;
	slider.style.position = "relative";
        
	var OnLoad = function(){
		slider.style.left = (lengthTrack*preLocation-lengthSlider/2).toString()+"px";
		ReLocate();
	};
	slider.onmousedown = function(ev){
		ev = ev||window.event;
		iMouseDown  = true;
		sliderObj   = this;
		trackObj    = track;
		mouseOffset = sld_msoffset(this, ev);
		preMousePos = sld_msCoords(ev);
		return false;
	};

	var CheckOut = function(ev){
		ev = ev || window.event;
		var mousePos = sld_msCoords(ev);
		if(mousePos.x<=(slideRange.min+mouseOffset.x))
			return 1;  //out of left
		if(mousePos.x>=(slideRange.max-(slider.offsetWidth - mouseOffset.x)))
			return 2;  //out of right
		return 0;      //out of none
	};
	var OnSliding = function(ev){                                
		if(!iMouseDown||!sliderObj) return;
		ev = ev || window.event;
        var mousePos = sld_msCoords(ev);
        var out = CheckOut(ev);
        if(0 != out){                        
			if(1 == out){
				sliderObj.style.left = "0px";
				outInterface = 0;
			}
			else if(2 == out){
				sliderObj.style.left  = (lengthTrack-lengthSlider)+"px";
				outInterface = 1;
			}
			MethodOnMove(outInterface);
			return false;
        }
        if(sliderObj){
            var reSliderLeft = mousePos.x - slideRange.min - mouseOffset.x;
            sliderObj.style.left     = (reSliderLeft)+"px";        
            outInterface  = reSliderLeft/(lengthTrack-lengthSlider);
            MethodOnMove(outInterface);
		}
		if(trackObj || sliderObj) return false;                
	}
	var OnSlideEnd = function(ev){
		if(sliderObj||trackObj){
			sliderObj = null;
			trackObj  = null;
			iMouseDown = false;
			MethodOnUp(outInterface);
		}
	}
	var OnTrackDown = function(ev){
		var mousePos = sld_msCoords(ev);
		slider.style.left     = (mousePos.x - slideRange.min - slider.offsetWidth/2)+"px";
		ReLocate();
		outInterface = parseInt(slider.style.left.match(/(\d)+/))/(lengthTrack-lengthSlider);
		MethodOnMove(outInterface)
	};
	var ReLocate = function(){
		if(slider.style.left.indexOf("-") >= 0)
			slider.style.left     = "0px";
		else if(parseInt(slider.style.left.match(/(\d)+/)) >= (lengthTrack-lengthSlider))
			slider.style.left     = (lengthTrack-lengthSlider)+"px";                
	};
	sld_addEvent(document,"onmousemove",OnSliding);
	sld_addEvent(document,"onmouseup",OnSlideEnd);
	sld_addEvent(track,"onclick",OnTrackDown);
	sld_addEvent(window,"onload",OnLoad);
}
/**
*  usage: 
        MakeSlider(element1,element2,default_value,function(v){});
*  scope: 0-1
*  element1: the id of outter progress
*  element1: the id of inner progress
*  default_value:  default value
*  call_back(v): v is the value of the slider bettween 0-1
*/