function init(){
  $("#thumbnails").scrollable({size: 5, clickable: false}).find("img").each(function(index) { 

      // thumbnail images trigger the overlay 
      $(this).overlay({ 

            effect: 'apple', 
            target: '#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}); 
     
     if (images) images.onSeek(function() { 
 
        var i = this.getIndex(); 
 
        // grab previous/current/next items and place the image inside them 
        this.getItems().slice(Math.max(i-2, 0), i+2).each(function() { 
 
            var el = $(this); 
 
            // if image has not already been created ... 
            if (!el.find("img").length) { 
 
                // create it 
                var img = $("<img/>"); 
                img.attr("src",el.attr("title")); 
                el.prepend(img).removeAttr("title"); 
 
 
                // and initialize the tooltip for it 
                img.tooltip({ 
                    position: 'bottom center', 
                    offset: [-85, -30], 
                    opacity: 0.8, 
                    effect: 'fade', 
 
                    // position tooltips relative to the parent scrollable 
                    relative: true 
                }); 
            } 
        }); 
    });

};

$(document).ready(init);