/*----------------------------------------------------------------------------\
|                                Slider 1.02                                  |
|-----------------------------------------------------------------------------|
|                         Created by Erik Arvidsson                           |
|                  (http://webfx.eae.net/contact.html#erik)                   |
|                      For WebFX (http://webfx.eae.net/)                      |
|-----------------------------------------------------------------------------|
| A  slider  control that  degrades  to an  input control  for non  supported |
| browsers.                                                                   |
|-----------------------------------------------------------------------------|
|                Copyright (c) 2002, 2003, 2006 Erik Arvidsson                |
|-----------------------------------------------------------------------------|
| Licensed under the Apache License, Version 2.0 (the "License"); you may not |
| use this file except in compliance with the License.  You may obtain a copy |
| of the License at http://www.apache.org/licenses/LICENSE-2.0                |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| Unless  required  by  applicable law or  agreed  to  in  writing,  software |
| distributed under the License is distributed on an  "AS IS" BASIS,  WITHOUT |
| WARRANTIES OR  CONDITIONS OF ANY KIND,  either express or implied.  See the |
| License  for the  specific language  governing permissions  and limitations |
| under the License.                                                          |
|-----------------------------------------------------------------------------|
| Dependencies: timer.js - an OO abstraction of timers                        |
|               range.js - provides the data model for the slider             |
|               winclassic.css or any other css file describing the look      |
|-----------------------------------------------------------------------------|
| 2002-10-14 | Original version released                                      |
| 2003-03-27 | Added a test in the constructor for missing oElement arg       |
| 2003-11-27 | Only use mousewheel when focused                               |
| 2006-05-28 | Changed license to Apache Software License 2.0.                |
|-----------------------------------------------------------------------------|
| Created 2002-10-14 | All changes are in the log above. | Updated 2006-05-28 |
\----------------------------------------------------------------------------*/

Slider.isSupported = typeof document.createElement != "undefined" &&
	typeof document.documentElement != "undefined" &&
	typeof document.documentElement.offsetWidth == "number";


function colorChanger(val, c100, c50, c0, slider, counter) {

  //alert('value: '+val+'; slider: '+slider+'; counter: '+counter);

  function cutHex(h) {
    return (h.charAt(0)=="#") ? h.substring(1,7):h
  }

  var cRed100 = parseInt((cutHex(c100)).substring(0,2),16);
  var cGreen100 = parseInt((cutHex(c100)).substring(2,4),16);
  var cBlue100 = parseInt((cutHex(c100)).substring(4,6),16);

  var cRed50 = parseInt((cutHex(c50)).substring(0,2),16);
  var cGreen50 = parseInt((cutHex(c50)).substring(2,4),16);
  var cBlue50 = parseInt((cutHex(c50)).substring(4,6),16);

  var cRed0 = parseInt((cutHex(c0)).substring(0,2),16);
  var cGreen0 = parseInt((cutHex(c0)).substring(2,4),16);
  var cBlue0 = parseInt((cutHex(c0)).substring(4,6),16);

  var cRed, cGreen, cBlue;

  if(val > 50) {

    if(cRed50 > cRed100) {
      cRed = cRed50 - cRed100;
      cRed = cRed / 100
      cRed = cRed50 - (val-50)*2*cRed;
      cRed = Math.round(cRed);
    } else {
      cRed = cRed100 - cRed50;
      cRed = cRed / 100
      cRed = cRed50 + (val-50)*2*cRed;
      cRed = Math.round(cRed);
    }

    if(cGreen50 > cGreen100) {
      cGreen = cGreen50 - cGreen100;
      cGreen = cGreen / 100;
      cGreen = cGreen50 - (val-50)*2*cGreen;
      cGreen = Math.round(cGreen);
    } else {
      cGreen = cGreen100 - cGreen50;
      cGreen = cGreen / 100;
      cGreen = cGreen50 + (val-50)*2*cGreen;
      cGreen = Math.round(cGreen);
    }

    if(cBlue50 > cBlue100) {
      cBlue = cBlue50 - cBlue100;
      cBlue = cBlue / 100;
      cBlue = cBlue50 - (val-50)*2*cBlue;
      cBlue = Math.round(cBlue);
    } else {
      cBlue = cBlue100 - cBlue50;
      cBlue = cBlue / 100;
      cBlue = cBlue50 + (val-50)*2*cBlue;
      cBlue = Math.round(cBlue);
    }

    if(document.getElementById(counter) != null && document.getElementById(slider) != null) {
      document.getElementById(counter).innerHTML = val+'%';
      document.getElementById(slider).style.backgroundColor = 'rgb('+cRed+','+cGreen+','+cBlue+')';
    }
    
  }
  else if(val < 50) {

    if(cRed50 > cRed0) {
      cRed = cRed50 - cRed0;
      cRed = cRed / 100;
      cRed = val*2*cRed + cRed0;
      cRed = Math.round(cRed);
    } else {
      cRed = cRed0 - cRed50;
      cRed = cRed / 100;
      cRed = cRed0 - val*2*cRed;
      cRed = Math.round(cRed);
    }

    if(cGreen50 > cGreen0) {
      cGreen = cGreen50 - cGreen0;
      cGreen = cGreen / 100;
      cGreen = val*2*cGreen + cGreen0;
      cGreen = Math.round(cGreen);
    } else {
      cGreen = cGreen0 - cGreen50;
      cGreen = cGreen / 100;
      cGreen = cGreen0 - val*2*cGreen;
      cGreen = Math.round(cGreen);
    }

    if(cBlue50 > cBlue0) {
      cBlue = cBlue50 - cBlue0;
      cBlue = cBlue / 100;
      cBlue = val*2*cBlue + cBlue0;
      cBlue = Math.round(cBlue);
    } else {
      cBlue = cBlue0 - cBlue50;
      cBlue = cBlue / 100;
      cBlue = cBlue0 - val*2*cBlue;
      cBlue = Math.round(cBlue);
    }
    if(document.getElementById(counter) != null && document.getElementById(slider) != null) {
      document.getElementById(counter).innerHTML = val+'%';
      document.getElementById(slider).style.backgroundColor = 'rgb('+cRed+','+cGreen+','+cBlue+')';
    }
  }
  else if(val ==  50) {
    if(document.getElementById(counter) != null && document.getElementById(slider) != null) {
      document.getElementById(counter).innerHTML = val+'%';
      document.getElementById(slider).style.backgroundColor = 'rgb('+cRed50+','+cGreen50+','+cBlue50+')';
    }
  }

}

function Slider(oElement, oInput, sOrientation) {
	if (!oElement) return;
	this._orientation = sOrientation || "horizontal";
	this._range = new Range();
	this._range.setExtent(0);
	this._blockIncrement = 10;
	this._unitIncrement = 1;
	this._timer = new Timer(100);
  this._locked = false;


	if (Slider.isSupported && oElement) {
	
	   
		this.document = oElement.ownerDocument || oElement.document;
		this.element = oElement;
		this.element.slider = this;
		this.element.unselectable = "on";

		// add class name tag to class name
		this.element.className = this._orientation + " " + this.classNameTag + " " + this.element.className;
		

		// create line
    this.rate = this.document.createElement("DIV");
    this.rate.className = 'rateCount';
    this.rate.id = this.element.id+'-rateCount';
    this.rate.innerHTML = '50%';
    // this.element.appendChild(this.rate);

		this.line = this.document.createElement("DIV");
		this.line.className = "line";
    this.line.id = this.element.id+"-bgc";
    this.line.name = "line";
		this.line.unselectable = "on";
		this.line.appendChild(this.rate);
		this.line.appendChild(this.document.createElement("DIV"));
		this.line.style.zIndex = '1';
		this.line.style.backgroundColor = 'rgb(241, 234, 34)';
    this.element.appendChild(this.line);
		
		this.ele = this.document.createElement("DIV");
		this.ele.className = 'overlay';
    this.ele.id = this.element.id+"-overlay";
    this.element.appendChild(this.ele);
    
		// create handle
		this.handle = this.document.createElement("DIV");
		this.handle.className = "handle";
		this.handle.unselectable = "on";
		this.handle.style.zIndex = '99';
		this.handle.style.cursor = 'e-resize';
		this.handle.appendChild(this.document.createElement("DIV"));
		this.handle.firstChild.appendChild(
		this.document.createTextNode(String.fromCharCode(160)));
    this.element.appendChild(this.handle);
	}

	this.input = oInput;

	// events
	var oThis = this;
	this._range.onchange = function () {
		oThis.recalculate();
		if (typeof oThis.onchange == "function")
			oThis.onchange();
	};

	if (Slider.isSupported && oElement) {
	
		this.element.onfocus		= Slider.eventHandlers.onfocus;
		this.element.onblur			= Slider.eventHandlers.onblur;
		this.element.onmousedown	= Slider.eventHandlers.onmousedown;
		this.element.onmouseover	= Slider.eventHandlers.onmouseover;
		this.element.onmouseout		= Slider.eventHandlers.onmouseout;
		this.element.onkeydown		= Slider.eventHandlers.onkeydown;
		this.element.onkeypress		= Slider.eventHandlers.onkeypress;
		this.element.onmousewheel	= Slider.eventHandlers.onmousewheel;
		this.handle.onselectstart	=
		this.element.onselectstart	= function () {return false;};

		this._timer.ontimer = function () {
			oThis.ontimer();
		};

		// extra recalculate for ie
		window.setTimeout(function() {
			oThis.recalculate();
		}, 1);
	}
	else {
		this.input.onchange = function (e) {
			oThis.setValue(oThis.input.value);
		};
	}
}

Slider.eventHandlers = {

	// helpers to make events a bit easier
	getEvent:	function (e, el) {
		if (!e) {
			if (el)
				e = el.document.parentWindow.event;
			else
				e = window.event;
		}
		if (!e.srcElement) {
			var el = e.target;
			while (el != null && el.nodeType != 1)
				el = el.parentNode;
			e.srcElement = el;
		}
		if (typeof e.offsetX == "undefined") {
			e.offsetX = e.layerX;
			e.offsetY = e.layerY;
		}

		return e;
	},

	getDocument:	function (e) {
		if (e.target)
			return e.target.ownerDocument;
		return e.srcElement.document;
	},

	getSlider:	function (e) {
		var el = e.target || e.srcElement;
		while (el != null && el.slider == null)	{
			el = el.parentNode;
		}
		if (el)
			return el.slider;
		return null;
	},

	getLine:	function (e) {
		var el = e.target || e.srcElement;
		while (el != null && el.className != "line")	{
			el = el.parentNode;
		}
		return el;
	},

	getHandle:	function (e) {
		var el = e.target || e.srcElement;
		var re = /handle/;
		while (el != null && !re.test(el.className))	{
			el = el.parentNode;
		}
		return el;
	},
	// end helpers

	onfocus:	function (e) {
		var s = this.slider;
		s._focused = true;
		s.handle.className = "handle hover";
	},

	onblur:	function (e) {
		var s = this.slider
		s._focused = false;
		s.handle.className = "handle";		
	},

	onmouseover:	function (e) {
		/*e = Slider.eventHandlers.getEvent(e, this);
		var s = this.slider;
		if (e.srcElement == s.handle)
			s.handle.className = "handle hover";*/
	},

	onmouseout:	function (e) {
		/*e = Slider.eventHandlers.getEvent(e, this);
		var s = this.slider;
		if (e.srcElement == s.handle && !s._focused)
			s.handle.className = "handle";*/
	},

	onmousedown:	function (e) {
		e = Slider.eventHandlers.getEvent(e, this);
		var s = this.slider;
    
		if(s.element.focus) {
			s.element.focus();

      Slider._currentInstance = s;
      var doc = s.document;

      s = Slider._currentInstance;
    }
    if(s._locked != true) {

		if(doc.addEventListener) {
			doc.addEventListener("mousemove", Slider.eventHandlers.onmousemove, true);
			doc.addEventListener("mouseup", Slider.eventHandlers.onmouseup, true);
		}
		else if(doc.attachEvent) {
			doc.attachEvent("onmousemove", Slider.eventHandlers.onmousemove);
			doc.attachEvent("onmouseup", Slider.eventHandlers.onmouseup);
			doc.attachEvent("onlosecapture", Slider.eventHandlers.onmouseup);
			s.element.setCapture();
		}

		if(Slider.eventHandlers.getHandle(e)) {	// start drag
			Slider._sliderDragData = {
				screenX:	e.screenX,
				screenY:	e.screenY,
				dx:			e.screenX - s.handle.offsetLeft,
				dy:			e.screenY - s.handle.offsetTop,
				startValue:	s.getValue(),
				slider:		s
			};
		}
		else {
			var lineEl = Slider.eventHandlers.getLine(e);
			s._mouseX = e.offsetX + (lineEl ? s.line.offsetLeft : 0);
			s._mouseY = e.offsetY + (lineEl ? s.line.offsetTop : 0);
			s._increasing = null;
			s.ontimer();
		}

                }
	},

	onmousemove:	function (e) {

    var s = Slider._currentInstance;
	  var val = s.getValue();
	  var el = e.target || e.srcElement;
	  var ele = el.parentNode.firstChild;
    var slide = el.parentNode.id+"-bgc";
    var count = el.parentNode.id+"-rateCount";

    if(s._locked != true) {
      if(el.parentNode.id) {
        if(Slider._sliderDragData) {	// drag
          s = Slider._sliderDragData.slider;
          var boundSize = s.getMaximum() - s.getMinimum();
          var size, pos, reset;

          if(s._orientation == "horizontal") {
            size = s.element.offsetWidth - s.handle.offsetWidth;
            pos = e.screenX - Slider._sliderDragData.dx;
            reset = Math.abs(e.screenY - Slider._sliderDragData.screenY) > 10;
          }
          else {
            size = s.element.offsetHeight - s.handle.offsetHeight;
            pos = s.element.offsetHeight - s.handle.offsetHeight -
              (e.screenY - Slider._sliderDragData.dy);
            reset = Math.abs(e.screenX - Slider._sliderDragData.screenX) > 5;
          }
          var value = Math.round(s.getMinimum() + boundSize * pos / size);
          s.setValue(reset ? Slider._sliderDragData.startValue : value);
              //alert(value);

          if(!reset) {
            if(value <= 100 && value >= 0) {
            colorChanger(value, '#71d751', '#f1ea22', '#d11010', slide, count);
            }
          }

          return false;
        }
        else {
          s = Slider._currentInstance;
          if (s != null) {
            var lineEl = Slider.eventHandlers.getLine(e);
            s._mouseX = e.offsetX + (lineEl ? s.line.offsetLeft : 0);
            s._mouseY = e.offsetY + (lineEl ? s.line.offsetTop : 0);
          }
        }
      }
  }

	},

	onmouseup:	function (e) {
	 
	  var s = Slider._currentInstance;
	  var el = e.target || e.srcElement;
	  var ele = el.parentNode.firstChild;
	  var val = s.getValue();
    var nVal = (val*2)+'px';
    var slide = el.parentNode.id+"-bgc";
    var count = el.parentNode.id+"-rateCount";

    //alert(val);

	  for(var i = 0; i <= 3; i++) {
      if(ele != null) 
        ele = ele.nextSibling;
    }
    
    if(ele != null && ele.className == 'overlay') {
      ele.style.width = nVal;
    } else {
      if(val == 100) {
        s.ele.style.width = '200px';
      } else if(val == 0) {
        s.ele.style.width = '0px';
      } else {
        s.ele.style.width = nVal;
      }
      
    }
    
    /*if(ele != null) 
      ele.style.width = nVal;
		else {
      if(val == 100) 
        s.ele.style.width = '200px';	
      else if(val == 0)
        s.ele.style.width = '0px';
      else
        s.ele.style.width = nVal;		
		}*/
		
    e = Slider.eventHandlers.getEvent(e, this);
		s = Slider._currentInstance;
		var doc = s.document;
		if(doc.removeEventListener) {
			doc.removeEventListener("mousemove", Slider.eventHandlers.onmousemove, true);
			doc.removeEventListener("mouseup", Slider.eventHandlers.onmouseup, true);
		}
		else if(doc.detachEvent) {
			doc.detachEvent("onmousemove", Slider.eventHandlers.onmousemove);
			doc.detachEvent("onmouseup", Slider.eventHandlers.onmouseup);
			doc.detachEvent("onlosecapture", Slider.eventHandlers.onmouseup);
			s.element.releaseCapture();
		} else {
       colorChanger(val, '#71d751', '#f1ea22', '#d11010', slide, count);
    }

		if(Slider._sliderDragData) {	// end drag
			Slider._sliderDragData = null;
		}
		else {
			s._timer.stop();
			s._increasing = null;
		}
		Slider._currentInstance = null;
	},

	onkeydown:	function (e) {
		e = Slider.eventHandlers.getEvent(e, this);
		//var s = Slider.eventHandlers.getSlider(e);
		var s = this.slider;
		var kc = e.keyCode;
		switch (kc) {
			case 33:	// page up
				s.setValue(s.getValue() + s.getBlockIncrement());
				break;
			case 34:	// page down
				s.setValue(s.getValue() - s.getBlockIncrement());
				break;
			case 35:	// end
				s.setValue(s.getOrientation() == "horizontal" ?
					s.getMaximum() :
					s.getMinimum());
				break;
			case 36:	// home
				s.setValue(s.getOrientation() == "horizontal" ?
					s.getMinimum() :
					s.getMaximum());
				break;
			case 38:	// up
			case 39:	// right
				s.setValue(s.getValue() + s.getUnitIncrement());
				break;

			case 37:	// left
			case 40:	// down
				s.setValue(s.getValue() - s.getUnitIncrement());
				break;
		}

		if (kc >= 33 && kc <= 40) {
			return false;
		}
	},

	onkeypress:	function (e) {
		e = Slider.eventHandlers.getEvent(e, this);
		var kc = e.keyCode;
		if (kc >= 33 && kc <= 40) {
			return false;
		}
	},

	onmousewheel:	function (e) {
		e = Slider.eventHandlers.getEvent(e, this);
		var s = this.slider;
		if (s._focused) {
			s.setValue(s.getValue() + e.wheelDelta / 120 * s.getUnitIncrement());
			// windows inverts this on horizontal sliders. That does not
			// make sense to me
			return false;
		}
	}
};



Slider.prototype.classNameTag = "dynamic-slider-control",

Slider.prototype.setValue = function (v) {
	this._range.setValue(v);
	this.input.value = this.getValue();
	if(v <= 100)
    this.ele.style.width = (v*2) + 'px';
};

Slider.prototype.setLocked = function (v) {
	this._locked = v;
};

Slider.prototype.greyOut = function () {
  if(this.ele.className == "overlay_dea") {
    this.ele.className = "overlay";
    var greyBg = this.ele.parentNode.id;
    document.getElementById(greyBg+'-bgc').style.backgroundColor = 'rgb(241, 234, 34)';
    //this.handle.className = "handle";
  } else {
    this.ele.className = "overlay_dea";
    var greyBg = this.ele.parentNode.id;
    document.getElementById(greyBg+'-bgc').style.backgroundColor = 'rgb(128, 128, 128)';
    //this.handle.className = "handle_dea";
  }
};

Slider.prototype.getValue = function () {
	return this._range.getValue();
};

Slider.prototype.setMinimum = function (v) {
	this._range.setMinimum(v);
	this.input.value = this.getValue();
};

Slider.prototype.getMinimum = function () {
	return this._range.getMinimum();
};

Slider.prototype.setMaximum = function (v) {
	this._range.setMaximum(v);
	this.input.value = this.getValue();
};

Slider.prototype.getMaximum = function () {
	return this._range.getMaximum();
};

Slider.prototype.setUnitIncrement = function (v) {
	this._unitIncrement = v;
};

Slider.prototype.getUnitIncrement = function () {
	return this._unitIncrement;
};

Slider.prototype.setBlockIncrement = function (v) {
	this._blockIncrement = v;
};

Slider.prototype.getBlockIncrement = function () {
	return this._blockIncrement;
};

Slider.prototype.getOrientation = function () {
	return this._orientation;
};

Slider.prototype.setOrientation = function (sOrientation) {
	if (sOrientation != this._orientation) {
		if (Slider.isSupported && this.element) {
			// add class name tag to class name
			this.element.className = this.element.className.replace(this._orientation,
									sOrientation);
		}
		this._orientation = sOrientation;
		this.recalculate();

	}
};

Slider.prototype.recalculate = function() {
	if (!Slider.isSupported || !this.element) return;

	var w = this.element.offsetWidth;
	var h = this.element.offsetHeight;
	var hw = this.handle.offsetWidth;
	var hh = this.handle.offsetHeight;
	var lw = this.line.offsetWidth;
	var lh = this.line.offsetHeight;

	// this assumes a border-box layout

	if (this._orientation == "horizontal") {
		this.handle.style.left = (w - hw) * (this.getValue() - this.getMinimum()) /
			(this.getMaximum() - this.getMinimum()) + "px";
		this.handle.style.top = (h - hh) / 2 + "px";

		this.line.style.top = (h - lh) / 2 + "px";
		this.line.style.left = hw / 2 + "px";
		//this.line.style.right = hw / 2 + "px";
		this.line.style.width = Math.max(0, w - hw - 2) + "px";
		//this.line.firstChild.style.width = Math.max(0, w - hw - 4)+ "px";
	}
	else {
		this.handle.style.left = (w - hw) / 2 + "px";
		this.handle.style.top = h - hh - (h - hh) * (this.getValue() - this.getMinimum()) /
			(this.getMaximum() - this.getMinimum()) + "px";

		this.line.style.left = (w - lw) / 2 + "px";
		this.line.style.top = hh / 2 + "px";
		this.line.style.height = Math.max(0, h - hh - 2) + "px";	//hard coded border width
		//this.line.style.bottom = hh / 2 + "px";
		this.line.firstChild.style.height = Math.max(0, h - hh - 4) + "px";	//hard coded border width
	}
};

Slider.prototype.ontimer = function () {
	var hw = this.handle.offsetWidth;
	var hh = this.handle.offsetHeight;
	var hl = this.handle.offsetLeft;
	var ht = this.handle.offsetTop;

	if (this._orientation == "horizontal") {
		if (this._mouseX > hl + hw &&
			(this._increasing == null || this._increasing)) {
			this.setValue(this.getValue() + this.getBlockIncrement());
			this._increasing = true;
		}
		else if (this._mouseX < hl &&
			(this._increasing == null || !this._increasing)) {
			this.setValue(this.getValue() - this.getBlockIncrement());
			this._increasing = false;
		}
	}
	else {
		if (this._mouseY > ht + hh &&
			(this._increasing == null || !this._increasing)) {
			this.setValue(this.getValue() - this.getBlockIncrement());
			this._increasing = false;
		}
		else if (this._mouseY < ht &&
			(this._increasing == null || this._increasing)) {
			this.setValue(this.getValue() + this.getBlockIncrement());
			this._increasing = true;
		}
	}

	this._timer.start();
};