var picker;
      function pickColorFor(div_id){

        /*** Get the current colors and text from the block ***/
        /** Color values returned by JQuery are always in
         *    RGB and the Color Wheel only takes
         *    HEX values so therefore it needs to be converted
         *    from RGB to HEX ***/

        var current_background_color = rgb2hex($("#" +div_id+ " .itemHeader").css("background-color"));
        var current_text_color = rgb2hex($("#" +div_id+ " .itemHeader").css("color"));

        /*** Get Block Name ***/

        var block_name = jQuery.trim($("#" +div_id+ " .itemHeader").text());

        /** Constructs the color wheel here with the current color values from the block****/
        /** The closeColorWheelFor function takes the block div id as
         *  parameter so when Color wheel closes it changes the colors
         *  of the block */
        var color_wheel =
          "<style type='text/css'>#color-p { background:#EEEEEE none repeat scroll 0 0;border:1px solid #CCCCCC;margin:0 auto;padding:20px;position:relative;width:235px;height:380px;z-index:999; }</style><div id='color-p'><div id='picker'></div>\n\
           <label id='hex-label' for='hex'>Color:</label>\n\
          <input type='text' id='hex-code-input' name='hex-code-input' value='"+ current_background_color +"' />\n\
          <img id='apply-hex-button' alt='close_button' \n\
                src='http://tehkseven.net/forum/style_images/tehkseven2/apply.png' \n\
                title=''\n\
                onClick=\"updateWithHexCode()\"/>\n\
           <div class='color-form-item'>\n\
              <div id='choose'>Select color:</div>\n\
              <div id='text-color-link' onClick=\"selectLink('text')\">Text</div>\n\
              <div id='background-color-link' onClick=\"selectLink('background')\">Background</div>\n\
              <label id='color-label' for='color'>Preview:</label>\n\
              <div id='styled-block' style='background-color:"+current_background_color+";\n\
                  display:block;border:1px solid #CCCCCC;'>\n\
                <div style='margin-left:10px;\n\
                            margin-top:10px;\n\
                            color:"+current_text_color+";'>\n\
                      "+block_name+"\n\
                </div>\n\
              </div>\n\
          </div>\n\
          <input type='checkbox' id='apply-to-all' unchecked />Apply to all blocks\n\
          <img id='update-button' alt='close_button' \n\
                src='http://tehkseven.net/forum/style_images/tehkseven2/update-button.gif' \n\
                title='' style='cursor:pointer;'\n\
                onClick=\"closeColorWheelFor('"+div_id+"')\"/></div>";


        $("#color-picker").append(color_wheel);



        $('#picker').farbtastic(function(color){


          if($("#color-label").text()== "Text Color:" )
          {
            $("#styled-block div").css("color", color);
          }
          else
          {
            $("#styled-block").css("background-color", color);
          }
          $("#hex-code-input").val(color);
          picker = this;

        })

      }
      /** This function is called when the color wheel is closed
       * takes the block id as parameter to change the colors of the
       * block. */
      function closeColorWheelFor(div_id){

        /** These are the new color HEX values that the user selected
         * when the closed button is clicked **/
        /*  These variables could be used to save new values
         *  alongside their div id that they belong to, seralize and
         *  send to Server */
        /** OR
         *  If you want to get current HEX color values of any block in the window, you can
         *  do that anytime with the following commands:
         *  Background color:
         *  rgb2hex($("#" +DIV ID HERE+ " .itemHeader").css("background-color"))
         *  Text color:
         *  rgb2hex($("#" +DIV ID HERE+ " .itemHeader").css("color")); */
       
  
          var new_text_color = rgb2hex($("#styled-block div").css("color"));
          var new_background_color = rgb2hex($("#styled-block").css("background-color"));
    
        



        /** Update  colors on the block **/
        $("#" +div_id+ " .itemHeader").css("color", new_text_color);
        $("#" +div_id+ " .itemHeader").css("background-color", new_background_color);

        /** If appy to all is ticked, update all blocks **/
        if ($('#apply-to-all').is(':checked')){
          $(".itemHeader" ).each(function() {
            $(this).css("color", new_text_color);
            $(this).css("background-color", new_background_color);
          })
        }

        

        /** Remove color wheel **/
        $("#color-picker").empty();


      }
      /** This function is to select between text color
       * and background color by changing the label name and set
       * color picker to the current color position ***/
      function selectLink(value){

        if (value == "text")
        {
          $("#color-label").text("Text Color:");
          picker.setColor(rgb2hex($("#styled-block div").css("color")));
        }
        else
        {
          $("#color-label").text("Background Color:");
          picker.setColor(rgb2hex($("#styled-block").css("background-color")));
        }
      }

      /** This function retrieves the Hexcode from input
       *AND updates the color wheel and preview field **/
      function updateWithHexCode(){

        var color = $("#hex-code-input").val();

        if($("#color-label").text()== "Text Color:" )
        {
            $("#styled-block div").css("color", color);
            picker.setColor(color);
        }
        else
        {
            $("#styled-block").css("background-color", color);
            picker.setColor(color);
        }

      }


      /** This function converts RGB color values to HEX color values
       *  IF RGB is the input **/
      function rgb2hex(rgb) {

        if(rgb.match(/#.*/) == null){
          rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
          function hex(x) {
          hexDigits = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
          return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
          }
          return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
        }else{
          return rgb;
        }
        
      }
	 
      function out_rgb2hex(rgb) {

        if(rgb.match(/#.*/) == null){
          rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
          function hex(x) {
          hexDigits = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
          return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
          }
          return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
        }else{	
          return rgb.replace(/#/, '');
        }
        
      }