// ----------------------------------------------------------------------------
// For the Colorpicker component
// ----------------------------------------------------------------------------

ColorPicker = Class.create({
    cpColor:null,
    cpInput:null,
    cpName:"",
    instance:null,
    options: null,

    initialize: function(btn, options) {
		this.options = {
			callback: function(color) {ColorPicker.instance.options.input.value = color;},
			input: null,
			name: ""
		};
		this.options = Object.extend(this.options, options);
        this.cpName = this.options.name;
        var instance = this;
        this.instance = instance;
        ColorPicker.instance = instance;
        btn.onclick = function(ev){if (document.getElementById('hColorPicker'+instance.cpName).style.display=="none") instance.showColorPicker(ev); else instance.hideColorPicker(ev);return false;};
        document.getElementById('hColorImg'+this.cpName).instance = instance;
        document.getElementById('hColorImg'+this.cpName).onmousemove = this.hColorPickerMouseMove;
        document.getElementById('hColorImg'+this.cpName).onmousedown = this.hColorPickerMouseDown;
        this.cpInput = this.options.input;
    },

    mouseCoordinates: function(ev) {
	   ev = ev || window.event;
	   if(ev.pageX || ev.pageY)
	      return {x:ev.pageX, y:ev.pageY};
	   return {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
	           y:ev.clientY + document.body.scrollTop  - document.body.clientTop};
	},

	getPosition: function(obj) {
	    var left = 0;
	    var top  = 0;

	    while (obj.offsetParent){
	        left += obj.offsetLeft;
	        top  += obj.offsetTop;
	        obj   = obj.offsetParent;
	    }
	    left += obj.offsetLeft;
	    top  += obj.offsetTop;

	    return {x:left, y:top};
	},

	showColorPicker: function(ev) {
	    ev         = ev || window.event;
	    var input  = ev.target || ev.srcElement; // our input box
	    var hCP    = document.getElementById('hColorPicker'+this.instance.cpName);

   	    var inpPos = this.getPosition(input);

	    hCP.style.display = 'block';
	    hCP.style.left    = inpPos.x;
	    hCP.style.top     = inpPos.y;
	},

	hideColorPicker: function() {
        document.getElementById('hColorPicker'+this.instance.cpName).style.display = 'none';
    },

    hex: function(c) {
        c=parseInt(c).toString(16);
        return (c.length<2 ? "0"+c : c);
    },

    hColorPickerMouseMove: function(ev) {
	    ev            = ev || window.event;
	    var hCPImg    = ev.target || ev.srcElement;

	    var mousePos  = this.instance.mouseCoordinates(ev);
	    var colorPos  = this.instance.getPosition(hCPImg);

	    var x         = mousePos.x-colorPos.x;
	    var y         = mousePos.y-colorPos.y;
	    var width     = parseInt(hCPImg.offsetWidth);
	    var height    = parseInt(hCPImg.offsetHeight);

	    var color     = this.instance.getHorizColor(y*width+x-1, width, height);

	    this.instance.cpColor = '#'+color;
	    document.getElementById('hColorDiv'+this.instance.cpName).style.backgroundColor = this.instance.cpColor;
	},

    hColorPickerMouseDown: function() {
	    this.instance.options.callback(this.instance.cpColor);
	    this.instance.hideColorPicker();
    },

	getHorizColor: function(i, width, height) {
	    var sWidth = (width)/7;         // "section" width
	    var C=i%width;                  // column
	    var R=Math.floor(i/(sWidth*7)); // row
	    var c=i%sWidth;                 // column in current group
	    var r, g, b, h;

	    var l=(255/sWidth)*c;           // color percentage

	    if(C>=sWidth*6){
	        r=g=b=255-l;
	    } else {
	        h=255-l;

	        r=C<sWidth?255:C<sWidth*2?h:C<sWidth*4?0:C<sWidth*5?l:255;
	        g=C<sWidth?l:C<sWidth*3?255:C<sWidth*4?h:0;
	        b=C<sWidth*2?0:C<sWidth*3?l:C<sWidth*5?255:h;

	        if(R<(height/2)){
	            var base = 255-(255*2/height)*R;

	            r=base+(r*R*2/height);
	            g=base+(g*R*2/height);
	            b=base+(b*R*2/height);
	        }else if(R>(height/2)){
	            var base = (height-R)/(height/2);

	            r=r*base;
	            g=g*base;
	            b=b*base;
	        }
	    }

	    return this.instance.hex(r)+this.instance.hex(g)+this.instance.hex(b);
	}
});