var Clix = {
    Application: {}
};

Clix.Application.ControlHelper = (function () {

    function addEventListener(element, eventName, eventHandler) {
        if (element == null || element == undefined) return;

        if (element.addEventListener) {
            element.addEventListener(eventName, eventHandler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + eventName, eventHandler);
        }
    };

    function center(element) {
        if (element != null) {
            var size = Clix.Application.Utility.GetClientSize();

            var x = (size.Width / 2) - (element.offsetWidth / 2);
            var y = (size.Height / 2) - (element.offsetHeight / 2);

            if (x < 0) x = 0;
            if (y < 0) y = 0;

            setLocation(element, x, y);
        }
    }

    function hide(element) {
        if (element != null) element.style.display = 'none';
    }

    function setLocation(element, x, y) {
        if (element != null && x != null && y != null) {
            element.style.top = y.toString() + 'px';
            element.style.left = x.toString() + 'px';
        }
    }

    function removeEventListener(element, eventName, eventHandler) {
        if (element == null || element == undefined) return;

        if (element.removeEventListener) {
            element.removeEventListener(eventName, eventHandler, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + eventName, eventHandler);
        }
    };

    function show(element) {
        if (element != null) element.style.display = 'block';
    }

    return {
        AddEventListener: addEventListener,
        Center: center,
        Hide: hide,
        RemoveEventListener: removeEventListener,
        SetLocation: setLocation,
        Show: show
    };

})();

Clix.Application.Controls = {
};

Clix.Application.Controls.ModalPopup = (function () {
    var _modalWindow = null;
    var _target = null;

    var _configuration = {
        Identifiers: {
            Window: 'ApplicationModalBackground'
        },
        Classes: {
            ModalWindow: 'ModalWindow'
        }
    };

    function close() {
        if (_modalWindow != null) {
            Clix.Application.ControlHelper.RemoveEventListener(window, "resize", function () { Clix.Application.ControlHelper.Center(_target); });

            Clix.Application.ControlHelper.Hide(_modalWindow);
        }
    }

    function open(targetID) {
        _modalWindow = document.getElementById(_configuration.Identifiers.Window);
        _target = document.getElementById(targetID);

        Clix.Application.ControlHelper.Show(_target);
        Clix.Application.ControlHelper.Show(_modalWindow);
        Clix.Application.ControlHelper.Center(_target);

        Clix.Application.ControlHelper.AddEventListener(window, "resize", function () { Clix.Application.ControlHelper.Center(_target); });
    }

    return {
        Close: close,
        Open: open
    };

})();

Clix.Application.Utility = (function () {

    function appendClass(element, value) {
        var current = element.getAttribute('class');

        if (current != '' && current != null) {
            value = (current + ' ' + value);
        }

        element.setAttribute('class', value);

        if (isInternetExplorer()) {
            current = element.getAttribute('className');

            if (current != '' && current != null) {
                value = (current + ' ' + value);
            }

            element.setAttribute('className', value);
        }
    }

    function getClientSize() {
        var clientWidth = 0;
        if (self.innerWidth) {
            clientWidth = self.innerWidth;
        }
        else if (document.documentElement && document.documentElement.clientWidth) {
            clientWidth = document.documentElement.clientWidth;
        }
        else if (document.body) {
            clientWidth = document.body.clientWidth;
        }

        var clientHeight = 0;
        if (self.innerHeight) {
            clientHeight = self.innerHeight;
        }
        else if (document.documentElement && document.documentElement.clientHeight) {
            clientHeight = document.documentElement.clientHeight;
        }
        else if (document.body) {
            clientHeight = document.body.clientHeight;
        }

        return { Width: clientWidth, Height: clientHeight };
    }

    function isInternetExplorer() {
        return (navigator.appName.toLowerCase() == 'microsoft internet explorer');
    }

    return {
        AppendClass: appendClass,
        GetClientSize: getClientSize,
        IsInternetExplorer: isInternetExplorer
    }

})();