var deck = {

initialize : function() {
	$("#deck_of_cards > ul > li").bind("mouseenter", deck.showCard);
	$("#deck_of_cards > ul > li").bind("click", deck.showDetail);
	$("#back_to_port").bind("click", deck.backToPort);
	$("#prj_nav > li > a").bind("click", deck.showDetail);

	if (location.hash.length) {
		deck.showDetail();
	} else {
		n = Math.round(Math.random()*13+1); // randomizer
		if (n > 10) n = 1;
		deck.focusCard("#deck_of_cards > ul > li:nth-child(" + n + ")");
	}	
},
/*
 * Navigates to project detail. Handles each entry point
 */
showDetail : function() {
	var hash = location.hash.replace(/#/, "");
	var self;
	
	/** click card in card view **/
	if ($(this).is("li") && !hash.length) { 		
		self = $(this);

		$("img.scroll_bg", self).hide();
		$("li.label_one p", self).show(); 
	
		var ul = $("ul.scroll", self); 												// load detail html
		$.get($("a", self).attr("href") + "/index.html", function(data) {
			$(data).appendTo(ul);
		});
		
		self.animate({width:'100%'}, 400)  										// fill screen, hide sibs
			 .siblings().animate({width:'0%'}, 400, function() {
			 		self.width(self.css('max-width'));
					$("#deck_of_cards > ul").css('overflow-x','auto');
			 		self.css("cursor","default");
			 });
		location.hash = self.attr('class'); 						// set hash url to project class
	}
	/** click nav in card view **/
	else if ($(this).is('a') && !hash.length) { 
		self = $('#deck_of_cards li.' + $(this).attr('href'));

		$("img.scroll_bg", self).hide();
		$("li.label_one p", self).show(); 
	
		var ul = $("ul.scroll", self); 												// load detail html
		$.get($("a", self).attr("href") + "/index.html", function(data) {
			$(data).appendTo(ul);
		});
		
		self.find("h1.title, h3, img").css('opacity','1.0');			// light self
		self.siblings().find("h1.title, h3, img").css('opacity','0.1');	// dim sibs
		
		self.animate({width:"100%"}, 400)  										// fill screen, hide sibs
			 .siblings().animate({width:"0%"}, 400, function() {
			 		self.width(self.css("max-width"));
					$("#deck_of_cards > ul").css("overflow-x","auto");
			 		self.css("cursor","default");
			 });
		location.hash = self.attr('class'); 					// set hash url to project class
	}
	/** click nav in detail view **/
	else if ($(this).is('a') && hash.length) {  
		self = $('#deck_of_cards li.' + $(this).attr('href'));
		prev = $("#deck_of_cards li." + location.hash.substring(1));
		if (self.get(0) == prev.get(0)) {
			return false;
		}
		
		prev.find('ul.scroll').children('li:not(:first)').remove(); // unload prev html
		
		$("img.scroll_bg", self).hide();
		$("li.label_one p", self).show(); 
		self.find("h1.title, h3, img").css('opacity','1.0');			// light self

		var ul = $("ul.scroll", self); 												// load detail html
		$.get($("a", self).attr("href") + "/index.html", function(data) {
			$(data).appendTo(ul);
		});
		
		prev.width("100%").animate({width:0}, 500, function(){ 		// shrink prev
			prev.find("li.label_one p").hide(); 									
			prev.find("img.scroll_bg").show();
			prev.find("h1.title, h3, img").css('opacity', '0.1');		// dim prev
			prev.css("cursor","pointer");
		});
		self.animate({width:'100%'}, 500, function() {
			self.width(self.css('max-width')); 											// expand this
			$('#deck_of_cards > ul').css('overflow-x','auto');
			self.css("cursor","default");
		});
		
		prev.bind('click', deck.showDetail); 						// rebind prev mouse events
	  prev.bind('mouseenter', deck.showCard);
		location.hash = $(this).attr('href');
	}
	/** from url entry **/
	else if (hash.length) {			 
		self = $("#deck_of_cards li." + location.hash.substring(1));
		
		$("img.scroll_bg", self).hide();
		$("li.label_one p", self).show(); 
		self.find("h1.title, h3, img").css('opacity','1.0');			// light self
	
		var ul = $("ul.scroll", self); 												// load detail html
		$.get($("a", self).attr("href") + "/index.html", function(data) {
			$(data).appendTo(ul);
		});
		
		self.width(self.css('max-width')).siblings().width(0);
		$("#deck_of_cards > ul").css('overflow-x','auto');
		self.css("cursor","default");
	}
	else {
		console.log("error. this: " + $(this) + " hash: " + location.hash);
	}
	
	$("#back_to_port").stop().animate({left:"15px"}, 400);// show back button
	self.unbind('click', deck.showDetail);								 // unbind mouse events
	self.unbind('mouseenter', deck.showCard);

	return false;
},
/*
 * button handler returns from detail view to card view
 */
backToPort : function() {
	var focusPanel = "#deck_of_cards li." + location.hash.substr(1); // get li from url hash

	$(focusPanel + " li.label_one p").hide();
	$(focusPanel + ' ul.scroll').children('li:not(:first)').remove(); // unload html
	
	$(focusPanel).width('100%')
							 .animate({width:'540px'}, 400)
							 .siblings().animate({width:deck.getColWidth()}, 400);
	$(focusPanel + ' img.scroll_bg').fadeIn();												// fix css
	$(focusPanel).css("cursor","pointer");
	
	$("#back_to_port").stop().animate({left:"-168px"}, 400); // hide back button
	location.hash = "";	// remove hash
	
	$(focusPanel).bind('click', deck.showDetail); 				// rebind mouse events
	$(focusPanel).bind('mouseenter', deck.showCard);
},
/*
 * slides out a card on load
 */
focusCard : function(card) {
	$(card).animate({"width":540}, 1200)															// expand this
				 .siblings().animate({"width": deck.getColWidth() }, 1200); 	// shrink others
	$("h1.title, h3, img", card).fadeTo(1200, 1.0); 								// fadeIn card content
},
/*
 * slides out a project's card view
 */
showCard : function() {
	if ($(this).siblings().andSelf().is(':animated')) return false;
	if ($(this).width() == 540) return false; 								// disable when in focus
	if (location.hash && location.hash !== "#") return false; // disable when in detail view

	$(this).animate({"width":540}, 500); 														// expand this			
	$(this).siblings().animate({"width": deck.getColWidth() }, 500);	// shrink sibs
	$("h1.title, h3, img", this).css('opacity','1.0'); 								// light up this
	$(this).siblings().find("h1.title, h3, img").css('opacity','0.1');// dim sibs
},
getColWidth : function() {
	return Math.floor( ($("#deck_of_cards").width() - 540) / 9 ); /** CHANGE IF ADDING/REMOVING CARDS **/
}
} // deck

jQuery(function ($) {
	if($("#deck_of_cards > ul > li").length){
		deck.initialize();
	}
});