MV.Modal = {
    defaults: {
        html: '<div class="mvModalContainer jqmWindow"><div id="mvModal" class="jqmWindow jqmNotice"><div class="jqmnTitle jqDrag"></div><div class="jqmnContent"></div><div class="jqmClose">Close</div></div></div>',
        modalSlctr: '#mvModal',
        containerSlctr: '.mvModalContainer',
        appTemplateContainerSlctr: Config.SiteTemplate.TemplateContainerId
    },

    modals: {},

    init: function() {
        var that = this;
        MV.Page.RequireScript(Config.ApplicationRoot + "js/modal/jqmodal.jquery.js");
        MV.Page.RequireScript(Config.ApplicationRoot + "js/modal/jqdnr.jquery.js");
        MV.Page.RequireCSS(Config.ApplicationRoot + "js/modal/modal.css");
        if ($(this.defaults.containerSlctr).length == 0) {
            // todo - if this fails, use this.defaults.html
            MV.Page.GetFile('html', Config.ApplicationRoot + 'js/modal/modal.html', function(html) {
                that.template = $(html);
            });
        } else {
            that.template = $(this.defaults.containerSlctr);
        }
    },
    add: function(modalId, opts) {
        var that = this;
        this.modals[modalId] = this.template.clone().find(this.defaults.modalSlctr).attr('id', modalId).end();

        $('body').append(this.modals[modalId]);
        this.modals[modalId].find('#' + modalId)
        .jqm({
            modal: true,
            target: '.jqmnContent', //  only relevant for the ajax call
            overlay: 1,         //  must be greater then 0 to have the stop click outside of modal effect.
            toTop: true,        //  bring it into the body level div to prevent z-index stacking issues
            onLoad: function(h) {
                if (opts.onLoad && typeof opts.onLoad == 'function') {
                    opts.onLoad(h);
                }
            },
            onShow: function(h) {
                if (opts.onShow && typeof opts.onShow == 'function') {
                    opts.onShow(h);
                }
                if (opts.solo) {
                    that.hideAll(modalId);
                }
                h.w.show();
                //  needs repositioning because ontop was set to true, wipes position attributes to 0
                $('#'+modalId).css({ top: '6.25em', left: '16em' });
            },
            onHide: function(h) {
                if (opts.onHide && typeof opts.onHide == 'function') {
                    opts.onHide(h);
                }
                h.w.hide();
                h.w.fadeOut('1000', function() { h.o.remove(); });
                $('#mvModalRate').jqmHide();
            }
        });
    },
    update: function(modalId, opts) {
        // need to extend opts with existing opts so nothing is deleted
        this.add(modalId, opts);
    },
    get: function(modalId) {
        return {
            html: this.modals[modalId]
        }
    },
    show: function(modalId, opts) {
        var el = this.modals[modalId].find('#' + modalId);
        el.jqmShow();
        var str = el.html();
        if (str)
            el.html(str.substr(str.indexOf("<") != -1 ? str.indexOf("<") : 0));
        var that = this;

        //  rebind the event handler        
        $(".jqmClose").bind('click', function() {
            $('#'+modalId).jqmHide();
        });
    },
    hide: function(modalId, opts) {
        this.modals[modalId].find('#' + modalId).jqmHide();
    },
    addAndShow: function(modalId, opts) {
        this.add(modalId, opts);
        this.show(modalId);
    },
    hideAll: function(exceptionModalId) {
        var that = this;
        for (m in this.modals) {
            if (m != exceptionModalId) { this.hide(m); }
        }
    }
};