window.onload = init;
if ( document.captureEvents )
{
  document.captureEvents(Event.MOUSEMOVE)
  document.captureEvents(Event.MOUSEUP)
}
document.onmousemove = update;
document.onmouseup = function() { 
   sliders.each( function(s) {
                   s.isActive = false; 
                   s.style.border = "1px solid black"; 
   }); 
}
var sliders = [];
var values = [];
var prevY;

function init()
{
  sliders.push($("red_slide"));
  sliders.push($("green_slide"));
  sliders.push($("blue_slide"));
  sliders.each( function(s) {
                  s.onmousedown = function(e) {
                     if (!e) e = window.event;
                     if ( e.button == 1 || e.button == 0 || e.which == 1 )
                     {
                       s.isActive = true;
                       s.style.border = "1px solid white";
                     }
                  }
                  s.style.bottom = 0;
  });
  values.push($("red_value"));
  values.push($("green_value"));
  values.push($("blue_value"));
  values.each( function(v) {
                 v.onfocus = function() { v.origVal = v.value; }
                 v.onblur = function() {
                    var sl = v.id.replace("value", "slide");
                    if ( v.value >= 0 && v.value < 256 )
                    {
                      $(sl).style.bottom = v.value;
                      $('hex_value').innerHTML = parseInt($F('red_value')).toColorPart() + parseInt($F('green_value')).toColorPart() + parseInt($F('blue_value')).toColorPart();
                      $('hex_value').innerHTML = $('hex_value').innerHTML.toUpperCase();
                      $('color').style.backgroundColor = "#" + $('hex_value').innerHTML;
                    }
                    else v.value = v.origVal;
                 }
                 v.value = 0
  });
  $('r-g').checked = false;
  $('r-b').checked = false;
  $('g-b').checked = false;
}

function update(e)
{
  if (!e) e = window.event;
  var currY = Event.pointerY(e);
  var move = prevY - currY;
  sliders.each( function(s) {
    if ( s.isActive )
    {
      slide(s, move);
      switch (s.id)
      {
        case "red_slide":
             if ( $('r-g').checked ) 
             {
               slide('green_slide', move);
               if ( $('g-b').checked || $('r-b').checked ) slide('blue_slide', move);
               break;
             }
             if ( $('r-b').checked ) 
             {
               slide('blue_slide', move);
               if ( $('g-b').checked ) slide('green_slide', move);
             }
             break;
        case "green_slide":
             if ( $('r-g').checked )
             {
               slide('red_slide', move);
               if ( $('r-b').checked || $('g-b').checked ) slide('blue_slide', move);
               break;
             }
             if ( $('g-b').checked ) 
             {
               slide('blue_slide', move);
               if ( $('r-b').checked ) slide('red_slide', move);
             }
             break;
        case "blue_slide":
             if ( $('r-b').checked ) 
             {
               slide('red_slide', move);
               if ( $('r-g').checked || $('g-b').checked ) slide('green_slide', move);
               break;
             }
             if ( $('g-b').checked ) 
             {
               slide('green_slide', move);
               if ( $('r-g').checked ) slide('red_slide', move);
             }
      }
    }
  });
  prevY = currY;
}

function slide(s, move)
{
  s = $(s);
  if ( (parseInt(s.style.bottom) + move < 0) || (parseInt(s.style.bottom) + move > 255) ) return;
  s.style.bottom = parseInt(s.style.bottom) + move;
  var val = s.id.replace("slide", "value");
  $(val).value = parseInt(s.style.bottom);
  $('hex_value').innerHTML = parseInt($F('red_value')).toColorPart() + parseInt($F('green_value')).toColorPart() + parseInt($F('blue_value')).toColorPart();
  $('hex_value').innerHTML = $('hex_value').innerHTML.toUpperCase();
  $('color').style.backgroundColor = "#" + $('hex_value').innerHTML;
}

function randomize()
{
  values.each( function(v) { v.value = Math.floor(Math.random()*256); v.onblur(); });
}