function card(){
	
	//selectors
	var sNavSelector 	= "#nav";
	var sCardSelector = "#card";
	var sContent		= "#main_content"; 

	//object refs
	var oCard, oNav, oContent;
	var self = this;
	
	function clickNav( e ){
		
		//make a ref to this
		var oThis = $(this);
		
		//fadeout the current content...after fade show the clicked on
    	$(oNav.find('.current a').attr('href')).fadeOut('fast');
    	oContent
    		.stop()
    		.animate( 
    			{'height': $(oThis.attr('href')).height()},
    			function(){
    				//show this area
    				oThis.parent('li').addClass('current');
    				
    				//get the height of the area to show
    				$(oThis.attr('href')).fadeIn();
    				
    				//hide the others
    				oThis.parent('li')
    					 .siblings()
    					 .removeClass('current')
    					 .find('a')
    					 .each( function(){ $($(this).attr('href')).hide(); } );				
    			}
    		);	
	}
	
	this.init = function(){
		
		//setup the object refs
		oNav 				= $(sNavSelector);
		oCard 			= $(sCardSelector); 
		oContent			= $(sContent);
		oAvatarImg		= oCard.find('.my_picture img');
		oAvatarCross	= oCard.find('.my_picture em');
		
		//init nav
		self.initNav();
		
		//init interactions
		self.initInteractions();
		
	}
	
	//setup the interactions/behaviors	
	this.initInteractions = function(){
	
		oCard
			.find('.my_picture')
			.mouseover(
				function(){
						oAvatarImg.stop().animate({opacity:0});
						oAvatarCross.stop().animate({opacity:1});
				}
			)
			.mouseout(
				function(e){
						oAvatarImg.stop().animate({opacity:1});
						oAvatarCross.stop().animate({opacity:0});
				}				
			)
			
	
	}
	
	//setup the click handlers on the nav
	this.initNav = function(){
		
		//setup the click functions
		oNav.find('a').click( clickNav );
		
		//hide all other areas
		oNav.find('a').each(
			function(){
				$($(this).attr('href')).hide();
			}
		);
				
		//if there is a hash location in the url, go there, 
		//otherwise goto the current class in the markup
		var sHashSelector = 'a[href=' + document.location.hash + ']';
		if( document.location.hash && oNav.find(sHashSelector).length > 0 ){
			oNav.find(sHashSelector).click();						
		}else{
			oNav.find('li.current a').click();
		}
		
	}
	
	//when instantiating a new card, call the init function
	this.init();
}
var oCard = new card();