// //////////////////////////////////////////////////////////////////////////// //
/* Global variables */
// //////////////////////////////////////////////////////////////////////////// //

var animationTime = 1500;
	/* ************************************************************************* */
	/* Set up the drawer objects, including the start and end positions for them */
	/*    AND which elements they slide under.                                   */
	/* Home is animated from left=617px to 318px    ******************************/
	/* Portfolio is animated from left=665px to 5px */
	/* Skills is animated from left=248px to 774px  */
	/* Blog is animated from left=68px to 774px     */
	/* Contact is animated from top=355px to 80px   */
	/* ************************************************************************* */
// HOME DRAWER
var slideUnder = ['contact','networks'];
var homeDrawer = new drawer("homedrawer","left","617px","318px",slideUnder);
// PORTFOLIO DRAWER
slideUnder = ['skills','contact','networks'];
var portfolioDrawer = new drawer("portfoliodrawer","left","665px","5px",slideUnder);
// SKILLS DRAWER
slideUnder = ['home','portfolio','networks','contact'];
var skillsDrawer = new drawer("skillsdrawer","left","248px","774px",slideUnder);
// BLOG DRAWER
slideUnder = ['home','contact','networks'];
var blogDrawer = new drawer("blogdrawer","left","68px","774px",slideUnder);
// CONTACT DRAWER
slideUnder = ['portfolio','home','blog','skills'];
var contactDrawer = new drawer("contactdrawer","top","355px","80px",slideUnder);

/* ******************************************************************************** */
/* Things to do when the document is loaded (jQuery) ****************************** */
/* Note: eventually I may add some GA event tracking: */
/* $.geekGaTrackEvent('feed', 'click', 'RSS 2.0', 'articles'); */
/* ******************************************************************************** */
$(document).ready(function(){
	// create a wrapper for all divs so I can move it around
	$("body").wrapInner("<div id='body'></div>");
	// Open the "home" drawer with an animation
     homeDrawer.open();
    // Set up click event handlers on nav items
    $(".nav").click(function(e){
    	eval($(this).attr("id")+"Drawer.open()");
    });
    // Set up the tabs for the skills drawer
    $("#skillstabs ul").tabs();
    $("#skillstabs").prepend("<img class='skillsTabsLeft' src='images/osxTabsLeft.png'/>");
    $(".ui-tabs-nav").append("<img class='skillsTabsRight' src='images/osxTabsRight.png'/>");
    
    // Set up click event handlers etc for the portfolio
    setupPortfolio();
    
    // Store a handle on the networks div since we'll be referring to it several times.
    var $networks = $("#networks");
    // Now set up the mouseover effects on the network icons
	$("#facebook,#linkedin,#twitter").hover(function(){
			// MOUSEOVER function
			// Substitute the _f2 into the file name (hover state)
			var imgUrl = $(this).css("background-image").replace(/^(.*\/[^\/]*)(\.[a-z]{3})/i,"$1_f2$2");
			$(this).css("background-image",imgUrl);
			// Highlight the main "Networks" title simultaneously as well
			//   (this function replaces the networks background-url with the _f2 version of the image)
			$networks.css("background-image",
				$networks.css("background-image").replace(/^(.*\/[^\/]*)(\.[a-z]{3})/i,"$1_f2$2")
			);
			//else alert("id is networks:"+$(this).attr("id")+".");
		},function() {
			// MOUSEOUT function
			// Remove the _f2 from the file name (normal state)
			var imgUrl = $(this).css("background-image").replace(/^(.*\/[^\/]*)_f\d+(\.[a-z]{3})/i,"$1$2");
			$(this).css("background-image",imgUrl);
			// De-highlight the main "Networks" title when mouse goes out
			$networks.css("background-image",
				$networks.css("background-image").replace(/^(.*\/[^\/]*)_f\d+(\.[a-z]{3})/i,"$1$2")
			);
		}
	);
	// Set the height of all links (<a>) to equal the height of their parent div
	//   (so the link will be active wherever the user points on the div)
	$("a").each(function(){
		var $parent = $(this).parent();
		$(this).css("height",$parent.css("height"));
	});
	preloadImages();
	
	// Deal with email obfuscation
	deobfuscate();
	$.geekGaTrackPage('UA-11537834-1');
});

// //////////////////////////////////////////////////////////////////////////// //
/* CLASS DEFINITIONS */
// //////////////////////////////////////////////////////////////////////////// //

/* Drawer Class Constructor */
function drawer(id,animateProperty,start,end,slideUnder) {
	// Attributes
	this.id=id;
	this.animateProperty=animateProperty;
	this.start=start;
	this.end=end;
	this.slideUnder = slideUnder; // array of elements to slide under
	this.isOpen=false;
	
	
	
	// Class Methods
	this.open = function() {
			// Set up a jQuery variable referencing this drawer's div
	var $div = $("#"+this.id);
	    	// When an item is clicked:
			//   1. The currently open drawer shuts
			//   2. Elements that this drawer will slide under have their z-index increased to 3
			//   3. The chosen drawer is animated to the open position 
			// First close the currently open drawer
			$("div[id$='drawer'][isOpen]").each(function() {
				// Get a handle on the drawer object associated with this div
				var oDrawer = eval($(this).attr('id').replace(/drawer/,"Drawer"));
				oDrawer.close();
			});
			// Next make the object visible if nec.
			$div.show();
			// Set the Z-index of elements in this object's slideUnder attribute
			for (var element in this.slideUnder) {
				$("#"+this.slideUnder[element]).css("z-index",3);
			}
			// Set the starting position
			$div.css(animateProperty,start);
			// Animate property from start to end
			//   Note: I used an eval so that the animateProperty could be specified at run-time.
			//alert("animate string="+"$(this).animate({ "+this.animateProperty+": this.end }, animationTime )");
			eval("$div.animate({ "+this.animateProperty+": this.end }, animationTime )");
			this.isOpen=true;
			// If the animation was on the 'left' property, animate the body's 'left'
			//    property too to make sure the content doesn't get too far off center.
			if (animateProperty == 'left') {
				// Figure out the distance animated
				var distance = this.start.replace(/px$/,"") - this.end.replace(/px$/,"");
				if (distance < -500 && $("body").css("left") != '-456px') {
					// this is only when a drawer slides right, and we've not already shifted.
					//    If the body's 'left' property is equal to -456px, then we've already 
					//         shifted so don't shift more.
					$("#body").animate({"left": "-456px"},2000);
				} else if (distance < 0) {
					// this is only when a drawer slides right, and we've not already shifted,
					//    and the distance is less the 500 (eg. the skills drawer)
					$("#body").animate({"left": "-350px"},2000);
				} else if (distance > 0) {
					$("#body").animate({"left": "0"},2000);
				}
			} else {
				// Top was animated (for the Contact tab), so reset body to 0 just in case it's off center
				$("#body").animate({"left": "0"},2000);
			}
			// Set an attribute on the div tag so we know it's open
			$div.attr("isOpen","true");
	}
	this.close = function() {
			if (!this.isOpen) return; // only close it if it's open
			// Make the associated div invisible and remove its isOpen attribute
			$("#"+this.id).fadeOut('slow').removeAttr("isOpen");
			// Reset the z-indexes of the drawer's slideUnder elements
			for (var element in this.slideUnder) $("#"+this.slideUnder[element]).css("z-index",1);
			this.isOpen = false;
	}
}

// //////////////////////////////////////////////////////////////////////////// //
// GLOBAL FUNCTIONS
// //////////////////////////////////////////////////////////////////////////// //

function setupPortfolio() {
	$("#portfolioscreen")
		.css('background-image','url(images/pf_bluechair.jpg)');
	
}
function deobfuscate() {
	// Find all links that start with contact/ and de-obfuscate them
	$("a[href^='contact/']").each(function(e){
		var href = $(this).attr('href');
		var address = href.replace(/^contact\/([^+]+)\+([^+]+)\+(.+)/, '$1' + '@' + '$2' + '.' + '$3');
		if (href != address) {
			$(this).attr('href','mailto:' + address);
			// If the text of the link is the same as the href, replace it too
			if ($(this).text() == href) $(this).html(address);
		}
	});
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function preloadImages() {
	// Preload images for rollover effects
	if (document.images) {
		home_f2 = new Image(154 ,295); home_f2.src = "..images/home_f2.jpg";
		home_f1 = new Image(154 ,295); home_f1.src = "..images/home.jpg";
		home_f2 = new Image(154 ,295); home_f2.src = "..images/home_f3.jpg";
		contact_f2 = new Image(156 ,235); contact_f2.src = "..images/contact_f2.jpg";
		contact_f1 = new Image(156 ,235); contact_f1.src = "../images/contact.jpg";
		contact_f2 = new Image(156 ,235); contact_f2.src = "../images/contact_f3.jpg";
		blog_f2 = new Image(151 ,152); blog_f2.src = "../images/blog_f2.jpg";
		blog_f1 = new Image(151 ,152); blog_f1.src = "../images/blog.jpg";
		blog_f2 = new Image(151 ,152); blog_f2.src = "../images/blog_f3.jpg";
		skills_f2 = new Image(151 ,294); skills_f2.src = "../images/skills_f2.jpg";
		skills_f1 = new Image(151 ,294); skills_f1.src = "../images/skills.jpg";
		skills_f2 = new Image(151 ,294); skills_f2.src = "../images/skills_f3.jpg";
		portfolio_f2 = new Image(310 ,151); portfolio_f2.src = "../images/portfolio_f2.jpg";
		portfolio_f1 = new Image(310 ,151); portfolio_f1.src = "../images/portfolio.jpg";
		portfolio_f2 = new Image(310 ,151); portfolio_f2.src = "../images/portfolio_f3.jpg";
		networks_f1 = new Image(156 ,22); networks_f1.src = "../images/networks.jpg";
		networks_f2 = new Image(156 ,22); networks_f2.src = "../images/networks_f2.jpg";
		facebook_f2 = new Image(156 ,22); facebook_f2.src = "../images/facebook_f2.jpg";
		linkedin_f2 = new Image(156 ,22); linkedin_f2.src = "../images/linkedin_f2.jpg";
		twitter_f2 = new Image(156 ,22); networks_f2.src = "../images/twitter_f2.jpg";
	}
}