var view = new function()
{
  var map =
  {
    'hex': 'getHex',
    'red': 'getRed',
    'green': 'getGreen',
    'blue': 'getBlue',
    'hue': 'getHue',
    'sat': 'getSaturation',
    'lum': 'getLuminosity',
    'hue_v': 'getHueV',
    'sat_v': 'getSaturationV',
    'val': 'getValue'
  }
 

  var map_2_d =
  {
    'luminosity-axis': function()
    {
      var container = document.getElementById('color-controls');
      if( container )
      {
        var axis = container.getElementsByTagName('luminosity-axis')[0];
        if( axis )
        {
          axis.value_z = colors.getLuminosity();
          axis.color = [colors.getHue(), colors.getSaturation(), 50];
        }
      }
    },
    'hue-saturation-quadrat': function()
    {
      var container = document.getElementById('color-controls');
      if( container )
      {
        var field = container.getElementsByTagName('hue-saturation-quadrat')[0];
        if(field)
        {
          field.value_x = colors.getHue();
          field.value_y = colors.getSaturation();
        }
      }
    },
    'hue-saturation-circel': function()
    {
      var container = document.getElementById('color-controls');
      if( container )
      {
        var field = container.getElementsByTagName('hue-saturation-circel')[0];
        if(field)
        {
          field.position = [colors.getHue(),colors.getSaturation()];
        }
      }
    }
  }

  this.update = function(id)
  {
    var input = null, key = '';
    for ( key in map_2_d )
    {
      if( key != id )
      {
        map_2_d[key]();
      }
    }
    for ( key in map )
    {
      if( key != id && ( input = document.getElementById(key) ) )
      {
        input.value = colors[map[key]]();
      }
    }

    document.getElementById('color-value').style.backgroundColor = '#' + colors.getHex();
  }
}



var handle_change = function(event)
{
    var handler = event.target.value;
    if( handler in handle_change.map )
    {
      setCookie('form-type', handler);
      handle_change.map[handler](event);
    }
}

handle_change.map = 
{
  'hue-saturation-circel': function(event)
  {
    var old = document.getElementsByTagName('hue-saturation-quadrat')[0];
    if(old)
    {
      old.parentNode.removeChild(old);
    }
    var container = document.getElementById('color-controls');
    if(container)
    {
      container.appendChild(document.createControl('hue-saturation-circel'));
    }
  },
  'hue-saturation-quadrat': function(event)
  {
    var old = document.getElementsByTagName('hue-saturation-circel')[0];
    if(old)
    {
      old.parentNode.removeChild(old);
    }
    var container = document.getElementById('color-controls');
    if(container)
    {
      container.appendChild(document.createControl('hue-saturation-quadrat'));
    }
  }
 
}

var setValue = function(event)
{
  var handler = event.target.id;
  if(!event.target.value)
  {
    event.target.value = 0;
    return;
  }
  if( setValue.map[handler] )
  {
  
     var checked_val = colors[setValue.map[handler]](event.target.value);
     if( checked_val != event.target.value )
     {
       event.target.value = checked_val;
     }
    view.update(handler);
          
    //colors[setValue.map[handler]](event.target.value);
    //view.update(handler);
  }
}

setValue.map =
{
  'hue': 'setHue',
  'sat': 'setSaturation',
  'lum': 'setLuminosity',
  'hue_v': 'setHueV',
  'sat_v': 'setSaturationV',
  'val': 'setValue',
  'red': 'setRed',
  'green': 'setGreen',
  'blue': 'setBlue',
  'hex': 'setHex'
}

var setColors = function(event)
{
  switch(event.target.nodeName)
  {
    case 'hue-saturation-quadrat': 
    case 'hue-saturation-circel': 
    {
      colors.setHue(event.value_x);
      colors.setSaturation(event.value_y);
      view.update(event.target.nodeName);
      break
    }
    case 'luminosity-axis': 
    {
      colors.setLuminosity(event.value_z);
      view.update(event.target.nodeName);
      break;
    }
  }
}

var init = function()
{
  var container = document.getElementById('color-controls');
  
  if(container)
  {
    var form = getCookie('form-type') || 'hue-saturation-circel';
    var fieldset = document.getElementsByTagName('fieldset')[0];
    if(fieldset)
    {
      var radios = fieldset.getElementsByTagName('input'), radio = null, i = 0;
      for( ; radio = radios[i]; i++)
      {
        if( radio.value == form )
        {
          radio.checked = true;
        }
        else
        {
          radio.checked = false;
        }
      }
    }
    container.appendChild(document.createControl(form));
    container.appendChild(document.createControl('luminosity-axis'));
    colors.setHue(0);
    colors.setSaturation(100);
    colors.setLuminosity(50);
    setTimeout(view.update, 50);

  }
}

var colorMixer = new function()
{
  var _colors = [];
  var color_converter = new Colors();
  this.mix = function(color)
  {
    _colors[color] = [colors.getRed(), colors.getGreen(), colors.getBlue()];
    var color_value = document.getElementById('color-value-' + color);
    if(color_value)
    {
      color_value.style.backgroundColor = '#' + color_converter.rgb_to_hex_c(_colors[color]);
    }
    if( _colors[1] && _colors[2] )
    {
      var iterations = document.getElementById('iterations');
      if( iterations)
      {
        iterations = parseInt(iterations.value, 10) - 1;
        var container = document.getElementById('mixed-colors');
        if( container )
        {
          var i = 0;
          var mixed_colors = '';
          for( ; i <= iterations; i++ )
          {
            color_converter.setRGB( color_converter.mix_rgb(_colors[1], _colors[2], i * 1 / iterations) );
            mixed_colors += 
              "<li>" +
              "<p style='background-color:#" + color_converter.getHex() +"'></p>" +
              "<span>hex  " + color_converter.getHex() +"</span> " +
              "<span>rgb  " + color_converter.getRGB().toString().replace(/,/g, '  ') +"</span> " +
              "<span>hsl  " + color_converter.getHSL().toString().replace(/,/g, '  ') +"</span>" +
              
              "</li>";

          }
          container.innerHTML = mixed_colors;
        }
        
      }
    }
  }
}

var colors = new Colors();
document.addEventListener('input-color', setColors, false);
document.addEventListener('input', setValue, false);
document.addEventListener('change', handle_change, false);
window.addEventListener('load', init, false);