/*
 * DropDownListControl.js: DropDownListControl behaviour
 *
 * Depends on jQuery
 *
 */

$(document).ready(function () 
{

    // Clicking on the dropdown header toggles the dropdown visibility

    $("div.hf-dropdown-header").click(function (event) 
    { 
        $(this).parent("div.hf-dropdown").toggleClass("hf-dropdown-visible");
        event.stopPropagation();
    });

    // Clicking outside the dropdown hides it

    $(document).click(function() 
    {
        $("div.hf-dropdown").removeClass("hf-dropdown-visible");
    });
    
    // The dropdown consists of an unordered list. Each list item contains an anchor tag.
    // Clicking anywhere on the list item should navigate the user to the anchor tag's href address.
    
    $("div.hf-dropdown ul li").click(function (event) 
    {
        if (event.target.tagName != "A") // If the anchor was clicked then the page will navigate without our intervention
            window.location = $(this).children("a").attr("href");
    });
    
    // Initialise the width of the dropdown based on its contents - ensures the dropdown's appearance
    // across browsers.
    
    $("div.hf-dropdown").each(function()
    {
        var dropdownHeaderWidth = $(this).children("div.hf-dropdown-header").width();
        var dropdownULWidth = $(this).children("ul").width();
        
        var maxWidth = Math.max(dropdownHeaderWidth, dropdownULWidth);

        $(this).width(maxWidth + 35);
    });
    
    // If the user hovers over any part of a list item it should be highlighted, but IE6 only supports the :hover pseudo-class
    // for anchor tags. So instead javascript is used to achieve the hover behaviour.
    
    $("div.hf-dropdown ul li").hover(
    function()
    {
        $(this).addClass("hover");
    },
    function()
    {
        $(this).removeClass("hover");
    });                
    
});