var Frame = function(id, img, color, name) {
    this.id = id;
	this.img = img;
	this.color = color ? color : id;
	this.name = name;
};

var ColorSelector = function(container, frames, className, selectedClassName) {
	this.container = container;
	this._initFrames(frames);
	this.className = className;
	this.selectedClassName = selectedClassName;
    this._initialize();
};

ColorSelector.prototype = {
	_initialize: function() {
    	this.elements = new Array();
    	this.selected = false;
    	this.selectedColor = '';
    	this.listeners = new Array();
	},
	
	
	
	_initFrames: function(frames) {
		this.frames = new Array();
		for(var i = 0; i < frames.length; i++) {
			this.frames[frames[i].color] = frames[i];
		}
	},
	
	apply: function() {
		// по всем непосредственным деткам контейнера
	    for(var i in this.frames) {
	      var frame = this.frames[i]; 
	      var node = document.getElementById('color_' + frame.color.substring(1));
	        
		    if (!node) continue;
		    
				if(frame.img){
					node.style.backgroundImage = 'url(' + frame.img + ')';
				}

				node.style.backgroundColor = frame.color;
				node._ColorChooser_Color = frame.color;
				node.onclick = this._bindFunction(node, this, this._onMouseClick);
				node.onmouseover = this._bindFunction(node, this, this._onMouseOver);
				node.onmouseout = this._bindFunction(node, this, this._onMouseOut);
				
				// сохранить элемент чтобы потом можно было руками выбрать цвет
				this.elements[frame.color] = node;
	    }
	},
	
	selectColor: function(color) {
	    this._onMouseClick(this.elements[color], null);
	},
	
	addListener: function(listener) {
		this.listeners[this.listeners.length] = listener;
	},
	
	removeListener: function(listener) {
		for(var i = 0; i < this.listeners.lenght; i++) {
			if(this.listeners[i] == listener) {
				this.listeners.splice(i, 1);
				break;
			}
		}
	},
	
	_notifyListeners: function(eventName) {
		for(var i = 0; i < this.listeners.length; i++) {
			this.listeners[i](eventName, this.frames[this.selectedColor]);
		}
	},
	
	_bindFunction: function(input, obj, objMethod) {
		return function(event) {
			return objMethod.call(obj, input, event || window.event);
		}
	},
	
	_onMouseClick: function(input, event) {
		// убрать отметку о выделении с элемента
		this.selected.className = this.className;
		
		// выбранный элемент - текущий, выбранный цвет - цвет бг
		this.selected = input;
		
		this.selectedColor = input._ColorChooser_Color;

		// отметить новый как выбранный
		input.className = this.selectedClassName;
		
		//console.log(input.className);
		
		this._notifyListeners('select');
	},
	
	_onMouseOver: function(input, event) {
		// выбранный цвет - цвет бг. выбранный элемент - старый
		this.selectedColor = input._ColorChooser_Color;
		
		this._notifyListeners('over');
	},
	
	_onMouseOut: function(input, event) {
		// выбранный цвет - цвет бг старого выбранного элемента
		this.selectedColor = input._ColorChooser_Color;
		
		this._notifyListeners('out');
	}/**/
	
};


var FrameChanger = function(container, frames) {
	this.container = container;
	this._initFrames(frames);
	this._initialize();
}

FrameChanger.prototype = {
	_initFrames: function(frames) {
		this.frames = new Array();
		for(var i = 0; i < frames.length; i++) {
			this.frames[frames[i].color] = frames[i];
		}
	},
	
	_initialize: function() {
	    for(var i  = 0; i < this.container.childNodes.length; i++) {
	        if(this.container.childNodes[i].nodeType == 1) {
        		this.img = this.container.childNodes[i];
	        }   
	    }
	},
	
	_hex2int: function(hex) {
	   return ('0x' + hex) * 1;
	},
	
	_color2rgb: function(color) {
	    color = color.substring(1);
	    var res = new Array(color.substring(0,2), color.substring(2,4), color.substring(4,6));
	    for(var i = 0; i < 3; i++) {
	        res[i] = this._hex2int(res[i]);
	    }
	    return res;
	},
	
	setColor: function(color) {
		var frame = this.frames[color];
		
		this.container.style.backgroundColor = frame.color;
		if(frame.img) {
		    this.container.style.backgroundImage = 'url(' + frame.img + ')';
		} else {
		    this.container.style.backgroundImage = 'none';
		}
		
		var shd = this._shadowColor(frame.color);
		var hlt = this._highlightColor(frame.color);
		
		this.img.style.borderLeftColor = shd;
		this.img.style.borderTopColor = shd;
		this.img.style.borderBottomColor = hlt;
		this.img.style.borderRightColor = hlt;
	},
	
	_shadowColor: function(color) {
		var rgb = this._color2rgb(color);
		var rgbhsv = new RGBHSV(false);
		rgbhsv.setRGB(rgb[0], rgb[1], rgb[2]);
		rgbhsv.calcHSV();
		rgbhsv.V = Math.max(0, rgbhsv.V - 0.2);
		rgbhsv.calcRGB();
		return rgbhsv.value();
	},
	
	_highlightColor: function(color) {
		var rgb = this._color2rgb(color);
		var rgbhsv = new RGBHSV(false);
		rgbhsv.setRGB(rgb[0], rgb[1], rgb[2]);
		rgbhsv.calcHSV();
		
		rgbhsv.V = Math.min(100, rgbhsv.V + 0.2);
		rgbhsv.calcRGB();
		return rgbhsv.value();
	}
	
};