/**
 * 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 onclick(event) {
 toggle(0, "metaNavigationHeadline", "h4", "open", "closed");
 toggle(0, "metaNavigationContainer", "div", "metaContainerContentOpen", "metaContainerContentClosed");
 }

function onclick(event) {
 toggle(1, "metaNavigationHeadline", "h4", "open", "closed");
 toggle(1, "metaNavigationContainer", "div", "metaContainerContentOpen", "metaContainerContentClosed");
 }


function slideshow(elementId, placeholderImage)
{
 this.slideshowImages = new Array();
 this.slideshowImages72dpi = new Array();
 this.slideshowImages300dpi = new Array();
 this.slideshowDescriptions = new Array();
 this.slideshowPopupLinks = new Array();

 this.slideshowImages72dpiWidth = new Array();
 this.slideshowImages72dpiHeight = new Array();
 this.slideshowImages300dpiWidth = new Array();
 this.slideshowImages300dpiHeight = 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 description Image description
 * @param popuplink Link to the image popup template
 */
 this.pushImage = function(image, image72dpi, image300dpi, description, popuplink, image72dpiWidth, image72dpiHeight, image300dpiWidth, image300dpiHeight)
 {
 this.slideshowImages.push(image);
 this.slideshowImages72dpi.push(image72dpi);
 this.slideshowImages300dpi.push(image300dpi);
 this.slideshowDescriptions.push(description);
 this.slideshowPopupLinks.push(popuplink);

 this.slideshowImages72dpiWidth.push(parseInt(image72dpiWidth));
 this.slideshowImages72dpiHeight.push(parseInt(image72dpiHeight));
 this.slideshowImages300dpiWidth.push(parseInt(image300dpiWidth));
 this.slideshowImages300dpiHeight.push(parseInt(image300dpiHeight));
 }


 /**
 * 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
 //document.getElementById('MainArticleInBlock' + this.elementId).style.display = 'block';

 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';
 document.getElementById('border' + this.elementId).className = '';
 document.getElementById('showallLink' + this.elementId).style.display = 'none';
 } else {
 document.getElementById('border' + this.elementId).className = 'image imageSpacer';
 }

 // Set total number of images
 document.getElementById('max' + this.elementId).innerHTML = this.slideshowImages.length;
 } 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] : '';
 window.open(popupUrl, 'slideshowPopup', 'width=' + width + ', height='+ height + ', resizable=yes');
 }


 /**
 * 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];

 var link72dpi = document.getElementById('image72dpi' + slideshowItem);
 var link300dpi = document.getElementById('image300dpi' + slideshowItem);

 // Check if 300dpi resolution is as big as the 72dpi resolution
 var link300dpiEnable = true;
 if ( (this.slideshowImages300dpiWidth[itemNumber] != "" || this.slideshowImages72dpiWidth[itemNumber] != "")
 &&
 (this.slideshowImages300dpiWidth[itemNumber] <= this.slideshowImages72dpiWidth[itemNumber] &&
 this.slideshowImages300dpiHeight[itemNumber] <= this.slideshowImages72dpiHeight[itemNumber])
 )
 {
 link300dpiEnable = false;
 }

 if (link72dpi != null)
 {
 // Attach 72dpi image to link if image exists
 if (this.slideshowImages72dpi[itemNumber] != '')
 {
 link72dpi.href = this.slideshowImages72dpi[itemNumber];
 } else {
 link72dpi.parentNode.removeChild(link72dpi);
 }
 }

 if (link300dpi != null)
 {
 // Attach 300dpi image to link if image exists and image is not a gif
 if (this.slideshowImages300dpi[itemNumber] != '' && this.slideshowImages300dpi[itemNumber].toLowerCase().lastIndexOf('.gif') == -1 && link300dpiEnable )
 {
 link300dpi.href = this.slideshowImages300dpi[itemNumber];
 link300dpi.style.position = "static";
 } else {
 //link300dpi.parentNode.removeChild(link300dpi);
 link300dpi.style.position = "absolute";
 link300dpi.style.left = "-5000px";
 }
 }

 // Display current image number and description
 document.getElementById('akt' + slideshowItem).innerHTML = itemNumber + 1;
 document.getElementById('text' + slideshowItem).innerHTML = this.slideshowDescriptions[itemNumber];
 document.getElementById('text' + slideshowItem).style.display = (document.getElementById('text' + slideshowItem).innerHTML == '') ? 'none' : 'block';
 }
}