window.colors = {
	yellow: 'ffff00', 
	orange: 'ff4900', 
	red: 'd40404', 
	burgundy: '810040', 
	magenta: 'ff0080', 
	pink: 'ff6fd0', 
	lavander: '9933ff', 
	violet: '81007f', 
	dark_blue: '09135a',
	middle_blue: '207af5',
	light_blue: '63a9e5',
	mint: '33fffe', 
	turquoise: '008390', 
	green: '027702', 
	lime: '33ff00', 
	black: '000000', 
	silver: 'b0b5b8', 
	gold: '85713f', 
	ivory: 'f0e4be', 
	brown: '472e18', 	
	white: 'ffffff' 
	};
var $ = function(id){
	try
	{
		return document.getElementById(id);
	}catch(e)
	{
		return null;
	}
}
function addClass(el, classname)
{
	el.className += " " + classname;
}
function removeClass(el, classname)
{
	el.className = el.className.replace(" " + classname, "");
}

function $A(iterable) {
  if (!iterable) return [];
  if (iterable.toArray) return iterable.toArray();
  var length = iterable.length || 0, results = new Array(length);
  while (length--) results[length] = iterable[length];
  return results;
}

Function.prototype.bindAsEventListener = function()
{
    var __method = this, args = $A(arguments), object = args.shift();
    return function(event) {
      return __method.apply(object, [event || window.event].concat(args));
    }
}

Function.prototype.bind = function()
{
	if(arguments.length < 0) return this;
	var args = $A(arguments);
	var scope = args.shift();
	var f = this;
	return function(){
		f.apply(scope, $A(arguments).concat(args));
	}
}

var MultipleColorPicker = function(holder, results, numAllowSelect, colors)
{
	this.holder = $(holder);
	this.results = $(results);
	this.input = $('combination_color');
	this.colors = colors || window.colors;
	this.numAllowSelect = numAllowSelect || 0;
	this.numSelected = 0;
	this.colorsSelected = new Array();
	
	$('remove').onclick = this.onClickRemove.bindAsEventListener(this);
	this.createPalette();
};

MultipleColorPicker.prototype.onClickClean = function(event)
{
	var elements = this.results.getElementsByTagName('a');
	var i = 0;
	while(elements.length != 0)
	{
		this.results.removeChild(elements[0]);
	}
	
	this.colorsSelected = new Array();
	this.numSelected = 0;
	this.updateColor();
	return false;
}

MultipleColorPicker.prototype.onClickRemove = function(event)
{
	if (this.itemToDelete)
	{
		for(var i = 0; i < this.colorsSelected.length; i++)
		{
			if (this.colorsSelected[i] == this.itemToDelete.color)
			{
				this.colorsSelected.splice(i, 1);
				break;
			}
		}
		this.numSelected--;
		this.results.removeChild(this.itemToDelete);
		this.updateColor();
		this.itemToDelete = undefined;
	}
	else
	{
		if (this.numAllowSelect == 1 || this.colorsSelected.length == 1)
		{
			var elements = this.results.getElementsByTagName('a');
			if (elements.length > 0)
			{
				this.itemToDelete = elements[0];
				this.onClickRemove();
			}
		}
	}
	return false;
}

MultipleColorPicker.prototype.createPalette = function()
{
	var color;
	for(color in this.colors)
	{
		if(window.colors_name[color]==null)
			continue;
		var element = document.createElement('a');
		var image = document.createElement('img');
		var label = document.createElement('span');
		
		label.innerHTML = window.colors_name[color];
		
		element.href = "#";
		element.title = window.colors_name[color];
		element.className = "colorpicker_item";
		element.color = color;
		element.appendChild(image);
		element.appendChild(label);
		element.onclick = this.onSelectItem.bindAsEventListener(this);
		this.holder.appendChild(element);
		image.src = "images/palette/" + color + ".jpg";
	}
}

MultipleColorPicker.prototype.updateColor = function()
{
	this.input.value = this.colorsSelected.join(",");
}

MultipleColorPicker.prototype.removeColor = function(target)
{
		removeClass(target, 'selected');
		target.selected = false;	
		this.numSelected--;
		var index = this.colorsSelected.indexOf(target.color);
		this.colorsSelected.splice(index, 1);
		this.updateColor();
}

MultipleColorPicker.prototype.addColor = function(target)
{
	this.numSelected++;
	
	if(this.numSelected > this.numAllowSelect)
	{
		this.numSelected = this.numAllowSelect;
	}
	else
	{
		var element = document.createElement('a');
		var image = document.createElement('img');
		var label = document.createElement('span');
		
		image.src = "images/palette/" + target.color + ".jpg";
		label.innerHTML = window.colors_name[target.color];
		
		element.href = "#";
		element.title = window.colors_name[target.color]
		element.className = "colorpicker_item";
		element.appendChild(image);
		element.appendChild(label);		
		element.color = target.color;
		element.onclick = this.onClickAddedItem.bindAsEventListener(this);
		this.results.appendChild(element);
		this.colorsSelected.push(target.color);
		this.updateColor();
	}
}

MultipleColorPicker.prototype.onClickAddedItem = function(event)
{
	var target = event.currentTarget
	if (!target)
	{
		if (event.srcElement)
		{
			if (event.srcElement.tagName.toLowerCase() == "a")
				target = event.srcElement;
			else
				target = event.srcElement.parentNode;
		}
	}
	
	var elements = this.results.getElementsByTagName('a');
	for(var i = 0; i < elements.length; i++)
	{
		removeClass(elements[i], 'selected');
	}
	target.selected = true;
	addClass(target, 'selected');
	this.itemToDelete = target;
	return false;	
}

MultipleColorPicker.prototype.onSelectItem = function(event)
{
	var target = event.currentTarget
	if (!target)
	{
		if (event.srcElement)
		{
			if (event.srcElement.tagName.toLowerCase() == "a")
				target = event.srcElement;
			else
				target = event.srcElement.parentNode;
		}
	}
	
	this.addColor(target);
	$('focus').focus();
	
	return false;
}


if(!console)
{
	var console = {log: function(str){alert(str)}};
}