function HTMLRainbow(element, opts) {
    opts = opts || {};
    opts.onclick = opts.onclick || function() {};
    opts.style = opts.style || {};
    opts.size = opts.size || 400;
    opts.value = opts.value || 0;

    element.onselectstart = function() { return false; };

    var mousedown = false;
    var r = RXB.rainbow(opts.size);

    for (var i = 0; i < r.length; i++) {
      var color = r[i];
      var colorstepped = RXB.stepcolor(color, opts.value);
      var rgb = opts.rgb ? colorstepped : RXB.ryb2rgb(colorstepped);
      var hex = RXB.d2h(rgb[0]) + RXB.d2h(rgb[1]) + RXB.d2h(rgb[2]);

      // Create and append the new element
      var div = document.createElement('div');
      for (var j in opts.style) {
        if (!opts.style.hasOwnProperty(j))
          continue;
        div.style[j] = opts.style[j];
      }
      div.style.width = div.style.width || '1px';
      div.style.backgroundColor = '#' + hex;
      div.style.float = 'left';
      div.onselectstart = function() { return false; };
      div.className = 'rxb-picker-color';

      div.setAttribute('data-ryb-r', color[0]);
      div.setAttribute('data-ryb-y', color[1]);
      div.setAttribute('data-ryb-b', color[2]);

      div.onclick = opts.onclick;
      div.onmousedown = onmousedown;
      div.onmouseup = onmouseup;
      div.onmouseover = onmouseover;

      element.appendChild(div);
    }

    function onmousedown() {
      mousedown = true;
    }
    function onmouseup() {
      mousedown = false;
    }
    function onmouseover() {
      if (mousedown)
        this.click();
    }

    return element.children;
  }
/**
   * Load an element with divs creating an RYB rainbow
   *
   * @param element {DOMElement}  this element will be loaded with divs creating a rainbow
   * @param opts    {object}      an optional object defining options
   *
   * @options {
   *   step: {int}, the number of colors to step for each iteration of rainbow generation
   *   onclick: {function}, an optional function to set as the onclick handler of each colored div created
   *   style: {object}, an elements defined here will be copied to the colored div's style attribute
   * }
   *
   * returns the children of the element
   */
Load an element with divs creating an RYB rainbow
@param element {DOMElement}  this element will be loaded with divs creating a rainbow
@param opts    {object}      an optional object defining options

@options {
step: {int}, the number of colors to step for each iteration of rainbow generation
onclick: {function}, an optional function to set as the onclick handler of each colored div created
style: {object}, an elements defined here will be copied to the colored div's style attribute
}

returns the children of the element
Load an element with divs creating an RYB rainbow @param element { DOMElement } this element will be loaded with divs creating a rainbow @param opts { object } an optional object defining options @options { step : { int } the number of colors to step for each iteration of rainbow generation onclick : { function } an optional function to set as the onclick handler of each colored div created style : { object } an elements defined here will be copied to the colored div ' s style attribute } returns the children of the element
function HTMLRainbow(element, opts) {
    opts = opts || {};
    opts.onclick = opts.onclick || function() {};
    opts.style = opts.style || {};
    opts.size = opts.size || 400;
    opts.value = opts.value || 0;
    element.onselectstart = function() { return false; };
    var mousedown = false;
    var r = RXB.rainbow(opts.size);
    for (var i = 0; i < r.length; i++) {
      var color = r[i];
      var colorstepped = RXB.stepcolor(color, opts.value);
      var rgb = opts.rgb ? colorstepped : RXB.ryb2rgb(colorstepped);
      var hex = RXB.d2h(rgb[0]) + RXB.d2h(rgb[1]) + RXB.d2h(rgb[2]);
      var div = document.createElement('div');
      for (var j in opts.style) {
        if (!opts.style.hasOwnProperty(j))
          continue;
        div.style[j] = opts.style[j];
      }
      div.style.width = div.style.width || '1px';
      div.style.backgroundColor = '#' + hex;
      div.style.float = 'left';
      div.onselectstart = function() { return false; };
      div.className = 'rxb-picker-color';
      div.setAttribute('data-ryb-r', color[0]);
      div.setAttribute('data-ryb-y', color[1]);
      div.setAttribute('data-ryb-b', color[2]);
      div.onclick = opts.onclick;
      div.onmousedown = onmousedown;
      div.onmouseup = onmouseup;
      div.onmouseover = onmouseover;
      element.appendChild(div);
    }
    function onmousedown() {
      mousedown = true;
    }
    function onmouseup() {
      mousedown = false;
    }
    function onmouseover() {
      if (mousedown)
        this.click();
    }
    return element.children;
  }
function HTMLRainbow ( element , opts ) { opts = opts || { } ; opts . onclick = opts . onclick || function ( ) { } ; opts . style = opts . style || { } ; opts . size = opts . size || 400 ; opts . value = opts . value || 0 ; element . onselectstart = function ( ) { return false ; } ; var mousedown = false ; var r = RXB . rainbow ( opts . size ) ; for ( var i = 0 ; i < r . length ; i ++ ) { var color = r [ i ] ; var colorstepped = RXB . stepcolor ( color , opts . value ) ; var rgb = opts . rgb ? colorstepped : RXB . ryb2rgb ( colorstepped ) ; var hex = RXB . d2h ( rgb [ 0 ] ) + RXB . d2h ( rgb [ 1 ] ) + RXB . d2h ( rgb [ 2 ] ) ; var div = document . createElement ( 'div' ) ; for ( var j in opts . style ) { if ( ! opts . style . hasOwnProperty ( j ) ) continue ; div . style [ j ] = opts . style [ j ] ; } div . style . width = div . style . width || '1px' ; div . style . backgroundColor = '#' + hex ; div . style . float = 'left' ; div . onselectstart = function ( ) { return false ; } ; div . className = 'rxb-picker-color' ; div . setAttribute ( 'data-ryb-r' , color [ 0 ] ) ; div . setAttribute ( 'data-ryb-y' , color [ 1 ] ) ; div . setAttribute ( 'data-ryb-b' , color [ 2 ] ) ; div . onclick = opts . onclick ; div . onmousedown = onmousedown ; div . onmouseup = onmouseup ; div . onmouseover = onmouseover ; element . appendChild ( div ) ; } function onmousedown ( ) { mousedown = true ; } function onmouseup ( ) { mousedown = false ; } function onmouseover ( ) { if ( mousedown ) this . click ( ) ; } return element . children ; }
Load an element with divs creating an RYB rainbow
 @param element {DOMElement}  this element will be loaded with divs creating a rainbow
 @param opts    {object}      an optional object defining options
Load an element with divs creating an RYB rainbow @param element { DOMElement } this element will be loaded with divs creating a rainbow @param opts { object } an optional object defining options
// Create and append the new element