$(document).ready(function(){
	var col0color = "#313131"; // Default Color
	var col1color = "#66cccc";
	var col2color = "#f26c00";
	var col3color = "#cc33cc";
	var row0color = "#999"; // Default Color
	var row1color = "#66cccc";
	var row2color = "#f26c00";
	var row3color = "#cc33cc";
	var matrixOff = "0.4"; // Off "Dim"

	$("p.row-01").hover(
		function() {
			$("p.row-01").stop();
			$("p.row-01").animate({"color": row1color}, "slow");
		},
		function() {
			$("p.row-01").stop();
			$("p.row-01").animate({"color": row0color}, "slow");
		}
	);

	$("p.row-02").hover(
		function() {
			$("p.row-02").stop();
			$("p.row-02").animate({"color": row2color}, "slow");
		},
		function() {
			$("p.row-02").stop();
			$("p.row-02").animate({"color": row0color}, "slow");
		}
	);

	$("p.row-03").hover(
		function() {
			$("p.row-03").stop();
			$("p.row-03").animate({"color": row3color}, "slow");
		},
		function() {
			$("p.row-03").stop();
			$("p.row-03").animate({"color": row0color}, "slow");
		}
	);

	$("#nav-01").css("opacity", "0");
	$("#nav-02").css("opacity", "0");
	$("#nav-03").css("opacity", "0");
	$("img.matrix").css("opacity", matrixOff);
	$("#image-matrix").hover(
		function() {},
		function() {
			$("p.row-01").stop();
			$("p.row-01").animate({"color": row0color}, "slow");
			$("p.row-02").stop();
			$("p.row-02").animate({"color": row0color}, "slow");
			$("p.row-03").stop();
			$("p.row-03").animate({"color": row0color}, "slow");
			$("#nav-01").stop();
			$("#nav-01").animate({"opacity": "0"}, "slow");
			$("#nav-02").stop();
			$("#nav-02").animate({"opacity": "0"}, "slow");
			$("#nav-03").stop();
			$("#nav-03").animate({"opacity": "0"}, "slow");
		}
	);
	$("img.matrix").hover(
		function() {
			$(this).stop();
			$(this).animate({"opacity": "1"}, "slow");
			var id=$(this).attr("id");
			switch(id){
				case "1":
				case "2":
				case "3":
					// Left Nav
					$("p.row-01").stop();
					$("p.row-01").animate({"color": row1color}, "slow");
					$("p.row-02").stop();
					$("p.row-02").animate({"color": row0color}, "slow");
					$("p.row-03").stop();
					$("p.row-03").animate({"color": row0color}, "slow");
					// Top Nav
					$("#nav-01").stop();
					$("#nav-01").animate({"opacity": "1"}, "slow");
					$("#nav-02").stop();
					$("#nav-02").animate({"opacity": "0"}, "slow");
					$("#nav-03").stop();
					$("#nav-03").animate({"opacity": "0"}, "slow");
					break;
				case "4":
				case "5":
				case "6":
					// Left Nav
					$("p.row-02").stop();
					$("p.row-02").animate({"color": row2color}, "slow");
					$("p.row-01").stop();
					$("p.row-01").animate({"color": row0color}, "slow");
					$("p.row-03").stop();
					$("p.row-03").animate({"color": row0color}, "slow");
					// Top Nav
					$("#nav-02").stop();
					$("#nav-02").animate({"opacity": "1"}, "slow");
					$("#nav-01").stop();
					$("#nav-01").animate({"opacity": "0"}, "slow");
					$("#nav-03").stop();
					$("#nav-03").animate({"opacity": "0"}, "slow");
					break;
				case "7":
				case "8":
				case "9":
					// Left Nav
					$("p.row-03").stop();
					$("p.row-03").animate({"color": row3color}, "slow");
					$("p.row-01").stop();
					$("p.row-01").animate({"color": row0color}, "slow");
					$("p.row-02").stop();
					$("p.row-02").animate({"color": row0color}, "slow");
					// Top Nav
					$("#nav-03").stop();
					$("#nav-03").animate({"opacity": "1"}, "slow");
					$("#nav-01").stop();
					$("#nav-01").animate({"opacity": "0"}, "slow");
					$("#nav-02").stop();
					$("#nav-02").animate({"opacity": "0"}, "slow");
					break;
			}
			switch(id){
				case "1":
					$("#col-01_01").stop();
					$("#col-01_01").animate({"backgroundColor": col1color}, "slow");
					$("#col-01_02").stop();
					$("#col-01_02").animate({"backgroundColor": col0color}, "slow");
					$("#col-01_03").stop();
					$("#col-01_03").animate({"backgroundColor": col0color}, "slow");
					break;
				case "2":
					$("#col-01_01").stop();
					$("#col-01_01").animate({"backgroundColor": col0color}, "slow");
					$("#col-01_02").stop();
					$("#col-01_02").animate({"backgroundColor": col1color}, "slow");
					$("#col-01_03").stop();
					$("#col-01_03").animate({"backgroundColor": col0color}, "slow");
					break;
				case "3":
					$("#col-01_01").stop();
					$("#col-01_01").animate({"backgroundColor": col0color}, "slow");
					$("#col-01_02").stop();
					$("#col-01_02").animate({"backgroundColor": col0color}, "slow");
					$("#col-01_03").stop();
					$("#col-01_03").animate({"backgroundColor": col1color}, "slow");
					break;
				case "4":
					$("#col-02_01").stop();
					$("#col-02_01").animate({"backgroundColor": col2color}, "slow");
					$("#col-02_02").stop();
					$("#col-02_02").animate({"backgroundColor": col0color}, "slow");
					$("#col-02_03").stop();
					$("#col-02_03").animate({"backgroundColor": col0color}, "slow");
					break;
				case "5":
					$("#col-02_01").stop();
					$("#col-02_01").animate({"backgroundColor": col0color}, "slow");
					$("#col-02_02").stop();
					$("#col-02_02").animate({"backgroundColor": col2color}, "slow");
					$("#col-02_03").stop();
					$("#col-02_03").animate({"backgroundColor": col0color}, "slow");
					break;
				case "6":
					$("#col-02_01").stop();
					$("#col-02_01").animate({"backgroundColor": col0color}, "slow");
					$("#col-02_02").stop();
					$("#col-02_02").animate({"backgroundColor": col0color}, "slow");
					$("#col-02_03").stop();
					$("#col-02_03").animate({"backgroundColor": col2color}, "slow");
					break;
				case "7":
					$("#col-03_01").stop();
					$("#col-03_01").animate({"backgroundColor": col3color}, "slow");
					$("#col-03_02").stop();
					$("#col-03_02").animate({"backgroundColor": col0color}, "slow");
					$("#col-03_03").stop();
					$("#col-03_03").animate({"backgroundColor": col0color}, "slow");
					break;
				case "8":
					$("#col-03_01").stop();
					$("#col-03_01").animate({"backgroundColor": col0color}, "slow");
					$("#col-03_02").stop();
					$("#col-03_02").animate({"backgroundColor": col3color}, "slow");
					$("#col-03_03").stop();
					$("#col-03_03").animate({"backgroundColor": col0color}, "slow");
					break;
				case "9":
					$("#col-03_01").stop();
					$("#col-03_01").animate({"backgroundColor": col0color}, "slow");
					$("#col-03_02").stop();
					$("#col-03_02").animate({"backgroundColor": col0color}, "slow");
					$("#col-03_03").stop();
					$("#col-03_03").animate({"backgroundColor": col3color}, "slow");
					break;
			}
		},
		function() {
			$(this).stop();
			$(this).animate({"opacity": matrixOff}, "slow");
		}
	);
});