$(document).ready(function(){
    
    // If the screen's width is 480 pixels wide or wider and 370 pixels high or higher, do things
    if (screen.width > 480 && screen.height > 370) {
        
        // When the Search nav item is clicked
        $("#searchTrigger").click(function(){
            // Show the search panel.
            $("#siteSearch").fadeIn(100);
        });
        
        // When the search panel's (x) [close] icon is clicked
        $("#siteSearchClose").click(function(){
            // Hide the search panel.
            $("#siteSearch").fadeOut(100);
        });
        
        // When any of the other nav items, except Search, are hovered over
        $("#topNav a").hover(function(){
            // Hide the search panel.
            $("#siteSearch").hide();
        });
        
    }
    
    // Here are the controls for the timeline (presently found here: /about_cit/timeline.html)
    
    // On page-load, hide all child <ul> elements
    $("#timeline > li > ul").hide();
    
    // When any of the <h4> elements are clicked...
    $("#timeline h4").click(function(){

        // Check if the nearest <ul> is not already visible. If it's not visible, do some stuff...
        if ($(this).siblings("ul").css("display") != "block") {
            
            // 1) Hide all child <ul> elements...
            $("#timeline > li > ul").hide();
            
            // 2) Then change all of the arrows to right-pointing arrows...
            $("#timeline h4").children(".tlArrow").html("&#9658;");
            
            // 3) Then show the <ul> element nearest the <h4> clicked
            $(this).siblings("ul").show();
            
            // 4) Then change this particular arrow to a down-pointing arrow...
            $(this).children(".tlArrow").html("&#9660;");
            
            // 5) Finally, scroll the page up/down so that the <h4> is at the top
            $("html, body").animate({
                scrollTop: $(this).offset().top
            }, 500);
            
        }
        
        // Otherwise, check if the nearest <ul> is already visible. If it is visible, do other stuff...
        else if ($(this).siblings("ul").css("display") == "block") {
            
            // 1) Hide the <ul> element nearest the <h4> clicked
            $(this).siblings("ul").hide();
            
            // 2) Then change this particular arrow to a right-pointing arrow...
            $(this).children(".tlArrow").html("&#9658;");
            
        }
        
    });
    
    $("#timeline a").attr("target","_blank");
    
    // A bit of 'make modern CSS work in non-modern browsers' stuff
    $(".tlItem:nth-child(2)").addClass("firstOfType");
    
});

/* An attempt to detect some of the visitor's environment attributes. This
was borrowed from PPK at http://www.quirksmode.org/js/detect.html and is
currently being utilized on the home page (see the bottom of the file). */
var BrowserDetect = {
    init: function () {
        this.OS = this.searchString(this.dataOS) || "an unknown OS";
    },
    searchString: function (data) {
        for (var i=0;i<data.length;i++) {
            var dataString = data[i].string;
            var dataProp = data[i].prop;
            this.versionSearchString = data[i].versionSearch || data[i].identity;
            if (dataString) {
                if (dataString.indexOf(data[i].subString) != -1)
                    return data[i].identity;
            }
            else if (dataProp)
                return data[i].identity;
        }
    },
    dataOS : [
        {
            string: navigator.platform,
            subString: "Win",
            identity: "Windows"
        },
        {
            string: navigator.platform,
            subString: "Mac",
            identity: "Mac"
        },
        {
               string: navigator.userAgent,
               subString: "iPhone",
               identity: "iPhone/iPod"
        },
        {
            string: navigator.platform,
            subString: "Linux",
            identity: "Linux"
        }
    ]
};
BrowserDetect.init();