﻿function buildMenu() {
    /// wrap inner content of each anchor with first layer and append background layer
    $("#menu li a").wrapInner('<span class="out"></span>').append('<span class="bg"></span>');

    // loop each anchor and add copy of text content
    $("#menu li a").each(function() {
        $('<span class="over">' + $(this).text() + '</span>').appendTo(this);
    });

    $("#menu li a").hover(
        function() {
            var o = $(this);
            $(".out", o).stop().animate({ 'top': '30px' }, 250); // move down - hide
            $(".over", o).stop().animate({ 'top': '0px' }, 250); // move down - show
            $(".bg", o).stop().animate({ 'top': '0px' }, 120); // move down - show
        },
        function() {
            var o = $(this);
            $(".out", o).stop().animate({ 'top': '0px' }, 250); // move up - show
            $(".over", o).stop().animate({ 'top': '-30px' }, 250); // move up - hide
            $(".bg", o).stop().animate({ 'top': '-30px' }, 120); // move up - hide
        });
    
}
