$(document).ready(function() {

  $("img[rel]").overlay({
    // optional exposing effect with custom color
    expose : '#CCC',
    // clicking outside the overlay does close it
    closeOnClick : true
  });
//{effect: 'apple', closeOnClick : true }

    /* chained call: scrollable().find("a").tooltip().overlay().gallery(); */
  scrolable = $("div.scrollable")
  if (scrolable.length)
    scrolable.scrollable({})
    .find("a")
    .tooltip( {
      // use this single tooltip element for all trigger elements
      tip : '#tooltip'
    })
    .overlay( {
      // each trigger uses the same overlay with id "gallery"
      target : '#gallery',
      // optional exposing effect with custom color
      expose : '#111',
      // clicking outside the overlay does close it
      closeOnClick : true,
      size: 6
    // gallery plugin
    })
    .gallery({
    // do not use the same disabled class name as scrollable
        disabledClass : 'inactive',
        template: '<strong>${title}</strong><span>${index} / ${total}</span>'
    });

  resize = function() {
    $('#main').css('min-height', document.body.clientHeight - 30);
  };
  $(window).resize(resize);
  resize();
  
});