function card(){
	
	//selectors
	var sNavSelector 	= "#nav";
	var sCardSelector 	= "#card";
	var sContent		= "#main_content"; 
	var sBookmark		= "#bookmark";
	
	//object refs
	var oCard, oNav, oContent, oBookmark;
	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);
		oBookmark	= $(sBookmark); 
		oContent	= $(sContent);
		oAvatarImg	= oCard.find('.avatar_well img');
		oAvatarCross= oCard.find('.avatar_well em');
		
		//init nav
		self.initNav();
		
		//init interactions
		self.initInteractions();
		
	}
	
	//setup the interactions/behaviors	
	this.initInteractions = function(){
	
		oCard
			.find('.avatar_well')
			.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});
				}				
			);
			
		oBookmark
			.mouseover(
				function(){
					oBookmark.stop().animate({top:0},'fast');
				}
			)
			.mouseout(
				function(e){
					oBookmark.stop().animate({top:-28},'fast');
				}				
			)
	
	}
	
	//setup the click handlers on the nav
	this.initNav = function(){
		
		//setup the click functions
		oNav.find('a').click( clickNav );
				
		//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
	$().ready( function(){ self.init(); } );
}
var oCard = new card();

//add a class to the body, indicating scripts are on
$('body').addClass('script');