var activateAjax = function($) {

	var ajaxCache = [];

	// NAVIGATION
	var nav = $("div.nav a");
	
	var content = $("#viewer");
	
	
	var navrequest = null;
	
	// NAV AJAX
	nav.each(function(i) {
		if (i == 0) return; // SKIP LOGO
		var t = $(this);
		t.attr("ajax", t.attr("href"));
		
		t.click(function() {
		
			if (navrequest) navrequest.abort();
			
			//loadSiteColor.loadColor(parseInt(i) - 1);
				
			// START AFTER FADE
			
			var t = $(this);
			
			var link = t.attr("ajax");
			
			if (typeof(ajaxCache[link]) == "object" && ajaxCache[link].loaded == true) {
				loadPage(ajaxCache[link].code, i);
			}
			// LOAD
			else {
				navrequest = $.ajax({
					url: link + "?ajax=1",
					success: function(html) {
						//alert("loaded" + t.attr("ajax"));
						
						ajaxCache[link] = {
							loaded: true,
							code: html
						};
						loadPage(html, i);		
						
					}
					
				});
			}
			
		});
		
		
		
	});
	
	
	
	var loadPage = function(html, color) {
		content.fadeOut(
			300,
			function() {
				content.html(html);
				content.fadeIn(500);
				setTimeout(function() {
					loadSiteColor.loadColor(parseInt(color) - 1);
				}, 200);
			}
		);
	};
	
	nav.attr("href", "javascript: void(0);");
	
	
	nav.first().next().trigger("click");

}

var loadSiteColor = (function($) {
	
	var controls = {
		h1: "h1, strong, b",
		headings: "h2, h3, h4",
		background: "body",
		viewer: "#viewer",
		anchors: "#viewer a",
		navigation: "div.nav a",
		logo: "a.logo",
		color1: "div.color1",
		color2: "div.color2",
		color3: "div.color3",
		color4: "div.color4",
		color5: "div.color5"
	};
	var c = controls;
	
	var animColor = function(sel, col) {
		sel.animate(
			{
				"color": col
			},
			{
				queue: false,
				duration: 500	
			}		
		);
	};
	var animBg = function(sel, col) {
		sel.animate(
			{
				"background-color": col
			},
			{
				queue: false,
				duration: 1200	
			}		
		);
	};
	
	var loadColor = function(i) {
		if (i < 0 || i > colors.length) i = 0;
		initControls();		
		
		animColor(c.h1, colors[i].contrast);
		animColor(c.headings, colors[i].accent);
		animBg(c.background, colors[i].background);
		animColor(c.anchors, colors[i].accent);
		animColor(c.navigation, colors[i].text);
		animColor(c.viewer, colors[i].text);
		animColor(c.logo, colors[i].contrast);
		animBg(c.color1, colors[i].strips[0]);
		animBg(c.color2, colors[i].strips[1]);
		animBg(c.color3, colors[i].strips[2]);
		animBg(c.color4, colors[i].strips[3]);
		animBg(c.color5, colors[i].strips[4]);
		
		
		c.navigation
			.unbind("mouseenter")
			.unbind("mouseleave")
			.bind("mouseenter", function() {
				animColor($(this), colors[i].accent);
			})
			.bind("mouseleave", function() {
				animColor($(this), colors[i].text);
			})
		;
		
		c.anchors
			.unbind("mouseenter")
			.unbind("mouseleave")
			.bind("mouseenter", function() {
				animColor($(this), colors[i].contrast);
			})
			.bind("mouseleave", function() {
				animColor($(this), colors[i].accent);
			})
		;
		
		c.logo
			.unbind("mouseenter")
			.unbind("mouseleave")
			.bind("mouseenter", function() {
				animColor($(this), colors[i].accent);
			})
			.bind("mouseleave", function() {
				animColor($(this), colors[i].contrast);
			})
		;
		
		
	};
	
	
	var colors = [
		// WINTER
		{
			background: "#222222",
			text: "#bdbdbd",
			accent: "#ffffff",
			contrast: "#D8F0E3",
			strips: [ "#BDBDBD", "#F0E4D8", "#594635", "#93C6B5", "#D8F0E3" ]	
		},
		// EARTH
		{
			background: "#222222",
			text: "#d8c9a8",
			accent: "#5c8330",
			contrast: "#fff",
			strips: [ "#d8c9a8", "#5c8330", "#264907", "#392413", "#363d43" ]	
		},
		// FIRE
		{
			background: "#222222",
			text: "#fbc043",
			accent: "#ffffff",
			contrast: "#c04305",
			strips: [ "#6c0b03", "#c04305", "#eb801b", "#fbc043", "#ffef80" ]	
		},
		// WATER
		{
			background: "#222222",
			text: "#f2e4c5",
			accent: "#d8c18f",
			contrast: "#5fbdc5",
			strips: [ "#19162b", "#15435c", "#5fbdc5", "#f2e4c5", "#d8c18f" ]	
		},
		// WIND
		{
			background: "#222222",
			text: "#e8dec0",
			accent: "#7dabb8",
			contrast: "#b2915e",
			strips: [ "#260600", "#70431f", "#b2915e", "#e8dec0", "#7dabb8" ]	
		},
		// PILLOW TANK
		{
			background: "#222222",
			text: "#fff8e5",
			accent: "#e9e395",
			contrast: "#273d3b",
			strips: [ "#e9e395", "#cfa724", "#40727d", "#273d3b", "#fff8e5" ]	
		},
		// RED TO TEAL
		{
			background: "#222222",
			text: "#f6c66e",
			accent: "#e0340f",
			contrast: "#c39625",
			strips: [ "#69140d", "#e0340f", "#f6c66e", "#c39625", "#1a4c40" ]	
		},
		// SAND
		{
			background: "#222222",
			text: "#606362",
			accent: "#5b3324",
			contrast: "#1d1d1f",
			strips: [ "#f3e6ce", "#86b19f", "#606362", "#5b3324", "#1d1d1f" ]	
		},
		// FIRE 2
		{
			background: "#222222",
			text: "#ffcb71",
			accent: "#d4ab4b",
			contrast: "#821b14",
			strips: [ "#821b14", "#ffcb71", "#d4ab4b", "#8e742c", "#472307" ]	
		}
	
	];
	
	var initControls = function() {
		// FIND CONTROLS
		c = {};
		for (x in controls) {
			c[x] = $(controls[x]);
			//console.log(c[x]);
		}
		//console.log(c);
	};
	
	var init = function() {
		initControls();
	};	
	
	
	return {
		loadColor: loadColor,
		controls: c,
		colors: colors,
		init: init
	};
})(jQuery);



jQuery(activateAjax);
//jQuery(loadSiteColor.init);