$(document).ready(function(){
	// Initiate the lightbox
	$('a[rel*=lightbox]').lightBox();


	// toss in a pause
	$.fn.pause = function(duration) {
	    $(this).animate({ dummy: 1 }, duration);
	    return this;
	};

	// as the name implies, this function handles the onclick for the thumbnails
	var clickHandler = function(link){
		$('.main').fadeOut().pause(250);
		$('#content').animate({"height": $('#main_' + link.data.id).height() + 20}, {duration: "slow"});
		$('#main_' + link.data.id).pause(250).fadeIn("slow");
	}

	// resize and fade in our first div once the page has loaded
	$(window).load(function(){
		$('#content').animate({"height": $('#main_1').height() + 20}, {duration: "slow"});
		$('#main_1').pause(250).fadeIn("slow");
	});

	// give us a nice mouseover effect on the thumbnail
	$('.thumbnail').mouseover(function(){
	 	$(this).addClass("thumbnail_over");
	});

	$('.thumbnail').mouseout(function(){
	 	$(this).removeClass("thumbnail_over");
	});

	// tie the thumbnails to the click handler
	$('#link_1').bind('click', {id:'1'} ,clickHandler);
	$('#link_2').bind('click', {id:'2'} ,clickHandler);
	$('#link_3').bind('click', {id:'3'} ,clickHandler);
	$('#link_4').bind('click', {id:'4'} ,clickHandler);
	$('#link_5').bind('click', {id:'5'} ,clickHandler);
	$('#link_6').bind('click', {id:'6'} ,clickHandler);
});