var MousePos;
$(document).ready(function(){
       
    $(".scrollable").scrollable().find("a").overlay({
       
        // each trigger uses the same overlay with id "gallery"
        target: '#gallery'


        // gallery plugin
    }).gallery({
         
        //Specifies whether the next/prev buttons and the info box are automatically hidden.
        // If this is set to false then these elements are always shown. 
        autohide:false,
        // do not use the same disabled class name as scrollable
        disabledClass: 'inactive'
    });
    
    
  	//Load the bigger thumbnail image when hover over thumbnail
    $(".items a").hover(
        
        function () {
         $("#hiddenThumbnail").prepend("<img width='160'/>");
         $("#hiddenThumbnail img").attr("src", this.href);
       
       
         var offset = $(this).offset();
             
       	//note div needs to be absolutely positioned and not inside a relative div
       	//so that the offset used here is from the window edge not relative
       	$("#hiddenThumbnail").css('left',offset.left - 30);
       	$("#hiddenThumbnail").css('border','solid #fff 1px');
         $("#hiddenThumbnail").show();
        },
        //when mouse leaves remove the image from the div and hide the div
        function () {
            $("#hiddenThumbnail img").remove();
            $("#hiddenThumbnail").hide();
        }
    );

   
});