/*
    Mike West - http://mikewest.org/
    Released under a CC license - http://creativecommons.org/licenses/by/2.0/
*/

function handleEvent(obj, event, func) {

 try {

  obj.addEventListener(event, func, false);

 } catch(e) {

  if (typeof eval("obj.on" + event) == "function") {

   var existing = obj['on' + event];

   obj['on' + event] = function () { existing(); func(); };

  } else { obj['on' + event] = func; }
 }
}

function findPosX(obj) {

 if (!obj) { return; }

 var curleft = 0;

 if (obj.offsetParent) {

  while (obj.offsetParent) {

   curleft += obj.offsetLeft
   obj = obj.offsetParent;
  }
 } else if (obj.x) { curleft += obj.x; }

 return curleft;
}

function SliderSelect(selectName, selectDesign) {

 var self = this;

 self.instantiate = function() {

  var allSelects = document.getElementsByTagName('select');

  for (var i = allSelects.length - 1; i >= 0; i--) {

   if (allSelects[i].getAttribute('name') == selectName) {

    if (allSelects[i].getAttribute('title') == "slider") {

     self.slidify(allSelects[i]);
    }
   }
  }
 }

 self.slidify = function(selectBox) {

  var selectBoxWidth = selectBox.offsetWidth;
  var containerDiv = document.createElement('div');

  containerDiv.className = "slidercontainer_" + selectDesign;
  containerDiv.style.width = selectBoxWidth + "px";

  var theGutter = document.createElement('div');

  theGutter.className = "gutter_" + selectDesign;
  theGutter.options = selectBox.options;
  theGutter.numOptions = selectBox.options.length;
  theGutter.optionDistance = Math.round(selectBoxWidth / (theGutter.numOptions - 1));
  theGutter.defaultOption = (selectBox.selectedIndex) ? selectBox.selectedIndex : 0;

  var worstName = selectBox.options[0].name;
  var bestName = selectBox.options[theGutter.numOptions - 1].name;

  var theSlider = document.createElement('span');

  theSlider.className = "slider_" + selectDesign;;

  var theInput = document.createElement('input');

  theInput.id = selectBox.id;
  theInput.name = selectBox.name;
  theInput.holder = selectBox.name + '_holder';
  theInput.type = "hidden";
  theInput.value = selectBox.options[theGutter.defaultOption].value;

  theGutter.appendChild(theSlider);

  var placeholder = document.createElement('span');

  placeholder.className = "placeholder_" + selectDesign;
  theGutter.appendChild(placeholder);

  for (i = 1; i < theGutter.numOptions; i++) {

   var placeholder = document.createElement('span');

   placeholder.className = "placeholder_" + selectDesign;
   placeholder.style.left = Math.min(selectBoxWidth, (i * theGutter.optionDistance)) + "px";

   theGutter.appendChild(placeholder);
  }

  containerDiv.appendChild(theGutter);
  containerDiv.appendChild(theInput);

  self.theInput = theInput;

  handleEvent(theGutter, "mousedown", self.registerSlider);
  handleEvent(theGutter, "mouseup", self.unregisterSlider);

  selectBox.parentNode.replaceChild(containerDiv, selectBox);
  theSlider.style.left = (Math.min(selectBoxWidth, (theGutter.defaultOption * theGutter.optionDistance)) - Math.floor(theSlider.offsetWidth / 2)) + "px";
 }

 self.registerSlider = function(e) {

  if (!e) e = window.event;

  if (self.activeGutter) {

   self.activeGutter.onmousemove = null;
  }

  self.activeGutter = this;
  self.activeSlider = this.childNodes[0];
  self.activeInput = this.parentNode.childNodes[1];

  handleEvent(document, "mousemove", self.mousemove);
  handleEvent(document, "mouseup", self.unregisterSlider);

  self.mousemove(e);
  e.cancelBubble = true;

  return false;
 }

 self.unregisterSlider = function(e) {

  if (!self.activeGutter) { return; }

  self.activeSlider.style.left = (Math.min(self.activeGutter.offsetWidth, (self.activeGutter.optionNum * self.activeGutter.optionDistance)) - Math.floor(self.activeSlider.offsetWidth / 2)) + "px";
  self.activeInput.value = self.activeGutter.options[self.activeGutter.optionNum].value;

  document.getElementById(self.theInput.holder).innerHTML = self.activeGutter.options[self.activeGutter.optionNum].text;

  document.onmousemove = null;

  self.activeGutter = null;
  self.activeSlider = null;
 }

 self.mousemove = function(e) {

  if (!e) {

   e = window.event;
   e.returnValue = false;
  }

  if (!self.activeGutter) { return; }

  self.offset = Math.min(

   Math.max(0, (e.clientX - findPosX(self.activeGutter))),
   self.activeGutter.offsetWidth
  );

  var currentPos = self.offset;
  var snapTo = currentPos % self.activeGutter.optionDistance;

  self.activeGutter.optionNum = Math.round(currentPos / self.activeGutter.optionDistance);

  if (snapTo <= 10) {

   currentPos = currentPos - snapTo;

  } else if (self.activeGutter.optionDistance - snapTo <= 10) {

   currentPos = Math.min(self.activeGutter.offsetWidth, currentPos + (self.activeGutter.optionDistance - snapTo));
  }

  self.activeSlider.style.left = (currentPos - Math.floor(self.activeSlider.offsetWidth / 2)) + "px";
 }

 handleEvent(window, "load", self.instantiate);
}