var navActive    = null;
var subnavActive = null;
$(document).ready(function(){
    // remember page' active top link
    $('.navigation ul.nav .lft-on').each(function(){ navActive = $(this).attr('id'); });
    
    // add hover events to each top link
    $('.navigation ul.nav .lft').each(function(){
        $(this).hover(function(){
            // make class active
            $(this).removeClass('lft').addClass('lft-on');
            // also right li
            $('#' + $(this).attr('id').replace('lft', 'rgt')).removeClass('rgt').addClass('rgt-on');
            
            // get subnav layer
            sub = $('#' + $(this).attr('id').replace('nav-lft', 'subnav-layer'));
            if (sub) {
                // update position and show layer
                sub.css('top', $(this).position().top + 21);
                sub.css('left', $(this).position().left);
                sub.show();
            }
        }, function(){
            // only set normal if not active page
            if ($(this).attr('id') != navActive) {
                // left
                $(this).removeClass('lft-on').addClass('lft');
                // right
                $('#' + $(this).attr('id').replace('lft', 'rgt')).removeClass('rgt-on').addClass('rgt');
                // subnav layer
                $('#' + $(this).attr('id').replace('nav-lft', 'subnav-layer')).hide();
            }
        });
    });
    
    $('.navigation .subnav-layer').each(function(){
        // last column of subnav should have no border
        $(this).children().last().removeClass('col').addClass('col-last');
        
        $(this).mouseover(function(){
            // make top link active
            $('#' + $(this).attr('id').replace('subnav-layer', 'nav-lft')).removeClass('lft').addClass('lft-on');
            $('#' + $(this).attr('id').replace('subnav-layer', 'nav-rgt')).removeClass('rgt').addClass('rgt-on');
            // show me
            $(this).show();
        });
        
        $(this).mouseout(function(){
            // set top link inactive
            $('#' + $(this).attr('id').replace('subnav-layer', 'nav-lft')).removeClass('lft-on').addClass('lft');
            $('#' + $(this).attr('id').replace('subnav-layer', 'nav-rgt')).removeClass('rgt-on').addClass('rgt');
            // hide me
            $(this).hide();
        });
        
    });
    
    // remember active subnav link
    $('.subnav div.item-on').each(function(){ subnavActive = $(this).attr('id'); });
    // add hover to each element
    $('.subnav div').each(function(){
        $(this).hover(function(){
            $(this).removeClass('item').addClass('item-on');
        }, function(){
            // only remove if not active link
            if ($(this).attr('id') != subnavActive)
                $(this).removeClass('item-on').addClass('item');
        });
    });
});