var MakeDragSlider = function (el, options) {
  
  options = options || {};
  var knob_width = options.knob_width || 15;
  var height = options.height || 20;
  var slider_value = options.default_value || 0;
  var ondrag = options.ondrag || function() {};
  var ondrop = options.ondrop || function() {};
  var draggable = options.draggable !== false;
  var dragging_slider = false;
  var slider_tray, slider_bar, slider_knob;

  var setup = function() {
    slider_tray = (typeof el == 'string' ? $(el) : el);
    slider_bar = document.createElement('div');
    slider_knob = document.createElement('div');

    slider_tray.style.height = height + 'px';
    slider_bar.style.height = height + 'px';
    slider_knob.style.height = height + 'px';

    slider_tray.style.position = 'relative';
    slider_bar.style.position = 'relative';
    slider_knob.style.position = 'absolute';
    slider_knob.style.width = knob_width + 'px';
    slider_knob.style.right = knob_width / -2 + 'px';
        
    slider_tray.className = 'dragSliderTray';
    slider_bar.className = 'dragSliderBar';
    slider_knob.className = 'dragSliderKnob';
    
    slider_tray.appendChild(slider_bar);
    slider_bar.appendChild(slider_knob);
    
    update_slider();
    
    if(!draggable) return;

    slider_knob.style.cursor = 'pointer';
    
    slider_bar.onclick = function(){return false};
    slider_knob.onclick = function(){return false};
    slider_tray.onmousedown = drag_slider;
    slider_knob.onmousedown = function(){return false};
    addEvent(document, 'mouseup', drop_slider);
    addEvent(slider_tray, 'mouseup', drop_slider);
  }
  
  var drag_slider = function(e) {
    e = e || window.event;
    
    if(!dragging_slider) {
      addEvent(document, 'mousemove', drag_slider);
      dragging_slider = true;
    }
    
    var pos = Math.max(e.clientX - findPos(slider_tray), 0);
    slider_value = Math.min(pos / slider_tray.offsetWidth, 1);
    ondrag(slider_value);
    update_slider();
    
    if(document.selection) document.selection.empty();
  	return false;
  }

  var drop_slider = function(e) {
    ondrop(slider_value);
    removeEvent(document, 'mousemove', drag_slider);
    dragging_slider = false;
  }

  var update_slider = function() {
    slider_bar.style.width = slider_value * 100 + '%';
  }

  function $(e) {return document.getElementById(e);}

  // from http://ejohn.org/projects/flexible-javascript-events/
  function addEvent(obj, type, fn) {
    if(obj.attachEvent) {
      obj['e'+type+fn] = fn;
      obj[type+fn] = function(){obj['e'+type+fn](window.event);}
      obj.attachEvent('on'+type, obj[type+fn]);
    } else obj.addEventListener(type, fn, false);
  }
  function removeEvent(obj, type, fn) {
    if(obj.detachEvent) {
      try {
        obj.detachEvent('on'+type, obj[type+fn]);
        obj[type+fn] = null;
      } catch(e){}
    } else obj.removeEventListener(type, fn, false);
  }

  // modified from from http://www.quirksmode.org/js/findpos.html
  function findPos(obj) {
  	var curleft = 0;
  	if(obj.offsetParent)
  		do curleft += obj.offsetLeft; while (obj = obj.offsetParent);
  	return curleft;
  }

  addEvent(window, 'load', setup);
  return {
    value: function(v) {if(v) slider_value=v;update_slider();return slider_value;}
  }
};