// Document ready - bind events to language drop down
$(document).ready(function (e) {
    /////////////////////////////////////////////////////////////////////////
    // 
    // Keep all code within this block (function).
    // 
    // This ensures that the code is self-contained and won't
    // interfere with other client script code.
    //
    /////////////////////////////////////////////////////////////////////////

    // Pending language selection drop down list popup hide delay timeout
    // for delayed popup hide requests.
    //
    // The value is in milliseconds (i.e. 1000 milliseconds = 1 second)
    var DELAYED_DROP_DOWN_LIST_POPUP_HIDE_MILLISECONDS = 500;

    // Language selection control top-level container, every other
    // element of the control is located under this DOM element.
    var container = $(".lng-container");

    // Drop down items (language selectors) container. All language
    // items are child elements of this DOM element.
    var dropDownItemsContainer = $(".lng-CountryOptions");

    // Language selection items drop down list visibility trigger.
    // clicking on this DOM element displays the list of available
    // languages.
    var dropDownListTrigger = $(".lng-trigger", container);

    // Drop down list frame with language selection items.
    // Hiding or showing the list of languages to select from means
    // changing this DOM element's visibility (i.e. the <<display>> css property)
    // Change either to "none" to hide or to "block" to show.
    var dropDownListPopup = $(".lng-popup", container).css({ display: "none" });

    // This holds the timer handle of the delayed drop down list
    // hide timer.
    // When the timer is active - this variable is NOT null.
    // When the timer is inactive - this variable's value is null.
    //
    // Do not use this variable directly. Instead, use:
    //
    //      To initiate delayed hide:
    //
    //          delayedDropDownListPopupHideTimerStart()
    //
    //      To cancel pending delayed hide:
    //
    //          delayedDropDownListPopupHideTimerStop()
    //
    var timerHandle_delayedHideDropDownListPopup = null;

    /////////////////////////////////////////////////////////////////////////
    // Stops the delayed drop down list popup hide timer -- cancel pending
    // delayed hide.
    //
    // Note: has no effect if no delayed hide is currently pending.
    /////////////////////////////////////////////////////////////////////////
    function delayedDropDownListPopupHideTimerStop() {
        // Check if timer is active (handle is not null)
        if (timerHandle_delayedHideDropDownListPopup != null) {
            // Stop timer
            clearTimeout(timerHandle_delayedHideDropDownListPopup);

            // Set timer handle to null to indicate that no timer
            // is currently active.
            timerHandle_delayedHideDropDownListPopup = null;
        }
    }

    /////////////////////////////////////////////////////////////////////////
    // Starts the delayed drop down list popup hide timer -- initiate delayed
    // drop down list hide.
    //
    // Note: cancels previous pending delayed hide if it's currently active.
    /////////////////////////////////////////////////////////////////////////
    function delayedDropDownListPopupHideTimerStart() {
        // Cancel pending delayed hide in case it's currently active
        delayedDropDownListPopupHideTimerStop();

        // Initiate new pending timeout, and save it's timer handle
        timerHandle_delayedHideDropDownListPopup = setTimeout(
            // This function is invoked after
            // DELAYED_DROP_DOWN_LIST_POPUP_HIDE_MILLISECONDS milliseconds
            // elapse (in case the delayed hide is not cancelled by
            // calling delayedDropDownListPopupHideTimerStop() before
            // that time elapses).
            function () {
                // Hide the language selection items drop down list
                dropDownListPopup.css({ display: "none" });

                // Cancel pending delayed hide
                delayedDropDownListPopupHideTimerStop();
            },
            // Delay time (milliseconds)
            DELAYED_DROP_DOWN_LIST_POPUP_HIDE_MILLISECONDS
        );
    }

    /////////////////////////////////////////////////////////////////////////
    // OnMouseOver (hover) event handler for ALL language selection items
    //
    // Note: cancels delayed hide if pending
    /////////////////////////////////////////////////////////////////////////
    $(".lng-item", dropDownItemsContainer).mouseover(
            function () {
                // Set language item visual state to HOVER (mouse over the item)
                $(this).addClass("lng-item-Over");

                // Cancel delayed hide if pending
                delayedDropDownListPopupHideTimerStop();
            }
        );

    /////////////////////////////////////////////////////////////////////////
    // OnMouseOut (normal state) event handler for ALL language selection
    // items
    //
    // Note: initiates delayed hide
    /////////////////////////////////////////////////////////////////////////
    $(".lng-item", dropDownItemsContainer).mouseout(
            function () {
                // Set language item visual state to normal (mouse NOT over the
                // item)
                $(this).removeClass("lng-item-Over");

                // Initiate delayed hide
                delayedDropDownListPopupHideTimerStart();
            }
        );

    /////////////////////////////////////////////////////////////////////////
    // OnMouseOver event handler for drop down list popup control
    //
    // Note: cancels delayed hide if pending
    /////////////////////////////////////////////////////////////////////////
    dropDownListPopup.mouseover(function () { delayedDropDownListPopupHideTimerStop(); });

    /////////////////////////////////////////////////////////////////////////
    // OnMouseOut event handler for drop down list popup control
    //
    // Note: initiates delayed hide
    /////////////////////////////////////////////////////////////////////////
    dropDownListPopup.mouseout(function () { delayedDropDownListPopupHideTimerStart(); });

    /////////////////////////////////////////////////////////////////////////
    // OnMouseOver event handler for drop down list trigger link (current
    // language and down arrow)
    //
    // Note: cancels delayed hide if pending
    /////////////////////////////////////////////////////////////////////////
    dropDownListTrigger.mouseover(function () { delayedDropDownListPopupHideTimerStop(); });

    /////////////////////////////////////////////////////////////////////////
    // OnMouseOut event handler for drop down list trigger link (current
    // language and down arrow)
    //
    // Note: initiates delayed hide
    /////////////////////////////////////////////////////////////////////////
    dropDownListTrigger.mouseout(function () { delayedDropDownListPopupHideTimerStart(); });

    /////////////////////////////////////////////////////////////////////////
    // MouseClick event handler for the language selection drop down list
    // popup trigger (current language and down arrow).
    //
    // Displays the language selection drop down list popup.
    //
    // Note: cancels delayed hide if pending
    /////////////////////////////////////////////////////////////////////////
    dropDownListTrigger.click(function () {
        // Set ALL language selection items state to normal (NOT mouse over)
        $(".lng-item", dropDownListPopup).each(function (i) {
            $(this).removeClass("lng-item-Over");
        });

        // Show language selection drop down list popup
        dropDownListPopup.css({ display: "block" });

        // Cancel delayed hide if pending
        delayedDropDownListPopupHideTimerStop();
    });
});