/**
 * wftda.com store JavaScript.
 *
 * @package    WFTDA
 * @subpackage UI
 * @copyright  Copyright 2009 Spenlen Media, Inc. (http://spenlen.com)
 * @version    $Id$
 */


if (typeof WFTDA == 'undefined') {
    var WFTDA = {};    
}

WFTDA.Store = {};



/**
 * Manages the featured product carousel on the storefront page.
 *
 * @var Class
 */
WFTDA.Store.FeaturedProducts = Class.create();
WFTDA.Store.FeaturedProducts.prototype = {

  /**** Instance Variables ****/

    /**
     * Index of currently-shown product.
     * @var int
     */
    productIndex : 0,
    
    /**
     * Index of the last product.
     * @var int
     */
    maxProductIndex: -1,
    
    /**
     * Timer reference for the automatic carousel animation.
     * @var int
     */
    autoAnimateTimer: null,



  /**** Initialization ****/

    /**
     * Installs the various event handlers responsible for maintaining the
     * interactive navigation elements.
     */
    initialize : function ()
    {
        var content = $('storefrontContent');
        if (! content) {
            return;
        }
        
        while (1) {
            this.maxProductIndex++;
            var el = $('featuredProducts').down('LI', this.maxProductIndex);
            if (! el) {
                this.maxProductIndex--;
                break;                
            } else if (this.maxProductIndex == 0) {
                el.addClassName('current');
            } else {
                el.hide();
            }
            Event.observe(el, 'mouseenter', this.descOnMouseEnter.bind(this));
            Event.observe(el, 'mouseleave', this.descOnMouseLeave.bind(this));
        }
        
        this.prevLink = content.down('#featuredProductsNavigation .prev A');
        this.nextLink = content.down('#featuredProductsNavigation .next A');

        Event.observe(this.prevLink, 'click',  this.prevOnClick.bind(this));
        Event.observe(this.nextLink, 'click',  this.nextOnClick.bind(this));

        this.startAutoAnimate(4);
    },



  /**** Event Handlers ****/

    /**
     * onmouseenter handler for featured product descrption block. Temporarily
     * suspends the automatic animation.
     *
     * @param Event event
     */
    descOnMouseEnter : function (event)
    {
        event.stop();
        this.stopAutoAnimate();
    },

    /**
     * onmouseleave handler for featured product descrption block. Temporarily
     * resumes the automatic animation.
     *
     * @param Event event
     */
    descOnMouseLeave : function (event)
    {
        event.stop();
        this.startAutoAnimate(2);
    },

    /**
     * onclick handler for the previous product link. Scrolls the product
     * carousel to the right.
     *
     * @param Event event
     */
    prevOnClick : function (event)
    {
        event.stop();
        this.stopAutoAnimate();
        this.showPrevious();
    },

    /**
     * onclick handler for the next product link. Scrolls the product
     * carousel to the left.
     *
     * @param Event event
     */
    nextOnClick : function (event)
    {
        event.stop();
        this.startAutoAnimate(4);
        this.showNext();
    },



  /**** Animation ****/

    /**
     * Starts the automatic animation timer after the specified delay.
     *
     * @param int delay in seconds
     */
    startAutoAnimate : function (delay)
    {
        this.stopAutoAnimate();
        this.autoAnimateTimer = window.setTimeout(this.autoAnimateNext.bind(this), (delay * 1000));
    },
    
    /**
     * Stops the automatic animation timer.
     */
    stopAutoAnimate : function ()
    {
        window.clearInterval(this.autoAnimateTimer);
    },
    
    /**
     * Animates to the next featured product and resets the timer.
     */
    autoAnimateNext : function ()
    {
        this.stopAutoAnimate();
        this.autoAnimateTimer = window.setTimeout(this.autoAnimateNext.bind(this), 4000);
        this.showNext();
    },
    
    /**
     * Scrolls the product carousel to the right.
     */
    showPrevious : function ()
    {
        var currentIndex = this.productIndex;

        if (this.productIndex == 0) {
            this.productIndex = this.maxProductIndex;
        } else {
            this.productIndex--;
        }
        var nextIndex = this.productIndex;

        var currentPhoto = $('featuredProductPhotos').down(currentIndex);
        currentPhoto.setStyle({left: currentPhoto.positionedOffset().left + 'px'});

        var nextPhoto = $('featuredProductPhotos').down(nextIndex);
        nextPhoto.setStyle({left: '-' + (nextPhoto.getWidth() + 10) + 'px'});
        
        this._animatePhotos(currentPhoto, nextPhoto, 'prev');
        this._animateDescription();
    },

    /**
     * Scrolls the product carousel to the left.
     */
    showNext : function ()
    {
        var currentIndex = this.productIndex;

        if (this.productIndex == this.maxProductIndex) {
            this.productIndex = 0;
        } else {
            this.productIndex++;
        }
        var nextIndex = this.productIndex;

        var currentPhoto = $('featuredProductPhotos').down(currentIndex);
        currentPhoto.setStyle({left: currentPhoto.positionedOffset().left + 'px'});

        var nextPhoto = $('featuredProductPhotos').down(nextIndex);
        nextPhoto.setStyle({left: ($('pageContent').getWidth() + 10) + 'px'});

        this._animatePhotos(currentPhoto, nextPhoto, 'next');
        this._animateDescription();
    },

    _animatePhotos : function (currentPhoto, nextPhoto, direction)
    {
        var contentWidth = $('pageContent').getWidth();
        
        var newLeft = 0;
        if (direction == 'prev') {
            newLeft = contentWidth + 10;
        } else {
            newLeft = '-' + (currentPhoto.getWidth() + 10);
        }

        nextPhoto.show();
        new Effect.Parallel([
                new Effect.Morph(currentPhoto,
                    {sync: true, style: {left: newLeft + 'px'},
                     afterFinish: function (effectObj) { effectObj.element.hide(); }
                    }),
                new Effect.Morph(nextPhoto,
                    {sync: true, style: {left: (contentWidth * 0.4) + 'px'},
                     afterFinish: function (effectObj) { effectObj.element.setStyle({left: '40%'}); }
                    })
            ], {
                duration: 0.8
            });
    },
    
    _animateDescription : function ()
    {
        var currentDescription = $('featuredProducts').down('LI.current');
        var nextDescription    = $('featuredProducts').down('LI', this.productIndex);
        
        currentDescription.removeClassName('current');
        nextDescription.addClassName('current');
        
        new Effect.Opacity(currentDescription, {
            from: 1.0, to: 0.0, duration: 0.4,
            afterFinish: function () {
                currentDescription.hide();
                nextDescription.setStyle({opacity: 0.0}).show();
                new Effect.Opacity(nextDescription, {from: 0.0, to: 1.0, duration: 0.4});
            }
        });
    }
    
};


/**
 * Manages the item detail page.
 *
 * @var Class
 */
WFTDA.Store.ItemDetail = {

    init : function ()
    {
        $$('DIV.itemPhotos UL.thumbnails A').each(function (link) {
            Event.observe(link, 'click',  WFTDA.Store.ItemDetail.thumbnailClick.bindAsEventListener(link));
        });
    },
    
    thumbnailClick : function (event)
    {
        event.stop();
        
        var link = $(this);
        
        link.up('UL').getElementsBySelector('A').each(function (el) {
            el.removeClassName('current');
        });
        link.addClassName('current');
        
        var newBackgroundImage = this.getStyle('background-image').replace(/thumb/g, 'full');
        link.up('.itemPhotos').setStyle({backgroundImage: newBackgroundImage});
    }

};
document.observe('dom:loaded', WFTDA.Store.ItemDetail.init);