// Yalightbox - v.0.1 (100930)
//
// For details, see http://www.zaonce.com/tools.shtml
//
// Simply include the jquery library, this script and give your images the class 'expandable'. Eg,
//
// <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
// <script type="text/javascript" src="scripts/expander.js"></script>
// <img src="/images/zaonce.png" class="expandable">
//
// 101018 0.2 - Added guard to prevent the script being executed multiple times.

$(document).ready(
  function() 
  {
    if( $('DIV#expander-mask').length !== 0 )
    {
      return; // Only execute the script once...
    }

    // Some settings for tweaking...
    //
    var boxShadow = "0 0 2em #000"; // box shadow (x y size colour)
    var size      = 80;             // % of window size
    var opacity   = 50;             // % opacity of the mask
    var duration  = 400;            // speed of fade (milliseconds)
    
    var padding = (100 - size) / 2;   
    
    // Create a style for the lightbox...
    //
    $('<style type="text/css">' +
      'img.expander-expanded{ ' +
      'display:none;' + 
      'position:fixed;' + 
      'z-index:1002;' + // Needs to be higher than the z-index of the mask below...
      'box-shadow:' + boxShadow + ';' + 
      '-webkit-box-shadow:' + boxShadow + ';' + 
      '-moz-box-shadow:' + boxShadow + ';' +
      '}' +
      '</style>').appendTo('head');


    // Create the mask for the background...
    //
    $('body').prepend( 
      '<div id="expander-mask" style="' + 
      'display:none;' + 
      'background-color:#000;' + 
      'position:fixed;' + 
      'top:0px;' + 
      'left:0px;' +
      'min-width:100%;' +
      'min-height:100%;' +
      'width:100%;' +
      'height:100%;' +
      'z-index:1001;' + // Needs to be lower than the z-index of the lightbox above...
      '"></div>' );

    // Change the cursor to a hand for images with class 'expandable'...
    //
    $('img.expandable').css('cursor','pointer');
    
    // Add click handler for images with class 'expandable'...
    //
    $('img.expandable').click(
      function() 
      { 
        // Create an expanded copy of the image...
        //
        var imageSrc = $(this).attr('src');
        var expanded = $('<img class="expander-expanded" src="' + imageSrc + '">').insertAfter('DIV#expander-mask');
        
        var imageAspect  = expanded.attr('width') / expanded.attr('height');
        var windowAspect = $(window).width() / $(window).height();

        // Get the image width and height...
        //
        var width  = expanded.attr('width') > 0 ? expanded.attr('width') : expanded.width();
        var height = expanded.attr('height') > 0 ? expanded.attr('height') : expanded.height();

        // Set the size and position of the expanded image as appropriate...
        //
        if(imageAspect > windowAspect)
        {
          var verticalScale = $(window).width() * (size / 100) / width;

          expanded.css('top', ($(window).height() / 2) - ((height * verticalScale) / 2));
          expanded.css('left', padding + '%');
          expanded.css('width', $(window).width() * (size / 100));
        }
        else
        {
          var horizontalScale = $(window).height() * (size / 100) / height;
          
          expanded.css('left', ($(window).width() / 2) - ((width * horizontalScale) / 2));
          expanded.css('top', padding + '%');
          expanded.css('height', $(window).height() * (size / 100));
        }
        
        // Fade in the mask and the expanded image...
        //
        $('div#expander-mask').fadeTo(duration, (opacity / 100));
        expanded.fadeIn(duration);
        
        // Make it work in IE6...
        //
        if($.browser.msie && $.browser.version < 7)
        {
          expanded.css('position', 'absolute');
        }
        
        // Add handler to close the lighbox when clicked...
        //
        $('html').click( 
          function() 
          { 
            $('img.expander-expanded, div#expander-mask').fadeOut( 
              duration, 
              function() 
              { 
                // Delete the expanded image...
                //
                $('img.expander-expanded').remove(); 
              } 
            );                         
          } 
        );
        
        return false;
      } 
    );
  }
);