function onFeaturedProductThumbnailClicked(productName)
{
    var featuredProductInformation = $('FeaturedProduct-' + productName);

    selectFeaturedProduct(productName);

    if(featuredProductInformation)
    {
        var viewportOffset = featuredProductInformation.viewportOffset();
        var dimensions = featuredProductInformation.getDimensions();
        var documentViewportDimensions = document.viewport.getDimensions();

        // Scroll the featured product into view if it isn't already
        if(viewportOffset.top < 0 || viewportOffset.left < 0 || (viewportOffset.top + dimensions.height) > documentViewportDimensions.height || (viewportOffset.left + dimensions.width) > documentViewportDimensions.width)
        {
            Effect.ScrollTo(featuredProductInformation);
        }
    }
}

function selectFeaturedProduct(productName)
{
    var featuredProductInformation = $('FeaturedProduct-' + productName);
    var featuredProductThumbnail = $('FeaturedProductThumbnail-' + productName);

    // Remove the selected class name from every thumbnail
    $$('.FeaturedProductList li a').each(
        function(item)
        {
            item.removeClassName('Selected');
        }
    );

    // Remove the selected class from every featured product details section
    $$('.FeaturedProduct').each(
        function(item)
        {
            item.removeClassName('Selected');
        }
    );

    // Set the selected class to the clicked thumbnail
    $(featuredProductThumbnail).addClassName('Selected');

    if(featuredProductInformation)
    {
        // Set the selected class to the selected featured product details section
        featuredProductInformation.addClassName('Selected');
    }
}

var BannerControllers = new function()
{
    var controllerElement;
    var currentBannerIndex = 0;
    var bannerControllersList = new Array();
    var displayPos = 0;
    var offScreenLeftPos = -604;
    var offScreenRightPos = 604;
    var activeEffect;
    var periodicSwitcher;
    var self = this;

    this.Initialize = function()
    {
        controllerElement = $$('.Primary .BannerControllers')[0];
    
        if ($$('.Primary .PrimaryBanner').length > 1)
        {
            controllerElement.setStyle({
               display:"block"
            });
        }
    
        $$('.Primary .PrimaryBanner').each(function (e, idx) 
        {
            var bannerController = new BannerChoice(e, controllerElement, idx);
            bannerControllersList.push(bannerController);
            
            // Set the initial state
            if (idx == 0)
            {
                e.setStyle({
                    left:0
                });
                bannerController.setSelected(true);
            }
            else
            {
                e.setStyle({
                    left:offScreenRightPos + "px"
                });
            }
        });
        
        var playPause = $$('.Primary .BannerControllers .BannerControllerAction')[0];
        playPause.observe('click', function(e) {
            playPause.toggleClassName('Paused');
            
            if (periodicSwitcher != null)
            {
                PauseBannerAutoSwitch();
            }
            else
            {
                SwitchToNextBanner();
                StartBannerAutoSwitch();
            }
            
            e.stop();
            return false;
        });
        
        self.SwitchBanner(0);
        
        StartBannerAutoSwitch();
    }
    
    function PauseBannerAutoSwitch()
    {
        periodicSwitcher.stop();
        periodicSwitcher = null;
    }
    
    function StartBannerAutoSwitch()
    {
        periodicSwitcher = new PeriodicalExecuter(SwitchToNextBanner, 10);
    }
    
    function SwitchToNextBanner()
    {
        self.SwitchBanner((currentBannerIndex + 1) % bannerControllersList.length, false);
    }
    
    this.SwitchBanner = function(targetBannerIndex, manualSwitch)
    {
        if (currentBannerIndex != targetBannerIndex && !activeEffect)
        {
            if (manualSwitch)
            {
                PauseBannerAutoSwitch();
                StartBannerAutoSwitch();
            }
            
            var currentBannerController = bannerControllersList[currentBannerIndex];
            var currentBannerElement = bannerControllersList[currentBannerIndex].bannerElement;
            currentBannerController.setSelected(false);
            var targetBannerController = bannerControllersList[targetBannerIndex];
            var targetBannerElement = bannerControllersList[targetBannerIndex].bannerElement;
            targetBannerController.setSelected(true);

            // Animate the new banner into view and the current one out of view
            activeEffect = new Effect.Parallel([
                new Effect.Move(currentBannerElement, {sync:true, x:offScreenLeftPos, y:0, mode:'absolute', duration: 0.5}), 
                new Effect.Move(targetBannerElement, {sync:true, x:displayPos, y:0, mode:'absolute', duration: 0.5})
            ],
            {
                duration:0.5,
                afterFinish: function() {
                    // Move the previously visible banner to off-screen right so it can be slid in in the future
//                    new Effect.Move(currentBannerElement, {x:offScreenRightPos, y:0, mode:'absolute', transition:Effect.Transitions.full});
                    currentBannerElement.setStyle({
                        left:offScreenRightPos + "px"
                    });

                    activeEffect = null;
                }
            });

            currentBannerIndex = targetBannerIndex;
        }
    }
}

BannerChoice = function(_element, _controllerEl, _index)
{
    this.bannerElement = _element;
    var bannerControllerEl;
    var controllersContainerEl = _controllerEl;
    var index = _index;

    function constructor()
    {
        bannerControllerEl = new Element('a', {'href':'#', 'class':'BannerController'});
        bannerControllerEl.observe('click', ShowBanner);
        controllersContainerEl.insert(bannerControllerEl);
    }

    function ShowBanner(e)
    {
        BannerControllers.SwitchBanner(index, true);

        e.stop();
        return false;
    }
    
    this.setSelected = function(selected)
    {
        if (selected)
        {
            bannerControllerEl.addClassName('Selected');
        }
        else
        {
            bannerControllerEl.removeClassName('Selected');
        }
    }

    constructor();
}