var ImageSet = $.Class.create(
{
    activeImageIndex : 0,	// Index of the currently displayed picture/video
    displayElementID : "",	// Reference to the div to display the picture/video
    imageArray : null,		// Array of Image objects
    buttonArray : null,		// Corresponding array of button elements
        
    initialize: function (displayElementID) 
    {
        this.displayElementID = displayElementID;
        this.imageArray = [];
        this.buttonArray = [];
    },
    
    addImage: function(type, url, buttonID) 
    {
    	this.imageArray.push( new Image(type, url) );
    	this.buttonArray.push( buttonID );

        // If this is the first image, insert it into the display element.
        if ( this.imageArray.length == 1 )
        {
            var nextImage = this.imageArray[0];

            //--Insert image------------------
            var insertString = "";
            if (nextImage.imageType == "picture" ) {
                insertString = "<img src=\"" + nextImage.contentURL + "\"/>";
            }
            else if ( nextImage.imageType == "video" ) {
                insertString = "<iframe src=\"" + nextImage.contentURL + "\" width=\"100%\" height=\"100%\" frameborder=\"0\"></iframe>";
            }
            $("#" + this.displayElementID).append(insertString);
            //--------------------------------
        }
        else
        {
            // Pre-load the image to avoid delays when switching.
            var imagePreload = $('<img />').attr('src', url);
        }
    },
    
    switchImages: function(imageIndex)
    {
        var nextImage = this.imageArray[imageIndex];
        this.activeImageIndex = imageIndex;

        $("#" + this.displayElementID).fadeOut("fast", function() {
            $(this).empty();
            
            //--Insert image------------------
            var insertString = "";
            if (nextImage.imageType == "picture" ) {
                insertString = "<img src=\"" + nextImage.contentURL + "\"/>";
            }
            else if ( nextImage.imageType == "video" ) {
                insertString = "<iframe src=\"" + nextImage.contentURL + "\" width=\"100%\" height=\"100%\" frameborder=\"0\"></iframe>";
            }
            $(this).append(insertString);
            //--------------------------------

            $(this).fadeIn("fast");
        });
    },
});
