(function ($, undefined) {
    "use strict";

    $.widget("ui.ModalPopup", {
        options: {
            onClickSelector: "",
            subContentSelectors: "",  //For showing different content if subContentSelector data is set
            effect: "fade"
        },

        _create: function _create() {
            var self = this;
            var element = self.element;
            var options = self.options;

            element.addClass("modalPopup");

            element.wrap("<div class='modalWrapper'></div>");

            element.wrap("<div class='contentWrapper'></div>");

            element.parents(".contentWrapper").append("<div class='fancyBorder'></div>");

            element.parents(".modalWrapper").prepend("<div class='overlay'></div>").hide();

            element.show();

            element.prepend("<div class='close'></div>");

            $(document).bind("click", { self: self }, self._click);
        },

        _click: function _click(event) {
            var self = event.data.self;
            var element = self.element;
            var options = self.options;

            var target = $(event.target);

            if (target.is(options.onClickSelector) || target.parents(options.onClickSelector).length) {
                var clickArea = target.is(options.onClickSelector) ? target : target.parents(options.onClickSelector);

                var clickData = clickArea.data("subContentSelector");

                self.open(clickData);
            } else if (target.is(".close") || (!(target.is(".modalPopup") || target.parents(".modalPopup").length))) {
                self.close();
            }
        },

        close: function close() {
            var self = this;
            var element = self.element;
            var options = self.options;

            element.parents(".modalWrapper").hide(options.effect);
        },

        open: function open(subContentSelector) {
            var self = this;
            var element = self.element;
            var options = self.options;

            element.parents(".modalWrapper").show(options.effect);
            if (subContentSelector) {
                $(options.subContentSelectors, element).hide();
                $(subContentSelector, element).show();
            }
        }
    });
})($);