
function imageViewer( instanceName, wrapping, maxImageWidth )
{
    var captions            = 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; }

    document.getElementById(imageViewerID + "_controls").style.display = "none";

    if ( typeof (maxImageWidth) != null && typeof (maxImageWidth) != "undefined" )
    {
        document.getElementById( imageViewerID ).style.width = maxImageWidth + "px";
    }

    this.addImage = function( imageUrl, imageCaption )
    {
        captions[numberOfImages] = imageCaption;

        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();

        if ( numberOfImages > 1 )
        {
            document.getElementById(imageViewerID + "_controls").style.display = "block";
        }
    }

    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";
        }

        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 );
    }

    this.open = function()
    {
        document.getElementById(imageViewerID + "_BG").style.display="block";
    }

    this.close = function()
    {
        document.getElementById(imageViewerID + "_BG").style.display="none";
    }
}


