//
// navigation.js
//
// controls for the jQuery powered nav bar.
//

$(function() {
    // add actors to the top level elements to make them
    // show the subnav if they have one.
    var navUlElements = $('#navigation').children('li');

    navUlElements.each(function(i) {
        var link   = $(this).children('a');
        var subNav = $(this).children('ul');

        if (subNav.length > 0 ) {
            // has a subnav so set the action to show the subnav, not
            // follow the link and append an arrow image.
            link.click(function(event) { // on click
                event.preventDefault();
                // hide all the subNavs....
                if (subNav.css('display') == 'block') {
                    hideSubNavs();
                } else {
                    hideSubNavs();
                    // set the x loc.
                    var height = $(this).height();
                    var pos    = $(this).position();
                    subNav.css('top',  (pos.top + height + 5) + 'px');
                    subNav.css('left', pos.left + 'px');
                    subNav.show('slow');
                }
            });

            // add the image.
            var img = $('<img>').attr('src',    '/images/arrow_down.png')
                                .attr('width',  '20')
                                .attr('height', '20')
                                .attr('border', '0')
                                .addClass('bottomalign');
            link.append(img);

            // now recurse into the sub nav and add any sub-subnavs.
            subNav.children('li').each(function(i) {
                var subLink   = $(this).children('a');
                var subSubNav = $(this).children('ul');

                // if we have a sub-subnav, apply a toggle click on the subnav.
                if (subSubNav.length > 0) {
                    subLink.click(function(e) {
                        e.preventDefault();
                        if ($(subSubNav).css('display') != 'block') {
                            $(subSubNav).show('slow');
                            //$(subSubNav).show('slide', { direction: "left" }, 500);
                        } else {
                            $(subSubNav).hide(0);
                            //$(subSubNav).hide('slide', { direction: "left" }, 500);
                        }
                    });

                    // add a right arrow to the link,
                    var subImg = $('<img>').attr('src',    '/images/arrow_right_pink.png')
                                           .attr('width',  '20')
                                           .attr('height', '20')
                                           .attr('vspace', '1')
                                           .attr('border', '0');
                    subLink.append(subImg);

                    // now pllace the subnav to the right of the image
                    var left = $(this).parent().width() + 12;
                    var top  = 20 * i;
                    subSubNav.css('left', left + 'px');
                    subSubNav.css('top',  top + 'px');
                }
            });
        }
    });
});

function hideSubNavs() {
    // hide the subnavs.
    $('#navigation').children('li')
                    .each(function() {
        $(this).children('ul').hide()
                              .children('li').children('ul').hide();
    });
};