<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs  title="Color Picker Gadget"
              description="The Color Picker Gadget provides a rich visual interface for color selection. The interaction is a familiar one from the desktop paradigm: Color range and saturation are adjusted via sliders while the technical details of the current color are displayed in RGB and hex formats. The Color Picker Gadget can be used on your iGoogle page or inlined in your website."
              author="Matt Baylis"
              author_email="smogreport+modulefeedback@gmail.com"
              directory_title="Color Picker Gadget"
              width="325" height="210"
              screenshot="http://hosting.gmodules.com/ig/gadgets/file/103534220535816043845/colorpickerss.png"
              thumbnail="http://hosting.gmodules.com/ig/gadgets/file/103534220535816043845/colorpickerthumb.png"
>
<Require feature="analytics" />
<Require feature="dynamic-height"/>
<Require feature="setprefs"/>
</ModulePrefs>
<UserPref name="save" display_name="Remember last color" datatype="bool" default_value="true"/>
<UserPref name="rgb" default_value="255|255|255" datatype="hidden"/>
<UserPref name="basergb" default_value="255|0|0" datatype="hidden"/>
<UserPref name="hex" default_value="FFFFFF" datatype="hidden"/>
<UserPref name="indicator" default_value="0|0" datatype="hidden"/>
<UserPref name="slider" default_value="0" datatype="hidden"/>
<UserPref name="lastvalues" default_value="0|0" datatype="hidden"/>
<Content type="html">
<![CDATA[
  <script>
     // Track this gadget using Google Analytics.
     _IG_Analytics("UA-346747-20", "/gadget_colorpicker");
    
     var prefs__MODULE_ID__ = new _IG_Prefs(__MODULE_ID__);
     var saved = prefs__MODULE_ID__.getBool("save");
     var rgb = prefs__MODULE_ID__.getString("rgb");
     var basergb = prefs__MODULE_ID__.getString("basergb");
     var hex = prefs__MODULE_ID__.getString("hex");
     var indicator = prefs__MODULE_ID__.getString("indicator");
     var slider = prefs__MODULE_ID__.getString("slider");
     
     var rgb__MODULE_ID__ = rgb.split("|");
     var basergb__MODULE_ID__ = basergb.split("|");
     var indicator__MODULE_ID__ = indicator.split("|");
    
     _IG_RegisterOnloadHandler(function () {
    
       if(saved == true)
       {
         document.rgbform__MODULE_ID__.rgbR__MODULE_ID__.value = rgb__MODULE_ID__[0];
         document.rgbform__MODULE_ID__.rgbG__MODULE_ID__.value = rgb__MODULE_ID__[1];
         document.rgbform__MODULE_ID__.rgbB__MODULE_ID__.value = rgb__MODULE_ID__[2];
         document.rgbform__MODULE_ID__.hex__MODULE_ID__.value = hex;
         document.getElementById('color__MODULE_ID__').style.backgroundColor = 'rgb(' + basergb__MODULE_ID__[0] + ',' + basergb__MODULE_ID__[1] + ',' + basergb__MODULE_ID__[2] + ')';
         document.getElementById('colorCurrent__MODULE_ID__').style.backgroundColor = 'rgb(' + rgb__MODULE_ID__[0] + ',' + rgb__MODULE_ID__[1] + ',' + rgb__MODULE_ID__[2] + ')';
         document.getElementById('colorIndic__MODULE_ID__').style.top = indicator__MODULE_ID__[0];
         document.getElementById('colorIndic__MODULE_ID__').style.left = indicator__MODULE_ID__[1];
         document.getElementById('hueIndic__MODULE_ID__').style.top = slider;
       }

       _IG_AdjustIFrameHeight();
     });
  </script>
<script type="text/javascript" src="http://hosting.gmodules.com/ig/gadgets/file/103534220535816043845/jquery.js"></script>
<script type="text/javascript" src="http://hosting.gmodules.com/ig/gadgets/file/103534220535816043845/interface.js"></script><style type="text/css">

#colorPicker__MODULE_ID__
{
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}
#color__MODULE_ID__
{
        height:192px;
        width:192px;
  position: relative;
  background-color: #FF0000;
  background-image: url(http://hosting.gmodules.com/ig/gadgets/file/103534220535816043845/colorpickerbg.png);
  background-repeat: no-repeat;
  background-position: center;
  top: 0px;
  left: 0px;
}
#colorIndic__MODULE_ID__
{
  position: absolute;
  width: 11px;
  height: 11px;
  background-image: url(http://hosting.gmodules.com/ig/gadgets/file/103534220535816043845/colorpickerselect.gif);
}
#hue__MODULE_ID__
{
  position: absolute;
  top: 3px;
  left: 200px;
  width: 18px;
  height: 186px;
  background-image: url(http://hosting.gmodules.com/ig/gadgets/file/103534220535816043845/colorpickerhue.png);
}
#hueIndic__MODULE_ID__
{
  position:absolute;
  background-image: url(http://hosting.gmodules.com/ig/gadgets/file/103534220535816043845/colorpickerindicator.gif);
  width: 18px;
  height: 7px; 
}
#colorCurrent__MODULE_ID__
{
  width: 60px;
  height: 60px;
  border: 2px solid #999;
  position: absolute;
  left: 240px;
  top: 8px;
}
#colorValues__MODULE_ID__
{
  position: absolute;
  left: 240px;
  top: 80px;
}
#colorValues__MODULE_ID__ input
{
  font-size: 11px;
  padding: 1px;
}
#oldColor__MODULE_ID__
{
  position: absolute;
  background-color: #fff;
  top: 50%;
  height: 50%;
  width: 100%;
}
#rgbR__MODULE_ID__, #rgbG__MODULE_ID__, #rgbB__MODULE_ID__
{
  width: 25px;
}
#hex__MODULE_ID__
{
  width: 50px;
}
</style>
<center><br/><div><a href="https://itunes.apple.com/us/app/smog-report/id607748201?ls=1&mt=8" target="_blank"><img width="300" height="50" alt="Smog Report - Free Download" src="http://www.smogreport.com/ads/bannerad-50x300.png"/></a></div></center>
<div id="colorPicker__MODULE_ID__">
  <div id="color__MODULE_ID__">
    <div id="colorIndic__MODULE_ID__" style="top:0px;left:0px;"></div>
  </div>
  <div id="hue__MODULE_ID__">
    <div id="hueIndic__MODULE_ID__"></div>
  </div>
  <div id="colorCurrent__MODULE_ID__"><div id="oldColor__MODULE_ID__"></div></div>
  <div id="colorValues__MODULE_ID__">
        <form name="rgbform__MODULE_ID__" method="post" action="#" id="rgbform__MODULE_ID__">
    <table cellpadding="0" cellspacing="2">
      <tr>
        <td>R:</td><td><input type="text" size="2" id="rgbR__MODULE_ID__" value="255" /></td>
      </tr>
      <tr>
        <td>G:</td><td><input type="text" size="2" id="rgbG__MODULE_ID__" value="255" /></td>
      </tr>
      <tr>
        <td>B:</td><td><input type="text" size="2" id="rgbB__MODULE_ID__" value="255" /></td>
      </tr>
      <tr>
        <td>#</td><td><input type="text" size="5" id="hex__MODULE_ID__" value="FFFFFF" /></td>
      </tr>
    </table>
        </form>
  </div>
</div>

<script type="text/javascript">
  var prefs__MODULE_ID__ = new _IG_Prefs(__MODULE_ID__);
  var rgb = prefs__MODULE_ID__.getString("rgb");
  var basergb = prefs__MODULE_ID__.getString("basergb");
  var lastvaluessaved = prefs__MODULE_ID__.getString("lastvalues");
  var saved = prefs__MODULE_ID__.getBool("save");
  
  var rgb__MODULE_ID__ = rgb.split("|");
  var basergb__MODULE_ID__ = basergb.split("|");
  var lastvaluessaved__MODULE_ID__ = lastvaluessaved.split("|");

  var baseColor = {r:basergb__MODULE_ID__[0],g:basergb__MODULE_ID__[1],b:basergb__MODULE_ID__[2]};
  var currentColor = {r:rgb__MODULE_ID__[0],g:rgb__MODULE_ID__[1],b:rgb__MODULE_ID__[2]};
  var lastValues = [lastvaluessaved__MODULE_ID__[0],lastvaluessaved__MODULE_ID__[1]];
  
  if(saved == false)
  {
    baseColor = {r:255,g:0,b:0};
    currentColor = {r:255,g:255,b:255};
    lastValues = [0,0];
  }
  
  $(document).ready(
  function()
  {
    $('#color__MODULE_ID__').Slider(
      {
        accept : '#colorIndic__MODULE_ID__',
        onSlide : function( cordx, cordy,x, y)
        {
          lastValues = [parseInt(cordx * 255/100),parseInt(cordy * 255/100)];
          setGradientColor__MODULE_ID__();
        },
        onChange : function()
        {
          document.getElementById('oldColor__MODULE_ID__').style.backgroundColor = 'rgb(' + currentColor.r + ',' + currentColor.g + ',' + currentColor.b + ')';
                                        if(saved == true) {
                                        prefs__MODULE_ID__.set("rgb", currentColor.r + '|' + currentColor.g + '|' + currentColor.b);
                                        prefs__MODULE_ID__.set("basergb", baseColor.r + '|' + baseColor.g + '|' + baseColor.b);
                                        prefs__MODULE_ID__.set("hex", (toHex__MODULE_ID__(currentColor.r) + toHex__MODULE_ID__(currentColor.g) + toHex__MODULE_ID__(currentColor.b)).toUpperCase());
                                        prefs__MODULE_ID__.set("indicator", document.getElementById('colorIndic__MODULE_ID__').style.top + "|" + document.getElementById('colorIndic__MODULE_ID__').style.left);
                                        prefs__MODULE_ID__.set("lastvalues", lastValues[0] + '|' + lastValues[1]);
                                        }
        }
      }
    );
    $('#hue__MODULE_ID__').Slider(
      {
        accept : '#hueIndic__MODULE_ID__',
        onSlide : function( cordx, cordy,x, y)
        {
          setVertColor__MODULE_ID__(parseInt(cordy * 255 / 100));
          setGradientColor__MODULE_ID__();
        },
        onChange : function()
        {
          document.getElementById('oldColor__MODULE_ID__').style.backgroundColor = 'rgb(' + currentColor.r + ',' + currentColor.g + ',' + currentColor.b + ')';
                                        if(saved == true) {
                                        prefs__MODULE_ID__.set("rgb", currentColor.r + '|' + currentColor.g + '|' + currentColor.b);
                                        prefs__MODULE_ID__.set("basergb", baseColor.r + '|' + baseColor.g + '|' + baseColor.b);
                                        prefs__MODULE_ID__.set("hex", (toHex__MODULE_ID__(currentColor.r) + toHex__MODULE_ID__(currentColor.g) + toHex__MODULE_ID__(currentColor.b)).toUpperCase());
                                        prefs__MODULE_ID__.set("slider", document.getElementById('hueIndic__MODULE_ID__').style.top);
                                        prefs__MODULE_ID__.set("lastvalues", lastValues[0] + '|' + lastValues[1]);
                                        }
        }
      }
    );
  }
);
function setVertColor__MODULE_ID__(indic){
  var n=256/6, j=256/n, C=indic, c=C%n;

  baseColor = {
    r : parseInt(C<n?255:C<n*2?255-c*j:C<n*4?0:C<n*5?c*j:255),
    g : parseInt(C<n*2?0:C<n*3?c*j:C<n*5?255:255-c*j),
    b : parseInt(C<n?c*j:C<n*3?255:C<n*4?255-c*j:0)
  };
  document.getElementById('color__MODULE_ID__').style.backgroundColor = 'rgb(' + baseColor.r + ',' + baseColor.g + ',' + baseColor.b + ')';
}

function setGradientColor__MODULE_ID__(){
  var r = Math.round((1-(1-(baseColor.r/255))*(lastValues[0]/255))*(255-lastValues[1]));
  var g = Math.round((1-(1-(baseColor.g/255))*(lastValues[0]/255))*(255-lastValues[1]));
  var b = Math.round((1-(1-(baseColor.b/255))*(lastValues[0]/255))*(255-lastValues[1]));
  document.getElementById('colorCurrent__MODULE_ID__').style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
  document.getElementById('rgbR__MODULE_ID__').value = r;
  document.getElementById('rgbG__MODULE_ID__').value = g;
  document.getElementById('rgbB__MODULE_ID__').value = b;
  document.getElementById('hex__MODULE_ID__').value = (toHex__MODULE_ID__(r) + toHex__MODULE_ID__(g) + toHex__MODULE_ID__(b)).toUpperCase();
  currentColor = {r:r,g:g,b:b};
}

function toHex__MODULE_ID__(color){
  color=parseInt(color).toString(16);
  return color.length<2?"0"+color:color;
}
</script>
]]></Content>
</Module>



