(function (window, document, undefined) {

    "use strict";

    var boardroom = $('.boardroom'),
        keyword = $('.keyword'),
        output = $('.boardroom-output'),
        boxSpeed = 500, strokeSpeed = 4000;

    $(function () {
        boardroom.css('opacity', 0.15);
        keyword.css({ 'top': '335px', 'left': '412px' });
        $('.keyword, .stroke').css({ 'opacity': '0' });

        setTimeout(function () { boardroom.animate({ 'opacity': '1' }, 500); }, 1500);
        setTimeout(function () {
            // Animate the strokes
            $('.stroke').animate({ opacity: '1' }, strokeSpeed);

            // Animate the boxes
            $.when(
                $('#sales').animate({ 'top': 218, 'left': 60, 'opacity': 1 }, boxSpeed),
                $('#profits').animate({ 'top': 163, 'left': 86, 'opacity': 1 }, boxSpeed),
                $('#recruitment').animate({ 'top': 108, 'left': 134, 'opacity': 1 }, boxSpeed),
                $('#competitiveness').animate({ 'top': 57, 'left': 202, 'opacity': 1 }, boxSpeed),
                $('#speed').animate({ 'top': 22, 'left': 380, 'opacity': 1 }, boxSpeed),
                $('#transformation').animate({ 'top': 57, 'left': 598, 'opacity': 1 }, boxSpeed),
                $('#engagement').animate({ 'top': 108, 'left': 678, 'opacity': 1 }, boxSpeed),
                $('#growth').animate({ 'top': 163, 'left': 734, 'opacity': 1 }, boxSpeed),
                $('#unity').animate({ 'top': 218, 'left': 784, 'opacity': 1 }, boxSpeed)
            // Set up the hover events, once the animation is complete
                ).done(initHoverEvent);
        }, 2500);
    });

    function initHoverEvent() {
        $('.boardroom').on('mouseenter mouseleave', '.keyword', function (event) {
            var keyword = $(this);
            switch (event.type) {
                case 'mouseenter':
                    keyword.siblings('.keyword').stop().animate({ opacity: '0.5' }, 500);
                    output.html('"' + keyword.find('.hiddenPara').html() + '"');
                    break;
                case 'mouseleave':
                    keyword.siblings('.keyword').stop().animate({ 'opacity': '1' }, 500);
                    output.html("");
                    break;
            }
        });
    }

})(window, document);