(function()
{
    var
    window = this, // Will speed up references to window, and allows munging its name.
    CitySpotlight = window.CitySpotlight = {  // Now create the object so it can be used.

        spotlightActive: false,

        initSpotlight: function()
        {
            // Override a jQuery method to prevent errors.
            this.overrideJQueryFx();

            var spotlightTabs = jQuery('#spotlightTabs').children();
            spotlightTabs.each(function()
            {
                var tab = jQuery(this);
                tab.bind('click', function()
                {
                    jQuery('#spotlightTabs .spotlightTabCurrent').removeClass('spotlightTabCurrent');
                    tab.addClass('spotlightTabCurrent');
                    var spotlightItem = tab.attr('id').replace('spotlightTab_', 'spotlightItem_');
                    CitySpotlight.slideSpotlightArrow(tab);
                    CitySpotlight.showSpotlightItem(spotlightItem);
                });
            });
        },

        slideSpotlightArrow: function(tab)
        {
            var spotlightArrow = jQuery('#spotlightArrow');

            var tabPosition = tab.position();
            var tabMarginTop = parseInt(tab.css('marginTop'), 10);
            var tabHeight = parseInt(tab.height(), 10);
            var arrowHeight = parseInt(spotlightArrow.height(), 10);
            var newArrowOffset = (tabHeight / 2) - (arrowHeight / 2);
            var newArrowPosition = tabPosition.top + tabMarginTop + newArrowOffset;

            spotlightArrow.stop();
            spotlightArrow.animate({'top': newArrowPosition}, {'duration': 350, 'easing': 'backEaseIn'});
        },

        showSpotlightItem: function(spotlightItemId)
        {
            var currentSpotlight = jQuery('.visibleSpotlight, #spotlightContents div:animated');

            // Check if the current spotlight item(s) is the same as the requested.
            // In that case do nothing, and just return without an animation.
            // This will also prevent double clicking on an currently inactive spotlight
            var skipAnimation = false;
            currentSpotlight.each(function(i){
                if (jQuery(this).attr('id') == spotlightItemId) {
                    skipAnimation = true;
                }
            });
            if (skipAnimation) {
                return;
            }

            // To prevent multiple animation and overlapping etc.. we check if the spotlight is currently active.
            // If that is the case, we stop all the animations, and then they can be hidden again.
            var hideDuration = 350;
            if (this.spotlightActive) {
                hideDuration = 50;
                currentSpotlight.stop();
            }

            this.spotlightActive = true;
            // Remove the current spotlight item from the view.
            var currentZIndex = currentSpotlight.css('zIndex');
            currentSpotlight.css('zIndex', currentZIndex - 5);
            currentSpotlight.animate({'opacity': '0'}, {
                'duration': hideDuration,
                'complete': function()
                {
                    currentSpotlight.addClass('hiddenSpotlight').removeClass('visibleSpotlight');
                    currentSpotlight.removeAttr('style');
                }
            });

            // Get the new spotlight item, and show this item.
            var spotlightItem = jQuery('#' + spotlightItemId);
            spotlightItem.animateToClass('visibleSpotlight', {
                'duration': 450,
                'easing': 'bounceEaseOut',
                'complete': function()
                {
                    spotlightItem.addClass('visibleSpotlight').removeClass('hiddenSpotlight');
                    spotlightItem.removeAttr('style');
                    CitySpotlight.spotlightActive = false;
                },
                'CitySpotlight': true
            });
        },

        /**
         * We need to override this part of jquery special for this script only.
         * To prevent IE errors and FireFox/Opera warnings.
         */
        overrideJQueryFx: function()
        {
            var fx_step_default = jQuery.fx.step._default;
            jQuery.fx.step._default = function(fx)
            {
                // When not to CitySpotlight, use the default method.
                if (!fx.options.CitySpotlight) {
                    return fx_step_default(fx);
                }
                jQuery(fx.elem).css(fx.prop, fx.now);
            };
        }
    };
}());

// Load the buttons after the page has been loaded.
jQuery(document).ready(function()
{
    CitySpotlight.initSpotlight();
});