jQuery(document).ready(function() {

	jQuery("#slider a.image").click(function () {
		hideBig();
		var sender = this;
		setTimeout(function(){showBigImage(sender)}, 1000);
		return false;
	});

});


function showBigImage(object){
	
  var newImage = jQuery(object).attr("href");
  var img = new Image();

  // wrap our new image in jQuery, then:
  jQuery(img)
    // once the image has loaded, execute this code
    .load(function () {
      // set the image hidden by default    
      jQuery(this).hide();
    	jQuery('#bigImage').remove();
      // with the holding div #loader, apply:
      jQuery('#content')
        // then insert our image
        .append(this);
    
      // fade our image in to create a nice effect
      jQuery(this).fadeIn("slow");
	  setTimeout(function(){showBigText(object)}, 500);
    })
    
    // if there was an error loading the image, react accordingly
    .error(function () {
      // notify the user that the image could not be loaded
    })
    
    // *finally*, set the src attribute of the new image to our image
    .attr('src', newImage).attr('id', 'bigImage');
}

function showBigText(object){
	var newText = jQuery("div", jQuery(object).parent()).html();
	jQuery("#bigText").html(newText).slideDown("slow");
}
	
function hideBig(){
	jQuery("#bigText").slideUp();
	jQuery("#bigImage").fadeOut("slow");
}