(function () {

    TRAVEL.namespace('TRAVEL.Controller');

    // component for dropdown menu
    TRAVEL.Controller.DropDown = function (trigEle, dropdownEle) {

        var isVisible = false,
            isHovered = false,
            isFocused = false,
            isInAction = false,
            timer = null;

        function showAction(hover) {
            isInAction = true;
            dropdownEle.show('slide', {direction: 'up'}, 500, function () {
                isInAction = false;
                isVisible = true;
                isHovered = !!hover;
            });
        }

        function show(hover) {
            if (timer) {
                clearTimeout(timer);
                timer = null;
            }
            if (!isVisible && !isInAction) {
                showAction(hover);
            }
        }

        function hideAction(hover) {
            isInAction = true;
            dropdownEle.hide('slide', {direction: 'up'}, 500, function () {
                isInAction = false;
                isVisible = false;
                isHovered = !!hover;
            });
        }

        function hide(hover) {
            if ((isInAction || isVisible) && !isHovered && !isFocused && !timer) {
                timer = setTimeout(function () {
                    hideAction(hover);
                }, 1000);
            }
        }

        trigEle.hover(function () {
            show();
        }, function () {
            hide();
        });

        trigEle.click(function () {
            if (isVisible) {
                hideAction();
            } else {
                showAction();
            }
        });

        dropdownEle.hover(function () {
            show(true);
        }, function () {
            hide(true);
        });

        $('input', dropdownEle)
                .focus(function () {
                    isFocused = true;
                })
                .blur(function () {
                    isFocused = false;
                });

    }

})();