/**
 * Really Simple Color Picker in jQuery
 * 
 * Copyright (c) 2008 Lakshan Perera (www.laktek.com)
 * Licensed under the MIT (MIT-LICENSE.txt)  licenses.
 * 
 */


function just_keys(arr) {
    var n = [];
    var c = 0;
    for (key in arr) {
        n[c]=key;
        c++;
    }
    return n;
}

(function($){
  $.fn.colorPicker = function(colors){ 
    //if(this.length > 0) buildSelector(just_keys(colors));
    return this.each(function(i) { 
            buildSelector(this,just_keys(colors));
            buildPicker(this);
           }); 
  };
  
  var selectorOwner;
  var selectorShowing = false;
  
  buildPicker = function(element){
    //build color picker
    control = $("<div id='color_picker_"+element.id+"' class='color_picker'>&nbsp;</div>")
    control.css('background-color', $(element).val());
    
    //bind click event to color picker
    control.bind("click", toggleSelector);
    
    //add the color picker section
    $(element).after(control);
    
    //hide the input box
    $(element).hide();
  };
  
  buildSelector = function(element,colors){
    selector = $("<div class='color_selector' id='color_selector_" + element.id+"'></div>");

     //add color pallete
     $.each(colors, function(i){
      swatch = $("<div class='color_swatch'>&nbsp;</div>")
      swatch.css("background-color", "#" + this);
      swatch.bind("click", function(e){ changeColor($(this).css("background-color")) });
      swatch.bind("mouseover", function(e){ 
        $(this).css("border-color", "#598FEF"); 
        //$("input#color_value").val(toHex($(this).css("background-color")));    
        $("input#color_value_"+element.id).val(toName($(this).css("background-color"))); 
        }); 
      swatch.bind("mouseout", function(e){ 
        $(this).css("border-color", "#000");
        //$("input#color_value").val(toHex($(selectorOwner).css("background-color")));
        $("input#color_value_"+element.id).val(toName($(selectorOwner).css("background-color")));
        });
      
     swatch.appendTo(selector);
     });
  
     //add HEX value field
     hex_field = $("<label for='color_value_"+element.id+"'>Name</label><input type='text' size='8' id='color_value_"+element.id+"'/>");
     hex_field.bind("keydown", function(event){
      if(event.keyCode == 13) {changeColor($(this).val());}
      if(event.keyCode == 27) {toggleSelector()}
     });
     
     $("<div class='color_custom' id='color_custom_"+element.id+"'></div>").append(hex_field).appendTo(selector);

     //$("body").append(selector); 
     $(element).after(selector);
     selector.hide();

  };
  
  checkMouse = function(event){
    //check the click was on selector itself or on selectorOwner
    var selector = "div[id ^='color_selector' ]";
    var selectorParent = $(event.target).parents(selector).length;
    if(event.target == $(selector)[0] || event.target == selectorOwner || selectorParent > 0) return
    
    hideSelector();   
  }
  
  hideSelector = function(){
    var selector = $("div[id ^='color_selector_' ]");
    selector.hide();
    $(document).unbind("mousedown", checkMouse);
    selectorShowing = false
  }
  
  showSelector = function(parId){
    hideSelector(); //hide any strays
    var selector = $("div#color_selector_"+parId);

    selector.css({
      top: $(selectorOwner).offset().top + ($(selectorOwner).outerHeight()),
      left: $(selectorOwner).offset().left
    }); 
    hexColor = $(selectorOwner).prev("input").val();
    $("input#color_value_"+this.id).val(hexColor);
    selector.show();
    
    //bind close event handler
    $(document).bind("mousedown", checkMouse);
    selectorShowing = true 
   }
  
  toggleSelector = function(event){
    var parId = event.target.id.match(/_([^_]+)$/)[1];
    selectorOwner = this; 
    selectorShowing ? hideSelector() : showSelector(parId);
  }
  
  changeColor = function(value){
    if(selectedValue = toHex(value)){
      $(selectorOwner).css("background-color", selectedValue);
      //$(selectorOwner).prev("input").val(selectedValue).change();
      $(selectorOwner).prev("input").val(toName(value)).change();
      //close the selector
      hideSelector();    
    }
  };
  
  //converts RGB string to HEX - inspired by http://code.google.com/p/jquery-color-utils
  toHex = function(color){
    //valid HEX code is entered
    if(color.match(/[0-9a-fA-F]{3}$/) || color.match(/[0-9a-fA-F]{6}$/)){
      color = (color.charAt(0) == "#") ? color : ("#" + color);
    }
    //rgb color value is entered (by selecting a swatch)
    else if(color.match(/^rgb\(([0-9]|[1-9][0-9]|[1][0-9]{2}|[2][0-4][0-9]|[2][5][0-5]),[ ]{0,1}([0-9]|[1-9][0-9]|[1][0-9]{2}|[2][0-4][0-9]|[2][5][0-5]),[ ]{0,1}([0-9]|[1-9][0-9]|[1][0-9]{2}|[2][0-4][0-9]|[2][5][0-5])\)$/)){
      var c = ([parseInt(RegExp.$1),parseInt(RegExp.$2),parseInt(RegExp.$3)]);
      
      var pad = function(str){
            if(str.length < 2){
              for(var i = 0,len = 2 - str.length ; i<len ; i++){
                str = '0'+str;
              }
            }
            return str;
      }

      if(c.length == 3){
        var r = pad(c[0].toString(16)),g = pad(c[1].toString(16)),b= pad(c[2].toString(16));
        color = '#' + r.toUpperCase() + g.toUpperCase() + b.toUpperCase();
      }
    }
    else color = false;
    
    return color
  }
  toName = function(color){
    var c = toHex(color);
    if (c){
      return ZP_COLORS[c.slice(1)];
    }
    else {
      return '';
    }
    //return ZP_COLORS[toHex(color).slice(1)];
  }

  
  //public methods
  $.fn.colorPicker.addColors = function(colorArray){
    $.fn.colorPicker.defaultColors = $.fn.colorPicker.defaultColors.concat(colorArray);
  };
  $.fn.colorPicker.defaultColors = new Array();
//  for (var i in ZP_COLORS) {
//    $.fn.colorPicker.defaultColors.push(i);
//  }
//  $.fn.colorPicker.defaultColors = 
//	[ '000000', '993300','333300', '000080', '333399', '333333', '800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99' , 'CCFFFF', '99CCFF', 'FFFFFF'];
  
})(jQuery);