// JavaScript Document

$(function() {
		$(".draggable").draggable();
	});
	$(function() {
		$("#color01").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#790000', color: '#6699cc'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color02").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#9e0b0f', color: '#993300'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color03").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#ed1c24', color: '#f7977a'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color04").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#f26c4f', color: '#a0410d'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color05").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#f7977a', color: '#000033'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color06").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#7b2e00', color: '#ff0099'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color07").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#a0410d', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color08").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#f26522', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		<!--Second Row-->
		$("#color09").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#827b00', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color10").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#aba000', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color11").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#fff200', color: '#ccc'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color12").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#fff467', color: '#ccc'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color13").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#406618', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color14").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#598527', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color15").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#8dc73f', color: '#406618'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color16").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#acd372', color: '#406618'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		<!--Third Row-->
		$("#color17").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#005826', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color18").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#007236', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color19").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#00a651', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color20").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#3bb878', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color21").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#7ba130', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color22").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#a2d39c', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color23").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#82ca9d', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color24").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#f26522', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		<!--Fourth Row-->
		$("#color25").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#005952', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color26").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#00746b', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color27").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#00a99d', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color28").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#1abbb4', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color29").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#003663', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color30").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#004b80', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color31").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#0072bc', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color32").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#438cca', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		<!--Fifth Row-->
		$("#color33").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#32004b', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color34").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#440e62', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color35").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#662d91', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color36").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#855fa8', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color37").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#7b0046', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color38").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#98005d', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color39").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#ec008c', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
		$("#color40").toggle(
			function() {
				$("#effect").animate({backgroundColor: '#f06ea9', color: '#fff'}, 1000);
			},
			function() {
				$("#effect").animate({backgroundColor: '#666666', color: '#000'}, 1000);
			}
		);
	})