$(document).ready(function(){

	$currentTime = new Date();
	
	// First Load of Projects Page
	$("#projects").load("projects.php?type=1&a="+$currentTime.getSeconds(), function() {
 			setUpOverlay();
 			bindTabs(1);
  	});
   	
  	
  	// Bind the navigation controls on the page to load appropriate projects
  	// Gets the project type by the 'rel' attribute
  	$("#project_nav > li > span").bind("click", function(e) {
  		
  		$theType = $(this).attr("rel");

  		$("#projects").load("projects.php?type="+$theType+"&a="+$currentTime.getSeconds(), function(e) {
   			setUpOverlay();
   			bindTabs($theType)
   		});
   		
   		$("#project_nav > li > span").removeClass("selected");
   		$(this).addClass("selected");
  	});
});


// Binds the Client/Section tabs each time there is an ajax Load
function bindTabs($theType)
{
	$("#section_sublinks > span").bind("click", function(e) {
   				
		$tab = $(this).attr("rel");

  		if ($tab == 2)
  		{
  			$("#projects").load("clients.php?type="+$theType, function(e) {
  				bindTabs($theType);
  			});
  		}
  		else
  		{
  			$("#projects").load("projects.php?type="+$theType, function(e) {
  				setUpOverlay();
  				bindTabs($theType);
  			});
  		}
  				
  		$("#section_sublinks > span").removeClass("selected");
 		$(this).addClass("selected");
   	});
}


// Sets up the overlay screen for project details   	
function setUpOverlay()
{
//	$("a[rel]").overlay(function(e) {	
//			// grab wrapper element inside content 
//			var wrap = this.getContent().find("div.wrap"); 
//				                 
//			wrap.load(this.getTrigger().attr("href")); 
//	});
//	
//	
   	// if function argument is given to overlay it is assumed onBeforeLoad event listener 
    $("a[rel]").overlay({ 
	   onBeforeLoad: function() { 		
			// grab wrapper element inside content 
			var wrap = this.getContent().find("div.wrap"); 
				                 
			wrap.load(this.getTrigger().attr("href")); 
		             
		    // this line does the magic. it makes the background image sit on top of the mask 
		    this.getBackgroundImage().expose({color: '#000000'}); 
	    },  
	        
	    // when overlay is closed take the expose instance and close it as well 
	    onClose: function() { 
	    	$.expose.close(); 
	    }          
    });
}