/**
 * Slider.js - Value sliders
 * 
 * @author  Webstores <info at webstores dot nl>
 *           Copyright (c) Webstores internet totaalbureau <http://www.webstores.nl/>
 */

var Slider = function(el, min, max, options) {
	
	var input = $(el);
	var slider, decrease, track, handle, increase;
	var minX, maxX, mouseStartX, dragging;
	
	var minValue = min;
	var maxValue = max;
	
	// Slider events
	var onRender = options ? options.onrender : null;
	var onStartDrag = options ? options.onstartdrag : null;
	var onDrag = options ? options.ondrag : null;
	var onStopDrag = options ? options.onstopdrag : null;
	
	return {
		initialize: function() {
			slider = document.createElement('div');
			
			decrease = document.createElement('a');
			track = document.createElement('div');
			handle = document.createElement('div');
			increase = document.createElement('a');
			
			slider.id = input.id + '-slider';
			slider.className = 'slider';
			
			decrease.className = 'slider-control decrease';
			decrease.href = '#';
			decrease.title = 'Lager';
			decrease.innerHTML = 'Lager';
			
			track.className = 'slider-track';
			track.style.width = '0';
			
			handle.className = 'slider-handle';
			handle.style.left = '-19px';
			
			increase.className = 'slider-control increase';
			increase.href = '#';
			increase.title = 'Hoger';
			increase.innerHTML = 'Hoger';
			
			slider.appendChild(decrease);
			slider.appendChild(track);
			slider.appendChild(handle);
			slider.appendChild(increase);
			
			WS.hide(input);
			WS.DOM.insertAfter(slider, input);
			
			minX = this.getHandleCenter() * -1;
			maxX = slider.offsetWidth - this.getHandleCenter();
			
			if(onRender) onRender.call(this);
			
			this.initEvents();
		},
		
		initEvents: function() {
			var self = this;
			
			WS.Event.addEvent(handle, 'mouseover', function(e) {
				self.disableSelect(document.body);
			});
			WS.Event.addEvent(handle, 'mousedown', function(e) {
				self.startDrag(e);
			});
			WS.Event.addEvent(document.body, 'mousemove', function(e) {
				self.drag(e);
			});
			WS.Event.addEvent(document.body, 'mouseup', function(e) {
				self.stopDrag(e);
				self.enableSelect(document.body);
			});
		},
		
		startDrag: function(e) {
			//if(window.getSelection().anchorNode != slider) {} // Firefox selected drag fix
			dragging = true;
			mouseStartX = e.clientX;
			if(onStartDrag) 
				onStartDrag.call(this);
		},
		
		drag: function(e) {
			if(dragging) {
				var currMouseX = e.clientX;
				var diffMouseX = currMouseX - mouseStartX;
				var startLeft = parseInt(handle.style.left);
				mouseStartX = currMouseX;
				if(currMouseX > (slider.offsetLeft - this.getHandleCenter()) && currMouseX < ((slider.offsetLeft + slider.offsetWidth) + this.getHandleCenter())) // Allow sliding only within slider width
					this.slide(startLeft + diffMouseX);
				if(onDrag)
					onDrag.call(this);
			}
		},
		
		slide: function(newPos) {
			if(newPos >= minX && newPos <= maxX) {
				handle.style.left = newPos + 'px';
				track.style.width = (newPos + this.getHandleCenter()) + 'px';
			}
		},
		
		stopDrag: function(e) {
			if(dragging) {
				if(onStopDrag) onStopDrag.call(this);
				this.setInputValue(this.getValue());
			}
			dragging = false;
		},
		
		disableSelect: function(el) {
			el.onselectstart = function() { return false };
			el.style.MozUserSelect = 'none';
		},
		
		enableSelect: function(el) {
			el.onselectstart = 'undefined';
			el.style.MozUserSelect = '';
		},
		
		getHandleCenter: function() {
			return handle.offsetWidth / 2;
		},
		
		getSliderId: function() {
			return input.id;
		},
		
		getValue: function() {
			var delta = max - min;
			return Math.round(((delta * (this.getPercentage() / 100)) * delta) / delta) + min;
		},
		
		getMinValue: function() {
			return min;
		},
		
		setMinValue: function(value) {
			min = value;
		},
		
		getMaxValue: function() {
			return max;
		},
		
		setMaxValue: function(value) {
			max = value;
		},
		
		getPercentage: function() {
			return Math.round((parseInt(track.style.width) / slider.offsetWidth) * 100);
		},
		
		getInputValue: function() {
			return input.value;
		},
		
		setInputValue: function(value) {
			input.value = value;
		}
	}
}