var qsliders = new Hashtable();
var mslider = null;
function MSlider(id,type,from,to,cur,delta,len,sonchange) 
{ 
    this.SID = id;
    this.SType = type; //either X or Y
    this.From = from; // start point 
    this.To = to; // end point 
    this.Cur = cur; // cur point 
    this.Delta = delta; // minimum change 
    this.Len = len; // display lenth in px 
    this.Offset = 0;
    this.IsMove = false;
    this.Target = null;
    this.OnChange = sonchange;
}

// flag: for showing input field. -1 (left or bottom) 1(right or up) 0 (none)
function createSlider(id,type,from,to,cur,delta,len,flag,sonchange)
{
    var ms = new MSlider(id,type,from,to,cur,delta,len,sonchange);
    qsliders.put(ms.SID,ms);
    // create the display
    if (type == 'Y')
    {
        if (flag >0)
        {
	        document.writeln('<div class="up_holder" ><input class="s_input" id="'+id+'" name="'+id+'" type="text" value="'+cur+'" /></div>');
        }
        else if (flag == 0)
        {
	        document.writeln('<div class="up_holder"><input class="s_input" id="'+id+'" name="'+id+'" type="hidden" value="'+cur+'" />+</div>');
        }
	    document.writeln('<div class="y_track" style="height:'+(len+20)+' px">');
	    document.writeln('<div class="y_slit" style="height:'+len+ 'px">&nbsp;</div>');
	    document.writeln('<div class="y_slider" onmousedown="start(\''+id+'\')" style="top: '+Math.round((to-cur)*len/(to-from))+'px;" >&nbsp;</div>');
	    document.writeln('</div>');
        if (flag <0)
        {
	        document.writeln('<div class="s_holder"><input class="s_input" id="'+id+'" name="'+id+'" type="text" value="'+cur+'" /></div>');
        }
        else if (flag == 0)
        {
	        document.writeln('<div class="s_holder">-</div>');
        }
	    document.writeln('</div>');
    }
    else
    {
	    document.writeln('<div class="x_combo" >');
        if (flag <0)
        {
	        document.writeln('<div class="s_holder"><input class="s_input" id="'+id+'" name="'+id+'" type="text" value="'+cur+'" /></div>');
        }
        else if (flag == 0)
        {
	        document.writeln('<div class="s_holder"><input class="s_input" id="'+id+'" name="'+id+'" type="hidden" value="'+cur+'" />&minus;</div>');
        }
	    document.writeln('<div class="x_track" style="width:'+(len+20)+'px">');
	    document.writeln('<div class="x_slit" style="width:'+len+'px">&nbsp;</div>');
	    document.writeln('<div class="x_slider" onmousedown="start(\''+id+'\')" style="left: '+Math.round((cur-from)*len/(to-from))+'px;" >&nbsp;</div>');
	    document.writeln('</div>');
        if (flag >0)
        {
	        document.writeln('<div class="s_holder"><input class="s_input" id="'+id+'" name="'+id+'" type="text" value="'+cur+'" /></div>');
        }
        else if (flag == 0)
        {
	        document.writeln('<div class="s_holder">+</div>');
        }
	    document.writeln('</div>');
    }
}

// move elmnt to pos in x direction
function moveX(elmnt, pos)
{
	if (!elmnt) return;
	if (elmnt.style && (typeof(elmnt.style.left) == 'string')) 
    {
		elmnt.style.left = pos + 'px';
	}
	else if (elmnt.style && elmnt.style.pixelLeft) {
		elmnt.style.pixelLeft = pos;
	}
}

// move elmnt to pos in y direction
function moveY(elmnt, pos)
{
	if (!elmnt) return;
	if (elmnt.style && (typeof(elmnt.style.top) == 'string')) {
		elmnt.style.top = pos + 'px';
	}
	else if (elmnt.style && elmnt.style.pixelTop) {
		elmnt.style.pixelTop = pos;
	}
}

// move slider and change display while dragging
function move(evt)
{
	if (!evt) evt= window.event;
    if (!mslider)
    {
        return;
    }
    var delta = 50;

	if (mslider.IsMove) {
        var pos = 0;
        var val;
        if (mslider.SType=='Y')
        {
		    pos = evt.screenY-mslider.Offset; 
            pos = (pos<0?0:(pos>mslider.Len?mslider.Len:pos));
            moveY(otarget,pos);
            val = Math.round(mslider.To-(pos/mslider.Len)*(mslider.To-mslider.From));
        }
        else
        {
		    pos = evt.screenX-mslider.Offset; 
            pos = (pos<0?0:(pos>mslider.Len?mslider.Len:pos));
            moveX(otarget,pos);
            val = Math.round(mslider.From+(pos/mslider.Len)*(mslider.To-mslider.From));
        }
        //update the display
        var odisp = document.getElementById(mslider.SID);
        if (odisp != null)
        {
		    odisp.value = val; 
        }
	}
}

function start(sid)
{
	var evt = window.event||arguments.callee.caller.arguments[0]; 
	otarget = evt.srcElement || evt.currentTarget || evt.target;
    slider = qsliders.get(sid);
    if (!otarget || !slider)
    {
        return;
    }
    slider.Target = otarget;
    if (slider.Offset ==0)
    {
        if (slider.SType=='Y')
        {
        
            slider.Offset = evt.screenY-Math.round((slider.Cur-slider.To)*slider.Len/(slider.From-slider.To));
        }
        else
        {
            slider.Offset = evt.screenX-Math.round((slider.Cur-slider.From)*slider.Len/(slider.To-slider.From));
        }
    }
    slider.IsMove = true;
    mslider = slider;
    document.onmouseup = stop;
    document.onmousemove = move;
}

// sliderMouseUp: Handles the mouseup event after moving a slider.
// Snaps the slider position to allowed/displayed value. 
function stop(evt)
{
	if (!evt) evt= window.event;
    if (!mslider)
    {
        return;
    }

	if (mslider.IsMove) {
	    mslider.IsMove = false; 
    }
    if (mslider.OnChange.length>0)
    {
        eval(mslider.OnChange);
    }
	mslider = null; 

	if (document.removeEventListener) { // W3C.
		document.removeEventListener('mousemove', move, false);
		document.removeEventListener('mouseup', stop, false);
	}
	else if (document.detachEvent) { //IE.
		document.detachEvent('onmousemove', move);
		document.detachEvent('onmouseup', stop);
		document.releaseCapture();
	}
}