// Header Menu Functionality

// Variables
var headerMenu_PanelSelector = "#topMenuContainer .expandedPanel";
var headerMenu_IsWithinElements = false;

var headerMenu_HidePanelTimeout = 500; // Will wait 500ms before closing the Expanded Panel
var headerMenu_HidePanelTimer = 0;
var headerMenu_BlockHidePanelTimer = false;

var headerMenu_ShowPanelTimeout = 200; // Will wait 200ms before opening / changing contents of the Expanded Panel
var headerMenu_ShowPanelTimer = 0;

// Bind everything
$(document).ready(function () {

    // Call to the ExpandedPanelManagement.js
    registerExpandedPanel(headerMenu_PanelSelector);

    headerMenu_BindExpandableMenuItem("destinations");
    headerMenu_BindExpandableMenuItem("experiences");

    // This used to keep the expandedPanel open when you move off the menu item
    $(headerMenu_PanelSelector).hover(
        headerMenu_ClearHideTimer,
        headerMenu_StartTimerToHideExpandedPanel
    );

    // This is used to block the timer, if the ExpandedPanel - Destination TownSearch inputfield has focus
    // We don't want the expanded panel closing, if the input field has focus, but the mouse is elsewhere
    $("#headerMenuTownSearchInput").focusin(function () {
        headerMenu_BlockHidePanelTimer = true;
    });

    // This is used to un-block the closeTimer. If the mouse is no longer within the menu elements,
    // start the timer to hide the expanded panel
    $("#headerMenuTownSearchInput").focusout(function () {
        headerMenu_BlockHidePanelTimer = false;

        if (!headerMenu_IsWithinElements)
            headerMenu_StartTimerToHideExpandedPanel();
    });

    // Apply Watermark to Destinations - Search Input
    var watermarkText = "Search for a Town"

    $("#headerMenuTownSearchInput").applyWatermark(watermarkText);

    // Binds the Town Search functionality to the destination expandedPanel's town search section
    bindTownSearchFunctionalityToInputField({
        inputFieldID: "#headerMenuTownSearchInput",
        resultFieldID: "#headerMenuTownSearchResults",
        maxResults: 6
    });
});



// Functions
function headerMenu_BindExpandableMenuItem(expandableIdentifier) {

    $("#topMenuContainer ul.mainMenu li." + expandableIdentifier + " a").hover(
        function () { headerMenu_StartTimerToShowExpandedPanel(expandableIdentifier) },
        function () { headerMenu_StartTimerToHideExpandedPanel() }
    );
}

function headerMenu_StartTimerToShowExpandedPanel(expandedPanelItem) {

    headerMenu_ClearHideTimer();
    headerMenu_ShowPanelTimer = window.setTimeout(function () { headerMenu_ShowExpandedPanel(expandedPanelItem) }, headerMenu_ShowPanelTimeout);
}

function headerMenu_ShowExpandedPanel(expandedPanelItem) {

    // Call to the ExpandedPanelManagement.js
    showExpandedPanel(headerMenu_PanelSelector);

    // To make sure that if we move off the destinations panel, that the closeTimer is no longer blocked
    // If it is the destinations panel, and the searchInput has focus, continue to block the closeTimer
    if (expandedPanelItem == "destinations") {
        
        if($(document.activeElement).is("#topMenuContainer .expandedPanel .destinations input.searchInput")) 
            blockCloseTimer = true;
        else 
            blockCloseTimer = false;
    }
    else {
        blockCloseTimer = false;
    }

    $("#topMenuContainer .expandedPanelContainer .expandedPanel .item").each(function () {

        if ($(this).hasClass(expandedPanelItem))
            $(this).show();
        else
            $(this).hide();

    });

    // Keep the applicable anchor "expanded"
    $("#topMenuContainer ul.mainMenu li.expandable").each(function () {

        if ($(this).hasClass(expandedPanelItem))
            $(this).find("a").addClass("expanded");
        else
            $(this).find("a").removeClass("expanded");
    });
}

function headerMenu_ClearHideTimer() {

    // If the hideTimer is to be cancelled, you're within a menu / expandedPanel element
    headerMenu_IsWithinElements = true;    
    window.clearTimeout(headerMenu_HidePanelTimer);
}

function headerMenu_StartTimerToHideExpandedPanel() {

    // If we're starting the timer to close the expandedPanel, then we're not within a menu / expandedPanel element
    headerMenu_IsWithinElements = false;

    window.clearTimeout(headerMenu_ShowPanelTimer);

    if (!headerMenu_BlockHidePanelTimer)
        headerMenu_HidePanelTimer = window.setTimeout(function () { headerMenu_HideExpandedPanel() }, headerMenu_HidePanelTimeout);
}

function headerMenu_HideExpandedPanel() {

    // Call to the ExpandedPanelManagement.js
    hideExpandedPanel(headerMenu_PanelSelector);

    $("ul.mainMenu li.expandable a").each(function () {
        $(this).removeClass("expanded");
    });
}