//---------------------------------------------------------------------------------------
// Picture class
function Picture(ref, name, imgUrl, onPictureLoaded, onPictureError)
{
    this.ref = ref;
    this.name = name;
    this.isLoaded = false;
    
    var self = this;
    
    this.img = new Image();
    
    this.img.onload = function() {
        self.isLoaded = true;
        onPictureLoaded(self);
    };
    
    this.img.onerror = function() {
        self.isLoaded = true;
        onPictureError(self);
    };
    
    this.img.src = imgUrl;
}

//---------------------------------------------------------------------------------------
// BrowsePictures class
function BrowsePictures(enableDebug, isLargePicturesEnabled, websiteRootPath)
{
    this.isEnabled = document.getElementById != null;
    this.isLargePicturesEnabled = isLargePicturesEnabled;
    this.websiteRootPath = websiteRootPath;
    
    if(this.isEnabled)
    {
        var previewSection = document.getElementById("previewSectionPlaceholder");
        previewSection.setAttribute("id", isLargePicturesEnabled ? "previewSectionLarge" : "previewSectionSmall");
        
        previewSection.innerHTML = "<a id='previewLink'><img id='previewImage' /></a>";
        previewSection.innerHTML += "<img id='loadingImage' src='" + websiteRootPath + "Images/loading.gif' class='noBorder' alt='Loading, please wait...' />";
        
        this.previewLink  = $("#previewLink");
        this.previewImage = $("#previewImage");
        this.loadingImage = $("#loadingImage").hide();
        
        this.previewImage.hide();
        
        // Create 'debug' div, if applicable
        if(enableDebug)
        {
            this.debugSection = document.createElement("div");
            this.debugSection.setAttribute("id", "debugSection");
            
            previewSection.appendChild(this.debugSection);
        }
        
        this.pictures = new Array();
        this.picturesByRef = new Object();
        
        this.currentPicRef = null;
        this.nextPicRef = null;
        this.nextPicTimeout = null;
        
        this.NEXT_PIC_TIMEOUT_DURATION = 250;
        
        var self = this;
        this.OnPictureLoaded = function(picture) {
            self.Debug("loaded: " + picture.ref);
            
            if(picture.ref == self.currentPicRef)
                self.SetCurrentPicture(picture, self.currentPicInstant);
        };
        
        this.OnPictureError = function(picture) {
            self.Debug("error: " + picture.ref);
            
            if(picture.ref == self.currentPicRef)
                self.SetCurrentPicture(picture, self.currentPicInstant);
        };
        
        this.Debug("Dynamic Picture Browsing Enabled");
    }
}

//---------------------------------------------------------------------------------------
BrowsePictures.prototype.Debug = function(message)
{
    if(this.isEnabled && this.debugSection)
    {
        this.debugSection.innerHTML += message + "<br />";
    }
}

//---------------------------------------------------------------------------------------
BrowsePictures.prototype.AddPicture = function(ref, name, imgUrl)
{
    if(this.isEnabled)
    {
        var picture = new Picture(ref, name, imgUrl, this.OnPictureLoaded, this.OnPictureError);
        
        this.pictures.push(picture);
        this.picturesByRef[ref] = picture;
        
        // If this is the first pictuire to be added, then display it as the main pic
        if(this.currentPicRef == null)
        {
            this.SetCurrentPicture(picture, true);
        }
    }
}

//---------------------------------------------------------------------------------------
BrowsePictures.prototype.ShowPicture = function(picture)
{
    var self = this;
    this.previewImage.fadeOut(
        125,
        function() {
            self.SetCurrentPicture(picture);
        });
    
    this.ClearNextPictureTimeout();
}

//---------------------------------------------------------------------------------------
BrowsePictures.prototype.SetCurrentPicture = function(picture, instant)
{
    this.currentPicRef = picture.ref;
    
    if(picture.isLoaded)
    {
        this.previewImage.attr("src", picture.img.src);
        this.previewLink.attr("href", this.websiteRootPath + "Order-Or-Frame-Print.aspx?RefNum=" + picture.ref);
        
        if(instant) this.previewImage.show();
        else        this.previewImage.fadeIn(400);
        
        this.loadingImage.hide();
    }
    else
    {
        this.loadingImage.show();
        this.currentPicInstant = instant;
    }
}

//---------------------------------------------------------------------------------------
BrowsePictures.prototype.SetNextPictureTimeout = function(picture)
{
    this.ClearNextPictureTimeout();
    
    var self = this;
    this.nextPicRef = picture.ref;
    this.nextPicTimeout = setTimeout(function() { self.ShowPicture(picture); }, this.NEXT_PIC_TIMEOUT_DURATION);
    
    this.Debug("set timeout");
}

//---------------------------------------------------------------------------------------
BrowsePictures.prototype.ClearNextPictureTimeout = function()
{
    if(this.nextPicTimeout)
    {
        clearTimeout(this.nextPicTimeout);
        this.nextPicRef = null;
        this.nextPicTimeout = null;
        
        this.Debug("cleared timeout");
    }
}

//---------------------------------------------------------------------------------------
BrowsePictures.prototype.OnThumbnailRollOver = function(picRef)
{
    // If we are enabled and the thumbnail that has just been rolled over is not the picture currently being shown
    // and its not the picture that is just about to be shown after the show pic timeout, then start a new timeout
    if(this.isEnabled && this.currentPicRef != picRef && this.nextPicRef != picRef)
    {
        this.SetNextPictureTimeout(this.picturesByRef[picRef]);
    }
}

//---------------------------------------------------------------------------------------
BrowsePictures.prototype.OnThumbnailRollOut = function()
{
    this.ClearNextPictureTimeout();
}