// execute your scripts when the DOM is ready. this is a good habit
$(function() {
    // initialize scrollable
    $("div.scrollable").scrollable();
});
$(function() {
    $(".next2").click(function() {
        var api = $("div.scrollable").scrollable();
        var thenextimg = api.getClickIndex() + 1;
        api.click(thenextimg);
        var currentItem = $("div.scrollable").find("img:eq(" + thenextimg + ")");
        var url = currentItem.attr("src").replace("/tn", "");
        var alt = currentItem.attr("alt");
        var title = currentItem.attr("title");
        var wrap = $("#image_wrap")//.fadeTo("medium", 0.5);
        var wrap2 = $("#ref")//.fadeTo("medium", 0.5);
        var img = new Image();
        img.onload = function() {
            //wrap.fadeTo("fast", 1);
            wrap.find("#1").attr("src", "/images/loading.gif");
            wrap.find("#1").attr("alt", alt);
            wrap.find("#1").attr("title", title);
        };
        img.src = url;
        img.onload = function() {
            //wrap.fadeTo("fast", 1);
            wrap.find("#1").attr("src", url);
            wrap.find("#1").attr("alt", alt);
            wrap.find("#1").attr("title", title);
        };
        img.src = url;
    })
});
$(function() {
    $(".prev2").click(function() {
        var api = $("div.scrollable").scrollable();
        var theprevimg = api.getClickIndex() - 1;
        api.click(theprevimg);
        var currentItem = $("div.scrollable").find("img:eq(" + theprevimg + ")");
        var url = currentItem.attr("src").replace("/tn", "");
        var alt = currentItem.attr("alt");
        var title = currentItem.attr("title");
        var wrap = $("#image_wrap")//.fadeTo("medium", 0.5);
        var wrap2 = $("#ref")//.fadeTo("medium", 0.5);
        var img = new Image();
        img.onload = function() {
            //wrap.fadeTo("fast", 1);
            wrap.find("#1").attr("src", "/images/loading.gif");
            wrap.find("#1").attr("alt", alt);
            wrap.find("#1").attr("title", title);
        };
        img.src = url;
        img.onload = function() {
            //wrap.fadeTo("fast", 1);
            wrap.find("#1").attr("src", url);
            wrap.find("#1").attr("alt", alt);
            wrap.find("#1").attr("title", title);
        };
        img.src = url;
    })
});
$(function() {
    $(".items img").click(function() {
        var url = $(this).attr("src").replace("/tn", "");
        var alt = $(this).attr("alt");
        var title = $(this).attr("title");
        var wrap = $("#image_wrap")//.fadeTo("medium", 0.5);
        var wrap2 = $("#ref")//.fadeTo("medium", 0.5);
        var img = new Image();
        img.onload = function() {
            //wrap.fadeTo("fast", 1);
            wrap.find("#1").attr("src", "/images/loading.gif");
            wrap.find("#1").attr("alt", alt);
            wrap.find("#1").attr("title", title);
        };
        img.src = url;
        img.onload = function() {
            //wrap.fadeTo("fast", 1);
            wrap.find("#1").attr("src", url);
            wrap.find("#1").attr("alt", alt);
            wrap.find("#1").attr("title", title);
        };
        img.src = url;
    }).filter(":first").click();
});