$(function() {
             
    $(".scrollable").scrollable();
     
    $(".items a").click(function() {
     
        // see if same thumb is being clicked
        if ($(this).hasClass("active")) { return false; }
     
        // calclulate large image's URL based on the href of the link
        var url = $(this).attr("href");

        // get handle to element that wraps the image and make it semi-transparent
        var wrap = $("#image_wrap").fadeTo("medium", 0.5);
     
        // the large image from www.flickr.com
        var img = new Image();
     
     
        // call this function after it's loaded
        img.onload = function() {
     
            // make wrapper fully visible
            wrap.fadeTo("fast", 1);
     
            // change the image
            wrap.find("img").attr("src", url);
     
        };
     
        // begin loading the image from www.flickr.com
        img.src = url;
     
        // activate item
        $(".items a").removeClass("active");
        $(this).addClass("active");
        
        return false;
     
    // when page loads simulate a "click" on the first image
    }).filter(":first").click();
});