/**
 * Image Slideshow
 * 
 * @author FrHe@edoras, 2006-01-21
 *   
 * @param  elementId         PageId of the RedDot slideshow element
 * @param  placeholderImage  Placeholder image if slideshow is empty
 */   
function slideshow(elementId, placeholderImage)
{
  this.slideshowImages            = new Array();
  this.slideshowImageTitles       = new Array();
  this.slideshowImageDescriptions = new Array();
  this.slideshowPopupLinks        = new Array();
  this.counter                    = 0;
  this.totalImages                = 0;
  this.elementId                  = elementId;
  this.placeholderImage           = placeholderImage;

  /**
   * Push an image into the slideshow
   *
   * @param  image        Image filename
   * @param  title        Image title
   * @param  description  Image description
   * @param  popuplink    Link to the image popup template
   */  
  this.pushImage = function(image, title, description, popuplink)
  {
    this.slideshowImages.push(image);
    this.slideshowImageTitles.push(title);
    this.slideshowImageDescriptions.push(description);
    this.slideshowPopupLinks.push(popuplink);
  }

  /**
   * Init slideshow after all images were added, load the first image in array
   */     
  this.initSlideshow = function()
  {
    this.totalImages = this.slideshowImages.length;
    if (this.totalImages > 0)
    {
      // Load first picture and properties
      this.updateSlideshow(this.elementId, 0);

      // Display slideshow navigation only if there is more than one image
      if (this.totalImages < 2) {
        document.getElementById('galleryNavigation' + this.elementId).style.display = 'none';
      }
    
      // Set total number of images
    } else {
      document.getElementById('image' + this.elementId).src         = this.placeholderImage;
    }
  }

  /**
   * Loads previous image if current image is not the first slideshow image
   */     
  this.previousImage = function()
  {
    if (this.counter > 0)
    {
      this.counter--;
      this.updateSlideshow(this.elementId, this.counter);
    }
  }

  /**
   * Loads next image if current image is not the last slideshow image
   */     
  this.nextImage = function()
  {
    if (this.counter < this.slideshowImages.length - 1)
    {
      this.counter++;
      this.updateSlideshow(this.elementId, this.counter);
    }
  }

  /**
   * Opens the detail image popup
   * 
   * @param  width   width of the popup window
   * @param  height  height of the popup window         
   */     
  this.zoomImage = function(width, height)
  {
    var popupUrl = (this.slideshowPopupLinks[this.counter] != '') ? this.slideshowPopupLinks[this.counter] : '';
    var myWin = window.open(popupUrl, 'slideshowPopup', 'width=' + width + ', height='+ height + ', resizable=yes');
    myWin.focus();
  }

  /**
   * Shows "All images" container at the end of the template
   */     
  this.showAllImagesContainer = function()
  {
    document.getElementById('showall' + this.elementId).style.display = 'block';
    document.location.href = '#showall' + this.elementId;
  }

  /**
   * Hides "All images" container at the end of the template
   */     
  this.hideAllImagesContainer = function()
  {
    document.getElementById('showall' + this.elementId).style.display = 'none';
    document.location.href = '#GalleryNavigation' + this.elementId;
  }

  /**
   * Used internally to update the slideshow element
   */
  this.updateSlideshow = function(slideshowItem, itemNumber)
  {
    document.getElementById('image' + slideshowItem).src          = this.slideshowImages[itemNumber];
    document.getElementById('image' + slideshowItem).setAttribute('alt', this.slideshowImageTitles[itemNumber]);

    // Display current title and description
    document.getElementById('title' + slideshowItem).innerHTML    = this.slideshowImageTitles[itemNumber];
    document.getElementById('text' + slideshowItem).innerHTML     = this.slideshowImageDescriptions[itemNumber];
    document.getElementById('text' + slideshowItem).style.display = (this.slideshowImageDescriptions[itemNumber] == '') ? 'none' : 'block';
  }
}