/************************************************************** */
/* Tasks done on window load                                    */
/************************************************************** */
$(document).ready(function(){
     
        // save position of quick nav
        var navPosition = $('#quick-nav').offset().left;
        var navTopPosition = $('#quick-nav').offset().top;
        var intID;
     
        // show rollover for quick nav
        $('#quick-nav ul li a')
            .mouseover(function(){
                // get the colour of this item
                var bgColor = $(this).css('border-bottom-color');

                // create the p, style and append & animate in
                $('<p>').html($('span',this).html()).css('background-color',bgColor)
                    .insertAfter($(this).parent().parent())
                    .show("slide", {direction:'right'}, 300);
                    
                // reposition the nav if it's floating
                $('#quick-nav.stick').css('left', '-=' + $('#quick-nav p').outerWidth(true));
            })
            .mouseout(function(){
                // remove the p (and reposition nav)
                $('#quick-nav div,#quick-nav p').remove();
                $(this).parent().parent().parent().filter('.stick').css('left', navPosition - 10);
            });
        
        // show rollover for sub nav
        $('.sub-nav ul li a')
            .mouseover(function(){
                // get the colour of this item
                var bgColor = $(this).css('border-bottom-color');

                // create the p, style and append & animate in
                $('<p>').html('<a href="' + $(this).attr('href') + '">' + $('span',this).html() + '</a>').css('background-color',bgColor)
                    .insertAfter($(this).parent().parent())
                    .show("slide", {direction:'left'}, 300);
                    
            })
            .mouseout(function(){
                // remove the p (do it after 10 milliseconds so you can click on it on the iPad)
                $('.sub-nav div,.sub-nav p').fadeTo(10,0, function()
                {
                    $('.sub-nav div,.sub-nav p').remove();
                });
            })
            .click(function(){
                
                var hashTag = $(this).attr('href');
                
                // scroll to the hash tag
                $('html,body').animate({scrollTop:$(hashTag).offset().top},400,function()
                {
                    // set the hash tag
                    window.location.hash = hashTag;
                });
                return(false);
            });

        // function to show the relevant audio (used twice)
        function showAudio(e)
        {
            // hide the current audio-container and change the name
            $('div.audio-container:visible', e.data.parent).hide("slide", {direction:'up'}, 250, function(i) {
                // and show the selected
                 $('div.audio-container', e.data.parent).eq(e.data.index).show("slide", {direction:'up'}, 500);
            })
            
            $('div.audio.first>p.name', e.data.parent).html(e.data.name);
        }
        
        // for each audio selector on each page
        $('div.audio-selector').each(function() {
            
            // create a sub nav for audio elements
            if ($('div.audio', this).length > 1)
            {
            
                // create the sub nav
                var subNav = $('<div/>').addClass('audio-nav').append('<ul/>');
            
                // hide all the audios (except the first)
                $('div.audio', this)
                    .slice(1).hide()
                    .end()
                    .each(function(i){
                    
                        // create an li in the subnav for each audio and set up rollovers & click events
                        var li = $('<li>')
                            .wrapInner($('<a href="javascript:void(0)" />')
                                .mouseenter(function(){
                                    // create the p, style and append & animate in (only if no touch events)
                                    if (!('ontouchstart' in document)){
                                        $('<p class="name">').html($('<a href="javascript:(0)" />').html($('span',this).html()).click({index:i,name:$('p.name',this).html()}, showAudio))
                                            .insertAfter($(this).parent().parent())
                                            .show("slide", {direction:'right'}, 300);
                                    }
                                })
                                .mouseleave(function(){
                                    // remove the p 
                                    $('div.audio-nav div,div.audio-nav p').remove();
                                })
                                .click({index:i,parent:$(this).parent(),name:$('p.name',this).html()}, showAudio)
                                .html(i+1).append($('<span/>').html($('p.name',this).html()))
                            );    
                        
                        // add the li to the ul    
                        $('ul',subNav).append(li);
                        
                        // copy all the other audio-containers over to the first item (this will be shown on click)
                        if (i>0)
                        {
                            $('div.audio-container', this).clone().hide().appendTo($('div.audio.first', $(this).parent()));
                        }

                    })
                    .slice(1).remove();
                
                // add the subnav 
                $('div.audio p', this).eq(0).after(subNav);
            }
        });
        
        // set scroll for top links
        $('[href="#top"]')
            .click(function(){
                
                var hashTag = "#top";
                
                // scroll to the hash tag
                $('html,body').animate({scrollTop:$(hashTag).offset().top},400,function()
                {
                    // set the hash tag
                    window.location.hash = hashTag;
                });
                return(false);
            });
        
        // sticky nav function
        function stickyNav()
        {
            
            if ($(window).scrollTop() > navTopPosition - 10) 
            {
                if (!$('#quick-nav').hasClass('stick')) $('#quick-nav').addClass('stick').css('left',navPosition - 10);
            } else {
                $('#quick-nav').removeClass('stick');
            }
        };
        
        // only do sticky nav for non <=ie7
        if (!$.browser.msie || ($.browser.msie && parseInt($.browser.version, 10)) > 7) 
        {
            $(window).scroll(stickyNav);
            stickyNav();
        }
        
     });