/**
 * Created by driesjanssen on 7/4/17.
 */
/*==========================================================================
 Animations
 ========================================================================== */

/**
 * Hover animation on menuItems
 *
 * 1. Item in a menu that's being hovered
 * 2. Element that shows when hovering (yellow square)
 */

var menuItem = $('.menu-item'); /* 1 */
var hoverEl = $('.hoverEl'); /* 2 */

var menuItemHeight = menuItem.height();

/* Hide the hoverElement beneath the menuItem */
TweenMax.set(hoverEl, {bottom: '-' + menuItemHeight});

/* When hovering a menuItem ... */
menuItem.on('mouseover', function(){
    var currentHoveredEl = $(this).siblings(hoverEl);
    var title = $(this).find('h2');
    var paragraph = $(this).find('p');
    var placeholderTitleParagraph = $(this).find('.placeholder');

    /* Create new TimeLine when hovering a menuItem */
    tlMouseOverMenuItems = new TimelineLite();
    
    tlMouseOverMenuItems.to(currentHoveredEl, 0.5, {autoAlpha: 0.75, bottom: '0', ease:Power1.easeOut})
    .to(placeholderTitleParagraph, 0.3, {top: '50%'}, '-=0.2')
    // .to(title, 0.3, {marginTop: '0rem', ease:Power1.easeOut}, '-=0.3')
    .to(paragraph, 0.4, {autoAlpha: 1, ease:Power1.easeOut}, '-=0.3');
});

menuItem.on('mouseout', function(){
    var currentHoveredEl = $(this).siblings(hoverEl);
    var title = $(this).find('h2');
    var paragraph = $(this).find('p');
    var placeholderTitleParagraph = $(this).find('.placeholder');

    /* Create new TimeLine when stopped hovering a menuItem */
    tlMouseOutMenuItems = new TimelineLite();

    tlMouseOutMenuItems.to(currentHoveredEl, 0.5, {autoAlpha: 0, bottom: '-' + menuItemHeight, ease:Power1.easeOut})
    .to(placeholderTitleParagraph, 0.3, {top: '60%'}, '-=0.2')
    // .to(title, 0.3, {marginTop: '3em', ease:Power1.easeOut}, '-=0.3')
    .to(paragraph, 0.4, {autoAlpha: 0, ease:Power1.easeOut}, '-=0.3');
});