(function($) {
    $.fn.dockHero = function(options) {    
        //Build main options before element iteration
        opts = $.extend({}, $.fn.dockHero.defaults, options);
        
        dockHeroSelector = this.selector;
    
        //Iterate and initialise the hero
        return this.each(function() {
            var elem = $(this);
            
            initDockPreview(elem.find(opts.previewSelector));
            initDockContent(elem.find(opts.contentSelector));
            initAutoAnimation();
        });
    };
    
    var opts = {};
    var dockHeroSelector = '';
    var animationIntervalId = 0;
    var animationTimesRepeated = 0;
    
    function initDockPreview(dockPreview)
    {
        //Set up our our preview items
        dockPreview.find('li').each(function(){
            var previewItem = $(this);
            initDockPreviewItem(previewItem);
            
            //Add mouseover functionality to activate the item and stop the auto animation
            previewItem.hoverIntent(function(){
                stopAutoAnimation();                
                activatePreviewItem(previewItem);
            },
            function(){
            });
        });
    };
    
    function initDockPreviewItem(previewItem)
    {
        //Set up the colour and greyscale images
        var img = previewItem.find('img');
        img.addClass('colour');
        
        //If the item is not active then hide the colour version
        var isActive = previewItem.hasClass(opts.activePreviewItemClass);
        if (!isActive)
        {
            img.addClass('fadeOut');
        }
        else
        {
            img.addClass('fadeIn');
        }
        
        //We only want the link to be clickable if the item is active
        previewItem.find('a').click(function(){
            return previewItem.hasClass(opts.activePreviewItemClass);
        });
    };
    
    function activatePreviewItem(previewItem)
    {
        //Only activate if the selected preview item is not already active
        if (!previewItem.hasClass(opts.activePreviewItemClass))
        {
            if (!IsAnimating())
            {
                var previewItemParent = previewItem.parent();
            
                //Deactivate the currently selected item
                var activePreviewItem = previewItemParent.find('li.'+opts.activePreviewItemClass);
                deactivatePreviewItem(activePreviewItem);
                
                //Activate this item
                focusPreviewItem(previewItem);
                previewItem.addClass(opts.activePreviewItemClass);
                
                //Activate the relevant content item
                var itemIndex = previewItemParent.find('li').index(previewItem);
                var contentItem = $(dockHeroSelector).find(opts.contentSelector)[itemIndex];
                activateContentItem($(contentItem));
            }
        }
    };
    
    function focusPreviewItem(previewItem)
    {    
        //If the item is faded out or is fading out, then fade it in
        var colourImg = previewItem.find('img.colour');
        if (colourImg.hasClass('fadeOut'))
        {
            colourImg.removeClass('fadeOut').addClass('fadeIn');
            
            //Animate the image
            var imgContainer = previewItem.find('p.dockHeroPreviewImage');
            imgContainer.animate({'bottom':'+=23px'}, opts.previewItemGrowthDuration, 'swing');
        }
    };
    
    function deactivatePreviewItem(previewItem)
    {
        //Deactivate the item
        blurPreviewItem(previewItem);        
        previewItem.removeClass(opts.activePreviewItemClass);
    };
    
    function blurPreviewItem(previewItem)
    {  
        //If the item is faded in or is fading in, then fade it out
        var colourImg = previewItem.find('img.colour');
        if (colourImg.hasClass('fadeIn'))
        {
            colourImg.removeClass('fadeIn').addClass('fadeOut');
            
            //Animate the image
            var imgContainer = previewItem.find('p.dockHeroPreviewImage');
            imgContainer.animate({'bottom':'-=23px'}, opts.previewItemGrowthDuration, 'swing');
        }
    };
    
    function initDockContent(contentItems)
    {
        contentItems.each(function(){
            var contentItem = $(this);
            if (!contentItem.hasClass(opts.activeContentItemClass))
            {
                contentItem.fadeTo(0, 0).hide();
            }
        });
    };
    
    function activateContentItem(contentItem)
    {        
        //Only activate if the selected content item is not already active
        if (!contentItem.hasClass(opts.activeContentItemClass))
        {
            //Deactivate the currently selected item
            var activeContentItem = contentItem.parent().find('div.'+opts.activeContentItemClass);
            var activeContentItemHeight = activeContentItem.height();
            
            contentItem.addClass(opts.transitionalContentItemClass).show();            
            var contentItemHeight = contentItem.height();
            contentItem.removeClass(opts.transitionalContentItemClass).hide();
            
            if (activeContentItemHeight != contentItemHeight)
            {
                var heightAdjustment = '+='+(contentItemHeight - activeContentItemHeight)+'px';
                if (activeContentItemHeight > contentItemHeight)
                {
                    heightAdjustment = '-='+(activeContentItemHeight - contentItemHeight)+'px';
                }
                activeContentItem.animate(
                    {'height':heightAdjustment},
                    opts.contentAdjustmentDuration,
                    'swing',
                    function(){
                        swapContentItems(activeContentItem, contentItem);
                    });
            }
            else
            {
                swapContentItems(activeContentItem, contentItem);
            }
            
            //swapContentItems(activeContentItem, contentItem);
        }
    };
    
    function swapContentItems(activeContentItem, contentItem)
    {
        var dockHero = $(dockHeroSelector);
        dockHero.css('height', activeContentItem.outerHeight(true)+'px');
        
        activeContentItem
            .css('width', activeContentItem.outerWidth(true))
            .css('height', activeContentItem.height())
            .addClass(opts.transitionalContentItemClass)
            .removeClass(opts.activeContentItemClass)
            .fadeTo(
                opts.contentFadeDuration,
                0,
                function(){
                    $(this).hide().removeClass(opts.transitionalContentItemClass).css('width', 'auto').css('height', 'auto');
                }
            );
            
        contentItem
            .show()
            .addClass(opts.activeContentItemClass)
            .addClass(opts.transitionalContentItemClass)
            .css('width', contentItem.outerWidth(true))
            .css('height', contentItem.height())
            .fadeTo(
                opts.contentFadeDuration,
                1,
                function(){
                    $(this).css('height', 'auto').removeClass(opts.transitionalContentItemClass);
                    dockHero.css('height', 'auto');
                }
            );
    };
    
    function IsAnimating()
    {
        var dockHero = $(dockHeroSelector);
        var activePreviewItem = dockHero.find(opts.previewSelector + ' li.' + opts.activeDockPreviewItem);
        var activeContentItem = dockHero.find(opts.contentSelector + '.' + opts.activeContentItemClass);
        
        return (activePreviewItem.is(':animated') || activeContentItem.is(':animated'));
    };    
    
    function initAutoAnimation()
    {    
        if (opts.autoAnimate)
        {
            //Set up the automatic animations
            startAutoAnimation();
        }
    };
    
    function startAutoAnimation()
    {
        //Create an interval to move the dock item along one when the interval is reached
        animationIntervalId = setInterval(activateNextDockItem, opts.autoAnimateInterval);
    };
    
    function stopAutoAnimation()
    {
        //Clear the interval
        clearInterval(animationIntervalId);
    };
    
    function activateNextDockItem()
    {
        var dockHero = $(dockHeroSelector);
        var dockPreview = dockHero.find(opts.previewSelector);
        var activePreviewItem = dockPreview.find('li.' + opts.activePreviewItemClass);
        var nextPreviewItem;
        
        //Find out what the next item is so we can move it along
        if (activePreviewItem.is(':last-child'))
        {
            nextPreviewItem = dockPreview.find('li:first-child');
            
            //If we're at the end then we need to flag that the animation has completed
            animationTimesRepeated++;
        }
        else
        {
            nextPreviewItem = activePreviewItem.next();
        }
        
        //Activate the next item
        activatePreviewItem(nextPreviewItem);
        
        if (opts.autoAnimateRepetitions > 0)
        {
            //Check if we need to stop the animation
            if (animationTimesRepeated == opts.autoAnimateRepetitions)
            {
                stopAutoAnimation();
            }
        }
    };
  
    //Plugin defaults
    $.fn.dockHero.defaults = {
        previewSelector: 'div.dockPreview',
        activePreviewItemClass: 'activeDockPreviewItem',
        previewItemImgFadeDuration: 400,
        previewItemGrowthDuration: 400,
        contentSelector: 'div.dockContent',
        activeContentItemClass: 'activeDockContent',
        contentFadeDuration: 400,
        transitionalContentItemClass: 'transitionalDockContent',
        contentAdjustmentDuration: 400,
        autoAnimate: true,
        autoAnimateInterval: 5000,
        autoAnimateRepetitions: 1
    };
})(jQuery);

$(document).ready(function(){
    $('div.dockHero').dockHero();
});