//return interger (0~infinite)
String.prototype.toInt=function(){;  var r, re;    re = /[^0-9]/g;   r ="0" +  this.replace(re, "");return(parseInt(r)); };


function init_slidebar()
{
	var s = document.getElementsByTagName("span") ;	
	for(var i=0;i<s.length;i++)
	{ if(s[i].className == "y-slidebar"){ render_slidebar(s[i]);};}
}

function render_slidebar(el)
{ 
	render_slidebar.id = render_slidebar.id || 0;
	render_slidebar.id++;

	var input = el.getElementsByTagName("input") ;	
	if(input.length!=1){return;};
	input = input[0];
	if(input.type.toLowerCase() != "text"){;return;}

	input.style.cssText="position:absolute;top:100px;zzdisplay:znone;";
	input.style.display="none";
	el.id  = (el.id =="" || el.id ==null)?("render_slidebar_" + render_slidebar.id ) :el.id ;
	el.className = "y-slidebar_ui";
	
	var d = document.createElement("div");
	var h ="";
	h +="<img class=slidebar_inline_block />"; 
	h +="<div class=slidebar_block>"; 
	h +="<div id="+el.id+"_track  class=slidebar_track></div>"; 
	h +="<div id="+el.id+"_stick  class=slidebar_stick></dv>";
	h +="</div>" ; 
	
    el.m = setTimeout("void(0)",0);
	el.innerHTML = h;
	el.appendChild(input);
	el.stick = document.getElementById(el.id + "_stick");
	el.input= input;

	el.setvalue = setvalue_slidebar;
	el.onmousedown = startmove_slidebar;
	el.setvalue(el.input.value);
}

function setvalue_slidebar(v)
{
 v = (v=="")?0:v;
 var el = this;
 var ex = ( el.offsetWidth  - el.stick.offsetWidth )/100  * parseInt(v)  ;
      ex =  Math.round(ex);
	  if(el.stick.style.left==""){el.stick.style.left = 0;}

	 
	  if(el.gogogo== null)
	  {
		  clearTimeout(el.m);
		  el.gogogo = function()
		  { 
			var px =  parseInt(el.stick.style.left)
			if( Math.abs(ex-px) > 1 )
			{
			  px = Math.ceil( px + (ex-px)/5 );
			  el.stick.style.left = px + "px";
			  el.m = setTimeout(el.gogogo,10);
			}
			else{el.stick.style.left = ex + "px";}
		  }
		  el.m = setTimeout(el.gogogo,0);
	  }else
	  {

		el.stick.style.left = ex + "px"; clearTimeout(el.m);
	  }
}

function startmove_slidebar(e)
{ 
 var el = this;
 if(el.setCapture){el.setCapture();};
 clearTimeout(el.m);
 e = e || window.event;
 move_slidebar.target = this;
 el.stick.className = "slidebar_stick on";
 addEvent(document,"mousemove",move_slidebar);
 addEvent(document,"mouseup",endmove_slidebar);
 move_slidebar(e);
}

function endmove_slidebar(e)
{ 
 if(move_slidebar.target.releaseCapture){move_slidebar.target.releaseCapture();};
 move_slidebar.target.stick.className = "slidebar_stick";
 move_slidebar.target = null ;
 removeEvent(document,"mousemove",move_slidebar);
 removeEvent(document,"mouseup",endmove_slidebar);
}

function move_slidebar(e)
{ 
	var el = move_slidebar.target;
	if(el)
	{
		var ex = e.clientX - realPosition(el).x - el.stick.offsetWidth/2;
		ex = Math.max(0,ex);
		ex = Math.min( (el.offsetWidth - el.stick.offsetWidth) ,ex);
		el.stick.style.left = ex +"px";
		var v = ( ex / ( el.offsetWidth - el.stick.offsetWidth)  ) *100;
		el.stick.style.left = ex + "px";
		el.input.value = Math.round(v);
		if(el.input.onchange){el.input.onchange();}

	    el.title = el.input.value;

	}
	return false;
}


//compatible codes//
function addEvent(obj, evType, fn){ 
if (obj.addEventListener){  obj.addEventListener(evType, fn, false);  return true; }
else if (obj.attachEvent){   var r = obj.attachEvent("on"+evType, fn);    return r; }
else { return false; } 
}

function removeEvent(obj, evType, fn){ 
if (obj.removeEventListener ){  obj.removeEventListener(evType, fn, false);  return true; }
else if (obj.detachEvent){   var r = obj.detachEvent("on"+evType, fn);    return r; }
else { return false; } 
}




function realPosition(el)
{
 var d = new Object();
 if(el.getBoundingClientRect)
	{       
	   d.x = el.getBoundingClientRect().left + Math.max(document.body.scrollTop, document.documentElement.scrollTop);
	   d.y = el.getBoundingClientRect().top + Math.max(document.body.scrollLeft, document.documentElement.scrollLeft);
	   d.w = el.getBoundingClientRect().right - el.getBoundingClientRect().left;
	   d.h =  el.getBoundingClientRect().bottom - el.getBoundingClientRect().top;

	}
	else if(document.getBoxObjectFor)
	{
       d.x = document.getBoxObjectFor(el).x;
	   d.y =  document.getBoxObjectFor(el).y;
	   d.w = document.getBoxObjectFor(el).width;
	   d.h = document.getBoxObjectFor(el).height;
	}
	else
	{
       d.x = offsetBy.call(el, null, 'Left');
	   d.y = offsetBy.call(el, null, 'Top');
	   d.w = el.offsetWidth;
	   d.h = el.offsetHeight;
	}
	return d;
}

function offsetBy(el, type) {
  if (this===el) return 0;
  var v=999, owner=this, border='client'+type;
  type = 'offset'+type;
  do {
    v += owner[type];
  } while ((owner=owner.offsetParent) && owner!==el && (v+=owner[border]))
  return v-999;
}

init_slidebar();