$(document).ready(function() {
    $(".scrollable").scrollable();

    $(".items img").click(function() {
        // see if same thumb is being clicked
        if ($(this).hasClass("active")) { return; }

        // calclulate large image's URL based on the thumbnail URL (etsy specific)
        var url = $(this).attr("src").replace("170x135", "570xN");

        // get handle to element that wraps the image and make it semi-transparent
        var wrap = $("#shopFeaturedItem").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.etsy.com
        img.src = url;

        // activate item
        $(".items img").removeClass("active");
        $(this).addClass("active");

        // when page loads simulate a "click" on the first image
    }).filter(":first").click();
});