/**
 * ColorMapping Object
 * @ edit by Gina
 */

var ColorMapping = {

  labels: [],
  colors: [],
  initialized: false,

  init: function() {
  this.colors[0] = '0xFAF708';
  this.colors[1] = '0xFFB901';
  this.colors[2] = '0xFF8601';
  this.colors[3] = '0xF6A6BF';
  this.colors[4] = '0xCD0567';
  this.colors[5] = '0xD62901';
  this.colors[6] = '0x670001';
  this.colors[7] = '0x7C7DBD';
  this.colors[8] = '0x4B176C';
  this.colors[9] = '0x4998B7';
  this.colors[10] = '0x025285';
  this.colors[11] = '0x100553';
  this.colors[12] = '0x04947B';
  this.colors[13] = '0x6B9D00';
  this.colors[14] = '0x007C3E';
  this.colors[15] = '0x015836';
  this.colors[16] = '0xB58937';
  this.colors[17] = '0xCE7318';
  this.colors[18] = '0x4D2501';
  this.colors[19] = '0xFFFFFF';
  this.colors[20] = '0xA4AEAD';
  this.colors[21] = '0x000000';
  this.colors[22] = '0xA8B1B8';
  this.colors[23] = '0xB38808';

  this.labels[0] = '13-Gelb';
  this.labels[1] = '14-Goldgelb';
  this.labels[2] = '16-Orange hell';
  this.labels[3] = '02-Hellrosa';
  this.labels[4] = '03-Pink';
  this.labels[5] = '15-Rot';
  this.labels[6] = '01-Dunkelrot';
  this.labels[7] = '05-Lavendel';
  this.labels[8] = '04-Violett';
  this.labels[9] = '06-Hellblau';
  this.labels[10] = '07-Blau';
  this.labels[11] = '08-Dunkelblau';
  this.labels[12] = '11-Türkis';
  this.labels[13] = '12-Hellgrün';
  this.labels[14] = '09-Grün';
  this.labels[15] = '10-Dunkelgrün';
  this.labels[16] = '18-Beige dunkel';
  this.labels[17] = '17-Hellbraun';
  this.labels[18] = '19-Braun';
  this.labels[19] = '22-Weiss';
  this.labels[20] = '20-Grau';
  this.labels[21] = '21-Schwarz';
  this.labels[22] = '23-Silber';
  this.labels[23] = '24-Gold';

    this.initialized = true;
  },

  getColor: function(label) {
    // searches the array and returns the index of the first match.
    var i = this.labels.indexOf(label);
    if(i > -1) { // mapping is found
      return this.colors[i];
    }
    return false;
  },

  getHtmlColor: function(label) {
    // searches the array and returns the index of the first match.
    var i = this.labels.indexOf(label);
    if(i > -1) { // mapping is found
      return this.colors[i].sub(/0x/, '#');
    }
    return false;
  }
}

/**
 * ColorPalette Class
 */

function ColorPaletteCommon() {
  this.viewer = null;
  this.dropdown = null
}

/* setProductViewerId */
ColorPaletteCommon.prototype.setProductViewerId = function(id) {
  this.viewer = document[id];
}

/* setDropdownId */
ColorPaletteCommon.prototype.setDropdownId = function(id) {
  this.dropdown = $(id);
}

/* changeColor */
ColorPaletteCommon.prototype.changeColor = function(ele) {
  if(!ColorMapping.initialized) {
    ColorMapping.init();
  }
  var label = ele.options[ele.selectedIndex].text;
  var color = ColorMapping.getColor(label);
  if(color) {
    this.changeProductViewerColor(color);
  }
}



/* setDefaultColor */
ColorPaletteCommon.prototype.setDefaultColor = function(label) {
  if(!ColorMapping.initialized) {
    ColorMapping.init();
  }
  var color = ColorMapping.getColor(label);
  if(color) {
    this.changeProductViewerColor(color);
  }
}

/* buildPalette */
ColorPaletteCommon.prototype.buildPalette = function(eleId, className) {
  /*
  <a id="col1" onclick="" style="background-color:">Jaune</a>
  <a id="col2" onclick="" style="background-color:">Bleu</a>
  ...
  */
  if(!ColorMapping.initialized) {
    ColorMapping.init();
  }
  var source = this.dropdown;
  var target = $(eleId);
  for (var i=0; i<source.options.length; i++ ) {
    if(Prototype.Browser.IE) {
      var label = source.options[i].innerText;
    } else {
      var label = source.options[i].text;
    }
    var color = ColorMapping.getHtmlColor(label);
    if(color) {

      // build color item
      var anchor = document.createElement('a');
      Element.extend(anchor);
	  anchor.identify(label);
      anchor.addClassName(className);
      anchor.setStyle({
        backgroundColor: color,
      });

      var text = document.createTextNode(label);
      anchor.appendChild(text);
      target.appendChild(anchor);
      // add click event in order to sync with dropdown
      anchor.observe('click', this.syncDropdown);
    }
  }
}

/**
 * ColorPalette1 Instance Object
 */

var ColorPalette1 = new ColorPaletteCommon();

/* changeProductViewerColor */
ColorPalette1.changeProductViewerColor = function (color) {
  this.viewer.changeColor(color);
}

/* syncDropdown */
ColorPalette1.syncDropdown = function (event) {
  var ele = event.element();
  if(Prototype.Browser.IE) {
    var label = ele.innerText;
  } else {
    var label = ele.text;
  }
  for (var i=0; i<ColorPalette1.dropdown.options.length; i++ ) {
    if (ColorPalette1.dropdown.options[i].text == label ) {
      ColorPalette1.dropdown.selectedIndex = i;
      ColorPalette1.changeColor(ColorPalette1.dropdown);
      break;
    }
  }
}

/**
 * ColorPalette2 Instance Object
 */

var ColorPalette2 = new ColorPaletteCommon();
    ColorPalette2.setDefaultColor(21);


/* changeProductViewerColor */
ColorPalette2.changeProductViewerColor = function (color) {
  this.viewer.changeColor(color);
}

/* syncDropdown */
ColorPalette2.syncDropdown = function (event) {
  var ele = event.element();
  if(Prototype.Browser.IE) {
    var label = ele.innerText;
  } else {
    var label = ele.text;
  }
  for (var i=0; i<ColorPalette2.dropdown.options.length; i++ ) {
    if (ColorPalette2.dropdown.options[i].text == label ) {
      ColorPalette2.dropdown.selectedIndex = i;
      ColorPalette2.changeColor(ColorPalette2.dropdown);
      break;
    }
  }
}