$(function() {
    
    var $bios = $('#we_are_box');
    var $closeLink = null;
    var $closeLinkBottom = null;
    
    var selectBio = function( id ) {
        var $boxes = $bios.children('div.bio').each(function( box ){
            
            
            this.fullImage = new Image();
    	    this.gridImage = new Image();
    	    var src = $('img', this).attr('src');
    	    this.gridImage.src = src.replace('_full', '_grid');
    	    this.fullImage.src = src.replace('_grid', '_full');

            // these are the unfocused bios
            if ( $(this).attr('id') != id) {

                $(this).addClass('bio_unfocused');
                $(this).removeClass('bio_focused');
            	$('img', this).attr('src', this.gridImage.src);

            // this is the focused bio
            } else {
                $(this).addClass('bio_focused');
                $(this).removeClass('bio_unfocused');
            	$('img', this).attr('src', this.fullImage.src);
            }
        });    
        makeCloseLink();    
    };
    
    var makeCloseLink = function() {
        // create the back/close link
        if (!$closeLink) {
            $closeLink = $('<a href="#" class="back">Back</a>').prependTo( $bios ).click(function() {
                $bios.children('div.bio').each(function( box ){
                    $(this).removeClass('bio_unfocused');
                    $(this).removeClass('bio_focused');
                    var $img = $('img', this);
                    $img.attr('src', $img.attr('src').replace('_full', '_grid') );
                });
                $closeLinkBottom.remove();
                $closeLinkBottom = null;
                $closeLink.remove();
                $closeLink = null;
                return false;
            });
            
            if ( !$closeLinkBottom ) {
                $closeLinkBottom = $closeLink.clone( true ).addClass('bottom').appendTo( $bios );
            }
         }
    };
    
    // Read Full Bios link at the bottom of each bio column
    $('div.bio', $bios).each(function() {
        var id = $(this).attr('id');
       $('<a href="#" class="read_full">Read '+id+'\'s Full Bio &raquo;</a>').appendTo(this).click(function() {
           selectBio( id );
           return false;
       }); 
    });
    
    // hover/click functionality for each bio's header (img and heading)
   $('div.bio_header', $bios).hover(function() {
      $(this).addClass('hover'); 
   }, function() {
       $(this).removeClass('hover'); 
   }).click(function() {
       var $box = $(this).parent();
       var $this = $(this);
       var id = $box.attr('id');
       
       selectBio(id, $bios);
       
   });
   
   
});