$(document).ready(function(){

	// initialize scrollable  
	$(".scrollable").scrollable();
	
	//put a cool effect on thumbs when clicked
    $("div.scrollable div.items div").click(function() { 
        $(this).fadeOut().fadeIn(); 
    });
    //-------------------------------------------------------------
    
	//when a thumbnail is clicked, get the related large image
	//and put it on the page.
	$(".home_thumb_img").click(function(event) {
	
	//stop the default action of the link
	event.preventDefault();
	
	//get the image name/location we want to load
	var img_name = $(this).attr('rel');
	
	//remove the current image
	$('#home_large_image img').remove();
	
	var img = new Image();
	  
	  // wrap our new image in jQuery, then:
	  $(img)
	    // once the image has loaded, execute this code
	    .load(function () {
	      // set the image hidden by default    
	      $(this).hide();
	    
	      // with the holding div #home_large_image, apply:
	      $('#home_large_image')
	        // then insert our image
	        .append(this);
	    
	      // fade our image in to create a nice effect
	      $(this).fadeIn();
	    })
	    
	    // 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', img_name);
	});
    //-------------------------------------------------------------
});