/*Copyright(c)2009,www.supersite.me*/
var imageUrl='/images/color_chooser_button.png';
function iColorShow(id,id2){
    var eICP=jQuery("#"+id2).position();
    jQuery("#iColorPicker").css({
        'top':eICP.top+(jQuery("#"+id).outerHeight())+"px",
        'left':(eICP.left)+"px",
        'position':'absolute'
    }).fadeIn("fast");
    jQuery("#iColorPickerBg").css({
        'position':'absolute',
        'top':0,
        'left':0,
        'width':'100%',
        'height':'100%'
    }).fadeIn("fast");
    var def=jQuery("#"+id).val();
    jQuery('#colorPreview span').text(def);
    jQuery('#colorPreview').css('background',def);
    jQuery('#color').val(def);
    var hxs=jQuery('#iColorPicker');
    for(i=0;i<hxs.length;i++){
        var tbl=document.getElementById('hexSection'+i);
        var tblChilds=tbl.childNodes;
        for(j=0;j<tblChilds.length;j++){
            var tblCells=tblChilds[j].childNodes;
            for(k=0;k<tblCells.length;k++){
                jQuery(tblChilds[j].childNodes[k]).unbind().mouseover(function(a){
                    var aaa="#"+jQuery(this).attr('hx');
                    jQuery('#colorPreview').css('background',aaa);
                    jQuery('#colorPreview span').text(aaa);
                }).click(function(){
                    var aaa="#"+jQuery(this).attr('hx');
//                    if(jQuery("#calCoverTitle")){
//                        jQuery("#calCoverTitle").css("color",aaa);
//                    }else{
                        setTextColor(aaa,id);
//                    }
                    jQuery("#"+id).val(aaa).css("background",aaa);
                    jQuery("#iColorPickerBg").hide();
                    jQuery("#iColorPicker").fadeOut();
                    jQuery(this);
                });
            }
        }
    }
}
this.iColorPicker=function(){
    jQuery("input.iColorPicker").each(function(i){
        if(i==0){
            jQuery(document.createElement("div")).attr("id","iColorPicker").css('display','none').html('<table class="pickerTable" id="pickerTable0"> <thead id="hexSection0"> <tr> <td style="background:#ffffff" hx="ffffff"></td> <td style="background:#ebebeb" hx="ebebeb"></td> <td style="background:#e1e1e1" hx="e1e1e1"></td> <td style="background:#d7d7d7" hx="d7d7d7"></td> <td style="background:#cccccc" hx="cccccc"></td> <td style="background:#c2c2c2" hx="c2c2c2"></td> <td style="background:#b7b7b7" hx="b7b7b7"></td> <td style="background:#acacac" hx="acacac"></td> <td style="background:#9f9f9f" hx="9f9f9f"></td> <td style="background:#949494" hx="949494"></td> <td style="background:#898989" hx="898989"></td> <td style="background:#7e7e7e" hx="7e7e7e"></td> <td style="background:#717171" hx="717171"></td> <td style="background:#626262" hx="626262"></td> <td style="background:#565655" hx="565655"></td> <td style="background:#464646" hx="464646"></td> </tr> <tr><td style="background:#f6977a" hx="f6977a"></td> <td style="background:#faad83" hx="faad83"></td> <td style="background:#fdc68c" hx="fdc68c"></td> <td style="background:#fef59c" hx="fef59c"></td> <td style="background:#c7e09d" hx="c7e09d"></td> <td style="background:#a5d59d" hx="a5d59d"></td> <td style="background:#81c99d" hx="81c99d"></td> <td style="background:#7ccdc8" hx="7ccdc8"></td> <td style="background:#6dcff6" hx="6dcff6"></td> <td style="background:#7ba6d8" hx="7ba6d8"></td> <td style="background:#8192c9" hx="8192c9"></td> <td style="background:#8881be" hx="8881be"></td> <td style="background:#a185bd" hx="a185bd"></td> <td style="background:#bc8cbf" hx="bc8cbf"></td> <td style="background:#f49cc1" hx="f49cc1"></td> <td style="background:#f6999d" hx="f6999d"></td> </tr> <tr><td style="background:#f06c4e" hx="f06c4e"></td> <td style="background:#f78e55" hx="f78e55"></td> <td style="background:#fbaf5b" hx="fbaf5b"></td> <td style="background:#fdf16c" hx="fdf16c"></td> <td style="background:#acd372" hx="acd372"></td> <td style="background:#7ec574" hx="7ec574"></td> <td style="background:#38b778" hx="38b778"></td> <td style="background:#1abab3" hx="1abab3"></td> <td style="background:#1abff1" hx="1abff1"></td> <td style="background:#438ccb" hx="438ccb"></td> <td style="background:#5674b8" hx="5674b8"></td> <td style="background:#5e5da9" hx="5e5da9"></td> <td style="background:#8560a9" hx="8560a9"></td> <td style="background:#a763a8" hx="a763a8"></td> <td style="background:#ef6ea8" hx="ef6ea8"></td> <td style="background:#f06d7d" hx="f06d7d"></td> </tr> <tr><td style="background:#ed2226" hx="ed2226"></td> <td style="background:#ef6624" hx="ef6624"></td> <td style="background:#f7941f" hx="f7941f"></td> <td style="background:#fdee1e" hx="fdee1e"></td> <td style="background:#90c63f" hx="90c63f"></td> <td style="background:#3ab54a" hx="3ab54a"></td> <td style="background:#04a64e" hx="04a64e"></td> <td style="background:#00a99e" hx="00a99e"></td> <td style="background:#29abe2" hx="29abe2"></td> <td style="background:#0b72ba" hx="0b72ba"></td> <td style="background:#0356a4" hx="0356a4"></td> <td style="background:#30358f" hx="30358f"></td> <td style="background:#662f90" hx="662f90"></td> <td style="background:#91298d" hx="91298d"></td> <td style="background:#ec0c8c" hx="ec0c8c"></td> <td style="background:#ed145a" hx="ed145a"></td> </tr> <tr><td style="background:#9c1c1f" hx="9c1c1f"></td> <td style="background:#a14323" hx="a14323"></td> <td style="background:#a26427" hx="a26427"></td> <td style="background:#aaa134" hx="aaa134"></td> <td style="background:#58853c" hx="58853c"></td> <td style="background:#1c7c3e" hx="1c7c3e"></td> <td style="background:#04733b" hx="04733b"></td> <td style="background:#00736a" hx="00736a"></td> <td style="background:#0076a4" hx="0076a4"></td> <td style="background:#0376a5" hx="0376a5"></td> <td style="background:#20386d" hx="20386d"></td> <td style="background:#262260" hx="262260"></td> <td style="background:#442160" hx="442160"></td> <td style="background:#611f5f" hx="611f5f"></td> <td style="background:#9d1f5f" hx="9d1f5f"></td> <td style="background:#9c1b3c" hx="9c1b3c"></td> </tr> <tr><td style="background:#771113" hx="771113"></td> <td style="background:#7b3318" hx="7b3318"></td> <td style="background:#7b4b1e" hx="7b4b1e"></td> <td style="background:#807b30" hx="807b30"></td> <td style="background:#3f6831" hx="3f6831"></td> <td style="background:#0a6031" hx="0a6031"></td> <td style="background:#04582d" hx="04582d"></td> <td style="background:#015a51" hx="015a51"></td> <td style="background:#025b7e" hx="025b7e"></td> <td style="background:#173760" hx="173760"></td> <td style="background:#1b2654" hx="1b2654"></td> <td style="background:#171148" hx="171148"></td> <td style="background:#2f104a" hx="2f104a"></td> <td style="background:#4a1149" hx="4a1149"></td> <td style="background:#791547" hx="791547"></td> <td style="background:#791128" hx="791128"></td> </tr> </thead> <tbody> <tr> <td style="border:1px solid #000;background:#fff;cursor:pointer;height:60px;-moz-background-clip:-moz-initial;-moz-background-origin:-moz-initial;-moz-background-inline-policy:-moz-initial;" colspan="16" align="center" id="colorPreview"> <span style="color:#000;border:1px solid rgb(0, 0, 0);padding:5px;background-color:#fff;font:11px Arial, Helvetica, sans-serif;"></span> </td> </tr> </tbody> </table><style>#iColorPicker input{margin:2px}</style>').appendTo("body");
            jQuery(document.createElement("div")).attr("id","iColorPickerBg").click(function(){
                jQuery("#iColorPickerBg").hide(); 
                jQuery("#iColorPicker").fadeOut();
            }).appendTo("body");
            jQuery('table.pickerTable td').css({
                'width':'12px',
                'height':'14px',
                'border':'1px solid #000',
                'cursor':'pointer'
            });
            jQuery('#iColorPicker table.pickerTable').css({
                'border-collapse':'collapse'
            });
            jQuery('#iColorPicker').css({
                'border':'1px solid #ccc',
                'background':'#333',
                'padding':'5px',
                'color':'#fff',
                'z-index':9999
            });
        }
        jQuery('#colorPreview').css({
            'height':'50px'
        });
        jQuery(this).css("backgroundColor",jQuery(this).val()).after('<a href="javascript:void(null)" style="float:left;" id="icp_'+this.id+'" onclick="iColorShow(\''+this.id+'\',\'icp_'+this.id+'\')"><img src="'+imageUrl+'" style="border:0;margin:0 0 0 3px" align="absmiddle" ></a>');
    })
};
jQuery(function(){
    iColorPicker();
});