$(document).ready(function(){
	$('#thefish ul').addClass('enhanced');
	$('#thefish div#info').addClass('enhanced').css('display', 'block');

	$('.enhanced img').showBio();

	$('html').removeClass('js');
});

$.fn.showBio = function() {
    var selected = false;

	return this.each(function() {

        $(this).bind('mouseover', function(){
			$('#thefish .enhanced .hover').removeClass('hover');
			$(this).addClass('hover');

            if (!selected) {
                var who = $(this).siblings();

    			$('#thefish div#info h4').text($(who).find('h4').text());
    			Cufon.replace('h4');
    			$('#thefish div#info div').html($(who).find('div').html());
            }
        });
        $(this).bind('mouseout', function(){
			$('#thefish .enhanced .hover').removeClass('hover');
        });
		$(this).bind('focus click keypress', function(event){
            selected = true;

			$('#thefish .enhanced .hover').removeClass('hover');
			$('#thefish .enhanced .selected').removeClass('selected');
			$(this).addClass('selected');

			var who = $(this).siblings();

			$('#thefish div#info h4').text($(who).find('h4').text());
			Cufon.replace('h4');
			$('#thefish div#info div').html($(who).find('div').html());

			event.stopPropagation();
		});
        $('div#info').click(function(event){event.stopPropagation();});
        $('body').click(function(){
            selected = false;

			$('#thefish .enhanced .hover').removeClass('hover');
			$('#thefish .enhanced .selected').removeClass('selected');

			$('#thefish div#info h4').text('Meet the Fish!');
			Cufon.replace('h4');
			$('#thefish div#info div').html('<p>Select a photo to learn more about the fish.</p>');
        });
	});
}