/// <reference name="MicrosoftAjax.debug.js" />
/// <reference name="MicrosoftAjaxTimer.debug.js" />
/// <reference name="MicrosoftAjaxWebForms.debug.js" />

/// <reference path="jquery.intellisense.js"/>

/// <reference path="Kleenex.Core.js"/>

Kleenex.ProductListing = function(clientId) 
{
    this.ClientID = clientId;
    this.Selector = "#" + clientId;
    this.Initialize();
};
Kleenex.ProductListing.prototype =
{
    Name : 'Kleenex.ProductListing',
    __typeName : 'Kleenex.ProductListing',
    __class : true,
    CurrentProduct : undefined,
    NextProduct : undefined,
    AnimationDelay : 100,
    ShowOverlay : function(product)
    {
        var __app = this;

        if (this.CurrentProduct !== undefined)
        {
            this.NextProduct = product;
            this.HideOverlay();
            return;
        }
        this.CurrentProduct = product;
        
        // get the position
        var listOffset = $(this.Selector).offset();
        var pos = product.position();
        if (pos.top < 0)
        {
            // IE workaround for dumb bug (it give the wrong value for the top
            // value but only on the first request) a fix for this is needed!
            pos.top = 0;
        }
        var xPos = listOffset.left + pos.left + 150;
        var yPos = listOffset.top + pos.top + 10;
        
        // get a reference to the overlay
        var overlay = $(this.OverlaySelector).css('overflow', 'auto').css('height', 'auto');
        
        var productName = $('h2:first', product).text();
        $('.ProductName', overlay).empty().append(productName);
        
        // get the content for the product types
        var content = $('.Types', product).html();
        // empty the overlay and append the content for the current product
        $('.Content', overlay).empty().append(content);
        
        // handler for selecting a thumbnail
        var selectThumbnail = function()
        {
            // Note: within this function "this" refers to the element that was
            // clicked and not the instance of Kleenex.ProductListing. To access
            // the Kleenex.ProductListing you must use __app which was declared
            // at the head of parent function.
            
            // reset thumbnails all to gray
            var parent = $(this).parent();
            $('.Thumbnail', overlay).css('border', '2px solid #ccc');
           
            // highlight the clicked element
            // TODO change this to simply call addClass('Selected')
            $(this).css('border', '2px solid Orange');
            
            var name = $('div.Name', $(this).parent()).text();
            $('div.NameSlot span', overlay).empty().append(name);
            var bigImage = $('div.BigImage', $(this).parent()).html();
            $('div.ImageSlot', overlay).fadeOut(250, function()
            {
                $('div.ImageSlot', overlay).empty().append(bigImage).fadeIn(250);
            });
            if( $('div.NameSlot span', overlay).text() === '' ) 
            {
                $('div.NameSlot', overlay).hide();
            }
        };
        
        var handleDropDown = function()
        {
            var index = $('.ProductDropDownList', overlay).get(0).selectedIndex;
            $('.DescriptionsContainer', overlay).hide();
            var typeElem = $('.DescriptionsContainer', overlay).get(index);
            var slotElem = $('.SheetContainer', overlay).get(index);
            var slots = $(slotElem).text();
            if (slots !== '')
            {
                $('div.SheetSlot span', overlay).empty().append(slots);
            }
            else
            {
                $('div.SheetSlot', overlay).hide();
            }
            
            // hide thumbnails with no img src
            $('.Thumbnail[src=""]', typeElem).hide();
            $(typeElem).show();
            $('.Thumbnail', typeElem).click(selectThumbnail);
            $('.Thumbnail').css('cursor', 'pointer');
            $('.Thumbnail:first', typeElem).click();
        };
        
        $('.ProductDropDownList', overlay).bind('change', handleDropDown);
        handleDropDown();        
        if ($('.ProductDropDownList option', overlay).length <= 1)
        {
            $('.DropDownName', overlay).hide();
            $('.ProductDropDownList', overlay).hide();
        }
        
        // click the first thumbnail
        $('.Thumbnail:first', overlay).click();
        
        var overlayHeight = overlay.height();
        if (overlayHeight > 600)
        {
            __app.ShowError('The product data is invalid!');
            return;
        }
        
        // ensure the overlay is not too low on the footer
        var listingBottom = listOffset.top + $(this.Selector).height();
        var overlayBottom = yPos + overlayHeight;
        if (overlayBottom > listingBottom)
        {
            yPos = listingBottom - overlayHeight;
        }
        
        // fade out the page behind the overlay
        this.ShowMask();
        
        // position and fade in
        overlay.css('top', yPos + 'px').css('left', xPos + 'px').fadeIn(this.AnimationDelay);
        $.scrollTo(overlay, 500, { easying: 'easeInElastic', offset : { left: 0, top: -20 } });
    },
    HideOverlay : function()
    {
        var __app = this;
        
        this.HideMask();
        
        var callback = function()
        {
            if (__app.CurrentProduct !== undefined)
            {
                //$(__app.CurrentProduct).css('border', '1px solid #fff');
                __app.CurrentProduct = undefined;
            }
            if (__app.NextProduct !== undefined)
            {
                __app.ShowOverlay(__app.NextProduct);
                __app.NextProduct = undefined;
            }
        };
        
        // fade out the overlay
        $(__app.OverlaySelector).fadeOut(__app.AnimationDelay, callback);
    },
    AttachEvents : function()
    {
        // preserve the reference to the parent object as __app (Kleenex.ProductListing)
        var __app = this;
        
        // detach the Overlay from the container
        var overlayId = this.ClientID + '_overlay';
        var overlayClone = $(this.Selector + ' .ProductOverlay').clone();
        $(this.Selector + ' .ProductOverlay').remove();
        overlayClone.attr('id', overlayId).css("z-index", "3000");
        $('form:first').prepend(overlayClone);
        
        this.OverlaySelector = '#' + overlayId;
        
        var handleHideOverlay = function()
        {
            __app.HideOverlay();
        };
        
        // bind the click event for the close link
        $(this.OverlaySelector + ' .Close').click(handleHideOverlay);
        
        var bindBookmarkClickEvent = function()
        {
            var link = this;
            $(this).click(function()
            {
                link.blur();
                var startIndex = link.href.indexOf('#');
                var endIndex = link.href.length;
                var anchor = link.href.substring(startIndex, endIndex);
                $.scrollTo($(anchor), 500);
                setTimeout(function()
                {
                    location.href = anchor;
                }, 300);
                return false;
            });
        };
        
        // bind the bookmark links to the scrollTo function
        $(this.Selector + ' div.ProductsBookmarksContainer a').each(bindBookmarkClickEvent);
                
        var bindProductClickEvent = function()
        {
            var types = $('.Types .Type', this);
            if (types.length > 0)
            {
                var product = $(this);
                var handleShow = function()
                {
                    __app.ShowOverlay(product);
                };
                $('.ViewProductDetail', this).click(handleShow).show();
            }
        };
                
        // bind click events specifically to each product
        $(this.Selector + ' div.ProductContainer').each(bindProductClickEvent);
    }
};

// inherit from the core
Kleenex.Extend(Kleenex.ProductListing, Kleenex.UserControl);