window.addEvent('domready', function() {
	var verticalSlide = new Fx.Slide('top').hide();
	var currSelect = 'cc1';
	var alternate;
	var originalColors = {'color1': '#F25100','color2': '#f40f7c','color3': '#08b9fd','color4': '#F2C406','color5': '#94E515','color6': '#eee','color7': '#A61DFF','color8': '#cccccc'};
	var changeColors = {'color1': '#F25100','color2': '#f40f7c','color3': '#08b9fd','color4': '#F2C406','color5': '#94E515','color6': '#eee','color7': '#A61DFF','color8': '#cccccc'};
	$('refreshButton').set('checked', false);
	var alternate = false;
	var r1 = new MooRainbow('cc1', {
			'startColor': [242, 81, 0],
			'onChange': function(color) {
						switch(currSelect)
						{
							case 'cc1':
								$('cc1').setStyle('background-color', color.hex);
								changeColors.color1 = color.hex;
								$each($$('div.color1'), function(elem){
									elem.setStyle('background-color', color.hex);
								});
							break;
							case 'cc2':
								$('cc2').setStyle('background-color', color.hex);
								changeColors.color2 = color.hex;
								$each($$('div.color2'), function(elem){
									elem.setStyle('background-color', color.hex);
								});
							break;
							case 'cc3':
								$('cc3').setStyle('background-color', color.hex);
								changeColors.color3 = color.hex;
								$each($$('div.color3'), function(elem){
									elem.setStyle('background-color', color.hex);
								});
							break;
							case 'cc4':
								$('cc4').setStyle('background-color', color.hex);
								changeColors.color4 = color.hex;
								$each($$('div.color4'), function(elem){
									elem.setStyle('background-color', color.hex);
								});
							break;
							case 'cc5':
								$('cc5').setStyle('background-color', color.hex);
								changeColors.color5 = color.hex;
								$each($$('div.color5'), function(elem){
									elem.setStyle('background-color', color.hex);
								});
							break;
							case 'cc6':
								$('cc6').setStyle('background-color', color.hex);
								changeColors.color6 = color.hex;
								$each($$('div.color6'), function(elem){
									elem.setStyle('background-color', color.hex);
								});
							break;
							case 'cc7':
								$('cc7').setStyle('background-color', color.hex);
								changeColors.color7 = color.hex;
								$each($$('div.color7'), function(elem){
									elem.setStyle('background-color', color.hex);
								});
							break;
							case 'cc8':
								$('cc8').setStyle('background-color', color.hex);
								changeColors.color8 = color.hex;
								$each($$('div.color8'), function(elem){
									elem.setStyle('background-color', color.hex);
								});
							break;
						}
			}
		});	
	$('reset').addEvent('click', function(event){
		changeColors.color1 = originalColors.color1;
		changeColors.color2 = originalColors.color2;
		changeColors.color3 = originalColors.color3;
		changeColors.color4 = originalColors.color4;
		changeColors.color5 = originalColors.color5;
		changeColors.color6 = originalColors.color6;
		changeColors.color7 = originalColors.color7;
		changeColors.color8 = originalColors.color8;
		$('cc1').setStyle('background-color', originalColors.color1);
		$('cc2').setStyle('background-color', originalColors.color2);
		$('cc3').setStyle('background-color', originalColors.color3);
		$('cc4').setStyle('background-color', originalColors.color4);
		$('cc5').setStyle('background-color', originalColors.color5);
		$('cc6').setStyle('background-color', originalColors.color6);
		$('cc7').setStyle('background-color', originalColors.color7);
		$('cc8').setStyle('background-color', originalColors.color8);
		assignRandomColors();
	});
	$('cc1').addEvent('click', function(event){
		event.stop();
		r1.manualSet(changeColors.color1,'hex');
		currSelect = 'cc1';
		r1.show();
	});
	$('cc2').addEvent('click', function(event){
		event.stop();
		r1.manualSet(changeColors.color2,'hex');
		currSelect = 'cc2';
		r1.show();
	});
	$('cc3').addEvent('click', function(event){
		event.stop();
		r1.manualSet(changeColors.color3,'hex');
		currSelect = 'cc3';
		r1.show();
	});			
	$('cc4').addEvent('click', function(event){
		event.stop();
		r1.manualSet(changeColors.color4,'hex');
		currSelect = 'cc4';
		r1.show();
	});
	$('cc5').addEvent('click', function(event){
		event.stop();
		r1.manualSet(changeColors.color5,'hex');
		currSelect = 'cc5';
		r1.show();
	});
	$('cc6').addEvent('click', function(event){
		event.stop();
		r1.manualSet(changeColors.color6,'hex');
		currSelect = 'cc6';
		r1.show();
	});
	$('cc7').addEvent('click', function(event){
		event.stop();
		r1.manualSet(changeColors.color7,'hex');
		currSelect = 'cc7';
		r1.show();
	});
	$('cc8').addEvent('click', function(event){
		event.stop();
		r1.manualSet(changeColors.color8,'hex');
		currSelect = 'cc8';
		r1.show();
	});
	$('open-controls').addEvent('click', function(event){
		event.stop();
		r1.hide();
		verticalSlide.toggle();
	});
	$('refreshButton').addEvent('click', function(event){
		$clear(alternate);
		if (alternate)
		{
			alternate = false;
		}
		else
		{
			alternate = true;
			alternateBoxes();
		}
	});
	function alternateBoxes()
	{
		if (alternate)
		{
			assignRandomColors();
		}
		if (alternate)
		{
			alternate = alternateBoxes.delay(2000);
		}
		else
		{
			$('refreshButton').set('checked', false);
		}
	};
	function assignRandomColors()
	{
		var classes = ['boxes ','boxes color1','boxes color2','boxes color3','boxes color4','boxes color5','boxes color6','boxes color7','boxes color8'];
		for (var i = 0; i < 170; i++)
		{
			var randy = $random(0, 8);
			var newclass = classes[randy];
			var boxid = "box"+i;
			$(boxid).set('class', newclass);
			switch(randy)
			{
				case 1:
					$(boxid).setStyle('background-color', changeColors.color1);
				break;
				case 2:
					$(boxid).setStyle('background-color', changeColors.color2);
				break;
				case 3:
					$(boxid).setStyle('background-color', changeColors.color3);
				break;
				case 4:
					$(boxid).setStyle('background-color', changeColors.color4);
				break;
				case 5:
					$(boxid).setStyle('background-color', changeColors.color5);
				break;
				case 6:
					$(boxid).setStyle('background-color', changeColors.color6);
				break;
				case 7:
					$(boxid).setStyle('background-color', changeColors.color7);
				break;
				case 8:
					$(boxid).setStyle('background-color', changeColors.color8);
				break;
			}
		}
	}
});