BOCS = {};

BOCS.ColorPicker = {
	_mouseX : 0,
	_mouseY : 0,
	_targetField : null,
	_handler : null,
	PICKER_ROWS : 9,
	PICKER_COLS : 24,
	getMousePos : function(e) {
		if (!e) 
			e = window.event;			
	    BOCS.ColorPicker._mouseX = e.clientX + document.body.scrollLeft;
	    BOCS.ColorPicker._mouseY = e.clientY + document.body.scrollTop;
	    return true;
	},
	showPicker : function(targetField, handler) {
		if (!document.getElementById('colorPicker')) {
			BOCS.ColorPicker.initPicker();
		}
		if (!targetField) {
			return;
		}
		// update the reference to the current field
		this._targetField = targetField;
		
		if (handler)
			this._handler = handler;
		
	    // evaluate Y position
	    var el = document.getElementById(this._targetField);
	    var top = 0;
	    var left = 0;
        if(el.offsetParent)
        {
            while(el.offsetParent)
            {
                top += el.offsetTop;
                el = el.offsetParent;
                
                left += el.offsetLeft;
            }
        }
        else
        {
            if(el.y)
            {
                top += el.y;
            }
            
            if (el.x)
            {
                left += el.x;
            }
        }
		
		// show the picker
		var picker = document.getElementById('colorPicker');
		// move the color picker to where the mouse is
		picker.style.top = (top) + 25 + 'px';
		picker.style.left = (left) - 195 + 'px';//(this._mouseX + 30) + 'px';
	  	picker.style.display = 'block';
	},
	refreshColorValue : function(color){
		if (this._targetField)
			document.getElementById(this._targetField).value = color;
	},
	resetColor: function(){
		if (this._targetField)
			document.getElementById(this._targetField).value = 'auto';

	  	if (this._handler)
	  		this._handler();
	  		
	  	this.cancelPick();
	},
	updateColorValue : function(color){		
		// set the value and background color of the field to the chosen value
		if (this._targetField)
			document.getElementById(this._targetField).value = color;
	  
	  	if (this._handler)
	  		this._handler();
		//Hide the color picker
	  	this.cancelPick();
	},
	cancelPick : function() {
		// hide the color picker
		var colorPicker = document.getElementById('colorPicker');
	  	colorPicker.style.display = 'none';
	},
	initPicker : function() {
		// bind the mouse move to the document event
		document.onmousemove = BOCS.ColorPicker.getMousePos;
		
		var buffer = [];	
		// the values array holds the component values of a colour in increments of 51
		var colors = ['00', '33', '66', '99', 'CC', 'FF'];
		
		// generate the picker code
		buffer.push('<div id="pickerBox">');
		buffer.push('<p id="pickerHead">');
		buffer.push('Select the new color:');
		buffer.push('<\/p>');
		
		buffer.push('<p id="pickerClose">');
		buffer.push('<a href="#" onclick="BOCS.ColorPicker.cancelPick();return false;">X<\/a>');
		buffer.push('<\/p>');
	
		// these variables keep track of the Red, Green and Blue components of the current color
		var redIndex = 0;
		var greenIndex = 0;
		var blueIndex = 0;
		
		// cycle through the colors and generate the table	
		buffer.push('<div id="pickerTable">');
		buffer.push('<table border="0" cellpadding="0" cellspacing="2">');
		for(var i = 0; i < this.PICKER_ROWS; i++) {
		    buffer.push('<tr>');
		    for(var j = 0; j < this.PICKER_COLS; j++) {
		    	var currentColor = colors[redIndex] + colors[greenIndex] + colors[blueIndex];
		    	buffer.push('<td class="box" style="background-color:#');
		    	buffer.push(currentColor);
		    	buffer.push('" ');
		    	// Mouse over event
		    	buffer.push('onmouseover="BOCS.ColorPicker.refreshColorValue(\'');
		    	buffer.push(currentColor);
		    	buffer.push('\');" ');
		    	// Mouse click event
		    	buffer.push('onclick="BOCS.ColorPicker.updateColorValue(\'');
		    	buffer.push(currentColor);
		    	buffer.push('\');" ');	    	
		    	
		    	buffer.push('<\/td>');
		    	
		    	// Update color indexes
		    	blueIndex++;
		    	if (blueIndex == 6) {
		    		greenIndex++;
		    		blueIndex = 0;
		    	}
		    	if (greenIndex == 6) {
		    		redIndex++;
		    		greenIndex = 0;
		    	}
		     }
			buffer.push('<\/tr>');
		}
		buffer.push('<\/table>');
		buffer.push('<\/div>');
		// end table
		buffer.push('<p class="pickerReset">');
		buffer.push('<a href="#" onclick="BOCS.ColorPicker.resetColor();return false;"><img class="picker" src="images/color_swatch.png" />Reset Color<\/a>');
		buffer.push('<\/p>');
		
		buffer.push('<\/div>');
		
		// write out the html to the Colour picker Div Tag
		var colorPicker = document.createElement('div');
		colorPicker.id = 'colorPicker';
		colorPicker.style.position = 'absolute';
		colorPicker.style.zIndex = 100;
  		colorPicker.style.display = 'none';
		colorPicker.innerHTML = buffer.join('');
		
		document.body.appendChild(colorPicker);
	}
}