// Property class
function Property(name, value)
{
    this.name = name;
    this.value = value;
}
        
// Product class
function Product(id, price, imgUrl, shippingCategory, properties, onProductLoaded, onProductError)
{
    this.id = id;
    this.price = price;
    this.shippingCategory = shippingCategory;
    this.properties = properties;
    this.isLoaded = false;
    
    var self = this;
    
    this.img = new Image();
    
    this.img.onload = function() {
        self.isLoaded = true;
        onProductLoaded(self);
    };
    
    this.img.onerror = function() {
        self.isLoaded = true;
        onProductError(self);
    };
    
    this.img.src = imgUrl;
}

// ProductsBrowser class
function ProductsBrowser(enableDebug, selectedProductIdTextBoxId, previewLink)
{
    this.isEnabled = document.getElementById != null;
    
    if(this.isEnabled)
    {
        var previewSection = document.getElementById("previewSection");
        
        if(previewLink)
        	previewSection.innerHTML = "<a id='previewLink'><img id='previewImage' /></a>";
        else
        	previewSection.innerHTML = "<img id='previewImage' />";
        
        previewSection.innerHTML += "<img id='loadingImage' src='./Images/loading.gif' class='noBorder' alt='Loading, please wait...' />";
        
        this.selectedProductId = document.getElementById(selectedProductIdTextBoxId);
        this.productIdLabel = document.getElementById("productIdLabel");
        this.costLabel = document.getElementById("costLabel");
        this.productProperties = document.getElementById("productProperties");
        
        this.previewLinkHref = previewLink;
        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.products = new Array();
        this.productsById = new Object();
        
        this.currentProductId = null;
        this.nextProductId = null;
        this.nextProductTimeout = null;
        
        this.NEXT_PIC_TIMEOUT_DURATION = 250;
        
        var self = this;
        this.OnProductLoaded = function(product) {
            self.Debug("loaded: " + product.id);
            
            if(product.id == self.currentProductId)
                self.SetCurrentProduct(product, self.currentProductInstant);
        };
        
        this.OnProductError = function(product) {
            self.Debug("error: " + product.id);
            
            if(product.id == self.currentProductId)
                self.SetCurrentProduct(product, self.currentProductInstant);
        };
        
        this.Debug("Dynamic Product Browsing Enabled");
    }
}

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

ProductsBrowser.prototype.AddProduct = function(id, price, imgUrl, shippingCategory, properties)
{
    if(this.isEnabled)
    {
        var product = new Product(id, price, imgUrl, shippingCategory, properties, this.OnProductLoaded, this.OnProductError);
        
        this.products.push(product);
        this.productsById[id] = product;
        
        // If this is the first product to be added, or this is the product that has been clicked on by the user, then display it as the main product
        if(this.currentProductId == null || (this.selectedProductId && this.selectedProductId.value == id))
        {
            this.Debug("Set current product: " + product.id);
            this.SetCurrentProduct(product, true);
        }
    }
}

ProductsBrowser.prototype.ShowProduct = function(product)
{
    var self = this;
    this.previewImage.fadeOut(
        125,
        function() {
            self.SetCurrentProduct(product);
        });
    
    this.ClearNextProductTimeout();
}

ProductsBrowser.prototype.SetCurrentProduct = function(product, instant)
{
    this.currentProductId = product.id;
    
    if(product.isLoaded)
    {
        this.previewImage.attr("src", product.img.src);
        
        if(this.previewLinkHref && this.previewLink)
			this.previewLink.attr("href", this.previewLinkHref + "?Id=" + product.id);
        
        if(instant) this.previewImage.show();
        else        this.previewImage.fadeIn(400);
        
        this.loadingImage.hide();
        
        // update the selectedProductId hidden field, and the visual display fields
        if(this.selectedProductId)
			this.selectedProductId.value = product.id;
        
        if(this.productIdLabel)
			this.productIdLabel.innerHTML = product.id;
		
		if(this.costLabel)
			this.costLabel.innerHTML = product.price;
        
        // properties
        if(product.properties && this.productProperties)
        {
			var productProperties = "";
			if(product.properties.length > 0)
			{
				productProperties += "<dl>";
				for(var i = 0; i < product.properties.length; i++)
				{
					var property = product.properties[i];
					productProperties += "<dt>" + property.name + ":</dt><dd>" + property.value + "</dd>";
				}
				productProperties += "</dl>";
			}
			this.productProperties.innerHTML = productProperties;
		}
        
        if(this.OnSetCurrentProduct)
        {
            this.OnSetCurrentProduct(product);
        }
    }
    else
    {
        this.loadingImage.show();
        this.currentProductInstant = instant;
    }
}

ProductsBrowser.prototype.SetNextProductTimeout = function(product)
{
    this.ClearNextProductTimeout();
    
    var self = this;
    this.nextProductId = product.id;
    this.nextProductTimeout = setTimeout(function() { self.ShowProduct(product); }, this.NEXT_PIC_TIMEOUT_DURATION);
    
    this.Debug("set timeout");
}

ProductsBrowser.prototype.ClearNextProductTimeout = function()
{
    if(this.nextProductTimeout)
    {
        clearTimeout(this.nextProductTimeout);
        this.nextProductId = null;
        this.nextProductTimeout = null;
        
        this.Debug("cleared timeout");
    }
}

ProductsBrowser.prototype.OnThumbnailRollOver = function(productId)
{
    // If we are enabled and the thumbnail that has just been rolled over is not the product currently being shown
    // and its not the product that is just about to be shown after the show product timeout, then start a new timeout
    if(this.isEnabled && this.currentProductId != productId && this.nextProductId != productId)
    {
        this.SetNextProductTimeout(this.productsById[productId]);
    }
}

ProductsBrowser.prototype.OnThumbnailRollOut = function()
{
    this.ClearNextProductTimeout();
}