/*
 * JavaScript for TMAG
 **/

$(document).ready(function(){
    
    //Set the speeds for the various banners/sliders
    var sliderSpeed = 10000;
    var bannerSpeed = 10000;
    var shopSpeed = 10000;
    
    //Start the sliders and set their speed using the values provided
    var sliderInterval = setInterval( "slideSwitch('next')", sliderSpeed);
    var shopInterval = setInterval( "shopSwitch()", shopSpeed);
    var bannerInterval = setInterval("bannerSwitch()", bannerSpeed);

    /*If page is front page, select banner at random
    if($("#header").hasClass('front'))
        rotateBanner();*/


    //Show / hide the portal submenus on mouse enter/leave
    $('.portal-header').mouseenter(function(event){
        
        //Slide the submenu down
        $(this).children('.portal-submenu').slideDown('fast');
        
    }).mouseleave(function(event){
        
        //Slide the submenu out of view
        $(this).children('.portal-submenu').slideUp('fast');
        
    })
    
    
    //Show / hide the departmental menu on mouse enter / leave
    $('#department').mouseenter(function(event){
        
        //Show the menu
        $(this).children('#department-submenu').show();
        
    }).mouseleave(function(event){
        
        //Hide the menu
        $(this).children('#department-submenu').hide();
        
    }) 
    
    
    //Show the next slide when the next button is pressed
    $('#slideshow-button-right').click(function(event){
        
        slideSwitch('next');
        
    })
    
    
    //Show the previous slide when the previous button is pressed
    $('#slideshow-button-left').click(function(event){

        slideSwitch('prev');
        
    })
    
    
    //pause / restart the automatic shop rotation and show/hide description on mouse enter/leave
    $('#museum-shop').mouseenter(function(event){
        
        //pause the shop slider
        clearInterval(shopInterval);
        
        //bring the active description to the front by changing its z-index
        $('#museum-shop div.active').css('z-index','14');
        $('#museum-shop h3').addClass('hover');
        
    }).mouseleave(function(event){
        
        //restart the shop slider
        shopInterval = setInterval( "shopSwitch()", shopSpeed);
        
        //move the description back behind the image by changing its z-index
        $('#museum-shop div.active').css('z-index','1');
        $('#museum-shop h3').removeClass('hover');
        
    })
    
    
    //pause / restart the automatic slider rotation on mouse enter/leave
    $('#slideshow-wrapper').mouseenter(function(event){
        clearInterval(sliderInterval);
    }).mouseleave(function(event){
        sliderInterval = setInterval( "slideSwitch('next')", sliderSpeed);
    })
    
    
    //Show / hide the banner image details on mouse enter / leave
    $('#show-details').mouseenter(function(event){
        
        $('#img-detail-box').fadeIn('fast');
        
    }).mouseleave(function(event){
        
        $('#img-detail-box').fadeOut('fast');
        
    })
    
    //Expand / collapse the accordian menus on the third level pages
    $('#side-nav ul li a.top').click(function(event){
        
        //Prevent the a tag from redirecting the page
        event.preventDefault();
        
        //Add the '.open' class to the top level menu item and retrieve it's submenu
        $(this).addClass('open');
        var submenu=$(this).next();
        
        //If the submenu is already open
        if(submenu.hasClass('open')){
            
            //Collapse the submenu and remove the '.open' class from the submenu and the top level list item.
            submenu.slideUp('fast');
            submenu.removeClass('open');
            $(this).removeClass('open');
            
        }
        else{
            
            //Expans the submenu and add the '.open' class to the element
            submenu.slideDown('fast');
            submenu.addClass('open');
        }
        
    })
    
})


/*
 *   Create arrays of banner images and related descriptions and chooses a pair at random. ***REMOVED***
 *

function rotateBanner(){
    
    //Array of banners
    var banners = new Array(
        "banner_01.jpg",
        "banner_02.jpg",
        "banner_03.jpg",
        "banner_04.jpg",
        "banner_05.jpg"
    );
    
    //Array of details for each of the above banners
    var details = new Array(
        "Here the image details for image 1, lorem ipsum dolor. © 2010 copyright holder",
        "Here the image details for image 2, lorem ipsum dolor. © 2010 copyright holder",
        "Here the image details for image 3, lorem ipsum dolor. © 2010 copyright holder",
        "Here the image details for image 4, lorem ipsum dolor. © 2010 copyright holder",
        "Here the image details for image 5, lorem ipsum dolor. © 2010 copyright holder"
    );
    
    //Generate a random number based on the length of the image array and use it to select an image and description at random
    var rand=Math.floor(Math.random()*banners.length);
    var chosen_bg = 'images/banners/home/'+banners[rand];
    var image_details = details[rand];
    
    //Set the #header element to have the chosen background and insert the description in to the #details paragraph.
    $("#header").css('background','url('+chosen_bg+')');
    $('#details').append(image_details);
    
}
 */

/*
 *  Function which changes the slides in the slideshow on the front page
 */

function slideSwitch($direction) {
    
    //Get the currently active image and descriptions
    var $active_img = $('#slideshow-img IMG.active');
    var $active_desc = $('#slideshow-desc div.active');
    
    //If we are moving the slideshow forward
    if($direction=="next"){
        
        //check to see if we are at the last image
        if(!$active_img.next('img').length){
            
            //if we are at the last image, get the first img element in the slideshow to display next
            $next_img = $('#slideshow-img').children('IMG:first');
            $next_desc = $('#slideshow-desc').children('div:first');
            
        }
        else{
            
            //else just next the next image element
            $next_img = $active_img.next('img');
            $next_desc = $active_desc.next('div');
            
        }
        
        //Give the active elements the last-active class to give them a lower z-index than the next elements to be displayed
        $active_img.addClass('last-active');
        $active_desc.addClass('last-active');
        
        //Animate the opacity of the next image to be displayed and give it the '.active' class to bring it to the front
        $next_img.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 500, function() {
            $active_img.removeClass('active last-active');
        });
        
        //Same deal with the next description
        $next_desc.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 500, function() {
            $active_desc.removeClass('active last-active');
        });
        
    }
    
    //If the 'previous' button has been pressed, do everything exactly the same as above, but in the opposite direction.
    if($direction=='prev'){

        if(!$active_img.prev('img').length){
            
            $next_img = $('#slideshow-img').children('IMG:last');
            $next_desc = $('#slideshow-desc').children('div:last');
            
        }
        else{
            
            $next_img = $active_img.prev('img');
            $next_desc = $active_desc.prev('div');
            
        }
        
        $active_img.addClass('last-active');
        $active_desc.addClass('last-active');
        
        $next_img.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 500, function() {
            $active_img.removeClass('active last-active');
        });
        
        $next_desc.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 500, function() {
            $active_desc.removeClass('active last-active');
        });
        
    }
    
}


/*
 *  Function which changes the item displayed in the shop slider and the associated description
 */

function shopSwitch(){
    
    //Get the active shop item image and description
    var $active = $('#museum-shop IMG.active');
    var $active_desc = $('#museum-shop div.active');

    //Get the next img element - If the next element is not an image, get the first img element instead
    var $next =  $active.next('IMG').length ? $active.next('IMG') : $('#museum-shop IMG:first');
    var $next_desc =  $active_desc.next('div').length ? $active_desc.next('div') : $('#museum-shop div:first');

    //Add the '.last-active' class to the current image to set its z-index lower than the image about to be displayed
    $active.addClass('last-active');

    //Animate the opacity of the next image to be displayed and give it the '.active' class to bring it to the front
    $next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
    
    //Change the active to description to the next one
    $active_desc.removeClass('active');
    $next_desc.addClass('active');

}


/*
 * Function which switched banner image and descriptions
 **/

function bannerSwitch() {
    
    var $active = $('#banner-rotator IMG.active');
    var $desc = $('#img-detail-box P.active');

    if ( $active.length == 0 ) $active = $('#banner-rotator IMG:last');
    if ( $desc.length == 0 ) $desc = $('#img-detail-box P:last');

    var $next =  $active.next().length ? $active.next()
        : $('#banner-rotator IMG:first');
        
    var $next_desc = $desc.next('p').length ? $desc.next('p')
        : $('#img-detail-box P:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
        
    $desc.removeClass('active');
    $next_desc.addClass('active');
}