/*

	13twelve vs. JQuery

	This javascript is the main javascript for the sites actions.
	
*/

// --------------------------------------------------------------------------------------------------------------
// set up variables

var isSafari = false;
var isSafari3 = false;
var isSafari4 = false;
var isIE = false;
var isIE6 = false;
var isIE7 = false;
var isIE8 = false;
var isMozilla = false;
var isOpera = false;
var isMac = false;
var isiphone = false;

// --------------------------------------------------------------------------------------------------------------
// what to do on DOM ready
$(document).ready(function(){
	runOnDOMready();
	
	$(window).load(function() {
		// what to do when body loaded
		runOnLoaded();
	});
});

// --------------------------------------------------------------------------------------------------------------

function runOnDOMready() {
	
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ some simple browser testing */
	// are we on a Mac ?
	if (navigator.appVersion.indexOf("Mac")!=-1) {
		isMac = true;
		$('body').addClass("isMac");
	}
	
	function searchVersion(browser) {
		var dataString = navigator.userAgent;
		var index = dataString.indexOf(browser);
		if (index == -1) return;
		var bVersion = parseFloat(dataString.substring(index+browser.length+1));
		return bVersion.toString().split(".")[0];
	}
	
	// Safari versioning
	isSafari =  jQuery.browser.safari;
	if (isSafari) {	
		$('body').addClass("isSafari");
		version = searchVersion("Version") || + "";	
		$('body').addClass("isSafari"+version);
	}
		
	// IE versioning
	isIE = jQuery.browser.msie;
	if (isIE) {	
		$('body').addClass("isIE");
		version = searchVersion("MSIE") || "";
		$('body').addClass("isIE"+version);
	}
	
	// Mozilla versioning
	isMozilla = jQuery.browser.mozilla;
	if (isMozilla) {
		$('body').addClass("isMozilla");
		version = searchVersion("Firefox") || "";
		$('body').addClass("isMozilla"+version);
	}
	
	// Opera versioning
	isOpera = jQuery.browser.opera;
	if (isOpera) {
		$('body').addClass("isOpera");
	}
	
	// iPhone
	if (navigator.userAgent.indexOf("iPhone") != -1) {
		isiphone = true;
		$('body').addClass("isIphone");
	}
	
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ set up some adding of classes to things */	
	
	//setUpClasses();	
	
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ do some roll over events 
		
	$("a[href^=#]").click(
		function(e) {
			if ($(e.target).attr("href").length > 1) {
				e.preventDefault();
				$.scrollTo($(e.target).attr("href"), 600);
			}
		}
	);
	*/

	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ site functions */
	
	if (!isIE6) {
		paddingBottom();
		slideFunctions();	
		// force the top of the page on refresh
		$.scrollTo("people", 600);
	} else {
		$("body").append('<div id="ie6" class="ie6"><p>This website does <strong>not</strong> fully support Internet Explorer 6. Your general web browsing experience will be much improved if you upgrade to <a href="http://www.microsoft.com/windows/products/winfamily/ie/default.mspx">Internet Explorer 7, Internet Explorer 8</a> or <a href="http://www.mozilla.com/en-US/">Mozilla Firefox</a>.</p></div>');
	}
}

function runOnLoaded() {	
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ redoing for IE! */
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ set up some adding of classes to things */	
	if (isIE) {
		//setUpClasses();
	}
	
	
}

// --------------------------------------------------------------------------------------------------------------
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ application wide functions */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ (remember to test if the elements you are messing with exist) */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ( eg. if (($('body.homepage'))!=""){ } ) */

function setUpClasses() {
	$('input[type=submit]').addClass("submit");
	$('input[type=radio]').addClass("radio");
	$('input[type=checkbox]').addClass("checkBox");
	$('input[type=image]').addClass("image");
	$('input[type=file]').addClass("file");	
	$('tr:nth-child(even)').addClass("even");
	$('li:nth-child(even)').addClass("even");	
	$('li:first-child, p span:first-child, h3 span:first-child').addClass("first");
	$('li:last-child, p span:last-child, h3 span:last-child').addClass("last");
	$("div.content a[href^=http]").attr("target","_blank");	
}

// adds some extra padding to the bottom of the page to allow it to scroll sufficiantly far up to show the last panel
function paddingBottom() {
	if (!isIE6) {
		var bH = $(window).height();
		var nH = $("#nav").height();
		var nT = $("#nav").css("top");
		var pH = $("div.block").height();
		//
		nT = nT.replace(/px/g,"");
		nT = nT * 1;
		//
		if(bH >= (nH + nT)) {
			$("#content").css("padding-bottom", (bH - (nH + nT) + (nT - pH)));
		}
	}
}
window.onresize = paddingBottom;

// controls the sliding of the site
function slideFunctions() {
	$("div#tools").show();
	// set up some objects of stuff, make the tool for previous inactive
	var sliding = false;
	var blockInfo = {toolsVisible:true, currentBlock:"#"+$("div.block:first-child").attr("id"), people:0, places:0};
	var toolBtnLis = {next:$("div#tools ul li.next"), previous:$("div#tools ul li.previous")};
	toolBtnLis.previous.addClass("inactive");
	// need to wrap all the images in spans, so I can do the roll overs
	$("div#content ul.photos li img").after('<div class="wrapper"><span class="left"></span><span class="right"></span></div>');
	$("div#lightbox ul li img").after('<div class="wrapper"></div>');
	// some arrays of widths of the images
	var people = new Array();
	$("div#people ul.photos li img").each(function(i,val){
		people[i] = $(val).width();
		$(val).next().attr("index",i);
	});
	var places = new Array();
	$("div#places ul.photos li img").each(function(i,val){
		places[i] = $(val).width();
		$(val).next().attr("index",i);
	});
	$("div#people-thumbs ul li img").each(function(i,val){
		$(val).next().attr("index",i);
	});
	$("div#places-thumbs ul li img").each(function(i,val){
		$(val).next().attr("index",i);
	});
	// clicks!
	$("div#nav ul a[href^=#]").click(
		function(e) {
			if ($(this).attr("href").length > 1) {
				e.preventDefault();
				blockInfo.currentBlock = $(this).attr("href");
				$.scrollTo(blockInfo.currentBlock, 600);
				$("div#nav").find("li").removeClass("current");
				$(this).parent().addClass("current");
				//
				if (blockInfo.currentBlock == "#biog" || blockInfo.currentBlock == "#contact") {
					hideTools();
				} else if (blockInfo.currentBlock == "#places" || blockInfo.currentBlock == "#people") {
					showTools();
				}
			}
		}
	);
	//
	$("div#tools ul li.next a[href^=#]").click(
		function(e) {
			e.preventDefault();
			if (!$(this).parent().hasClass("inactive") && !sliding) {
				sliding = true;
				if (blockInfo.currentBlock == "#people") {
					blockInfo.people++;
				} else {
					blockInfo.places++;
				}
				slidePhotos("next");
			}
		}
	);
	$("div#tools ul li.previous a[href^=#]").click(
		function(e) {
			e.preventDefault();
			if (!$(this).parent().hasClass("inactive") && !sliding) {
				sliding = true;
				if (blockInfo.currentBlock == "#people") {
					blockInfo.people--;
				} else {
					blockInfo.places--;
				}
				slidePhotos("previous");
			}
		}
	);
	$("div#tools p a[href^=#]").click(
		function(e) {
			e.preventDefault();
		}
	);
	$("div#content ul.photos li div.wrapper").click(
		function(e) {
			jumpPhotos("#"+$(this).parent().parent().parent().attr("id"),$(this).attr("index"));
		}
	);
	$("div#content ul.photos li.back a[href^=#]").click(
		function(e) {
			e.preventDefault();
			jumpPhotos("#"+$(this).parent().parent().parent().attr("id"),0);
		}
	);
	$("div#tools p a[href^=#]").click(
		function(e) {
			e.preventDefault();
			openLB();
		}
	);
	$("div#lightbox div.thumbs p a[href^=#]").click(
		function(e) {
			e.preventDefault();
			closeLB();
		}
	);
	$("div#lightbox div.thumbs ul li div.wrapper").click(
		function(e) {
			e.preventDefault();
			closeLB(true,blockInfo.currentBlock,$(this).attr("index"));
		}
	);
	$("div#top h1").click(
		function(e) {
			e.preventDefault();
			blockInfo.currentBlock = "#people";
			$.scrollTo(blockInfo.currentBlock, 600);
			$("div#nav").find("li").removeClass("current");
			$("div#nav ul li:first-child").addClass("current");
			showTools();
		}
	);
 	// show/hideTools
	function hideTools() {
		if (blockInfo.toolsVisible) {
			blockInfo.toolsVisible = false;
			$("div#tools").animate({ top: "-122px" }, 600);
		}
	}
	function showTools() {
		checkTools();
		if (!blockInfo.toolsVisible) {
			blockInfo.toolsVisible = true;
			$("div#tools").animate({ top: "500px" }, 600);
		}
	}
	// check if the tool btns should be active or not
	function checkTools() {
		if (blockInfo.currentBlock == "#people") {
			blockInfo.people == 0 ? toolBtnLis.previous.addClass("inactive") : toolBtnLis.previous.removeClass("inactive");
			blockInfo.people == (people.length - 1) ? toolBtnLis.next.addClass("inactive") : toolBtnLis.next.removeClass("inactive");
		} else {
			blockInfo.places == 0 ? toolBtnLis.previous.addClass("inactive") : toolBtnLis.previous.removeClass("inactive");
			blockInfo.places == (places.length - 1) ? toolBtnLis.next.addClass("inactive") : toolBtnLis.next.removeClass("inactive");
		}
	}
	// slidePhotos (the main function here)
	function slidePhotos(direction) {	
		checkTools();
		var left, sizes, marginRight, newLeft, pos;
		if (blockInfo.currentBlock == "#people") {
			left = $("div#people ul.photos").css("left").replace(/px/g,"");
			sizes = people;
			pos = blockInfo.people * 1;
		} else {
			left = $("div#places ul.photos").css("left").replace(/px/g,"");
			sizes = places;
			pos = blockInfo.places * 1;
		}
		left = left * 1;
		marginRight = $("ul.photos li").css("margin-right").replace(/px/g,"");
		marginRight = marginRight * 1;
		if(direction == "next") {
			newLeft = left - sizes[pos-1] - marginRight;	
		} else {
			newLeft = left + sizes[pos] + marginRight;	
		}
		$(blockInfo.currentBlock+" ul.photos").animate( { left:newLeft+"px"}, 600, function(){ sliding = false; } );
	}
	function jumpPhotos(current,index) {
		if (!sliding) {
			sliding = true;
			if (blockInfo.currentBlock != current) {
				blockInfo.currentBlock = current;
				$.scrollTo(blockInfo.currentBlock, 600);
				// scrollTo doesn't trigger after finish event at the end...
				setTimeout(doJump,600);
				$("div#nav").find("li").removeClass("current");
				$("div#nav li a[href^="+blockInfo.currentBlock+"]").parent().addClass("current");
				showTools();
			} else {
				doJump();
			}
		}
		function doJump() {
			var left, sizes, marginRight, newLeft, pos, posBefore;
			pos = index * 1;
			if (blockInfo.currentBlock == "#people") {
				left = $("div#people ul.photos").css("left").replace(/px/g,"");
				sizes = people;
				posBefore = blockInfo.people;
				blockInfo.people = pos;
			} else {
				left = $("div#places ul.photos").css("left").replace(/px/g,"");
				sizes = places;
				posBefore = blockInfo.places;
				blockInfo.places = pos;
			}
			checkTools();
			left = left * 1;
			marginRight = $("ul.photos li").css("margin-right").replace(/px/g,"");
			marginRight = marginRight * 1;		
			newLeft = left;
			if (posBefore < pos) {
				for (i=posBefore;i<pos;i++) {
					newLeft = newLeft - sizes[i] - marginRight;
				}
			} else if (posBefore > pos) {
				for (i=posBefore;i>pos;i--) {
					newLeft = newLeft + sizes[i-1] + marginRight;
				}
			}		 
			$(blockInfo.currentBlock+" ul.photos").animate( { left:newLeft+"px"}, 600, function(){ sliding = false; } );
		}
	}
	// open and close lightbox
	function openLB() {
		$("div#lightbox").fadeIn("fast", function(){
			if (blockInfo.currentBlock == "#people") {
				$("div#lightbox div#people-thumbs").fadeIn("fast");
			} else {
				$("div#lightbox div#places-thumbs").fadeIn("fast");
			}
		});
	}
	function closeLB(doJump,current,index) {
		$("div#lightbox div.thumbs").fadeOut("fast", function(){
			$("div#lightbox").fadeOut("fast", function(){
				if(doJump) {
					jumpPhotos(current,index);
				}
			});
		});
	}
}