/**
Class: Slider
Author: Duxpoint
Version: 0.1
**/


	function Slider( aSliderDiv )
	{
		if( !aSliderDiv )
		{
			alert("No se puede crear el Slider debe definir como parametro del constructor el ID del div desting");
			return ;
		}
		logger = new JSLogger();
		//logger.write("value");
		this.sl_targetDiv = aSliderDiv;
		this.build();
	}
	
	
	Slider.prototype = {	
		/* Properties */
		sl_targetDiv: "",
		posManager: new PositionManager(),	
		leftLimit: 0,
		rightLimit: 0,
		topLimit: 0,
		barWidth: 125,
		pickerWidth: 10,
		ieLeftOffsetFix: 0,
		ieTopOffsetFix: 0,
		minValue: 0,
		maxValue: 1000,
		userEnd: false,
		proportion: null,
		currentLeftValue: null,
		currentRightValue: null,
		currentX: null,
		currentY: null,
		lastLeftValue: null,
		lastRightValue: null,
		onEndDrag: null,
		isIE: (navigator.appVersion.indexOf("MSIE") != -1),
		divBackground: null,
		divBar: null,
		divLeftPicker: null,
		divRightPicker: null,
		divMiddlePicker: null,
		divNumberLeft: null,
		divNumberRight: null,
		divTitle: null,
		imgLeftPicker: null,
		imgRightPicker: null,
		preSymbol: "",
		initialized: null,
		onLabelFunction: null,
		LEFT_VALUE: "LEFT_VALUE",
		RIGHT_VALUE: "RIGHT_VALUE",
		LeftLabel: "",
		RightLabel: "",
		
		/* Methods */
		build: function ()
		{
			this.generateHTML();
		},
		generateHTML: function () //:void
		{
			var str_slider;
			this.onLabelFunction = this.labelFunction;
			this.divBackground = this.createDiv(this.sl_targetDiv + "_Background","GenBackGround", "");
			
			this.divBar = this.createDiv(this.sl_targetDiv +"_Bar","Bar", "");
			this.divLeftPicker = this.createDiv(this.sl_targetDiv +"_LeftPicker","LeftPicker", "");
			this.divRightPicker = this.createDiv(this.sl_targetDiv +"_RightPicker","RightPicker", "");
			this.divMiddlePicker = this.createDiv(this.sl_targetDiv +"_MiddlePicker","MiddlePicker", "");
			this.divNumberLeft = this.createDiv(this.sl_targetDiv +"_NumberLeft","SliderNumber NumberLeft", "0");
			this.divNumberRight = this.createDiv(this.sl_targetDiv +"_NumberRight","SliderNumber NumberRight", "10");
			this.divTitle = this.createDiv(this.sl_targetDiv +"_Title","Title", "");
			
			if( this.isIE )
			{
				this.imgRightPicker = this.createImg(this.sl_targetDiv +"_ImgRightPicker","ImgRightPicker", "");
				this.divRightPicker.appendChild(this.imgRightPicker);
				this.imgLeftPicker = this.createImg(this.sl_targetDiv +"_ImgLeftPicker","ImgLeftPicker", "");
				this.divLeftPicker.appendChild(this.imgLeftPicker);
			}
			else
			{
				this.divRightPicker.className = "RightPickerFF";
				this.divLeftPicker.className = "LeftPickerFF";
			}

			this.divLeftPicker.onmousedown = this.onMouseDownHandler;
			this.divLeftPicker.ondragstart = this.onDragStart;
			this.divRightPicker.ondragstart = this.onDragStart;
			this.divRightPicker.onmousedown = this.onMouseDownHandler;
			this.divLeftPicker.parentSlider = this;
			this.divRightPicker.parentSlider = this;
			
			this.divBackground.onmousemove = this.onMouseMoveHandler;
			this.divBackground.onmouseout = this.onMouseOut;
			this.divBackground.parentSlider = this;
			document.onmouseup = this.onMouseUpHandler;
			if( !window.slidersList )
				window.slidersList = new Array();
			window.slidersList.push(this);
			if( !window.onresize )
				window.onresize = this.onResize;
			
			this.divBackground.appendChild(this.divBar);
			this.divBackground.appendChild(this.divLeftPicker);
			this.divBackground.appendChild(this.divRightPicker);
			this.divBackground.appendChild(this.divMiddlePicker);
			this.divBackground.appendChild(this.divNumberLeft);
			this.divBackground.appendChild(this.divNumberRight);
			this.divBackground.appendChild(this.divTitle);
			
			$(this.sl_targetDiv).appendChild(this.divBackground);
			
			this.createLimits();
			this.calculateProportion();

			this.fixPosition(this.divLeftPicker, this.leftLimit);
			this.fixPosition(this.divRightPicker, this.rightLimit);
			this.fixPosition(this.divMiddlePicker, this.leftLimit + this.pickerWidth);
			
			this.positioneLabels();
			
			this.adjustMiddlePicker(this.leftLimit, this.rightLimit - this.pickerWidth);
			this.calculateValues(this.leftLimit, this.rightLimit - this.pickerWidth);
			this.initialized = true;
			
		},
		fixPosition: function(elem, posElem)
		{
		
			var topOffset = 0;
			
			elem.style.position = "absolute";
			elem.style.left = posElem + "px";
			
			if(this.isIE)
				topOffset = this.ieTopOffsetFix;
			elem.style.top = (this.topLimit + topOffset) + "px";
		},
		adjustPosition: function(elem, posX, posY)
		{
			var topOffset = 0;
			
			elem.style.position = "absolute";
			elem.style.left = posX + "px";
			
			if(this.isIE)
				topOffset = this.ieTopOffsetFix;
			elem.style.top = (posY + topOffset) + "px";
		},
		positioneLabels: function()
		{
			this.adjustPosition(this.divNumberLeft, this.leftLimit + 0, this.topLimit + 34);
			this.adjustPosition(this.divNumberRight, this.rightLimit + 0, this.topLimit + 34);
			this.adjustPosition(this.divTitle, this.leftLimit, this.topLimit-10);		
		},
		getPosition: function(elem)
		{
			return this.posManager.getOffset(elem);
		},
		setLabels: function(aMinValue, aMaxValue)
		{
			var leftElem = this.divNumberLeft;
			var rightElem = this.divNumberRight;
			
			leftElem.innerHTML = this.onLabelFunction(this.preSymbol + aMinValue, this.preSymbol + aMaxValue);
			//rightElem.innerHTML = this.onLabelFunction();
		},
		setTitle: function(aTitle)
		{
			this.divTitle.innerHTML = aTitle;
		},
		onMouseMoveHandler: function(e)
		{
			if( this.parentSlider.targetDrag )
			{
				var posx = 0;
				if (!e) 
					var e = window.event;
				if (e.pageX)
					posx = e.pageX;
				else if (e.clientX)
				{
					posx = e.clientX + document.body.scrollLeft	+ document.documentElement.scrollLeft;
				}

				posx -= this.parentSlider.pickerWidth / 2;
				
				var leftLimit = this.parentSlider.leftLimit;
				var rightLimit = this.parentSlider.rightLimit;
				
				if( this.parentSlider.targetDrag.id == this.parentSlider.divLeftPicker.id )
				{
					rightLimit = this.parentSlider.getLeftPickerLimit();
				}
				else
				{
					leftLimit =  this.parentSlider.getRightPickerLimit();
				}
				
				if( posx < leftLimit )
					posx = leftLimit;
				if( posx > rightLimit )
					posx = rightLimit;
					
				this.parentSlider.targetDrag.style.left = posx + "px";
				
				var leftValue;
				var rightValue;
				
				if( this.parentSlider.targetDrag.id == this.parentSlider.divLeftPicker.id )
				{
					leftValue = posx;
					rightValue = rightLimit;
				}
				else
				{
					leftValue = leftLimit - this.parentSlider.pickerWidth;
					rightValue = posx - this.parentSlider.pickerWidth;
				}
				this.parentSlider.adjustMiddlePicker(leftValue, rightValue);
				this.parentSlider.calculateValues(leftValue, rightValue);
				this.parentSlider.setLabels(Math.round(this.parentSlider.currentLeftValue + this.parentSlider.minValue), Math.round(this.parentSlider.currentRightValue + this.parentSlider.minValue));
			}
		},
		onResizeHandler: function()
		{
			var leftLimit = this.leftLimit;
			var rightLimit = this.rightLimit;	
			this.createLimits();
			var leftValue = this.leftLimit + Math.round(this.currentLeftValue/this.proportion);
			var rightValue = this.rightLimit - (Math.round((((this.maxValue-this.minValue)-this.currentRightValue))/this.proportion));
			if( this.initialized)
			{
				this.fixPosition(this.divLeftPicker, leftValue);
				this.fixPosition(this.divRightPicker, rightValue);
				this.adjustMiddlePicker(leftValue, rightValue - this.pickerWidth);
			}
			this.positioneLabels();
		}
		,
		calculateProportion: function()
		{
			var barWidthPixels = this.rightLimit - this.leftLimit - (this.pickerWidth);
			var barTargetValues = this.maxValue - this.minValue;
			this.proportion = barTargetValues / barWidthPixels ;
		},
		calculateValues: function(leftValue, rightValue)
		{
			var realLeftValue = leftValue - this.leftLimit;
			var realRightValue = rightValue - this.leftLimit;
			this.currentLeftValue = Math.round(realLeftValue * this.proportion);
			this.currentRightValue = Math.round(realRightValue * this.proportion);
		},
		setValues: function(minValue, maxValue)
		{
			this.minValue = minValue;
			this.maxValue = maxValue;
			this.currentLeftValue = 0;
			this.currentRightValue = this.maxValue-this.minValue;
			this.calculateProportion();
			this.setLabels(Math.round(this.minValue), Math.round(this.maxValue));
		},
		setData: function(aMinValue, aMaxValue)
		{
			this.currentLeftValue = aMinValue - this.minValue;
			this.currentRightValue = aMaxValue - this.minValue;
			this.setLabels(aMinValue,aMaxValue);
			this.refresh();
		},
		setPosition: function(posMinValue, posMaxValue)
		{
			posMinValue = posMinValue/this.proportion + this.leftLimit;
			posMaxValue = posMaxValue/this.proportion + this.leftLimit;
			this.divLeftPicker.style.left = posMinValue + "px";
			this.divRightPicker.style.left = posMaxValue + this.pickerWidth + "px";
			this.adjustMiddlePicker(posMinValue, posMaxValue);
		},
		onMouseDownHandler: function()
		{
			document.parentSlider = this.parentSlider;
			this.parentSlider.targetDrag = this;
		},		
		onMouseUpHandler: function()
		{
			if( this.parentSlider )
			{
				this.parentSlider.userEnd = true;
				this.parentSlider.terminateDrag();
			}
		},
		onMouseOut: function(e)
		{
			if (!e) 
				var e = window.event;		
			var toTarg = e.relatedTarget || e.toElement;

			inValid = (toTarg != this.parentSlider.divBar && toTarg != this.parentSlider.divLeftPicker );
			inValid = inValid && (toTarg != this.parentSlider.divRightPicker && toTarg != this.parentSlider.divMiddlePicker );
			inValid = inValid && (toTarg != this.parentSlider.imgLeftPicker && toTarg != this.parentSlider.imgRightPicker );

			if( inValid )
			{
				this.parentSlider.terminateDrag();
			}
		},
		onResize: function(e)
		{
			if( this.slidersList)
			{
				for( i in this.slidersList )
					this.slidersList[i].onResizeHandler();
			
			}
		},
		refresh: function()
		{
			if( window.slidersList)
			{
				for( i in window.slidersList )
					window.slidersList[i].onResizeHandler();
			
			}
		},
		terminateDrag: function()
		{
			this.targetDrag = null;
			
			var invokeEndEvent = ( this.onEndDrag != null && this.userEnd);
			invokeEndEvent = invokeEndEvent && (this.lastLeftValue != this.currentLeftValue || this.lastRightValue != this.currentRightValue);
			
			if( invokeEndEvent )
			{
				this.lastLeftValue = this.currentLeftValue;
				this.lastRightValue = this.currentRightValue;
				
				this.userEnd = false;
				this.onEndDrag();
			}
		},
		onDragStart: function(e)
		{
			if (!e) 
				var e = window.event;	
			e.returnValue = false;
		},
		createLimits: function()
		{
		
			var restValue = 0;
			
			if(this.isIE)
				restValue = this.ieLeftOffsetFix;
			
			posPicker = this.getPosition(this.divBar);
			
			this.leftLimit = posPicker[0] + (this.pickerWidth / 2) - restValue;
			this.rightLimit = posPicker[0] + this.barWidth - restValue;
			this.topLimit = posPicker[1] + 5;
		},
		adjustMiddlePicker: function(xStart, xEnd)
		{
			this.currentX  = (xStart + this.pickerWidth);
			this.currentY  = (xEnd - xStart);
			this.divMiddlePicker.style.left = this.currentX + "px";
			this.divMiddlePicker.style.width = this.currentY + "px";
		},
		createDiv: function(id, className, innerHTML) 
		{
		    var node = document.createElement("div");
		    node.id = id;
		    node.className = className;
		    node.innerHTML = innerHTML;
		    return node;
		},
		createImg: function(id, className, innerText) 
		{
		    var node = document.createElement("img");
		    node.id = id;
		    node.className = className;
		    node.src = "theme/new/images/slider/Picker.gif";
		    return node;
		},
		getLeftPickerLimit: function()
		{
			leftPos = this.divRightPicker.style.left;
			styleSize = this.divRightPicker.style.left.length;
			if( styleSize > 2 )
				return leftPos.substr(0, styleSize - 2)*1 - this.pickerWidth;
			return 0;
		},
		getRightPickerLimit: function()
		{
			leftPos = this.divLeftPicker.style.left;
			styleSize = this.divLeftPicker.style.left.length;
			if( styleSize > 2 )
				return leftPos.substr(0, styleSize - 2)*1 + this.pickerWidth;
			return 0;
		},
		labelFunction: function(minValue, maxValue)
		{
			return minValue + " - " + maxValue;
		}
	}

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