/************************************************************************************************************
@fileoverview
JS Color picker
Copyright (C) October 2005,  DHTMLGoodies.com, Alf Magne Kalleland

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA

Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
written by Alf Magne Kalleland.

Alf Magne Kalleland, 2007
Owner of DHTMLgoodies.com


************************************************************************************************************/  

  var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
  var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;
  
  var form_widget_amount_slider_handle = 'js/color_picker/images/slider_handle.gif';
  var slider_handle_image_obj = false;
  var sliderObjectArray = new Array();
  var slider_counter = 0;
  var slideInProgress = false;
  var handle_start_x;
  var event_start_x;
  var currentSliderIndex;
  
  function form_widget_cancel_event()
  {
    return false;    
  }
  
  function getImageSliderHeight(){
    if(!slider_handle_image_obj){
      slider_handle_image_obj = new Image();
      slider_handle_image_obj.src = form_widget_amount_slider_handle;
    }
    if(slider_handle_image_obj.width>0){
      return;
    }else{
      setTimeout('getImageSliderHeight()',50);
    }
  }
  
  function positionSliderImage(e,theIndex,inputObj)
  {
    if(this)inputObj = this;
    if(!theIndex)theIndex = inputObj.getAttribute('sliderIndex');
    var handleImg = document.getElementById('slider_handle' + theIndex);
    var ratio = sliderObjectArray[theIndex]['width'] / (sliderObjectArray[theIndex]['max']-sliderObjectArray[theIndex]['min']);
    var currentValue = sliderObjectArray[theIndex]['formTarget'].value-sliderObjectArray[theIndex]['min'];    
    handleImg.style.left = currentValue * ratio + 'px';      
    setColorByRGB();
  }
  
  function adjustFormValue(theIndex)
  {
    var handleImg = document.getElementById('slider_handle' + theIndex);  
    var ratio = sliderObjectArray[theIndex]['width'] / (sliderObjectArray[theIndex]['max']-sliderObjectArray[theIndex]['min']);
    var currentPos = handleImg.style.left.replace('px','');
    sliderObjectArray[theIndex]['formTarget'].value = Math.round(currentPos / ratio) + sliderObjectArray[theIndex]['min'];
    
  }
    
  function initMoveSlider(e)
  {
  
    if(document.all)e = event;  
    slideInProgress = true;
    event_start_x = e.clientX;
    handle_start_x = this.style.left.replace('px','');
    currentSliderIndex = this.id.replace(/[^\d]/g,'');
    return false;
  }
  
  function startMoveSlider(e)
  {
    if(document.all)e = event;  
    if(!slideInProgress)return;  
    var leftPos = handle_start_x/1 + e.clientX/1 - event_start_x;
    if(leftPos<0)leftPos = 0;
    if(leftPos/1>sliderObjectArray[currentSliderIndex]['width'])leftPos = sliderObjectArray[currentSliderIndex]['width'];
    document.getElementById('slider_handle' + currentSliderIndex).style.left = leftPos + 'px';
    adjustFormValue(currentSliderIndex);
    if(sliderObjectArray[currentSliderIndex]['onchangeAction']){
      eval(sliderObjectArray[currentSliderIndex]['onchangeAction']);
    }
  }
  
  function stopMoveSlider()
  {
    slideInProgress = false;
  }
  
  
  function form_widget_amount_slider(targetElId,formTarget,width,min,max,onchangeAction)
  {
    if(!slider_handle_image_obj){
      getImageSliderHeight();    
    }
        
    slider_counter = slider_counter +1;
    sliderObjectArray[slider_counter] = new Array();
    sliderObjectArray[slider_counter] = {"width":width - 9,"min":min,"max":max,"formTarget":formTarget,"onchangeAction":onchangeAction};
    
    formTarget.setAttribute('sliderIndex',slider_counter);
    formTarget.onchange = positionSliderImage;
    var parentObj = document.createElement('DIV');
    parentObj.style.width = width + 'px';
    parentObj.style.height = '12px';  // The height of the image
    parentObj.style.position = 'relative';
    parentObj.id = 'slider_container' + slider_counter;
    document.getElementById(targetElId).appendChild(parentObj);
    
    var obj = document.createElement('DIV');
    obj.className = 'form_widget_amount_slider';
    obj.innerHTML = '<span></span>';
    obj.style.width = width + 'px';
    obj.id = 'slider_slider' + slider_counter;
    obj.style.position = 'absolute';
    obj.style.bottom = '0px';
    parentObj.appendChild(obj);
    
    var handleImg = document.createElement('IMG');
    handleImg.style.position = 'absolute';
    handleImg.style.left = '0px';
    handleImg.style.zIndex = 5;
    handleImg.src = slider_handle_image_obj.src;
    handleImg.id = 'slider_handle' + slider_counter;
    handleImg.onmousedown = initMoveSlider;
    if(document.body.onmouseup){
      if(document.body.onmouseup.toString().indexOf('stopMoveSlider')==-1){
        alert('You allready have an onmouseup event assigned to the body tag');
      }
    }else{
      document.body.onmouseup = stopMoveSlider;  
      document.body.onmousemove = startMoveSlider;  
    }
    handleImg.ondragstart = form_widget_cancel_event;
    parentObj.appendChild(handleImg);
    positionSliderImage(false,slider_counter);
  }
    

  
  var namedColors = new Array('AliceBlue','AntiqueWhite','Aqua','Aquamarine','Azure','Beige','Bisque','Black','BlanchedAlmond','Blue','BlueViolet','Brown',
  'BurlyWood','CadetBlue','Chartreuse','Chocolate','Coral','CornflowerBlue','Cornsilk','Crimson','Cyan','DarkBlue','DarkCyan','DarkGoldenRod','DarkGray',
  'DarkGreen','DarkKhaki','DarkMagenta','DarkOliveGreen','Darkorange','DarkOrchid','DarkRed','DarkSalmon','DarkSeaGreen','DarkSlateBlue','DarkSlateGray',
  'DarkTurquoise','DarkViolet','DeepPink','DeepSkyBlue','DimGray','DodgerBlue','Feldspar','FireBrick','FloralWhite','ForestGreen','Fuchsia','Gainsboro',
  'GhostWhite','Gold','GoldenRod','Gray','Green','GreenYellow','HoneyDew','HotPink','IndianRed','Indigo','Ivory','Khaki','Lavender','LavenderBlush',
  'LawnGreen','LemonChiffon','LightBlue','LightCoral','LightCyan','LightGoldenRodYellow','LightGrey','LightGreen','LightPink','LightSalmon','LightSeaGreen',
  'LightSkyBlue','LightSlateBlue','LightSlateGray','LightSteelBlue','LightYellow','Lime','LimeGreen','Linen','Magenta','Maroon','MediumAquaMarine',
  'MediumBlue','MediumOrchid','MediumPurple','MediumSeaGreen','MediumSlateBlue','MediumSpringGreen','MediumTurquoise','MediumVioletRed','MidnightBlue',
  'MintCream','MistyRose','Moccasin','NavajoWhite','Navy','OldLace','Olive','OliveDrab','Orange','OrangeRed','Orchid','PaleGoldenRod','PaleGreen',
  'PaleTurquoise','PaleVioletRed','PapayaWhip','PeachPuff','Peru','Pink','Plum','PowderBlue','Purple','Red','RosyBrown','RoyalBlue','SaddleBrown',
  'Salmon','SandyBrown','SeaGreen','SeaShell','Sienna','Silver','SkyBlue','SlateBlue','SlateGray','Snow','SpringGreen','SteelBlue','Tan','Teal','Thistle',
  'Tomato','Turquoise','Violet','VioletRed','Wheat','White','WhiteSmoke','Yellow','YellowGreen');
  
   var namedColorRGB = new Array('#F0F8FF','#FAEBD7','#00FFFF','#7FFFD4','#F0FFFF','#F5F5DC','#FFE4C4','#000000','#FFEBCD','#0000FF','#8A2BE2','#A52A2A','#DEB887',
  '#5F9EA0','#7FFF00','#D2691E','#FF7F50','#6495ED','#FFF8DC','#DC143C','#00FFFF','#00008B','#008B8B','#B8860B','#A9A9A9','#006400','#BDB76B','#8B008B',
  '#556B2F','#FF8C00','#9932CC','#8B0000','#E9967A','#8FBC8F','#483D8B','#2F4F4F','#00CED1','#9400D3','#FF1493','#00BFFF','#696969','#1E90FF','#D19275',
  '#B22222','#FFFAF0','#228B22','#FF00FF','#DCDCDC','#F8F8FF','#FFD700','#DAA520','#808080','#008000','#ADFF2F','#F0FFF0','#FF69B4','#CD5C5C','#4B0082',
  '#FFFFF0','#F0E68C','#E6E6FA','#FFF0F5','#7CFC00','#FFFACD','#ADD8E6','#F08080','#E0FFFF','#FAFAD2','#D3D3D3','#90EE90','#FFB6C1','#FFA07A','#20B2AA',
  '#87CEFA','#8470FF','#778899','#B0C4DE','#FFFFE0','#00FF00','#32CD32','#FAF0E6','#FF00FF','#800000','#66CDAA','#0000CD','#BA55D3','#9370D8','#3CB371',
  '#7B68EE','#00FA9A','#48D1CC','#C71585','#191970','#F5FFFA','#FFE4E1','#FFE4B5','#FFDEAD','#000080','#FDF5E6','#808000','#6B8E23','#FFA500','#FF4500',
  '#DA70D6','#EEE8AA','#98FB98','#AFEEEE','#D87093','#FFEFD5','#FFDAB9','#CD853F','#FFC0CB','#DDA0DD','#B0E0E6','#800080','#FF0000','#BC8F8F','#4169E1',
  '#8B4513','#FA8072','#F4A460','#2E8B57','#FFF5EE','#A0522D','#C0C0C0','#87CEEB','#6A5ACD','#708090','#FFFAFA','#00FF7F','#4682B4','#D2B48C','#008080',
  '#D8BFD8','#FF6347','#40E0D0','#EE82EE','#D02090','#F5DEB3','#FFFFFF','#F5F5F5','#FFFF00','#9ACD32');
  
  
  var color_picker_div = false;
  var color_picker_active_tab = false;
  var color_picker_form_field = false;
  var color_picker_active_input = false;
  function baseConverter (number,ob,nb) {
    number = number + "";
    number = number.toUpperCase();
    var list = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    var dec = 0;
    for (var i = 0; i <=  number.length; i++) {
      dec += (list.indexOf(number.charAt(i))) * (Math.pow(ob , (number.length - i - 1)));
    }
    number = "";
    var magnitude = Math.floor((Math.log(dec))/(Math.log(nb)));
    for (var i = magnitude; i >= 0; i--) {
      var amount = Math.floor(dec/Math.pow(nb,i));
      number = number + list.charAt(amount); 
      dec -= amount*(Math.pow(nb,i));
    }
    if(number.length==0)number=0;
    return number;
  }
  
  function colorPickerGetTopPos(inputObj)
  {
    
    var returnValue = inputObj.offsetTop;
    while((inputObj = inputObj.offsetParent) != null){
      returnValue += inputObj.offsetTop;
    }
    return returnValue;
  }
  
  function colorPickerGetLeftPos(inputObj)
  {
    var returnValue = inputObj.offsetLeft;
    while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
    return returnValue;
  }
  
  function cancelColorPickerEvent(){
    return false;
  }
  
  function showHideColorOptions(e,inputObj)
  {
    

    var thisObj = this;
    if(inputObj){
      var parentNode = inputObj.parentNode; 
      thisObj = inputObj;
    }else var parentNode = this.parentNode;
    var activeColorDiv = false;
    var subDiv = parentNode.getElementsByTagName('DIV')[0];
    counter=0;  
    var initZIndex = 10;  
    var contentDiv = document.getElementById('color_picker_content').getElementsByTagName('DIV')[0];
    do{      
      if(subDiv.tagName=='DIV' && subDiv.className!='colorPickerCloseButton'){
        if(subDiv==thisObj){
          thisObj.className='colorPickerTab_active';
          thisObj.style.zIndex = 50;
          var img = thisObj.getElementsByTagName('IMG')[0];
          img.src = "js/color_picker/images/tab_right_active.gif"
          img.src = img.src.replace(/inactive/,'active');              
          contentDiv.style.display='block';
          activeColorDiv = contentDiv;
        }else{
          subDiv.className = 'colorPickerTab_inactive';  
          var img = subDiv.getElementsByTagName('IMG')[0];
          img.src = "js/color_picker/images/tab_right_inactive.gif";
          if(activeColorDiv)
            subDiv.style.zIndex = initZIndex - counter;
          else
            subDiv.style.zIndex = counter;
          contentDiv.style.display='none';
        }
        counter++;
      }
      subDiv = subDiv.nextSibling;
      if(contentDiv.nextSibling)contentDiv = contentDiv.nextSibling;
    }while(subDiv);
    
    
    document.getElementById('colorPicker_statusBarTxt').innerHTML = '&nbsp;';


  }
  
  function createColorPickerTopRow(inputObj){
    var tabs = ['RGB','Farbnamen','Farbregler'];
    var tabWidths = [40,80,70];
    var div = document.createElement('DIV');
    div.className='colorPicker_topRow';
  
    inputObj.appendChild(div);  
    var currentWidth = 0;
    for(var no=0;no<tabs.length;no++){      
      
      var tabDiv = document.createElement('DIV');
      tabDiv.onselectstart = cancelColorPickerEvent;
      tabDiv.ondragstart = cancelColorPickerEvent;
      if(no==0){
        suffix = 'active'; 
        color_picker_active_tab = this;
      }else suffix = 'inactive';
      
      tabDiv.id = 'colorPickerTab' + no;
      tabDiv.onclick = showHideColorOptions;
      if(no==0)tabDiv.style.zIndex = 50; else tabDiv.style.zIndex = 1 + (tabs.length-no);
      tabDiv.style.left = currentWidth + 'px';
      tabDiv.style.position = 'absolute';
      tabDiv.className='colorPickerTab_' + suffix;
      var tabSpan = document.createElement('SPAN');
      tabSpan.innerHTML = tabs[no];
      tabDiv.appendChild(tabSpan);
      var tabImg = document.createElement('IMG');
      tabImg.src = "js/color_picker/images/tab_right_" + suffix + ".gif";
      tabDiv.appendChild(tabImg);
      div.appendChild(tabDiv);
      if(navigatorVersion<6 && MSIE){  /* Lower IE version fix */
        tabSpan.style.position = 'relative';
        tabImg.style.position = 'relative';
        tabImg.style.left = '-3px';    
        tabDiv.style.cursor = 'hand';  
      }      
      currentWidth = currentWidth + tabWidths[no];
    
    }
    
    var closeButton = document.createElement('DIV');
    closeButton.className='colorPickerCloseButton';
    closeButton.innerHTML = 'x';
    closeButton.onclick = closeColorPicker;
    closeButton.onmouseover = toggleCloseButton;
    closeButton.onmouseout = toggleOffCloseButton;
    div.appendChild(closeButton);
    
  }
  
  function toggleCloseButton()
  {
    this.style.color='#FFF';
    this.style.backgroundColor = '#000000';
  }
  function toggleOffCloseButton()
  {
    this.style.color='';
    this.style.backgroundColor = '';      
    
  }
  function closeColorPicker()
  {
    
    color_picker_div.style.display='none';
  }
  function createWebColors(inputObj){
    var webColorDiv = document.createElement('DIV');
    webColorDiv.style.paddingTop = '1px';
    inputObj.appendChild(webColorDiv);
    for(var r=15;r>=0;r-=3){
      for(var g=0;g<=15;g+=3){
        for(var b=0;b<=15;b+=3){
          var red = baseConverter(r,10,16) + '';
          var green = baseConverter(g,10,16) + '';
          var blue = baseConverter(b,10,16) + '';
          
          var color = '#' + red + red + green + green + blue + blue;
          var div = document.createElement('DIV');
          div.style.backgroundColor=color;
          div.innerHTML = '<span></span>';
          div.className='colorSquare';
          div.title = color;  
          div.onclick = chooseColor;
          div.setAttribute('rgbColor',color);
          div.onmouseover = colorPickerShowStatusBarText;
          div.onmouseout = colorPickerHideStatusBarText;
          webColorDiv.appendChild(div);
        }
      }
    }
  }
    
  function createNamedColors(inputObj){
    var namedColorDiv = document.createElement('DIV');
    namedColorDiv.style.paddingTop = '1px';
    namedColorDiv.style.display='none';
    inputObj.appendChild(namedColorDiv);
    for(var no=0;no<namedColors.length;no++){
      var color = namedColorRGB[no];
      var div = document.createElement('DIV');
      div.style.backgroundColor=color;
      div.innerHTML = '<span></span>';
      div.className='colorSquare';
      div.title = namedColors[no];  
      div.onclick = chooseColor;
      div.onmouseover = colorPickerShowStatusBarText;
      div.onmouseout = colorPickerHideStatusBarText;
      div.setAttribute('rgbColor',color);
      namedColorDiv.appendChild(div);        
    }  
  
  }
  
  function colorPickerHideStatusBarText()
  {
    document.getElementById('colorPicker_statusBarTxt').innerHTML = '&nbsp;';
  }
  
  function colorPickerShowStatusBarText()
  {
    var txt = this.getAttribute('rgbColor');
    if(this.title.indexOf('#')<0)txt = txt + " (" + this.title + ")";
    document.getElementById('colorPicker_statusBarTxt').innerHTML = txt;  
  }
  
  function createAllColorDiv(inputObj){
    var allColorDiv = document.createElement('DIV');
    allColorDiv.style.display='none';
    allColorDiv.className = 'js_color_picker_allColorDiv';
    allColorDiv.style.paddingLeft = '3px';
    allColorDiv.style.paddingTop = '5px';
    allColorDiv.style.paddingBottom = '5px';
    inputObj.appendChild(allColorDiv);  
    
    var labelDiv = document.createElement('DIV');
    labelDiv.className='colorSliderLabel';
    labelDiv.innerHTML = 'R';
    allColorDiv.appendChild(labelDiv);  
    
    var innerDiv = document.createElement('DIV');
    innerDiv.className = 'colorSlider';
    innerDiv.id = 'sliderRedColor';    
    allColorDiv.appendChild(innerDiv);    
    
    var innerDivInput = document.createElement('DIV');
    innerDivInput.className='colorInput';
    
    var input = document.createElement('INPUT');
    input.id = 'js_color_picker_red_color';
    input.maxlength = 3;
    input.style.width = '48px';
    input.style.fontSize = '11px';
    input.name = 'redColor';
    input.value = 0;
    
    innerDivInput.appendChild(input);
    allColorDiv.appendChild(innerDivInput);

    var labelDiv = document.createElement('DIV');
    labelDiv.className='colorSliderLabel';
    labelDiv.innerHTML = 'G';
    allColorDiv.appendChild(labelDiv);  
        
    var innerDiv = document.createElement('DIV');
    innerDiv.className = 'colorSlider';
    innerDiv.id = 'sliderGreenColor';    
    allColorDiv.appendChild(innerDiv);    
    
    var innerDivInput = document.createElement('DIV');
    innerDivInput.className='colorInput';
    
    var input = document.createElement('INPUT');
    input.id = 'js_color_picker_green_color';
    input.maxlength = 3;
    input.style.width = '48px';
    input.style.fontSize = '11px';
    input.name = 'GreenColor';
    input.value = 0;
    
    innerDivInput.appendChild(input);
    allColorDiv.appendChild(innerDivInput);
    
    var labelDiv = document.createElement('DIV');
    labelDiv.className='colorSliderLabel';
    labelDiv.innerHTML = 'B';
    allColorDiv.appendChild(labelDiv);      
    var innerDiv = document.createElement('DIV');
    innerDiv.className = 'colorSlider';
    innerDiv.id = 'sliderBlueColor';    
    allColorDiv.appendChild(innerDiv);    
    
    var innerDivInput = document.createElement('DIV');
    innerDivInput.className='colorInput';
    
    var input = document.createElement('INPUT');
    input.id = 'js_color_picker_blue_color';
    input.maxlength = 3;
    input.style.width = '48px';
    input.style.fontSize = '11px';
    input.name = 'BlueColor';
    input.value = 0;
    
    innerDivInput.appendChild(input);
    allColorDiv.appendChild(innerDivInput);

  
    var colorPreview = document.createElement('DIV');
    colorPreview.className='colorPreviewDiv';
    colorPreview.id = 'colorPreview';
    colorPreview.style.backgroundColor = '#000000';
    colorPreview.innerHTML = '<span></span>';  
    colorPreview.title = 'Hier klicken um Farbe zu auszuwählen';
    allColorDiv.appendChild(colorPreview);
    colorPreview.onclick = chooseColorSlider;
    
    var colorCodeDiv = document.createElement('DIV');
    colorCodeDiv.className='colorCodeDiv';    
    var input = document.createElement('INPUT');
    input.id = 'js_color_picker_color_code';
    
    colorCodeDiv.appendChild(input);
    input.maxLength = 7;
    input.style.fontSize = '11px';
    input.style.width = '48px';    
    input.value = '#000000';
    input.onchange = setPreviewColorFromTxt;
    input.onblur = setPreviewColorFromTxt;
    allColorDiv.appendChild(colorCodeDiv);
    
    var clearingDiv = document.createElement('DIV');
    clearingDiv.style.clear = 'both';
    allColorDiv.appendChild(clearingDiv);
    
    
    form_widget_amount_slider('sliderRedColor',document.getElementById('js_color_picker_red_color'),170,0,255,"setColorByRGB()");
    form_widget_amount_slider('sliderGreenColor',document.getElementById('js_color_picker_green_color'),170,0,255,"setColorByRGB()");
    form_widget_amount_slider('sliderBlueColor',document.getElementById('js_color_picker_blue_color'),170,0,255,"setColorByRGB()");
  }
  
  function setPreviewColorFromTxt()
  {
    if(this.value.match(/\#[0-9A-F]{6}/g)){
      document.getElementById('colorPreview').style.backgroundColor=this.value;
      var r = this.value.substr(1,2);
      var g = this.value.substr(3,2);
      var b = this.value.substr(5,2);
      document.getElementById('js_color_picker_red_color').value = baseConverter(r,16,10);
      document.getElementById('js_color_picker_green_color').value = baseConverter(g,16,10);
      document.getElementById('js_color_picker_blue_color').value = baseConverter(b,16,10);
      
      positionSliderImage(false,1,document.getElementById('js_color_picker_red_color'));
      positionSliderImage(false,2,document.getElementById('js_color_picker_green_color'));
      positionSliderImage(false,3,document.getElementById('js_color_picker_blue_color'));
    }
    
  }
  
  function chooseColor()
  {
    farbe=this.getAttribute('rgbColor');
    color_picker_form_field.value = farbe.substr(1);
    color_picker_div.style.display='none';
    color_picker_set_function(farbe.substr(1));
  }
  
  function createStatusBar(inputObj)
  {
    var div = document.createElement('DIV');
    div.className='colorPicker_statusBar';  
    var innerSpan = document.createElement('SPAN');
    innerSpan.id = 'colorPicker_statusBarTxt';
    div.appendChild(innerSpan);
    inputObj.appendChild(div);
  }
  
  function chooseColorSlider()
  {
    farbe=document.getElementById('js_color_picker_color_code').value;
    color_picker_form_field.value = farbe.substr(1);
    color_picker_div.style.display='none';
    color_picker_set_function(farbe.substr(1));
  }
  
  
  function showColorPicker(inputObj,formField,setFunction)
  {
    if(!color_picker_div){
      color_picker_div = document.createElement('DIV');
      color_picker_div.id = 'dhtmlgoodies_colorPicker';
      color_picker_div.style.display='none';
      document.body.appendChild(color_picker_div);
      createColorPickerTopRow(color_picker_div);      
      var contentDiv = document.createElement('DIV');
      contentDiv.id = 'color_picker_content';
      color_picker_div.appendChild(contentDiv);      
      createWebColors(contentDiv);
      createNamedColors(contentDiv);
      createAllColorDiv(contentDiv);
      createStatusBar(color_picker_div);      
    }    
    if(color_picker_div.style.display=='none' || color_picker_active_input!=inputObj)color_picker_div.style.display='block'; else color_picker_div.style.display='none';    
    color_picker_div.style.left = colorPickerGetLeftPos(inputObj) + 'px';
    color_picker_div.style.top = colorPickerGetTopPos(inputObj) + inputObj.offsetHeight + 2 + 'px';
    color_picker_form_field = formField;
    color_picker_active_input = inputObj;
    color_picker_set_function = setFunction;
  }

  function setColorByRGB()
  {
    var formObj = document.forms[0];  
    var r = document.getElementById('js_color_picker_red_color').value.replace(/[^\d]/,'');
    var g = document.getElementById('js_color_picker_green_color').value.replace(/[^\d]/,'');
    var b = document.getElementById('js_color_picker_blue_color').value.replace(/[^\d]/,'');    
    if(r/1>255)r=255;
    if(g/1>255)g=255;
    if(b/1>255)b=255;
    r = baseConverter(r,10,16) + '';
    g = baseConverter(g,10,16) + '';
    b = baseConverter(b,10,16) + '';
    if(r.length==1)r = '0' + r;
    if(g.length==1)g = '0' + g;
    if(b.length==1)b = '0' + b;

    document.getElementById('colorPreview').style.backgroundColor = '#' + r + g + b;
    document.getElementById('js_color_picker_color_code').value = '#' + r + g + b;
  }