// Variable to work out if the browser is IE7 or below
var lteIE7 = false /*@cc_on || @_jscript_version <= 5.7 @*/;

$(document).ready(function() {
     $(document).pngFix();    
     
     // hoverState("div.venue a img", 0.6);
     // hoverState("div.landing-child a img", 0.6);
     // hoverState("div.homepage-2012-content-container a img", 0.6);
    
    // scrolling filmstrip on the making_it_happen and other level 1 landing pages
    $("div#scrollable-content").smoothDivScroll({scrollingSpeed: 2, mouseDownSpeedBooster: 1, autoScroll: "onstart", autoScrollDirection: "left", autoScrollSpeed: 1, visibleHotSpots: "always", hotSpotsVisibleTime: 9, startAtElementId: "startAtMe"});        
    //hides the scrollbar that exists for non javascript users
    $("div#scrollable-content div.scrollWrapper").css('overflow','hidden');
    
    // scrolling filmstrip on the image_gallery page
    $("div#scrollable-content-small").smoothDivScroll({scrollingSpeed: 2, mouseDownSpeedBooster: 1, autoScroll: "onstart", autoScrollDirection: "left", autoScrollSpeed: 1, visibleHotSpots: "always", hotSpotsVisibleTime: 9, startAtElementId: "startAtMe", scrollWrapper: "div.scrollWrapperSmall", scrollableArea:    "div.scrollableAreaSmall"});        
    $("div#scrollable-content-small div.scrollWrapperSmall").css('overflow','hidden');
    
    // scrolling filmstrip on the homepage for the webcams
    $("div.scrollable-content-tiny").smoothDivScroll({scrollingSpeed: 2, mouseDownSpeedBooster: 1, autoScroll: "onstart", autoScrollDirection: "left", autoScrollSpeed: 1, visibleHotSpots: "always", hotSpotsVisibleTime: 9, startAtElementId: "startAtMe", scrollWrapper: "div.scroll-wrapper-tiny", scrollableArea:    "div.scrollable-area-tiny"});        
    $("div.scrollable-content-tiny div.scroll-wrapper-tiny").css('overflow','hidden');
     
    //sliding down the second navigation    
    slideNavigationContent('a.header-dropdown');
    
    // show the venue hover states
    showVenues("div#venues");
    
    //swapCSS('a.font-css-swap', '#font-stylesheet');
    //swapCSS('a.main-css-swap', '#main-css');
    
    // Function that grabs all the tabbed content containers ('div.tabbed-content'),
    swapTabbedContent('div.normal-tabbed-behaviour', '.content');
    
    // Function that loads in the correct calendar month
    swapCalendarContent();
    
    // handles loading image gallery items from their scrolling controller
    // Liz Goulding: 10th Dec 2009 / commented out to stop scroller images replacing 'in page'
    //largeImageGalleryContent('div#scrollable-content-small', 'div.scrollableAreaSmall div.main-slider-content', 'div#image-gallery-container div.image-gallery-content', 'div.image-gallery-large-item');
    
    // handles loading web image gallery items on their home page
    imageGalleryContent('div#webcam-content', 'div.tiny-image', 'div.tiny-image-container');
    
    // handles loading video gallery items on their home page
    imageGalleryVideoContent('div#video-content', 'div.tiny-image', 'div.tiny-image-container');
    
    // reveals hidden content (.expandInfo), when an element is clicked
    expandContent(".expandButton", ".expandInfo");
    
    //sliding down general content
    slideContent('a.advanced-search-link', 'div.events-advanced-search-container');

    //keyboard tabbing fix
    $('.homepage-2012-content-container .tabbed-content .content .tab-content-item a').focus(function() {
        if($(this).parents('.current').length != 0) {return;}
        var tab = $(this).parents('.tabbed-content').find('.tabbed-headers li:not(.current) a');
        tab.click();
    });
});

function expandContent(expandEvent, expandInfo) {
    $(expandEvent).click(function() {
        var infoButton = $(this);
        var infoSibling = $(this).siblings(expandInfo);

        if (infoSibling.css("display") == "block") {
            $(this).siblings(expandInfo).slideUp("medium");
        } else {
            $(this).siblings(expandInfo).slideDown("medium", function() {
                infoButton.slideUp("medium");
            });
        }
    });
    return false;
}

// Function that fades in the events being hosted at a venue
// NOTE: Also changes the width of the events container if there is only 1 or 2
function showVenues(venueContainer) {
    //find all the divs containing the on hover images and hide the div
    $(venueContainer).find('div.venue div').css('display', 'none');
    //$(venueContainer).find('div.venue div').css('z-index', '500');
    $(venueContainer).find('div.venue').css('margin-left', '8px');
        
        
    $(venueContainer).find('div.venue').each(function(intIndex) {
    
        // If the amount of events is 3 or less, lower the width of the container
        if ($(this).find("div img").length == 1) {
            $(this).find("div").css("width", "55px");
        } else if ($(this).find("div img").length == 2) {
            $(this).find("div").css("width", "110px");
        } else if ($(this).find("div img").length == 3) {
            $(this).find("div").css("width", "165px");
        }
        
        var venue = $(this);
        
        // On mouse over hide all events, then show the events for that venue
        venue.find('a img').mouseover(function(){
            $(venueContainer).find("div.venue div").css('display', 'none');
            $(venueContainer).find("div.venue").css('margin-left','8px');
            venue.css('z-index','500');
            venue.find("div").fadeIn();
            venue.css('margin-left','8px');
        });
        
        venue.mouseout(function(){
            venue.css('z-index','1');
        });

        // On mouse out of entire venues section hide all event rollovers.
        $(venueContainer).mouseout(function() {
            venue.find('a img').css('opacity','1');
            $(venueContainer).find("div.venue div").css('display', 'none');
            
        })

        // On mouse out hide all events
        venue.find("div").mouseout(function(){
            $(venueContainer).find("div.venue div").css('display', 'none');
            $(venueContainer).find("div.venue").css('z-index','1');
            venue.find("div").css('display', 'none');
            
        });
    });
}

function swapTabbedContent(linkSelector, contentTab) {
    
    $(linkSelector).each(function() {
        // The relevant divTabbedContent we are working in
        var divTabbed = $(this);
        $(this).find('ul.tabbed-headers li').each(function(intIndex) {
            // The li we are currently in
            var tab = $(this);
            // The links that are in the ul
            var tabLink = $(this).find('a');
            
            tabLink.click(function() {
                var ltt, lt, ltn;
                // Remove 'current' class from all tabs
                tab.siblings().attr('class', '');
                tab.attr('class','current');
                
                // Hide all tabbed content
                $(divTabbed).find(contentTab).removeClass("current")
                
                // Display the content related to the tab clicked
                $(divTabbed).find(contentTab + ':eq(' + intIndex + ')').addClass("current");

                lt = $(this).text();
                ltt = {
                 'News': 'news',
                 'Blog': 'blog',
                 'Videos': 'videos',
                 'Webcams': 'webcams'
                };
                ltn = ltt[lt];
                if(ltn) {
                  if(ltn === 'news' || ltn === 'blog') {
                     try {pageTracker._trackEvent('newsblog', 'switch', ltn)} catch(err) {console.log(err);}
                  }
                  else if(ltn === 'videos' || ltn === 'webcams') {
                     try {pageTracker._trackEvent('webcamsvideos', 'switch', ltn)} catch(err) {console.log(err);}
                  }
                }

                return false;
            });
        });
    });
    
}

function swapCalendarContent() {
    
    //display the content related to the current li tab first
    
    $('#calendar-tabs ul.tabbed-headers').each(function() {
        
        if($(this).css('display') == 'block') {
            
            $(this).find('li').removeClass('current');
            $(this).find('li:first').addClass('current');
            
            $(this).find('li a').each(function() {
                
                if($(this).parent().attr('class') == 'current') {
                    var currentId = $(this).attr("id");
                    $('#calendar-tabs div#BlogCalendar').find('div').css('display','none');
                    $('#calendar-tabs div#BlogCalendar').find('div.'+currentId).css('display','block');
                }
                
                $(this).click(function() {
                    var id = $(this).attr("id");
                    
                    $(this).parent().siblings().removeClass('current');
                    $(this).parent().addClass('current');
                    
                    $('#calendar-tabs div#BlogCalendar').find('div').css('display','none');
                    $('#calendar-tabs div#BlogCalendar').find('div.'+id).css('display','block');
                    
                    return false;
                });
            });
        }
    });
}

// Function to swap out the css relevant to the overall font size or accessibility style sheet.
function swapCSS(linkSelector, cssSelector) {
    $(linkSelector).click(function() {

        //get the id of the link clicked which represents the style sheet wanted
        var id = $(this).attr('id');
        
        if (id == "main") {
            $("link[href*='colours.css']").each(function() { this.disabled = false; });
            $("link[href*='corecontent.css']").each(function() { this.disabled = false; });
            $("link#dyslexia-css").each(function() { this.disabled = true; });
            $("link#highvis-css").each(function() { this.disabled = true; });
            $("link#main-css").each(function() { this.disabled = false; });

            //add the new href to the relevant css link in the header
            $(cssSelector).attr('href', "css/"+id+".css");
        } else if (id == "dyslexia") {
            $("link[href*='colours.css']").each(function() { this.disabled = false; });
            $("link[href*='corecontent.css']").each(function() { this.disabled = false; });
            $("link#dyslexia-css").attr("href", "css/dyslexia.css");
            $("link#dyslexia-css").each(function() { this.disabled = false; });
            $("link#highvis-css").each(function() { this.disabled = true; });
            $("link#main-css").each(function() { this.disabled = false; });
        } else if (id == "high-vis") {
            $("link[href*='colours.css']").each(function() { this.disabled = true; });
            $("link[href*='corecontent.css']").each(function() { this.disabled = true; });
            $("link#dyslexia-css").each(function() { this.disabled = true; });
            $("link#highvis-css").attr("href", "css/high-vis.css");
            $("link#highvis-css").each(function() { this.disabled = false; });
            $("link#main-css").each(function() { this.disabled = true; });
        } else {
            //add the new href to the relevant css link in the header
            $(cssSelector).attr('href', "css/"+id+".css");
        }
        return false;
    });
    
}

// Function that takes an ID selector,
// and upon click slides down any elements with the corresponding class
function slideNavigationContent(dropDownSelector) {
    //the link that has been clicked
    $(dropDownSelector).click(function(){
        
        //get its id to be used as the class for the sub navigation div
        id = $(this).attr('id');
        link = $(this);
        
        //get the div element using the id above as its class
        var container = $('.' + id);
        
        //get the border style to put back on later
        var border = link.parent().css('border-bottom');
        
        //if the container is already displayed then hide it, else display it
        if(container.css('display') == 'block'){
            //container.siblings('div.nav-secondary-container').css('display','none');
            container.slideUp('medium', function() {
                link.attr('class','header-dropdown');
                link.parent().css('border-bottom',border);
            });
        } else {
            var visibleDropDown = false;
            var dropDownList;
            // Currently not using drop down highlight
            // link.parent().css('border-bottom','5px solid #FFFFFF');
            container.siblings('.nav-secondary-container').each(function(intIndex) {
                if ($(this).css('display') == 'block'){
                    dropDownList = $(this);
                    visibleDropDown = true;
                }
            });
            
            if (visibleDropDown) {
                dropDownList.slideUp('medium', function() {
                    container.slideDown('medium', function() {
                        $('ul#nav-primary li a.header-closeup').attr('class','header-dropdown');
                        link.attr('class','header-closeup');
                    });
                });
            } else {
                container.slideDown('medium', function() {
                    $('ul#nav-primary li a.header-closeup').attr('class','header-dropdown');
                    link.attr('class','header-closeup');
                });
            }
        }
        
        return false;
    })
}


// Function that takes content from the slider and puts it in the gallery above it
function imageGalleryContent(parentContainer, controllerContentSelector, galleryContentSelector) {
    var galleryContentSelector = $(parentContainer).find(galleryContentSelector);
    var controllerContentSelector = $(parentContainer).find(controllerContentSelector);
    
    // removes the class first which is used in non javascript solution,
    // but still makes sure it is displayed block
    galleryContentSelector.each(function() {
        if ($(this).css('display') == 'block') {
            $(this).removeClass('first');
            $(this).css('display','block');
        }
    });
    
    // iterate through each of the small images in the slider
    controllerContentSelector.each(function(intIndex) {
        //get the index of the image clicked
        var intClickedOn = intIndex;
        
        $(this).find('a').click(function() {

            // when the link is clicked, get the image source
            var smallSource = $(this).parent().find('a img').attr('src');
            var smallLink = $(this).parent().find('a').attr('href');

            //var bigSource = smallSource.replace('small','large');
            //var bigSource = smallSource.replace('sc90x63','m700'); // need a better way to do this !!!
            bigSource = smallSource.replace('sc61x44','sc209x160'); // need a better way to do this !!!

            galleryContentSelector.fadeOut('fast', function() {
                // write the html out
                galleryContentSelector.html('<a href="'+smallLink+'"><img src="'+bigSource+'" alt="image gallery item" /></a>');
                galleryContentSelector.fadeIn('fast');
            });
            return false;
        });
    });
    
}

//Function that takes content from the slider and puts the related VIDEO in the gallery above it
function imageGalleryVideoContent(parentContainer, controllerContentSelector, galleryContentSelector) {
    var galleryContentSelector = $(parentContainer).find(galleryContentSelector);
    var controllerContentSelector = $(parentContainer).find(controllerContentSelector);
    
    // removes the class first which is used in non javascript solution,
    // but still makes sure it is displayed block
    galleryContentSelector.each(function() {
        if ($(this).css('display') == 'block') {
            $(this).removeClass('first');
            $(this).css('display','block');
        }
    });
    
    // iterate through each of the small images in the slider
    controllerContentSelector.each(function(intIndex) {
        //get the index of the image clicked
        var intClickedOn = intIndex;
        
        $(this).find('a').click(function() {
 
             var swfSource = $(this).parent().find('a img').attr('link');
 
             galleryContentSelector.fadeOut('fast', function() {
               
                 galleryContentSelector.html('').flash({
                     swf: swfSource,
                     width: 209,
                     height: 144
                 })             
                 
                 // hide all popUpButtons
                 $('#videoLightbox a').hide();
                               
                 $('.tiny-image-container').bind("mouseenter",function(event){
                     $('.tiny-image-container-overlay').fadeIn();
                     event.stopPropagation();
                 })

                 galleryContentSelector.fadeIn('fast');
 
                 // show currten popUpButton
                 $('#videoLightbox a:eq('+(intIndex+1)+')').fadeIn();
             });
             return false;
         });
    });
    
}

// Function that takes content from the slider and puts it in the gallery above it
function largeImageGalleryContent(parentContainer, controllerContentSelector, galleryContentSelector, imageContainer) {
    var galleryContentSelector = $(galleryContentSelector);
    var controllerContentSelector = $(parentContainer).find(controllerContentSelector);
    var imageContainer = $(galleryContentSelector).find(imageContainer);
    // removes the class first which is used in non javascript solution,
    // but still makes sure it is displayed block
    galleryContentSelector.each(function() {
        if ($(this).css('display') == 'block') {
            $(this).removeClass('first');
            $(this).css('display','block');
        }
    });
    
    // iterate through each of the small images in the slider
    controllerContentSelector.each(function(intIndex) {
        //get the index of the image clicked
        var intClickedOn = intIndex;
        
        $(this).find('a').click(function() {
            
            // when the link is clicked, get the image source
            var smallSource = $(this).find('img').attr('src');
            var bigSource = $(this).find('img').attr('link');

            // grab link content, use to make page title
            if ($(this).find('img')) {
                $("div#Content h1").text($(this).find('img').attr('alt'));   
            } else {
                $("div#Content h1").text($(this).find('a').text());   
            }

            // if the large gallery is there
            // iterate through the large gallery content
            galleryContentSelector.each(function(galleryIndex) {
                
                var galleryItem = $(this);
                if(intClickedOn == galleryIndex) {
                    
                    // if the large gallery content equals the clicked on small content, then hide the other large gallery items
                    galleryItem.siblings().hide();
                    galleryItem.fadeIn('fast');
                    
                    if(bigSource.indexOf('swf') !== -1) {
                        //alert(imageContainer.eq(intClickedOn).html());
                        //imageContainer.eq(intClickedOn).find('object').attr('data', bigSource);
                        imageContainer.eq(intClickedOn).html('').flash({
                            swf: bigSource,
                            width: 460,
                            height: 420
                        });
                        //swfobject.embedSWF(bigSource, "video", 460, 420, "8.0.0", false, {}, {'bgcolor' : '#333333', 'wmode' : 'opaque'});
                    } else {
                        imageContainer.eq(intClickedOn).html('<img src="' + bigSource + '" />');
                    }
                    
                     //following agcy code commented out
                     //galleryItem.siblings().fadeOut('slow', function() {
                        //change the image source to point to the larger image directory
                        //bigSource = smallSource.replace('small','large');
                        //bigSource = smallSource.replace('sc90x63','m700x'); // need a better way to do this !!!
                        //bigSource = galleryItem.find('img').attr('link');

                        // write the html out
                        //imageContainer.eq(intClickedOn).html('<img src="' + bigSource + '" />');
                        // fade in the new image

                        //galleryItem.fadeIn('slow');
                    //});
                    
                    return false; //we break out of the loop
                }
            });

            return false;
        });
    });
    
}

function slideContent(linkClicked, contentSelector) {
    $(linkClicked).click(function() {
    
        if($(contentSelector).css('display') == 'block') {
            $(contentSelector).slideUp('medium', function() {
                $(linkClicked).css('background',"url('../images/icons/header-drop-down-icon.gif') no-repeat right center");
            });
        } else {
            $(contentSelector).slideDown('medium', function() {
                $(linkClicked).css('background',"url('../images/icons/header-arrow-up-icon.gif') no-repeat right center");
            });
        }
        
        return false;
    });
}

// Function to take in a css selector, and change the opacity when you hover that element
function hoverState(cssSelector, opacity) {    
    if (!opacity) var opacity = 0.75;
    
    $(cssSelector).mouseover(function() {
        $(this).css({
            'opacity' : opacity,
            'zoom' : 1,
            'filter' : 'alpha(opacity = 75)'
            });
    });
        
    $(cssSelector).mouseout(function() {
        $(this).css({
            'opacity' : 1,
            'zoom' : 1,
            'filter' : 'alpha(opacity = 100)'
        });
    });
}