Customizer = Class.create();
Object.extend(Customizer, {
	load: function() {
		Customizer.control = new Customizer();
	}
});
Object.extend(Customizer.prototype, {
	initialize: function() {
		this.customizer = document.getElementsByClassName('customizer')[0];
		this.panels = $$('.customizer div');
		this.swatches = $A($('swatches').getElementsByTagName("li")).collect(function(swatch) {
			Event.observe(swatch, 'click', function(e) {
				this.set_all_panels(swatch.className);
			}.bind(this));
			
			return swatch.className;
		}.bind(this));
		
		$A(this.panels).each( function(panel) {
			Event.observe(panel, 'click', function(e) {
				this.switch_panel_color(panel);
			}.bind(this));
		}.bind(this));
	},
	set_all_panels: function(swatch) {
		for (var index=0; index<this.swatches.length; index++) {
			if (this.swatches[index] == swatch)
				break;
		}
		$A(this.panels).each(function(panel) {
			this.switch_panel_color(panel, index);
		}.bind(this));
	},
	switch_panel_color: function(panel, swatch) {
		if (typeof swatch != "undefined") {
			panel.swatchIndex = swatch;
		} else {
			if (typeof panel.swatchIndex == "undefined") {
				panel.swatchIndex = 0;
			} else {
				panel.swatchIndex = (panel.swatchIndex==this.swatches.length-1) ? 0 : panel.swatchIndex+1;
			}
		}
		var classes = panel.className.split(" ");
		classes[1] = this.swatches[panel.swatchIndex];
		$(classes[0]).value = classes[1];
		
		panel.className = classes.join(" ");
	}
});

Event.observe(window, 'load', Customizer.load);