// -----------------------------------------------------------------------------------
//
//  Lightbox Gallery v2.3
//  by Brandon Kieft - http://www.lightboxgallery.snier.com
//  12/12/09
//
//  Based on Lightbox v2.04
//  by Lokesh Dhakar - http://www.lokeshdhakar.com
//  Last Modification: 2/9/08
//
//  For more information, visit:
//  http://lokeshdhakar.com/projects/lightbox2/
//
//  Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
//      - Free for use in both personal and commercial projects
//      - Attribution requires leaving author name, author link, and the license info intact.
//
//  Thanks: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.
//          Artemy Tregubenko (arty.name) for cleanup and help in updating to latest ver of proto-aculous.
//
// -----------------------------------------------------------------------------------
/*

    Table of Contents
    -----------------
    Configuration
    
    NavigationImage Class Declaration
    -  initialize()
    -  getWidth()
    -  select()
    -  show()
    -  makeClickable()
    -  makeUnclickable()
    -  makeDraggable()
    -  makeUndraggable()

    Lightbox Class Declaration
    - initialize()
    - updateImageList()
    - setup()
    - cleanWhitespace()
    - start()
    - changeImage()
    - resizeImageContainer()
    - showImage()
    - updateDetails()
    - updateNav()
    - enableKeyboardNav()
    - disableKeyboardNav()
    - keyboardAction()
    - preloadNeighborImages()
    - updateImageContainerWidth()
    - end()
        
    Function Calls
    - document.observe()
  
*/
// -----------------------------------------------------------------------------------

//
//  Configuration
//
LightboxOptions = Object.extend({
  fileLoadingImage:        'images/loading.gif',
  fileBottomNavCloseImage: 'images/closelabel.gif',
  fullsizeImage:           'images/fullsize.png',
  xmlPath:                 'XML/',
  
  overlayOpacity: 0.8,   // controls transparency of shadow overlay
  
  shrinkImage: true,     // toggles resizing of image to fit in window
  animate: true,         // toggles resizing animations
  resizeSpeed: 7,        // controls the speed of the image resizing animations (1=slowest and 10=fastest)
  
  borderSize: 10,        // If you adjust the padding in the CSS, you will need to update this variable
  
  // When grouping images, this is used to write: Image # of #.
  // Change it for non-english localization
  labelImage: "Image",
  labelOf: "of"
}, window.LightboxOptions || {});

// -----------------------------------------------------------------------------------

//
//  NavigationImage Class Declaration
//
var NavigationImage = Class.create();

NavigationImage.prototype = {
  index: null,
  drag: null,
  background: null,
  image: null,
  
  //initialize()
  //  
  initialize: function(source, index){
    this.index = index;
  
    this.image = new Element('img',{'class':'navigationImage', src:source});
    this.image.onload = function(){
      myLightbox.updateImageContainerWidth();
    };
    this.background = new Element('div',{'class':'navigationImageBG'});
    this.background.appendChild(this.image);
    $('navigationImageContainer').appendChild(this.background);
    this.makeClickable();
  },
  
  //getWidth()
  //Returns the width of the background
  getWidth: function(){
    return this.background.getWidth();
  },
  
  //select()
  //Changes background's id to selected
  select: function(){
    var selected = $('selected');
    if(selected)
      selected.writeAttribute('id','');
    this.background.writeAttribute('id','selected');
    this.show();
    return this;
  },
  
  //show()
  //Moves the navigation container to show this NavigationImage
  show: function(){
    var x = 0;
    var left = this.background.positionedOffset().left;
    var navLeft = $('navigationImageContainer').positionedOffset().left;
    var navWidth = $('navigation').getWidth();
    //Move Backward
    if(left+navLeft<0){
      $('indexForward').show();
      x = Math.min(-navLeft,navWidth-navLeft-left-this.getWidth()-10);
    //Move Forward
    }else if(left+navLeft+this.getWidth()>navWidth){
      $('indexBackward').show();
      x = -Math.min(left+navLeft-10,$('navigationImageContainer').getWidth()+navLeft-navWidth);
    }
    new Effect.Move ('navigationImageContainer',{
      x: x,
      afterFinish: function(){
        var navLeft = $('navigationImageContainer').positionedOffset().left;
        if(navWidth-navLeft==$('navigationImageContainer').getWidth()){ $('indexForward').hide(); }
        if(navLeft==0){ $('indexBackward').hide(); }
      }
    });
    return this;
  },
  
  //makeClickable()
  //Allows the Lightbox image to be changed by clicking on a NavigationImage
  makeClickable: function(){
    this.background.observe('click', (function() {
      if(myLightbox.activeImage != this.index) // Prevent flickering from showing the same image
        myLightbox.changeImage(this.index);
    }).bind(this));
    return this;
  },
  
  //makeUnclickable()
  //Does not allow the Lightbox image to be changed by clicking on a NavigationImage
  makeUnclickable: function(){
    this.background.stopObserving('click');
    return this;
  },
  
  //makeDraggable()
  //Allows the NavigationImage to be dragged around
  makeDraggable: function(){
    this.drag = new Draggable(this.image,{revert:false, ghosting:true, onStart:function(){this.makeUnclickable()}.bind(this), onEnd:function(){this.makeClickable()}.bind(this)});
    return this;
  },
  
  //makeUndraggable()
  //Does not allow the NavigationImage to be dragged around
  makeUndraggable: function(){
    this.drag.destroy();
    return this;
  }
}
// -----------------------------------------------------------------------------------

//
//  Lightbox Class Declaration
//
var Lightbox = Class.create();

Lightbox.prototype = {
  navigationArray: [],
  imageArray: [],
  activeImage: undefined,
  resize: LightboxOptions.shrinkImage,
  
  // initialize()
  // Constructor runs on completion of the DOM loading. Calls updateImageList and then
  // the function inserts html at the bottom of the page which is used to display the shadow
  // overlay and the image container.
  //
  initialize: function() {
    
    this.updateImageList();
    
    this.keyboardAction = this.keyboardAction.bindAsEventListener(this);
  
    if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10;
    if (LightboxOptions.resizeSpeed < 1)  LightboxOptions.resizeSpeed = 1;
  
    this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0;
    this.overlayDuration = LightboxOptions.animate ? 0.2 : 0;  // Shadow fade in/out duration
    this.navigationDuration = LightboxOptions.animate ? 0.8 : 0;  // Navigation slide up/down duration
  
    // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
    // If animations are turned off, it will be hidden as to prevent a flicker of a
    // white 250 by 250 box.
    var size = (LightboxOptions.animate ? 250 : 1) + 'px';
    
  
    // Code inserts html at the bottom of the page that looks similar to this:
    //
    //  <div id="overlay"></div>
    //  <div id="navigationContainer">
    //    <div id="navigation">
    //      <div />
    //      <div id="indexBackward"></div>
    //      <div id="navigationImageContainer"></div>
    //      <div id="indexForward"></div>
    //    </div>
    //    <div id="navigationBar">
    //      <div id="navigationBarLeft"/>
    //      <div id="navigationBarArrow"></div>
    //      <div id="navigationBarRight"/>
    //    </div>
    //  </div>
    //  <div id="lightbox">
    //    <div id="outerImageContainer">
    //      <div id="imageContainer">
    //        <img id="lightboxImage"/>
    //        <div style="" id="hoverNav">
    //          <a href="#" id="prevLink"></a>
    //          <a href="#" id="nextLink"></a>
    //        </div>
    //        <div id="loading">
    //          <img src="images/loading.gif"/>
    //        </div>
    //      </div>
    //    </div>
    //    <div id="imageDataContainer">
    //      <div id="imageData">
    //        <div id="imageDetails">
    //          <span id="caption"></span>
    //          <span id="numberDisplay"></span>
    //        </div>
    //        <div id="bottomNav">
    //          <img src="images/close.gif"/>
    //          <img src="images/fullsize.png"/>
    //        </div>
    //      </div>
    //    </div>
    //  </div>
  
  
    var objBody = $$('body')[0];
  
    objBody.appendChild(Builder.node('div',{id:'overlay'}));
    
    objBody.appendChild(Builder.node('div',{id:'navigationContainer'}, [
      Builder.node('div',{id:'navigation'}, [
        Builder.node('div'), // Fix effects affecting first child
        Builder.node('div',{id:'indexBackward'}),
        Builder.node('div',{id:'navigationImageContainer'}),
        Builder.node('div',{id:'indexForward'})
      ]),
      Builder.node('div',{id:'navigationBar'},[
        Builder.node('div',{id:'navigationBarLeft'}),
        Builder.node('div',{id:'navigationBarArrow'}),
        Builder.node('div',{id:'navigationBarRight'})
      ])
    ]));
    
    objBody.appendChild(Builder.node('div',{id:'lightbox'}, [
      Builder.node('div',{id:'outerImageContainer'},
        Builder.node('div',{id:'imageContainer'}, [
          Builder.node('img',{id:'lightboxImage'}),
          Builder.node('div',{id:'hoverNav'}, [
            Builder.node('a',{id:'prevLink', href: '#' }),
            Builder.node('a',{id:'nextLink', href: '#' })
          ]),
          Builder.node('div',{id:'loading'},
            Builder.node('img', {id:'loadingLink', src: LightboxOptions.fileLoadingImage})
          )
        ])
      ),
      Builder.node('div', {id:'imageDataContainer'},
        Builder.node('div',{id:'imageData'}, [
          Builder.node('div',{id:'imageDetails'}, [
            Builder.node('span',{id:'caption'}),
            Builder.node('span',{id:'numberDisplay'})
          ]),
          Builder.node('div',{id:'bottomNav'}, [
            Builder.node('img', {id:'bottomNavClose', src: LightboxOptions.fileBottomNavCloseImage }),
            Builder.node('img',{id:'fullsizeImage', src: LightboxOptions.fullsizeImage })
          ])
        ])
      )
    ]));
  
  
    $('overlay').hide().observe('click', this.end.bind(this));
    $('navigationContainer').hide().observe('click', (function(event) { if (event.element().id == 'navigationContainer') this.end(); }).bind(this));
    $('indexForward').hide().observe('click', (function forward(event){
      event.stop();
      this.stopObserving('click');
      $('indexBackward').show();
      var width = [$('navigation'), $('navigationImageContainer')].invoke('getWidth');
      var posOffset = $('navigationImageContainer').positionedOffset().left;
      new Effect.Move ('navigationImageContainer',{
        x: -Math.min(width[0],width[1]+posOffset-width[0]),
        queue: 'end',
        afterFinish: function(){
            if($('navigationImageContainer').positionedOffset().left-width[0]==width[1]*-1){ this.hide(); }
            this.observe('click',forward);
        }.bind(this)
      });
    }));
    $('indexBackward').hide().observe('click', (function backward(event){
      event.stop();
      this.stopObserving('click');
      $('indexForward').show();
      new Effect.Move ('navigationImageContainer',{
        x: Math.min($('navigation').getWidth(),$('navigationImageContainer').positionedOffset().left*-1),
        queue: 'end',
        afterFinish: function(){
          if($('navigationImageContainer').positionedOffset().left==0){ this.hide(); }
          this.observe('click',backward);
        }.bind(this)
      });
    }));
    $('navigationBar').observe('click', (function(event) {
      event.stop();
      Effect.toggle('navigationImageContainer','appear',{duration:this.navigationDuration});
      Effect.toggle('navigation', 'slide', {duration:this.navigationDuration});
    }).bind(this));
    $('lightbox').hide().observe('click', (function(event) { if (event.element().id == 'lightbox') this.end(); }).bind(this));
    $('outerImageContainer').setStyle({ width: size, height: size });
    $('prevLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage - 1); }).bindAsEventListener(this));
    $('nextLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage + 1); }).bindAsEventListener(this));
    $('loadingLink').observe('click', (this.end).bind(this));
    $('bottomNavClose').observe('click', (this.end).bind(this));
    $('fullsizeImage').observe('click', function(event) { event.stop(); this.resize = false; this.changeImage(this.activeImage); }.bind(this));
  
    var th = this;
    (function(){
      var ids =
        'overlay navigationContainer navigation navigationImageContainer navigationBar indexForward ' +
        'indexBackward lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink ' +
        'nextLink loading loadingLink imageDataContainer imageData imageDetails caption numberDisplay ' +
        'bottomNav bottomNavClose fullsizeImage';
      $w(ids).each(function(id){ th[id] = $(id); });
    }).defer();
  },
  
  //
  // updateImageList()
  // Loops through anchor tags looking for 'lightbox' references and applies onclick
  // events to appropriate links. You can rerun after dynamically adding images w/ajax.
  //
  updateImageList: function() {
    this.updateImageList = Prototype.emptyFunction;
  
    document.observe('click', (function(event){
      var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
      if (target) {
        event.stop();
        this.setup(target);
      }
    }).bind(this));
  },
  
  //
  //  setup()
  //  Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
  //
  setup: function(imageLink) {
  
    $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
  
    // stretch overlay to fill page and fade in
    var arrayPageSize = document.viewport.getDimensions();
    $('overlay').setStyle({ width: arrayPageSize.width + 'px', height: arrayPageSize.height + 'px' });
    $('navigationBar').setStyle({ width: arrayPageSize.width - 36 + 'px' });
    $('navigationContainer').setStyle({ width: arrayPageSize.width - 20 + 'px', visibility:'hidden' }).show();
    $('navigation').show();
    $('navigationImageContainer').show();
  
    this.imageArray = [];
    this.activeImage = 0;
    
    if(imageLink.rel == 'lightbox'){
      // if image is NOT part of a set, add single image to imageArray
      this.imageArray.push([imageLink.href, imageLink.title]);
      this.start();
    } else {
      // if image is part of a set..
      // check if an XML file exists
      new Ajax.Request(LightboxOptions.xmlPath + imageLink.rel.match(/\[(.+)\]$/)[1] + '.xml',{
        method: 'get',
        onSuccess: function(responseXML){
          var images = responseXML.responseXML.getElementsByTagName("image");
          this.cleanWhitespace(images[0]);
          for(var i=0; i<images.length; i++){
            var values = images[i].childNodes;
            this.imageArray.push([values[0].firstChild.nodeValue, values[1].firstChild.nodeValue, values[2].firstChild.nodeValue]);
          }
          this.start();
        }.bind(this),
        // if no XML file, collect images from the page
        onException: function(transport, exception){
          this.collectImages(imageLink);
        }.bind(this),
        onFailure: function(){
          this.collectImages(imageLink);
        }.bind(this)
      });
    }
  },
  
  //
  //  cleanWhitespace()
  //  Removes whitespace text nodes from the XML document
  //
  cleanWhitespace: function(node){
    while (node){
      this.cleanWhitespace(node.firstChild);
      var nextNode = node.nextSibling;
      if (node.nodeType == 3 && !/\S/.test(node.nodeValue))
          node.parentNode.removeChild(node);
      node = nextNode;
    }
  },
  
  //
  // collectImages()
  // Collects images of the same set from the page
  //
  collectImages: function(imageLink){
    this.imageArray =
      $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
      collect(function(anchor){ return [anchor.href, anchor.title, anchor.down()?anchor.down().src:anchor.href]; }).invoke("toJSON").uniq().invoke("evalJSON");
  
    while (this.imageArray[this.activeImage][0] != imageLink.href) { ++this.activeImage; }
  
    this.start();
  },
  
  //
  //  start()
  //
  start: function(){
    for(var i=0; i<this.imageArray.length; ++i){
        this.navigationArray.push(new NavigationImage(this.imageArray[i][2],i));
    }
  
    //Set width of navigationImageContainer
    this.updateImageContainerWidth();
  
    $('overlay').appear({ duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });
  
    //Show navigation for image sets
    if(this.navigationArray.length>1){
        $('navigationContainer').style.visibility = 'visible';
    }
  
    // Calculate top and left offset for the lightbox
    var arrayPageScroll = document.viewport.getScrollOffsets();
    var lightboxTop = arrayPageScroll.top + 135;
    var lightboxLeft = arrayPageScroll.left;
    this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
  
    this.changeImage(this.activeImage);
  },
  
  //
  // updateImageContainerWidth()
  // Sets the navigationImageContainer width to include all NavigationImages
  //
  updateImageContainerWidth: function(){
    var sum = 0;
    this.navigationArray.each(function(item){ sum += item.getWidth(); });
    $('navigationImageContainer').style.width = sum + 'px';
    var navWidth = $('navigation').getWidth();
    if(sum>navWidth && $('navigationImageContainer').positionedOffset().left-navWidth!=sum*-1){
      $('indexForward').show();
    }
  },
  
  //
  //  changeImage()
  //  Hide most elements and preload image in preparation for resizing image container.
  //
  changeImage: function(imageNum) {
    this.activeImage = imageNum; // update global var
  
    // hide elements during transition
    if (LightboxOptions.animate) this.loading.show();
    [this.lightboxImage, this.hoverNav, this.prevLink, this.nextLink, this.numberDisplay, this.fullsizeImage].invoke('hide');
    this.navigationArray.invoke('makeUnclickable');
    // HACK: Opera9 does not currently support scriptaculous opacity and appear fx
    this.imageDataContainer.setStyle({opacity: .0001});
    
    // select correct header image
    this.navigationArray[this.activeImage].select();
    
    var imgPreloader = new Image();
    
    // once image is preloaded, resize image container
    imgPreloader.onload = (function(){
      this.lightboxImage.src = this.imageArray[this.activeImage][0];
      this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
    }).bind(this);
    imgPreloader.src = this.imageArray[this.activeImage][0];
  },
  
  //
  //  resizeImageContainer()
  //
  resizeImageContainer: function(imgWidth, imgHeight) {
  
    // get current width and height
    var widthCurrent  = this.outerImageContainer.getWidth();
    var heightCurrent = this.outerImageContainer.getHeight();
    
    // resize image if it is larger than the window
    this.lightboxImage.setStyle({height:'auto', width:'auto'});
    if(this.resize){
      var offset = this.outerImageContainer.viewportOffset();
      var viewport = document.viewport.getDimensions();
      if(imgWidth + offset.left >= viewport.width){
        var width = viewport.width - 30;
        imgHeight = Math.floor((width/imgWidth)*imgHeight);
        imgWidth = Math.floor(width);
        this.fullsizeImage.show();
      }
      if(imgHeight + offset.top >= viewport.height){
        var height = viewport.height - offset.top - 70;
        imgWidth = Math.floor((height/imgHeight)*imgWidth);
        imgHeight = Math.floor(height);
        this.fullsizeImage.show();
      }
      this.lightboxImage.setStyle({height: imgHeight + 'px', width:imgWidth + 'px'});
    }
    this.resize = LightboxOptions.shrinkImage;
  
    // get new width and height
    var widthNew  = (imgWidth  + LightboxOptions.borderSize * 2);
    var heightNew = (imgHeight + LightboxOptions.borderSize * 2);
  
    // scalars based on change from old to new
    var xScale = (widthNew  / widthCurrent)  * 100;
    var yScale = (heightNew / heightCurrent) * 100;
  
    // calculate size difference between new and old image, and resize if necessary
    var wDiff = widthCurrent - widthNew;
    var hDiff = heightCurrent - heightNew;
  
    if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'});
    if (wDiff != 0) new Effect.Scale(this.outerImageContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration});
  
    // if new and old image are same size and no scaling transition is necessary,
    // do a quick pause to prevent image flicker.
    var timeout = 0;
    if ((hDiff == 0) && (wDiff == 0)){
      timeout = 100;
      if (Prototype.Browser.IE) timeout = 250;
    }
  
    (function(){
      this.prevLink.setStyle({ height: heightNew - 20 + 'px' });
      this.nextLink.setStyle({ height: heightNew - 20 + 'px' });
      this.imageDataContainer.setStyle({ width: widthNew + 'px' });

      this.showImage();
    }).bind(this).delay(timeout / 1000);
  },
  
  //
  //  showImage()
  //  Display image and begin preloading neighbors.
  //
  showImage: function(){
    this.loading.hide();
    new Effect.Appear(this.lightboxImage, {
      duration: this.resizeDuration,
      queue: 'end',
      afterFinish: (function(){ this.updateDetails(); }).bind(this)
    });
    this.preloadNeighborImages();
  },
  
  //
  //  updateDetails()
  //  Display caption, image number, and bottom nav.
  //
  updateDetails: function() {
  
    this.caption.update(this.imageArray[this.activeImage][1]);
    
    // if image is part of set display 'Image x of x'
    if (this.imageArray.length > 1){
      this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + '  ' + this.imageArray.length).show();
    }
  
    new Effect.Parallel(
    [
      new Effect.SlideDown(this.imageDataContainer, { sync: true }),
      new Effect.Appear(this.imageDataContainer, { sync: true })
    ],
    {
      duration: this.resizeDuration,
      afterFinish: (function() {
        // update overlay size and update nav
        this.overlay.setStyle({ height: document.viewport.getHeight() + 'px' });
        this.updateNav();
      }).bind(this)
    }
    );
  },
  
  //
  //  updateNav()
  //  Display appropriate previous and next hover navigation.
  //
  updateNav: function() {
    this.hoverNav.show();
    this.navigationArray.invoke('makeClickable');
  
    // if not first image in set, display prev image button
    if (this.activeImage > 0) this.prevLink.show();
  
    // if not last image in set, display next image button
    if (this.activeImage < (this.imageArray.length - 1)) this.nextLink.show();
  
    this.enableKeyboardNav();
  },
  
  //
  //  enableKeyboardNav()
  //
  enableKeyboardNav: function() {
    document.observe('keydown', this.keyboardAction);
  },
  
  //
  //  disableKeyboardNav()
  //
  disableKeyboardNav: function() {
    document.stopObserving('keydown', this.keyboardAction);
  },
  
  //
  //  keyboardAction()
  //
  keyboardAction: function(event) {
    var keycode = event.keyCode;
  
    var escapeKey;
    if (event.DOM_VK_ESCAPE) {  // mozilla
      escapeKey = event.DOM_VK_ESCAPE;
    } else { // ie
      escapeKey = 27;
    }
  
    var key = String.fromCharCode(keycode).toLowerCase();
    
    if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox
      this.end();
    } else if ((key == 'p') || (keycode == 37)){ // display previous image
      if (this.activeImage != 0){
        this.disableKeyboardNav();
        this.changeImage(this.activeImage - 1);
      }
    } else if ((key == 'n') || (keycode == 39)){ // display next image
      if (this.activeImage != (this.imageArray.length - 1)){
        this.disableKeyboardNav();
        this.changeImage(this.activeImage + 1);
      }
    }
  },
  
  //
  //  preloadNeighborImages()
  //  Preload previous and next images.
  //
  preloadNeighborImages: function(){
    var preloadNextImage, preloadPrevImage;
    if (this.imageArray.length > this.activeImage + 1){
      preloadNextImage = new Image();
      preloadNextImage.src = this.imageArray[this.activeImage + 1][0];
    }
    if (this.activeImage > 0){
      preloadPrevImage = new Image();
      preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];
    }
  
  },
  
  //
  //  end()
  //
  end: function() {
    this.disableKeyboardNav();
    this.lightbox.hide();
    this.navigationContainer.hide();
    this.navigationImageContainer.setStyle({left:0}).childElements().invoke('remove');
    this.navigationArray.clear();
    [this.indexBackward, this.indexForward].invoke('hide');
    new Effect.Fade(this.overlay, { duration: this.overlayDuration });
    $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
  }
}

document.observe('dom:loaded', function () { myLightbox = new Lightbox(); });
window.onresize = function() {
  if(myLightbox.navigationArray.size() != null){
    var arrayPageSize = document.viewport.getDimensions();
    $('overlay').setStyle({ width: arrayPageSize.width + 'px', height: arrayPageSize.height + 'px' });
    $('navigationBar').setStyle({ width: arrayPageSize.width - 36 + 'px' });
    $('navigationContainer').setStyle({ width: arrayPageSize.width - 20 + 'px'});
    if($('navigationImageContainer').positionedOffset().left < 0){
      $('navigationImageContainer').style.left = $('navigationContainer').getWidth() - $('navigationImageContainer').getWidth() + 'px';
      $('indexBackward').show();
    }else{
      $('navigationImageContainer').style.left = '0px';
      $('indexBackward').hide();
    }
    if($('navigationImageContainer').getWidth() + $('navigationImageContainer').positionedOffset().left > $('navigationContainer').getWidth())
      $('indexForward').show();
    else
      $('indexForward').hide();
  }
};