var DragHandler = {
  //private properties:
  _scaleFactor: (SLIDER_MAX-SLIDER_MIN)/(RIDER_X_MAX-RIDER_X_MIN),
  _oElem : null,
  //public:attach drag handler to the rider
  attach:function(oElem) {
    oElem.onmousedown = DragHandler._dragBegin;
    //callback
    oElem.update_slider_val=new Function();
    return oElem;
  },
  // private method, begin drag process.
  _dragBegin : function(e) {
    var oElem = DragHandler._oElem = this;
    if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = '0px'; }
    if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = '0px'; }
    var x = parseInt(oElem.style.left);
    var y = parseInt(oElem.style.top);
    e = e ? e : window.event;
    oElem.mouseX = e.clientX;
    oElem.mouseY = e.clientY;
    //DEBUG
    //oElem.drag(oElem, DragHandler._sliderValue(x), y);
    document.onmousemove = DragHandler._drag;
    document.onmouseup = DragHandler._dragEnd;
    return false;
  },
  // private method, drag thumbPiece
  _drag : function(e) {
    var oElem = DragHandler._oElem;
    var x = parseInt(oElem.style.left);
    var y = parseInt(oElem.style.top);
    if(x>RIDER_X_MAX){
      x=RIDER_X_MAX;
      oElem.style.left = x +'px';
      DragHandler._detach();
      //DEBUG
      //oElem.drag(oElem, DragHandler._sliderValue(x), y);
      oElem.update_slider_val(DragHandler._sliderValue(x));
      return false;
    }
    if(x<RIDER_X_MIN){
      x=RIDER_X_MIN;
      oElem.style.left = x +'px';
      DragHandler._detach();
      //DEBUG
      //oElem.drag(oElem, DragHandler._sliderValue(x), y);
      oElem.update_slider_val(DragHandler._sliderValue(x));
      return false;
    }
    e = e ? e : window.event;
    oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px';
    //keep the next line for possible future modification
    //oElem.style.top = y + (e.clientY - oElem.mouseY) + 'px';
    oElem.mouseX = e.clientX;
    oElem.mouseY = e.clientY;
    //DEBUG
    //oElem.drag(oElem, DragHandler._sliderValue(x), y);
    oElem.update_slider_val(DragHandler._sliderValue(x));
    return false;
  },
  // private method: Stop drag
  _dragEnd : function() {
    var oElem = DragHandler._oElem;

    var x = parseInt(oElem.style.left);
    var y = parseInt(oElem.style.top);
    //DEBUG
    //oElem.dragEnd(oElem, x, y);

    DragHandler._detach();
    //DEBUG
    //oElem.drag(oElem, DragHandler._sliderValue(x), y);
  },
  _detach : function() {
    document.onmousemove = null;
    document.onmouseup = null;
    DragHandler._oElem = null;
  },
  _sliderValue:function(x){
    var sliderVal=SLIDER_MIN+(x-RIDER_X_MIN)*DragHandler._scaleFactor;
    return parseInt(sliderVal);
  }
};
function init_00(){
  document.getElementById("rider_00").style.left=RIDER_LEFT_OFFSET;
  document.getElementById("rider_00").style.top=RIDER_TOP_OFFSET;
  document.getElementById('sliderVal_00').innerHTML=SLIDER_MAX;
  document.getElementById('stage').style.fontSize=STAGE_FONT_SIZE;
}