/***
 @title:
 Colour Picker

 @version:
 2.0

 @author:
 Andreas Lagerkvist

 @date:
 2008-09-16

 @url:
 http://andreaslagerkvist.com/jquery/colour-picker/

 @license:
 http://creativecommons.org/licenses/by/3.0/

 @copyright:
 2008 Andreas Lagerkvist (andreaslagerkvist.com)

 @requires:
 jquery, jquery.colourPicker.css, jquery.colourPicker.gif

 @does:
 Use this plug-in on a normal <select>-element filled with colours to turn it in to a colour-picker widget that allows users to view all the colours in the drop-down as well as enter their own, preferred, custom colour. Only about 1k compressed.

 @howto:
 jQuery('select[name="colour"]').colourPicker({ico: 'my-icon.gif', title: 'Select a colour from the list'}); Would replace the select with 'my-icon.gif' which, when clicked, would open a dialogue with the title 'Select a colour from the list'.

 You can close the colour-picker without selecting a colour by clicking anywhere outside the colour-picker box.

 Here's a handy PHP-function to generate a list of "web-safe" colours:

 [code]
 function gwsc() {
 $cs = array('00', '33', '66', '99', 'CC', 'FF');

 for($i=0; $i<6; $i++) {
 for($j=0; $j<6; $j++) {
 for($k=0; $k<6; $k++) {
 $c = $cs[$i] .$cs[$j] .$cs[$k];
 echo "<option value=\"$c\">#$c</option>\n";
 }
 }
 }
 }
 [/code]

 Use it like this: <select name="colour"><?php gwsc(); ?></select>.

 @exampleHTML:
 <p>
 <label>
 Pick a colour<br />
 <select name="colour">
 <option value="ffffff">#ffffff</option>
 <option value="ffccc9">#ffccc9</option>
 <option value="ffce93">#ffce93</option>
 <option value="fffc9e">#fffc9e</option>
 <option value="ffffc7">#ffffc7</option>
 <option value="9aff99">#9aff99</option>
 <option value="96fffb">#96fffb</option>
 <option value="cdffff">#cdffff</option>
 <option value="cbcefb">#cbcefb</option>
 <option value="cfcfcf">#cfcfcf</option>
 <option value="fd6864">#fd6864</option>
 <option value="fe996b">#fe996b</option>
 <option value="fffe65">#fffe65</option>
 <option value="fcff2f">#fcff2f</option>
 <option value="67fd9a">#67fd9a</option>
 <option value="38fff8">#38fff8</option>
 <option value="68fdff">#68fdff</option>
 <option value="9698ed">#9698ed</option>
 <option value="c0c0c0">#c0c0c0</option>
 <option value="fe0000">#fe0000</option>
 <option value="f8a102">#f8a102</option>
 <option value="ffcc67">#ffcc67</option>
 <option value="f8ff00">#f8ff00</option>
 <option value="34ff34">#34ff34</option>
 <option value="68cbd0">#68cbd0</option>
 <option value="34cdf9">#34cdf9</option>
 <option value="6665cd">#6665cd</option>
 <option value="9b9b9b">#9b9b9b</option>
 <option value="cb0000">#cb0000</option>
 <option value="f56b00">#f56b00</option>
 <option value="ffcb2f">#ffcb2f</option>
 <option value="ffc702">#ffc702</option>
 <option value="32cb00">#32cb00</option>
 <option value="00d2cb">#00d2cb</option>
 <option value="3166ff">#3166ff</option>
 <option value="6434fc">#6434fc</option>
 <option value="656565">#656565</option>
 <option value="9a0000">#9a0000</option>
 <option value="ce6301">#ce6301</option>
 <option value="cd9934">#cd9934</option>
 <option value="999903">#999903</option>
 <option value="009901">#009901</option>
 <option value="329a9d">#329a9d</option>
 <option value="3531ff">#3531ff</option>
 <option value="6200c9">#6200c9</option>
 <option value="343434">#343434</option>
 <option value="680100">#680100</option>
 <option value="963400">#963400</option>
 <option value="986536" selected="selected">#986536</option>
 <option value="646809">#646809</option>
 <option value="036400">#036400</option>
 <option value="34696d">#34696d</option>
 <option value="00009b">#00009b</option>
 <option value="303498">#303498</option>
 <option value="000000">#000000</option>
 <option value="330001">#330001</option>
 <option value="643403">#643403</option>
 <option value="663234">#663234</option>
 <option value="343300">#343300</option>
 <option value="013300">#013300</option>
 <option value="003532">#003532</option>
 <option value="010066">#010066</option>
 <option value="340096">#340096</option>
 </select>
 </label>
 </p>

 @exampleJS:
 jQuery('#jquery-colour-picker-example select').colourPicker({
 ico:    WEBROOT + 'aFramework/Modules/Base/gfx/jquery.colourPicker.gif',
 title:    false
 });
 ***/
jQuery.fn.colourPicker = function (conf) {
    // Config for plug
    var config = jQuery.extend({
                                   id:'jquery-colour-picker', // id of colour-picker container
                                   ico:'ico.gif', // SRC to colour-picker icon
                                   title:'Pick a colour', // Default dialogue title
                                   inputBG:true, // Whether to change the input's background to the selected colour's
                                   speed:0, // Speed of dialogue-animation
                                   openTxt:'Open colour picker'
                               }, conf);

    // Inverts a hex-colour
    var hexInvert = function (hex) {
        var r = parseInt(hex.substr(0, 2), 16);
        var g = parseInt(hex.substr(2, 2), 16);
        var b = parseInt(hex.substr(4, 2), 16);

        var contrast = (r * g) + (g * b);
        return contrast < 60000 ? 'ffffff' : '000000'
    };

    // Add the colour-picker dialogue if not added
    var colourPicker = jQuery('#' + config.id);

    if (!colourPicker.length) {
        colourPicker = jQuery('<div id="' + config.id + '"></div>').appendTo(document.body).hide();

        // Remove the colour-picker if you click outside it (on body)
        jQuery(document.body).click(function (event) {
            if (!(jQuery(event.target).is('#' + config.id) || jQuery(event.target).parents('#' + config.id).length)) {
                colourPicker.hide(config.speed);
            }
        });
    }

    // For every select passed to the plug-in
    return this.each(function () {
        // Insert icon and input
        var select = jQuery(this);
        //var icon = jQuery('<a href="#"><img src="' + config.ico + '" alt="' + config.openTxt + '" /></a>').insertAfter(select);
        var picker = jQuery('<div>'
                                + '<input class="jquery-colour-picker-box" type="text" value="Choose color..."  />'
                                + '<input type="hidden" name="' + select.attr('name') + '" value="' + select.children(':selected').text() + '" />'
                                + '</div>'
        ).insertAfter(select);
        var input = $(picker).children('input')[0];
        var hidden = $(picker).children('input')[1];
        var loc = '';
        var initHex = select.val();

        // Build a list of colours based on the colours in the select
        jQuery('option', select).each(function () {
            var option = jQuery(this);
            var hex = option.val();
            var title = option.text();

            loc +=
                '<li><a href="#" title="' + title
                    + '" rel="' + hex
                    + '">'

                    + title
                    + '<div style="background: #' + hex + ';"</div>'
                    + '</a></li>';

            /*
             loc += '<li>' + title + '<a href="#" title="'
             + title
             + '" rel="'
             + hex
             + '" style="background: #'
             + hex
             + '; colour: '
             + hexInvert(hex)
             + ';">'
             + '<div>pick it</div>'
             + '</a></li>';
             */

        });

        // Remove select
        select.remove();

        // If user wants to, change the input's BG to reflect the newly selected colour
        if (config.inputBG) {
            //input.change(function() {
            input.css({ background:'#' + initHex, color:'#' + hexInvert(initHex) });
            //});

            //input.change();
        }

        // When you click the icon
        input.click(function () {
            // Show the colour-picker next to the icon and fill it with the colours in the select that used to be there
            var iconPos = input.offset();
            var heading = config.title ? '<h2>' + config.title + '</h2>' : '';

            colourPicker.html(heading + '<ul>' + loc + '</ul>').css({
                                                                        position:'absolute',
                                                                        left:iconPos.left + 'px',
                                                                        top:(iconPos.top + input.height() + 5) + 'px'
                                                                    }).show(config.speed);

            // When you click a colour in the colour-picker
            jQuery('a', colourPicker).click(function () {
                // The hex is stored in the link's rel-attribute
                var hex = jQuery(this).attr('rel');
                var title = jQuery(this).attr('title');

                hidden.val(title);
                input.val(title);

                // If user wants to, change the input's BG to reflect the newly selected colour
                if (config.inputBG) {
                    input.css({ background:'#' + hex, color:'#' + hexInvert(hex) });
                }

                // Trigger change-event on input
                input.change();

                // Hide the colour-picker and return false
                colourPicker.hide(config.speed);

                return false;
            });

            return false;
        });
    });
};