$(document).ready(function(){

    // MENU:
    var menu = $('.menu').first();
	initMenu(menu);

    // check hash for deep linking:
    if( window.location.hash ){
       var url = window.location.hash.substring(1);
       var activeLink = $('a[href*="'+url+'"]');
       activeLink.addClass('active');
       if( url != '' && url != '404.html' ){
           closeMenu(menu);
           $('.highlight').removeClass('highlight');
       }
       updateMagicFrame(url, activeLink.html() );
    }

    // resize frame
    resizeMagicFrame();
    $(window).resize(function() {
        resizeMagicFrame();
    });

    // toggle frame
    $('.toggle').click(function(){
        toggleMagicFrame();
    });

});



/**
 * RESIZE MAGIC FRAME
 */
var resizeMagicFrame = function(){
    var window_height = $(window).height()
    var header_height = $('header').height();
    var footer_height = $('footer').height();
    var iframe_height = window_height-header_height-footer_height;
    $('#magicFrame').css({
        'margin-top'    : header_height+'px',
        'height'        : iframe_height+'px'
    });
}


/**
 * UPDATE MAGIC FRAME
 */
var updateMagicFrame = function(url, title){
    if( url=='' ){
        url = '404.html';
        $('#pageTitle').hide();
    } else {
        $('#pageTitle').show();
    }
    $('#magicFrame').attr('src',url);
    // set hash for deep linking
    window.location = '#'+url;
    // set page title:
    $('#pageTitle').children('h2').html(title);
}


/**
 * TOGGLE MAGIC FRAME
 */
var toggleMagicFrame = function(){

    var container = $('#magicFrame').parent();

    if( container.hasClass('fullWidth')){
        container.removeClass('fullWidth');
        container.addClass('fixedWidth');
        $('.toggle').html('<>');
    } else {
        container.removeClass('fixedWidth');
        container.addClass('fullWidth');
        $('.toggle').html('><');
    }
}


var initMenu = function(menu){

    menu.data('height', menu.height());

    menu.mouseover(function(){
            openMenu(menu);
        })
        .mouseleave(function(){
            closeMenu(menu);
        });

    // MENU ITEMS:
    initMenuLinks(menu);
    
    // SUB SECTIONS:
    initSubSections();
}


var openMenu = function(menu){
    if( $('.active').parent().parent().hasClass('vertical') ){
        $('.active').parent().siblings().show();
    }
    menu.addClass('open');
    //menu.stop().animate({'height': menu.data('height')+'px'},'fast');
    menu.stop().animate({'height':'200px'},'fast');
    menu.children('ul').stop().animate({'margin-top':'0px'}, 'fast');
    $('.longline').height('115px');
}

var closeMenu = function(menu){
    var menuHeight = menu.data('height');
    if( $('.active').length ){
        var activeSection   = $('.active').first().closest('.section');
        var index           = $('.section').index(activeSection);
        menuHeight          = 32;
        var offset          = index*-menuHeight;
        
        menu.children('ul').stop().animate({'margin-top':offset+'px'}, 'fast');

        if( $('.active').parent().parent().hasClass('vertical') ){
            var activeItem = $('.active').parent();
            var activeList = activeItem.parent();
            $('.vertical').hide();
            activeList.show();
            activeItem.siblings().hide();
        }

        menuHeight = 24;
    } else {
        $('.vertical').hide();
    }

    menu.removeClass('open');

    menu.stop().animate({'height': menuHeight+'px'},'fast');
}

var initMenuLinks = function(menu){
    menu.find('a').click(function(e){
       e.preventDefault();
       $('.active').removeClass('active');
       $(this).addClass('active');

       var url   = $(this).attr('href');
       var title = $(this).html();
       updateMagicFrame(url, title);
    });
}


var initSubSections = function(){
    $.each( $('.subSection'), function(){
        var width = $(this).children(':first-child').width();
        $(this).width(width);
        $(this).mouseover(function(){
            $('.highlight').removeClass('highlight');
            $('.vertical').hide();
            $(this).children('.vertical').show();
        });
        var subSection = $(this);
        $(this).find('a').click(function(){
            subSection.addClass('highlight');
        });
    });
}