var Slider = function(element, input) {
    this.echo = document.getElementById('echo'); // temp, for debug
    this.element = element;
    this.input = input;
    this.slider = document.getElementById('sliderbar');
    this.sliderwidth = getWidth(element)-4;
    this.init();
}

Slider.prototype.init = function() {
    // register events for the slider element
    
    slider.onmousedown = this.start_drag;
    slider.onmouseup = this.stop_drag;
    var tags = slider.getElementsByTagName('*');
    for (i=0; i<tags.length; i++) {
        tags[i].onmousedown = this.start_drag;
    }
}

Slider.prototype.start_drag = function(event) {
    window.slider.element.onmousemove = window.slider.update_slider;
    window.slider.update_slider(event);
}

Slider.prototype.stop_drag = function() {
    window.slider.element.onmousemove = null;
}


Slider.prototype.update_slider = function(event, called) {
    if (called) {
        var percent = document.getElementById('participants').value;
        var margin = ((percent/100)*window.slider.sliderwidth)-20;
        window.slider.echo.style.marginLeft = margin+'px';
        window.slider.echo.innerHTML = percent;
        window.slider.slider.style.marginLeft = margin+20;
        blink('bsubmit');
    } else {
        var x = getRelativeCoordinates(event, window.slider.element).x;
        if (x > 0 && x < window.slider.sliderwidth) {
            window.slider.slider.style.marginLeft = x-2;
            var percent = Math.round((x/window.slider.sliderwidth)*100);
            window.slider.echo.innerHTML = percent;
            window.slider.echo.style.marginLeft = (x-20)+'px';
            window.slider.input.value = percent;
        }
        window.slider.slider.onmouseup = blink;
    }
}




function getWidth (element) {  
    //document.getElementById(id).style.width="auto";
    // match box models
    if (document.all) {
        gh = element.offsetWidth+10;
    }
    else {
        gh = element.offsetWidth;
    }
    //alert (gh)
    return gh;
}

/**
* Retrieve the coordinates of the given event relative to the center
* of the widget.
*
* @param event
*  A mouse-related DOM event.
* @param reference
*  A DOM element whose position we want to transform the mouse coordinates to.
* @return
*    A hash containing keys 'x' and 'y'.
*/
function getRelativeCoordinates(event, reference) {
var x, y;
event = event || window.event;
var el = event.target || event.srcElement;
if (!window.opera && typeof event.offsetX != 'undefined') {
  // Use offset coordinates and find common offsetParent
  var pos = { x: event.offsetX, y: event.offsetY };
  // Send the coordinates upwards through the offsetParent chain.
  var e = el;
  while (e) {
    e.mouseX = pos.x;
    e.mouseY = pos.y;
    pos.x += e.offsetLeft;
    pos.y += e.offsetTop;
    e = e.offsetParent;
  }
  // Look for the coordinates starting from the reference element.
  var e = reference;
  var offset = { x: 0, y: 0 }
  while (e) {
    if (typeof e.mouseX != 'undefined') {
      x = e.mouseX - offset.x;
      y = e.mouseY - offset.y;
      break;
    }
    offset.x += e.offsetLeft;
    offset.y += e.offsetTop;
    e = e.offsetParent;
  }
  // Reset stored coordinates
  e = el;
  while (e) {
    e.mouseX = undefined;
    e.mouseY = undefined;
    e = e.offsetParent;
  }
}
else {
  // Use absolute coordinates
  var pos = getAbsolutePosition(reference);
  x = event.pageX  - pos.x;
  y = event.pageY - pos.y;
}
// Subtract distance to middle
return { x: x, y: y };
}

function getAbsolutePosition(element) {
    var r = { x: element.offsetLeft, y: element.offsetTop };
    if (element.offsetParent) {
      var tmp = getAbsolutePosition(element.offsetParent);
      r.x += tmp.x;
      r.y += tmp.y;
    }
    return r;
  };