// execute your scripts when the DOM is ready. this is a good habit

// thumbnail scrollable
//$(".scrollable").scrollable({ size: 3, vertical: true });
var scroll = $(".scrollable").scrollable({ size: 3, vertical: true, keyboard:false }).autoscroll({ autoplay: true, steps: 1, interval: 4000 });
scroll.circular();


//$(".scrollable").scrollable({ size: 3, vertical: true, clickable: false }).find("img").each(function(index) {
//    // thumbnail images trigger the overlay
//    $(this).overlay({
//        effect: 'apple',
//        target: '#image-box',
//        expose: { maskId: 'mask' },
//        /*                 
//        when box is opened, scroll to correct position (in 0 seconds)                 
//        the "images" variable is defined below             
//        */
//        onLoad: function() {
//            images.seekTo(index, 0);
//        }
//    });
//});

//var images = $("#images").scrollable({ size: 1, api: true });
//// enable tooltips for the images
//$("#images img").tooltip({
//    position: "bottom center",
//    offset: [-75, -30],
//    opacity: 0.8,
//    effect: 'fade',
//    // position tooltips relative to the parent scrollable         
//    relative: true
//});