/**
 * Animate Schoos Group home navigation.
 * Needs special HTML and CSS structure to make this work:
 *
 *   <!-- Fixed size link gets events -->
 *   <a class="container">
 *     <span class="image1">CSS-background, image always visible</span>
 *     <span class="image2">CSS-background and fading</span>
 *   </a>
 *
 * Also add VideoJS player with basic/default settings.
 *
 * REQUIREMENTS
 * - MooTools Core 1.2.1
 * - MooTools More 1.2.4.4
 * - VideoJS v2.0.2
 *
 * CHANGELOG
 * - 1.0.4 | 2012-02-03 [FIX]
 *           Removed VideoJS integration.
 * - 1.0.3 | 2011-09-01
 *           Added VideoJS integration (local test only).
 * - 1.0.2 | 2011-05-05
 *           ...
 *
 * @date       2012-02-03, 2011-09-01
 * @since      2011-03-25
 * @author     Christian Oellers <c.oellers@*.de>
 * @copyright  Alldesign, www.alldesign.de
 * @version    1.0.4
 */
window.addEvent('domready', function()
{
    // --------------------------------------------------------------------------------------------------------- VIDEOJS

    /**
     * Add VideoJS player to the DOM.
     */
    /** /
    VideoJS.DOMReady(function()
    {
        var vPlayer = VideoJS.setup('videoHome',
        {
            preload             : true,
            autoplay            : false,
            linksHiding         : true,
            useBuiltInControls  : false,
            controlsHiding      : true,
            controlsAtStart     : false,
            controlsBelow       : false,
            defaultVolume       : 0.85,
            playerFallbackOrder : ['html5', 'flash', 'links'],
            flashPlayer         : 'htmlObject',
            flashVersion        : 9
        });

        // vPlayer.play();
    });
    /**/

    // ------------------------------------------------------------------------------------------------------ NAVIGATION

    /**
     * Fade-animate two nested elements
     * in/out on mouse interaction.
     *
     * @param  el       Container element.
     * @param  elChild  Children element.
     */
    var AnimateLinks = function(el, elChild)
    {
        /**
         * Element animation.
         */
        var _morphChild = function(child, targetValue)
        {
            child.set('morph',
            {
                duration   : 650,
                link       : 'cancel',
                transition : 'sine:in:out'
            });

            child.morph({'opacity' : targetValue});
        };

        /**
         * Event handling.
         */
        $$(el).addEvents
        ({
            'mouseenter' : function()
            {
                _morphChild(this.getChildren(elChild), 0);
            },
            'mouseleave' : function()
            {
                _morphChild(this.getChildren(elChild), 1);
            }
        });
    };

    /**
     * Run animation function.
     */
    AnimateLinks('.domain', '.text');
});