
function imageViewer( instanceName, popupHtmlUrl, wrapping )
{
    var captions            = new Array();
    var imageLinks          = new Array();
    var largeImages         = new Array();
    var largeImageAltTexts  = new Array();
    var largeImageWidths    = new Array();
    var largeImageHeights   = new Array();
    var currentImage        = 0;
    var numberOfImages      = 0;
    var imageViewerID       = instanceName;

    this.getCurrentImageIndex = function()  { return currentImage; }
    this.getNumberOfImages = function()     { return numberOfImages; }
    this.getID = function()                 { return imageViewerID; }

    this.addImage = function( imageUrl, imageCaption, imageLink, largeImageUrl, largeImageAlt, largeImageWidth, largeImageHeight )
    {
        captions[numberOfImages] = imageCaption.replace( /¤/g, '"' );

        if ( typeof largeImageUrl == "string" )
        {
          largeImages[numberOfImages] = largeImageUrl;
          if ( typeof largeImageAlt == "string" )
          {
            largeImageAltTexts[numberOfImages] = largeImageAlt.replace( /¤/g, '"' );
          }
          else
          {
            largeImageAltTexts[numberOfImages] = "";
          }
          largeImageWidths[numberOfImages] = largeImageWidth;
          largeImageHeights[numberOfImages] = largeImageHeight;
          document.getElementById( imageViewerID + "_controls" ).style.margin = "0px"; // controls not centered if magnifier is present for any picture
        }
        else
        {
          largeImages[numberOfImages] = false;
        }

        if ( typeof imageLink == "string" && imageLink != "" )
          imageLinks[numberOfImages] = imageLink;
        else
          imageLinks[numberOfImages] = "";

        var newImg = document.createElement( "img" );
        var newImgId = document.createAttribute( "id" );
        newImgId.nodeValue = imageViewerID + "_image_" + numberOfImages;
        newImg.setAttributeNode( newImgId );
        var newImgSrc = document.createAttribute( "src" );
        newImgSrc.nodeValue = imageUrl;
        newImg.setAttributeNode( newImgSrc );
        var newImgAlt = document.createAttribute( "alt" );
        newImgAlt.nodeValue = imageCaption;
        newImg.setAttributeNode( newImgAlt );

        document.getElementById( imageViewerID + "_wrapper" ).appendChild( newImg );
        document.getElementById( imageViewerID + "_image_" + numberOfImages ).style.display = "none";

        numberOfImages++;
        updateDisplay();
    }

    this.moveForward = function()
    {
        if ( numberOfImages > 0 )
        {
            if ( currentImage < numberOfImages - 1 )
                currentImage++;
            else
            {
                if ( wrapping )
                currentImage = 0;
            }
            updateDisplay();
        }
    }

    this.moveBack = function()
    {
        if ( numberOfImages > 0 )
        {
            if ( currentImage > 0 )
                currentImage--;
            else
            {
                if ( wrapping )
                currentImage = numberOfImages - 1;
            }
            updateDisplay();
        }
    }

    function updateDisplay()
    {
        for ( var i=0; i<numberOfImages; i++ )
        {
            if ( i == currentImage )
                document.getElementById( imageViewerID + "_image_" + i ).style.display = "block";
            else
                document.getElementById( imageViewerID + "_image_" + i ).style.display = "none";
        }

        if ( largeImages[currentImage] != false )
        {
          document.getElementById( imageViewerID + "_magnify" ).style.display = "block";
          document.getElementById( imageViewerID + "_magnifyLink" ).href = "javascript:openImagePopup( '" + popupHtmlUrl + "', '" + largeImages[currentImage] + "', '" + largeImageAltTexts[currentImage] + "', '" + largeImageAltTexts[currentImage] + "', '" + largeImageWidths[currentImage] + "', '" + largeImageHeights[currentImage] + "' );";
        }
        else
        {
          document.getElementById( imageViewerID + "_magnify" ).style.display = "none";
        }

        var currentCaptionLength = document.getElementById( imageViewerID + "_caption" ).firstChild.nodeValue.length;
        document.getElementById( imageViewerID + "_caption" ).firstChild.replaceData( 0, currentCaptionLength, captions[currentImage] );

        var currentInfoLength = document.getElementById( imageViewerID + "_info" ).firstChild.nodeValue.length;
        document.getElementById( imageViewerID + "_info" ).firstChild.replaceData( 0, currentInfoLength, "" + (currentImage + 1) + " von " + numberOfImages );

        if ( imageLinks[currentImage] != "" )
        {
          document.getElementById( imageViewerID + "_stage" ).onclick = function() { location.href=imageLinks[currentImage] };
          document.getElementById( imageViewerID + "_stage" ).style.cursor = "pointer";
          document.getElementById( imageViewerID + "_caption" ).onclick = function() { location.href=imageLinks[currentImage] };
          document.getElementById( imageViewerID + "_caption" ).style.cursor = "pointer";
        }
        else
        {
          document.getElementById( imageViewerID + "_stage" ).onclick = "return false";
          document.getElementById( imageViewerID + "_stage" ).style.cursor = "default";
          document.getElementById( imageViewerID + "_caption" ).onclick = "return false";
          document.getElementById( imageViewerID + "_caption" ).style.cursor = "default";
        }
    }
}
