/**********
*
*		(c) AlwinBlok 2004-2007, The Netherlands
*
**********/
events = {};
events.compatHandler = function(fn){
	return function(evt){
		var evt = evt||window.event||{};
		if(!evt.layerX) evt.layerX = evt.x;
		if(!evt.type) evt.type = type;
		if(!evt.target && evt.srcElement) evt.target = evt.srcElement;
	  if(typeof evt.preventDefault == 'function') evt.preventDefault();
		else {
			evt.returnValue = false;
			evt.cancelBubble = true;
		}
		fn(evt);
		return false;
	}
}
/********
*
*   domQuery - utility functions for querying the dom
*
********/

domQuery = {}

domQuery.ufValue = function(elem){
	if(!elem) return null;
	var tagName = elem.tagName;
	return (tagName == 'INPUT' ? elem.value : (tagName == 'ABBR' || tagName == 'HTML:ABBR') ? elem.title : elem.innerHTML);
}

domQuery.elementHasClass = function(elem, classn){
	return (new String(' '+elem.className+' ').search(' '+classn+' ') > -1);
}

domQuery.getChildNodesByClass = function(elem, classn){
	var children = elem.childNodes;
	var result = [];
	for(var i=0; i<children.length; i++){
		if(domQuery.elementHasClass(children[i], classn)) result.push(children[i])
		result = result.concat(domQuery.getChildNodesByClass(children[i], classn))
	}
	return result
}

domQuery.getComputedProperty = function(elem, prop){
  var computedStyle = (typeof(elem.currentStyle) != 'undefined') ? elem.currentStyle :
		document.defaultView.getComputedStyle(elem, null);
  return computedStyle[prop];
}

/********
*
*   Slider
*
********/

function Slider(elem){
	// dom refs
	this.input = domQuery.getChildNodesByClass(elem, 'value').pop()
	this.track = document.createElement('div');
	this.handle = document.createElement('a');
	// object values
	this.value = parseFloat(domQuery.ufValue(this.input))
	this.min = parseFloat(domQuery.ufValue(domQuery.getChildNodesByClass(elem, 'min').pop()))
	this.max = parseFloat(domQuery.ufValue(domQuery.getChildNodesByClass(elem, 'max').pop()))
	// dom setup
	this.track.className = 'slider-track'
	this.handle.className = 'slider-handle'
	elem.style.position = 'relative'
	elem.appendChild(this.track)
	elem.appendChild(this.handle)
	// initialization and event-handlers
	this.setValue(this.value);
	this.setupEventHandlers(elem)
}

Slider.prototype.setupEventHandlers = function(elem){
	var me = this
	var currentPosition = 0;

	var setValuePx = events.compatHandler(function(e){
		var width = parseFloat(domQuery.getComputedProperty(elem, 'width'))
		var x = (e.target == elem) ? e.layerX : (e.clientX - currentPosition);
		me.setValue(me.min+((me.max-me.min)*(x/width)))
		if(typeof(me.onchange) == 'function') me.onchange();
	})

	elem.onmousedown = events.compatHandler(function(e){
		var onmousemove = (document.all) ? 'onmouseover' : 'onmousemove'
		document[onmousemove] = setValuePx;
		currentPosition = (e.clientX - e.layerX);
		document.onmouseup = function(){ document[onmousemove] = null }
	})

	// prevent IE from selecting the handle IE
	this.handle.onselectstart = events.compatHandler(function(){});
	this.handle.onselect = events.compatHandler(function(){});

	elem.onclick = setValuePx;
}


Slider.prototype.setValue = function(val){
	var val = (val < this.min == this.min < this.max) ? this.min : val;
	var val = (val > this.max == this.max > this.min) ? this.max : val;
	this.value = val;
	this.input.value = val;
  var perc = (100*(val-this.min))/(this.max-this.min)
	this.track.style.width = perc+'%'
}