/**
 * ColorMapping Object
 */

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.colors[24] = '0xFAF708';
  this.colors[25] = '0xFFB901';
  this.colors[26] = '0xFF8601';
  this.colors[27] = '0xF6A6BF';
  this.colors[28] = '0xCD0567';
  this.colors[29] = '0xD62901';
  this.colors[30] = '0x670001';
  this.colors[31] = '0x7C7DBD';
  this.colors[32] = '0x4B176C';
  this.colors[33] = '0x4998B7';
  this.colors[34] = '0x025285';
  this.colors[35] = '0x100553';
  this.colors[36] = '0x04947B';
  this.colors[37] = '0x6B9D00';
  this.colors[38] = '0x007C3E';
  this.colors[39] = '0x015836';
  this.colors[40] = '0xB58937';
  this.colors[41] = '0xCE7318';
  this.colors[42] = '0x4D2501';
  this.colors[43] = '0x000000';
  this.colors[44] = '0xA4AEAD';
  this.colors[45] = '0x000000';
  this.colors[46] = '0xA8B1B8';
  this.colors[47] = '0xB38808';
  
  this.labels[0] = '13-Jaune';
  this.labels[1] = '14-Jaune or';
  this.labels[2] = '16-Orange clair';
  this.labels[3] = '02-Rose clair';
  this.labels[4] = '03-Rose fushia';
  this.labels[5] = '15-Rouge';
  this.labels[6] = '01-Bordeau';
  this.labels[7] = '05-Lavande';
  this.labels[8] = '04-Violet';
  this.labels[9] = '06-Bleu clair';
  this.labels[10] = '07-Bleu';
  this.labels[11] = '08-Bleu foncé';
  this.labels[12] = '11-Turquoise';
  this.labels[13] = '12-Vert clair';
  this.labels[14] = '09-Vert';
  this.labels[15] = '10-Vert foncé';
  this.labels[16] = '18-Beige foncé';
  this.labels[17] = '17-Noisette';
  this.labels[18] = '19-Brun';
  this.labels[19] = '22-Blanc';
  this.labels[20] = '20-Gris';
  this.labels[21] = '21-Noir';
  this.labels[22] = '23-Argent';
  this.labels[23] = '24-Or';
 
  this.labels[24] = '25-Jaune';
  this.labels[25] = '26-Jaune or';
  this.labels[26] = '27-Orange clair';
  this.labels[27] = '28-Rose clair';
  this.labels[28] = '29-Rose fushia';
  this.labels[29] = '30-Rouge';
  this.labels[30] = '31-Bordeau';
  this.labels[31] = '32-Lavande';
  this.labels[32] = '33-Violet';
  this.labels[33] = '34-Bleu clair';
  this.labels[34] = '35-Bleu';
  this.labels[35] = '36-Bleu foncé';
  this.labels[36] = '37-Turquoise';
  this.labels[37] = '38-Vert clair';
  this.labels[38] = '39-Vert';
  this.labels[39] = '40-Vert foncé';
  this.labels[40] = '41-Beige foncé';
  this.labels[41] = '42-Noisette';
  this.labels[42] = '43-Brun';
  this.labels[43] = '44-Blanc';
  this.labels[44] = '45-Gris';
  this.labels[45] = '46-Noir';
  this.labels[46] = '47-Argent';
  this.labels[47] = '48-Or';
  
    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);
  }
}

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






/* buildPalette */
ColorPaletteCommon.prototype.buildPalette = function(eleId, className) {
  
  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');
	  /*
		<a class="" style="background-color:">01-Jaune</a>
		<a class="" style="background-color:">11-Bleu</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();
//ColorPalette1.setDefaultColor(ColorMapping.colors[21]);
//alert('');
/* 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();

/* changeProductViewerColor */
ColorPalette2.changeProductViewerColor = function (color) {
  this.viewer.changeColor2(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.changeColor2(ColorPalette2.dropdown);
      break;
    }
  }
}