/** Please leave this information in place for others who want to use it.
 * 
 * @fileoverview
 *
 * The rsow.colorChooser library
 *
 <pre>
        Copyright (c) 2000-2008 Palaquest Internet Solutions and Design
        Written by Jason "Palamedes" Ellis (palamedes at rocketmail.com)
        URL:  http://www.randomstringofwords.com/
		Version: 08.07.03.001
        All rights reserved.

        Redistribution and use in source and binary forms, with or without
        modification, are permitted provided that the following conditions are met:

        - Redistributions of source code must retain the above copyright notice,
            this list of conditions and the following disclaimer.
        - Redistributions in binary form must reproduce the above copyright notice,
            this list of conditions and the following disclaimer in the
            documentation and/or other materials provided with the distribution.
        - Neither the name of Palaquest Internet Solutions & Design nor the names of its
            contributors may be used to endorse or promote products derived from
            this software without specific prior written permission.

        THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
        AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
        IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
        ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
        LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
        CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
        SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
        INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
        CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
        ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
        POSSIBILITY OF SUCH DAMAGE.
 </pre>
*/

// @TODO Create a color object for conversions instead of in main rsow.js file
// @TODO Redo the colors system such that I don't have to have 3 settors but rather a single settor that allows for as many color sets as we like.
// @TODO Add a color roll to smoothly move between presets instead of the kerchunk that happens now.

if (typeof rsow == 'undefined') rsow = {};
if (typeof rsow.colorChooser == 'undefined') {

	rsow.colorChooser = function() {
		var a = arguments;
		this.visible 		= false;
		this.mainDiv 		= ''; // The Main div of the whole kit
		this.mainSize		= 144; // The size of our picker and slider in pixels.

		this.pickerDiv	 	= ''; // The Picker Div
		this.pickerCursor	= ''; // The Picker Cursor Image
		this.pickerOffset	= {'x':0,'y':0}; // Cursor Offset
		this.picking 		= false; // Are we Picking?

		this.sliderDiv		= ''; // The Slider Div
		this.sliderCursor	= ''; // The Slider Cursor Image
		this.sliderOffset	= {'x':0,'y':0}; // Cursor Offset
		this.sliding 		= false; // Are we Sliding?

		this.overlayDiv		= ''; // The Overlay Div
		this.exampleDiv		= ''; // The Example Div

		this.color			= {'R':255,'G':0,'B':0}; // RGB color
		this.colorHSV		= {'H':360,'S':100,'V':100}; // HSV/HSB Color

		this.overlayChooser = ''; // The select box that overlays are selected from
		this.presetChooser	= ''; // The select box that presets are selected from

		this.editGroup		= ''; // Which of the 3 groups are we currently editing?
		this.editing		= ''; // Which of the 6 colors are we currently editing?
		// Define the Primary, Secondary and Tertiary colors ~ background and text
		this.colors			= { 'primary':{'background':{'id':'','color':''},'text':{'id':'','color':''},'elements':[],'classes':[]},
								'secondary':{'background':{'id':'','color':''},'text':{'id':'','color':''},'elements':[],'classes':[]},
								'tertiary':{'background':{'id':'','color':''},'text':{'id':'','color':''},'elements':[],'classes':[]} };
	}

	// Add a mover if we have one so that the whole chooser can slide around
	rsow.colorChooser.prototype.mover = (typeof rsow.mover != 'undefined')?new rsow.mover(this.colorChooser):null;

	// BEGIN: Set Methods

	// Set the main div of the whole thing, set mover if we have one
	rsow.colorChooser.prototype.setMainDiv = function (a) {
		this.mainDiv = (typeof a == 'string')?$(a):a;
		if (this.mover != null) this.mover.element = this.mainDiv;
	}
	// Set the Saturation and Brightness div
	rsow.colorChooser.prototype.setOverlay = function (a) {
		this.overlayDiv = (typeof a == 'string')?$(a):a;
	}
	// Set the HSV output example div
	rsow.colorChooser.prototype.setExample = function (a) {
		this.exampleDiv = (typeof a == 'string')?$(a):a;
	}
	// Set the background overlay chooser selectbox
	rsow.colorChooser.prototype.setOverlayChooser = function (a) {
		this.overlayChooser = $(a);
	}
	// Set the preset chooser select box
	rsow.colorChooser.prototype.setPresetChooser = function (a) {
		this.presetChooser = $(a);
	}

	/** Set Inputs
	 * This defines the Primary, Secondary and Tertiary Input ID's.
	 */
	rsow.colorChooser.prototype.setInputs = function (a) {
	// @TODO Redo this so we can have more color sets, extract and refactor
		var c = this.colors;
		if (a[0]) c.primary.background.id = a[0];
		if (a[1]) c.primary.text.id = a[1];
		if (a[2]) c.secondary.background.id = a[2];
		if (a[3]) c.secondary.text.id = a[3];
		if (a[4]) c.tertiary.background.id = a[4];
		if (a[5]) c.tertiary.text.id = a[5];
	}

	/** Set Classes
	 * These are the css classes that will get affected when a color changes
	 * This is an optional thing, you don't have to use classes you can use elements.
	 */
	rsow.colorChooser.prototype.setClassesPrimary = function(a) {
		// @TODO Error checking
		this.colors.primary.classes = a;
	}
	rsow.colorChooser.prototype.setClassesSecondary = function(a) {
		// @TODO Error checking
		this.colors.secondary.classes = a;
	}
	rsow.colorChooser.prototype.setClassesTertiary = function(a) {
		// @TODO Error checking
		this.colors.tertiary.classes = a;
	}

	/** Set Elements ( by id ) [optional]
	 * These are the element id's that will get affected when a color changes
	 * This is an optional thing, you don't have to use elements you can use classes.
	 */
	rsow.colorChooser.prototype.setElementsPrimary = function(a) {
		// @TODO Error checking
		this.colors.primary.elements = a;
	}
	rsow.colorChooser.prototype.setElementsSecondary = function(a) {
		// @TODO Error checking
		this.colors.secondary.elements = a;
	}
	rsow.colorChooser.prototype.setElementsTertiary = function(a) {
		// @TODO Error checking
		this.colors.tertiary.elements = a;
	}

	/** SetBodyOverlay
	 * set the body backdrop to whatever class has been sent removing the old overlay
	 * Note: For this function to work correctly your overlay classes need to have the 
	 * world "overlay" in them. Anything with the word "overlay" will be stripped from
	 * the body className property.  
	 */
	rsow.colorChooser.prototype.setBodyOverlay = function(c) {
		this.overlayChooser.value = c;
		var classes = document.body.className;
		var res = classes.replace(/overlay.*?(\s|$)/,'');
		document.body.className = c + ' ' + res;
	}

	/** Set Primary Colors
	 * Allows user to set primary background and text colors without having to set others
	 */
	rsow.colorChooser.prototype.setPrimaryColors = function(b,t) {
		if (b) this.colors.primary.background.color = hex2rgb(b);
		if (t) this.colors.primary.text.color = hex2rgb(t);
		this.updateInputs();		
	}
	/** Set Secondary Colors
	 * Allows user to set secondary background and text colors without having to set others
	 */
	rsow.colorChooser.prototype.setSecondaryColors = function(b,t) {
		if (b) this.colors.secondary.background.color = hex2rgb(b);
		if (t) this.colors.secondary.text.color = hex2rgb(t);
		this.updateInputs();
	}
	/** Set Tertiary Colors
	 * Allows user to set tertiary background and text colors without having to set others
	 */
	rsow.colorChooser.prototype.setTertiaryColors = function(b,t) {
		if (b) this.colors.tertiary.background.color = hex2rgb(b);
		if (t) this.colors.tertiary.text.color = hex2rgb(t);
		this.updateInputs();
	}

	/** setPreset
	 * This function will go through and in one single call update the preset chooser, overlay chooser
	 * set the 6 colors, update the inputs, and update the page itself.
	 * In an attempt to stay friendly with the Chromatophore Joomla theme I have made this function compatible 
	 * with their text input method;
	 * 	window.currentTheme = 'Sahara:overlay-cracked,#574d2f,#e8deca,#b0a174,#2e2b18,#b0922e,#ffffff';
	 * or you can send it as an object;
	 * 	window.currentTheme = {'overlay':'overlayCracked', 'colors':['#574d2f','#e8deca','#b0a174','#2e2b18','#b0922e','#ffffff']};
	 */
	rsow.colorChooser.prototype.setPreset = function(OorS) {
		if (typeof OorS =='string') {
			// Convert Chromatophore like preset to object
			// window.currentTheme = 'Sahara:overlay-cracked,#574d2f,#e8deca,#b0a174,#2e2b18,#b0922e,#ffffff';
			var colors = OorS.split(',');
			var theme = colors.shift().split(':');
			var obj = {'preset':theme[0], 'overlay':theme[1], 'colors':colors};
		} else {
			var obj = OorS;
		}
		// Set the body overlay
		this.setBodyOverlay(obj.overlay);
		// Set the colors
		this.colors.primary.background.color = hex2rgb(obj.colors[0]);
		this.colors.primary.text.color = hex2rgb(obj.colors[1]);
		this.colors.secondary.background.color = hex2rgb(obj.colors[2]);
		this.colors.secondary.text.color = hex2rgb(obj.colors[3]);
		this.colors.tertiary.background.color = hex2rgb(obj.colors[4]);
		this.colors.tertiary.text.color = hex2rgb(obj.colors[5]);
		// Set the preset chooser
		this.presetChooser.value = obj.preset;
		// Set the inputs and color them
		this.updateInputs();
		// Update the page colors
		this.updatePageColors();
	}

	/** getTheme
	 * This function will return to you it's current theme.  By default it returns it in text mode compliant with Chromatophore.
	 * but if you send true it will return an object.
	 */
	rsow.colorChooser.prototype.getTheme = function(bool) {
		var colors = [	rgb2hex(this.colors.primary.background.color),
						rgb2hex(this.colors.primary.text.color),
						rgb2hex(this.colors.secondary.background.color),
						rgb2hex(this.colors.secondary.text.color),
						rgb2hex(this.colors.tertiary.background.color),
						rgb2hex(this.colors.tertiary.text.color) ];	
		var obj = {'preset': this.presetChooser.value, 'overlay': this.overlayChooser.value, 'colors': colors};
		return (bool)?obj:this.presetChooser.value+':'+this.overlayChooser.value+','+colors.toString();
	} 
	
	// Update the input boxes with their colors
	rsow.colorChooser.prototype.updateInputs = function() {
		// @TODO: Refactor this into a for loop so setColor doesn't get called 3 times and so we can expand the number of color sets
		var c = this.colors; var obj = null;
		if (c.primary.background.id)	{ obj = c.primary.background; this.updateInput(obj); }
		if (c.primary.text.id)			{ obj = c.primary.text; this.updateInput(obj); }
		if (c.secondary.background.id)	{ obj = c.secondary.background; this.updateInput(obj); }
		if (c.secondary.text.id)		{ obj = c.secondary.text; this.updateInput(obj); }
		if (c.tertiary.background.id)	{ obj = c.tertiary.background; this.updateInput(obj); }
		if (c.tertiary.text.id)			{ obj = c.tertiary.text; this.updateInput(obj); }
		// Update this.color with the edited color
		this.setColor(rgb2hex(this.editing.color));
	}

	// Update the sent input with its colors
	rsow.colorChooser.prototype.updateInput = function(obj) {
		if (obj.color != '') {
			// First set its background color
    	    $(obj.id).style.backgroundColor = rgb2hex(obj.color);
			// Now set the value to the hex color
	        $(obj.id).value = rgb2hex(obj.color);
			// Now correct the text color based on the brightness, and
			//  some minor tweakage in the dark blue areas too
			var t = rgb2hsv(obj.color);
        	$(obj.id).style.color = (t.V < 60 || (t.H > 215 && t.H < 275 && t.S > 40))?'#FFF':'#000';
		}
	}

	/** updateElements
	 * Each color set can have an array of elements that will be colored accordingly as
	 * the picker or chooser is changed.  Completely optional though, you don't have to 
	 * define elements this way.  This just gives you a method to define the editing of
	 * a very specific element by ID when all else fails.
	 */
	rsow.colorChooser.prototype.updateElements = function(obj) {
		if (obj.background.color != '' && obj.text.color != '' && obj.elements[0] != '') {
			for (o in obj.elements) {
				var a = $(obj.elements[o]);
				if (a && a.style) {
					a.style.backgroundColor = rgb2hex(obj.background.color);
					a.style.color = rgb2hex(obj.text.color);
				}
			}
		}
	}

	/** updateClasses
	 * Each color set can have an array of classes that will be colored accordingly as
	 * the picker or chooser is changed.  Completely optional though, you don't have to 
	 * color the various bits using classes.  This is likely the best way to do it though.
	 */
	rsow.colorChooser.prototype.updateClasses = function(obj) {
		if (obj.background.color != '' && obj.text.color != '' && obj.classes[0] != '') {
			for (o in obj.classes) {
				var elements = getElementsByClassName(obj.classes[o]);
				for (e in elements) {
					if (elements[e] && elements[e].style) {
						if (elements[e].href == undefined) elements[e].style.backgroundColor = rgb2hex(obj.background.color);	
						elements[e].style.color = rgb2hex(obj.text.color);
					}
				}
			}
		}
	}

	// update the page colors.. god I hate this.. //@TODO: Ugh.
	rsow.colorChooser.prototype.updatePageColors = function() {
		this.updateElements(this.colors.primary);
		this.updateElements(this.colors.secondary);
		this.updateElements(this.colors.tertiary);
		this.updateClasses(this.colors.primary);
		this.updateClasses(this.colors.secondary);
		this.updateClasses(this.colors.tertiary);
	}
	

	// Set which input box we are editing
	rsow.colorChooser.prototype.setEditing = function(a) {
		//@TODO: Refactor this into a for loop in the event of adding more color sets to this.colors
		var c = this.colors;
		if (a == c.primary.background.id)	{ this.editGroup = c.primary; this.editing = c.primary.background; }
		if (a == c.primary.text.id) 		{ this.editGroup = c.primary; this.editing = c.primary.text; }
		if (a == c.secondary.background.id) { this.editGroup = c.secondary; this.editing = c.secondary.background; }
		if (a == c.secondary.text.id) 		{ this.editGroup = c.secondary; this.editing = c.secondary.text; }
		if (a == c.tertiary.background.id)	{ this.editGroup = c.tertiary; this.editing = c.tertiary.background; }
		if (a == c.tertiary.text.id)		{ this.editGroup = c.tertiary; this.editing = c.tertiary.text; }

		if (this.editing.color != '') this.setColor(rgb2hex(this.editing.color));
		// Update our Classess and Elements anyway.
		this.updatePageColors();
	}

	/** SetSize
	 * The color picker (Saturation and Brightness) is this size square (x and y)
	 * The color slider (Hue) is this size high (y), width is unimportant.
	 */
	rsow.colorChooser.prototype.setSize = function (a) {
		this.mainSize = a;
	}
	/** SetColor  --  input should be a standard hex color #1166AA
	 * This function does the job of setting our color to the object from hex then
	 * moving the picker / slider cursors to the correct spot and finally updating
	 * the example and overlay color to match
	 */
	rsow.colorChooser.prototype.setColor = function (a) {
		// Set the DEC of the color
		this.color = hex2rgb(a);
		// Set the HSV of the color
		this.colorHSV = rgb2hsv(hex2rgb(a)); // Make this function.
		// Move the Slider Cursor to the new color's location
		this.sliderCursor.style.left = this.sliderOffset.x + 'px';
		this.sliderCursor.style.top = this.sliderOffset.y + (this.mainSize-(Math.ceil((parseInt(this.colorHSV.H)/360)*this.mainSize))) + 'px';
		// Move the Picker Cursor to the new color's location
		this.pickerCursor.style.left = this.pickerOffset.x + (Math.ceil((parseInt(this.colorHSV.S)/100)*this.mainSize)) + 'px';
		this.pickerCursor.style.top = this.pickerOffset.y + this.mainSize-(Math.ceil((parseInt(this.colorHSV.V)/100)*this.mainSize)) + 'px';
		// Update the color examples
		this.updateColor();
	}
	/** UpdateColor
	 * Set the color to the overlay and to the example. This function is called
	 * by the slider and picker events, so we need to stuff the color back into 
	 * the object from the HSV color object which is what the slider/picker uses.
	 */
	rsow.colorChooser.prototype.updateColor = function() {
		// A slider just moved, update our color
		this.color = hsv2rgb(this.colorHSV);
		// Set the Overlay background color to HUE,100,100
		this.overlayDiv.style.backgroundColor = rgb2hex(hsv2rgb({'H':this.colorHSV.H,'S':100,'V':100}));
		// Set the Example background colors
        this.exampleDiv.style.backgroundColor = rgb2hex(this.color);
		// Update the editing object with our current color
		this.editing.color = this.color;
		// Update the editing input with the color to give a point of reference
		this.updateInput(this.editing);
		// Update the elements in the element array with this color
		this.updateElements(this.editGroup);
		// Update the classes in the classes array with this color
		this.updateClasses(this.editGroup);
	}
	/** Update Hue Slider 
	 * This function is called by other functions with in the object in order
	 * to keep the hue slider icon in the correct position of the mouse as 
	 * well as updating the color in the process -- this took forever to get right
	 */
	rsow.colorChooser.prototype.updateHue = function(y) {
		if (y >= 0 && y <= this.mainSize) {
            // Convert the Y to HUE ~ 0 to 360
            this.colorHSV.H = 360-(Math.min(360,Math.max(0,Math.ceil((parseInt(y)/this.mainSize)*360))));
            // Move the slider Cursor to under the mouse
            this.sliderCursor.style.left = this.sliderOffset.x + 'px';
            this.sliderCursor.style.top = this.sliderOffset.y + y + 'px';
            // Update the color
            this.updateColor();
        }
	}
	/** Update Saturation and Value Picker
	 * This funciton is called by other functions with in the object in order
	 * to keep the saturation and value cursor icon in the correct position
	 * as well as updating the color int he process
	 */
	rsow.colorChooser.prototype.updateSV = function(x,y) {
		if (y >= 0 && y <= this.mainSize && x >= 0 && x <= this.mainSize) {
			// Convert the X and Y to Saturation and Value
			this.colorHSV.S = (Math.min(100,Math.max(0,Math.ceil((parseInt(x)/this.mainSize)*100))));
			this.colorHSV.V = 100-(Math.min(100,Math.max(0,Math.ceil((parseInt(y)/this.mainSize)*100))));
			// Move the picker Cursor to under the mouse
			this.pickerCursor.style.left = this.pickerOffset.x + x + 'px';
			this.pickerCursor.style.top = this.pickerOffset.y + y + 'px';
			// Update the color
			this.updateColor();
		}
	}

	// Set the Saturation and Value picker background div and listener
	rsow.colorChooser.prototype.setPickerDiv = function (a) {
		this.pickerDiv = (typeof a == 'string')?$(a):a;
		var dis = this;
		addListener(this.pickerDiv, 'mousedown', function() { dis.onPickerMouseDown(this, arguments); } );
	}
	// Set the Saturation and Value picker cursor div and listener
	rsow.colorChooser.prototype.setPickerCursorImg = function (a) {
		this.pickerCursor = (typeof a == 'string')?$(a):a;
        var dis = this;
        addListener(this.pickerCursor, 'mousedown', function() { dis.onPickerMouseDown(this, arguments); } );
	}
	// Define the image offset
	rsow.colorChooser.prototype.setPickerOffset = function (x,y) {
		this.pickerOffset.x = x;
		this.pickerOffset.y = y;
	}
	// Set the HUE slider background div and listener
	rsow.colorChooser.prototype.setSliderDiv = function (a) {
		this.sliderDiv = (typeof a == 'string')?$(a):a;
		var dis = this;
		addListener(this.sliderDiv, 'mousedown', function() { dis.onSliderMouseDown(this, arguments); } );
	}
	// Set the HUE slider cursor div and listener
	rsow.colorChooser.prototype.setSliderCursorImg = function (a) {
		this.sliderCursor = (typeof a == 'string')?$(a):a;
		var dis = this;
		addListener(this.sliderCursor, 'mousedown', function() { dis.onSliderMouseDown(this, arguments); } );
	}
	// Define the image offset
	rsow.colorChooser.prototype.setSliderOffset = function (x,y) {
		this.sliderOffset.x = x;
		this.sliderOffset.y = y;
	}
	// END: Set Methods


	// BEGIN: Picker Events

	/** On Picker Mouse Down
	 * When the user clicks the SV picker create the mouse move and mouse up
	 * events as well as plotting the current SV position.
	 */
	rsow.colorChooser.prototype.onPickerMouseDown = function() {
		var a = arguments;
		if (!this.picking) {
			var dis = this;
			// Create our listeners, make sure they are removable.
			addListener(document, 'mousemove', function() { dis.onPickerDrag(this,arguments); }, true );
			addListener(document, 'mouseup', function() { dis.onPickerMouseUp(this,arguments); }, true );
		}
		this.picking = true;

		// Firefox and Safari use layerX - offset, where as opera and IE use offsetX
		var x = (isIE() || isOpera())?a[1][0].offsetX : a[1][0].layerX - this.pickerOffset.x;
		var y = (isIE() || isOpera())?a[1][0].offsetY : a[1][0].layerY - this.pickerOffset.y;

		this.updateSV(x,y);

		// Set the preset selector to Custom since they changed from preset
		this.presetChooser.value = 'custom';
	}
	/** On Picker Mouse Up
	 * At the end of the click, turn off our picking and remove the listener
	 */
	rsow.colorChooser.prototype.onPickerMouseUp = function() {
		var a = arguments;
		this.picking = false;
		removeListener(document, 'mouseup', a[1][2]);
	}	
	// Part of the drag routine
	rsow.colorChooser.prototype.onPickerDrag = function() {
		var a = arguments;
		if (this.picking) {
			if (a[1][1] != this.pickerCursor) {

	        	// Firefox and Safari use layerX - offset, where as opera and IE use offsetX
    		    var x = (isIE() || isOpera())?a[1][0].offsetX : a[1][0].layerX - this.pickerOffset.x;
	    	    var y = (isIE() || isOpera())?a[1][0].offsetY : a[1][0].layerY - this.pickerOffset.y;

				this.updateSV(x,y);
			}
		} else {
			removeListener(document, 'mousemove', a[1][2]);
		}	
	}
	// END: Picker Events

	// BEGIN: Slider Events

	/** On Slider Mouse Down
	 * When the user clicks the hue slider it creates the mouse move and mouse up 
	 * events as well as plotting the current hue position.
	 */
	rsow.colorChooser.prototype.onSliderMouseDown = function() {
		var a = arguments;
		if (!this.sliding) {
			var dis = this;
			// Create our listeners, make sure they are removable.
			addListener(document, 'mousemove', function() { dis.onSliderDrag(this,arguments); }, true );
			addListener(document, 'mouseup', function() { dis.onSliderMouseUp(this,arguments); }, true );
		}
		this.sliding = true;

        // Firefox and Safari use layerX - offset, where as opera and IE use offsetX
        var y = (isIE() || isOpera())?a[1][0].offsetY : a[1][0].layerY - this.pickerOffset.y;

		this.updateHue(y);

        // Set the preset selector to Custom since they changed from preset
        this.presetChooser.value = 'custom';	
	}
	/** On Slider Mouse Up
	 * At the end of the click, turn off our sliding and remove the listener
	 */
	rsow.colorChooser.prototype.onSliderMouseUp = function() {
		var a = arguments;
		this.sliding = false;
		removeListener(document, 'mouseup', a[1][2]);
	}
	/** On Slider Drag
	 * Are we dragging?  If so reposition the hue slider cursor over the correct
	 * color and update the example.  If we arent dragging any longer kill this
	 * listener.
	 */
	rsow.colorChooser.prototype.onSliderDrag = function() {
		var a = arguments;
		var dis = this;
		if (this.sliding) {
			if (a[1][1] != this.sliderCursor) {

        		// Firefox and Safari use layerX - offset, where as opera and IE use offsetX
        		var y = (isIE() || isOpera())?a[1][0].offsetY : a[1][0].layerY - this.pickerOffset.y;

				this.updateHue(y);
			}
		} else {
			removeListener(document, 'mousemove', a[1][2]);
		}
	}
	// END: Slider Events

	
}