var colorPicker={};

colorPicker.COLOR_PICKER_CONTAINER_ID="basicColorPicker";    
colorPicker.COLOR_PICKER_INPUT="colorInput";
colorPicker.ADVANCED_COLOR_PICKER_CONTAINER_ID="layerAdvancedColorPicker";
colorPicker.COLOR_PICKER_SELECTED="colorSelected";

//advanced color picker object
colorPicker.advancedColorPickerObject=undefined;

/**
 * convert a number to the hex value. Example 10->"A"
 */
function toHEX(num) {
    var N=num;
     if (N==null) return "00";
     N=parseInt(N); if (N==0 || isNaN(N)) return "00";
     N=Math.max(0,N); N=Math.min(N,255); N=Math.round(N);
     return "0123456789ABCDEF".charAt((N-N%16)/16)
          + "0123456789ABCDEF".charAt(N%16);
}

/**
 * given an array of [red,green,blue] values , it returns the hexadecimal value
 * example:[100,100,100]->"#646464"
 */
function RGBtoHEX(arrRGB){
    var r=toHEX(arrRGB[0]);
    var g=toHEX(arrRGB[1]);
    var b=toHEX(arrRGB[2]);
    return("#"+new String(r)+new String(g)+new String(b));
}

/**
 * given the HEX representation of a color, the method returns and array with the RGB colors
 * Example:"#646464"->[100,100,100]
 */
function HEXtoRGB(stringHEX){
    var h=stringHEX;
    var cutHex=function (hexVal){return (h.charAt(0)=="#") ? h.substring(1,7):h};
    h=(h.charAt(0)=="#") ? h.substring(1,7):h;
    var r=parseInt((cutHex(h)).substring(0,2),16);
    var g=parseInt((cutHex(h)).substring(2,4),16);
    var b=parseInt((cutHex(h)).substring(4,6),16);
    return [r,g,b];
}

colorPicker.createBasicColorPicker=function(){
    /*var grayRow=["black","gray","silver","white"];
    var redRow= ["red","maroon","orange","yellow"];
    var greenRow=["green","olive","lime","aqua"];
    var blueRow=["blue","navy","purple","fuchsia"];*/
    //var colors=["black","gray","silver","white","red","maroon","orange","yellow","green","olive","lime","aqua","blue","navy","purple","fuchsia"];
    //var colors=["black","maroon","red","green","navy",                "gray","purple","orange","olive","blue",                "white","fuchsia","yellow","lime","aqua"];
    var colors=[["black","#000000"],["maroon","#800000"],["red","#FF0000"],["green","#008000"],["navy","#000080"],
                ["gray","#808080"], ["purple","#800080"], ["orange","#FFA500"], ["olive","#808000"], ["blue","#0000FF"],
                ["white","#FFFFFF"], ["fuchsia","#FF00FF"], ["yellow","#FFFF00"], ["lime","#00FF00"], ["aqua","#00FFFF"]];
    var container=document.getElementById("colorsContainer");
    
    for(var r in colors){
        var el =document.createElement("div");
        el.className="color clickable";
        el.title=colors[r][0];
        container.appendChild(el);
        el.style.backgroundColor=colors[r][1];
        YAHOO.util.Event.addListener(el, "click", colorPicker.pick); 
    }
    
    var auxEl=document.createElement("div");
    auxEl.style.height="5px";
    auxEl.style.clear="both";
    container.appendChild(auxEl);
    var lastEl=document.createElement("div");
    lastEl.id="colorSelected";
    container.appendChild(lastEl);
    lastEl.style.cursor="pointer";
     YAHOO.util.Event.addListener(lastEl, "click", colorPicker.showAdvancedColorPicker); 
}

colorPicker.pick=function(event){
    var el;
    if (event.currentTarget) el=event.currentTarget;//FFOX
    else el=event.srcElement;//IE
    var color=el.style.backgroundColor;//format "rgb(244,33,12)"; 
    var colors=color.substring(color.indexOf("(")+1,color.length-1);
    colors=colors.split(",");
    colors=[parseInt(colors[0]),parseInt(colors[1]),parseInt(colors[2])];
    var hexColor=RGBtoHEX(colors);
    colorPicker.paintColor(hexColor);
}

/**
 * Paint the color (in hex format) in the colorpicker element
 * params:
 *      color   the color in HEX format e.g #44AA1C
 */
colorPicker.paintColor=function(color){
    var parent=document.getElementById(colorPicker.COLOR_PICKER_CONTAINER_ID);
    var colorSelected=document.getElementById(colorPicker.COLOR_PICKER_SELECTED);
    var colorInput=document.getElementById(colorPicker.COLOR_PICKER_INPUT);
    parent.style.outline="2px solid "+color;
    colorSelected.style.background=color;
    colorInput.value=color;
}

colorPicker.reset=function(){
    var parent=document.getElementById(colorPicker.COLOR_PICKER_CONTAINER_ID);
    var colorSelected=document.getElementById("colorSelected");
    var colorInput=document.getElementById(colorPicker.COLOR_PICKER_INPUT);
    parent.style.outline="";
    colorSelected.style.background="";
    colorInput.value="";
}

/**
 * create the advanced color picker layer
 */
colorPicker.showAdvancedColorPicker=function (){

    //show layer
    var layerID=colorPicker.ADVANCED_COLOR_PICKER_CONTAINER_ID;
    var IDToPosition=colorPicker.COLOR_PICKER_CONTAINER_ID;
    document.getElementById(layerID).style.display="";//because overlay is also a popup class->display can be none!!! AND IF DISPLAY=NONE->NO POSITION IS AVAILABLE->setProperty("context") DOESN'T WORK
     var overlay = new YAHOO.widget.Overlay(layerID, { visible:false,effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.50} } );
    var posDIV=document.getElementById(IDToPosition);
    if (posDIV!=undefined){
        overlay.cfg.setProperty("context",[IDToPosition,"tr","tr"]);
    }else overlay.cfg.setProperty("xy", [200,100]); 
    overlay.render();
    overlay.show();
  
    //create object the first time
    if (colorPicker.advancedColorPickerObject==undefined){
            colorPicker.advancedColorPickerObject=new colorPicker.advancedColorPicker();
    }
    //get the value from the basicColorPicker
    var hex=document.getElementById(colorPicker.COLOR_PICKER_INPUT).value;
    if (hex.indexOf("#")!=0) hex="#FFFFFF";
    var rgb=HEXtoRGB(hex);
    colorPicker.advancedColorPickerObject.colorObj.setValue(rgb,false);
    myOverlay=overlay;
}


colorPicker.advancedColorPicker=function(){
          
    this.layerID=colorPicker.ADVANCED_COLOR_PICKER_CONTAINER_ID;
    
    this.accept=function(){
        var color="#"+picker.get("hex");
        colorPicker.paintColor(color);  
        this.close();
    }
    
    this.close=function(){
        document.getElementById(this.layerID).style.display="none";
        document.getElementById(this.layerID).style.visibility="hidden";
    }
    
    var params= {showhsvcontrols:false, showhexcontrols: true,showwebsafe:true,showhexsummary:true,showrgbcontrols:true,
                    images: {PICKER_THUMB: "http://developer.yahoo.com/yui/examples/colorpicker/assets/picker_thumb.png",
                            HUE_THUMB: "http://developer.yahoo.com/yui/examples/colorpicker/assets/hue_thumb.png"
                    }
                };

    this.colorObj = new YAHOO.widget.ColorPicker(colorPicker.ADVANCED_COLOR_PICKER_CONTAINER_ID+".body.container",params);
    
    var picker=this.colorObj;
    //a listener for logging RGB color changes;
                //this will only be visible if logger is enabled:
                var onRgbChange = function(o) {
                        /*o is an object
                                { newValue: (array of R, G, B values),
                                  prevValue: (array of R, G, B values),
                                  type: "rgbChange"
                                 }
                        */
                        
                }
                
                //subscribe to the rgbChange event;
                picker.on("rgbChange", onRgbChange);
}



YAHOO.util.Event.addListener(window, "load", colorPicker.createBasicColorPicker);