var _ERROR_MESSAGE = "Oops.. there was a problem with your request.<br /><br />Please try again.<br /><br /><em>Click anywhere to close.</em>"; var _RESIZE_DURATION = 400; var _INITIAL_WIDTH = 250; var _INITIAL_HEIGHT = 250; var _CONTENTS_WIDTH = 500; var _CONTENTS_HEIGHT = 400; var _DEF_CONTENTS_WIDTH = 500; var _DEF_CONTENTS_HEIGHT = 400; var _ANIMATE_CAPTION = true; var _EVAL_SCRIPTS = false; var _EVAL_RESPONSE = false; var _CLOSABLE = true; var _LOAD_DIV = "ModalLoading"; var MOOdalBox = { init: function(options) { this.options = Object.extend({ resizeDuration: _RESIZE_DURATION, initialWidth: _INITIAL_WIDTH, initialHeight: _INITIAL_HEIGHT, contentsWidth: _CONTENTS_WIDTH, contentsHeight: _CONTENTS_HEIGHT, defContentsWidth: _DEF_CONTENTS_WIDTH, defContentsHeight: _DEF_CONTENTS_HEIGHT, animateCaption: _ANIMATE_CAPTION, canClose: _CLOSABLE, evalScripts: _EVAL_SCRIPTS, loadDiv: $(_LOAD_DIV), evalResponse: _EVAL_RESPONSE }, options || {}); this.anchors = []; $A($$("a")).each(function(el) { if (el.rel && el.href && el.rel.test("^moodalbox", "i")) { el.onclick = this.click.pass(el, this); this.anchors.push(el) } }, this); this.eventKeyDown = this.keyboardListener.bindWithEvent(this); this.eventPosition = this.position.bind(this); this.overlay = new Element("div").setProperty("id", "mb_overlay").injectInside(document.body); this.center = new Element("div").setProperty("id", "mb_center").setStyles({ width: this.options.initialWidth + "px", height: this.options.initialHeight + "px", marginLeft: "-" + (this.options.initialWidth / 2) + "px", display: "none" }).injectInside(document.body); this.contents = new Element("div").setProperty("id", "mb_contents").injectInside(this.center); this.bottom = new Element("div").setProperty("id", "mb_bottom").setStyle("display", "none").injectInside(document.body); this.closelink = new Element("a").setProperties({ id: "mb_close_link", href: "#" }).injectInside(this.bottom); this.caption = new Element("div").setProperty("id", "mb_caption").injectInside(this.bottom); new Element("div").setStyle("clear", "both").injectInside(this.bottom); this.error = new Element("div").setProperty("id", "mb_error").setHTML(_ERROR_MESSAGE); if (this.options.canClose) { this.closelink.onclick = this.overlay.onclick = this.close.bind(this) } var nextEffect = this.nextEffect.bind(this); this.fx = { overlay: this.overlay.effect("opacity", { duration: 500 }).hide(), resize: this.center.effects({ duration: this.options.resizeDuration, onComplete: nextEffect }), contents: this.contents.effect("opacity", { duration: 500, onComplete: nextEffect }), bottom: this.bottom.effects({ duration: 400, onComplete: nextEffect }) }; this.ajaxRequest = Class.empty }, click: function(link) { return this.open(link.href, link.title, link.rel) }, open: function(sLinkHref, sLinkTitle, sLinkRel) { this.href = sLinkHref; this.title = sLinkTitle; this.rel = sLinkRel; if (this.rel.test("noclose", "i")) { this.options.canClose = false } this.position(); this.setup(true); this.top = Window.getScrollTop() + (Window.getHeight() / 15); this.center.setStyles({ top: this.top + "px", display: "" }); this.fx.overlay.custom(0.8); return this.loadContents(sLinkHref) }, position: function() { this.overlay.setStyles({ top: Window.getScrollTop() + "px", height: Window.getHeight() + "px" }) }, setup: function(open) { var elements = $A($$("object")); elements.extend($$(window.ActiveXObject ? "select" : "embed")); elements.each(function(el) { el.style.visibility = open ? "hidden" : "" }); var fn = open ? "addEvent" : "removeEvent"; window[fn]("scroll", this.eventPosition)[fn]("resize", this.eventPosition); document[fn]("keydown", this.eventKeyDown); this.step = 0 }, loadContents: function() { if (this.step) { return false } this.step = 1; if (!this.options.canClose) { this.noClose() } var aDim = this.rel.match(/[0-9]+/g); this.options.contentsWidth = (aDim && (aDim[0] > 0)) ? aDim[0] : this.options.defContentsWidth; this.options.contentsHeight = (aDim && (aDim[1] > 0)) ? aDim[1] : this.options.defContentsHeight; this.bottom.setStyles({ opacity: "0", height: "0px", display: "none" }); this.center.className = "mb_loading"; this.fx.contents.hide(); var nextEffect = this.nextEffect.bind(this); var ajaxFailure = this.ajaxFailure.bind(this); var ajaxOptions = { method: "get", update: this.contents, evalScripts: this.options.evalScripts, evalResponse: this.options.evalResponse, onComplete: nextEffect, onFailure: ajaxFailure }; if ($(this.href)) { this.loadInlineContents($(this.href)) } else { this.ajaxRequest = new Ajax(this.href, ajaxOptions).request() } return false }, loadInlineContents: function(myElement) { this.injectElement(myElement); myElement.setStyle("visibility", "visible"); var elements = $A($ES("object", myElement)); elements.extend($ES(window.ActiveXObject ? "select" : "embed", myElement)); elements.each(function(el) { el.style.visibility = open ? "visible" : "" }); this.nextEffect() }, netCallComplete: function() { if (!this.netComplete) { this.proceedlink = new Element("div", { id: "proceed" }); this.proceedlink.setStyle("margin", "4px"); new Element("a", { href: "PaymentDetails.aspx" }).setHTML('<img title="Continue" alt="Continue" src="/Images/Buttons/continue.png"/>').injectInside(this.proceedlink); this.netComplete = true; this.contentHandler() } }, contentHandler: function() { if (!$("proceed")) { if (this.netComplete && this.mooComplete) { if (this.options.loadDiv) { this.options.loadDiv.replaceWith(this.proceedlink) } else { this.injectElement(this.proceedlink) } } else { } } else { } }, injectElement: function(myElement) { myElement.injectInside(this.contents) }, ajaxFailure: function() { this.contentLoaded = -1; this.contents.setHTML(""); this.error.clone().injectInside(this.contents); this.nextEffect(); if (this.options.canClose) { this.center.setStyle("cursor", "pointer"); this.bottom.setStyle("cursor", "pointer"); this.center.onclick = this.bottom.onclick = this.close.bind(this) } }, nextEffect: function() { switch (this.step++) { case 1: this.center.className = ""; this.center.setStyle("cursor", "default"); this.bottom.setStyle("cursor", "default"); this.center.onclick = this.bottom.onclick = ""; this.caption.setHTML(this.title); this.contents.setStyles({ width: this.options.contentsWidth + "px", height: this.options.contentsHeight + "px" }); if (this.center.clientHeight != this.contents.offsetHeight) { this.fx.resize.custom({ height: [this.center.clientHeight, this.contents.offsetHeight] }); break } this.step++; case 2: if (this.center.clientWidth != this.contents.offsetWidth) { this.fx.resize.custom({ width: [this.center.clientWidth, this.contents.offsetWidth], marginLeft: [-this.center.clientWidth / 2, -this.contents.offsetWidth / 2] }); break } this.step++; case 3: this.bottom.setStyles({ top: this.top + "px", width: this.contents.style.width, marginLeft: (parseInt(this.center.style.marginLeft) + 10), display: "" }); this.fx.contents.custom(0, 1); break; case 4: this.mooComplete = true; this.contentHandler(); if (this.options.canClose) { if (this.options.animateCaption) { this.fx.bottom.custom({ opacity: [0, 1], height: [0, this.bottom.scrollHeight] }); break } this.bottom.setStyles({ opacity: "1", height: this.bottom.scrollHeight + "px" }) } case 5: this.step = 0 } }, keyboardListener: function(event) { if (this.options.canClose) { if ((event.control && event.key == "w") || (event.control && event.key == "x") || (event.key == "esc")) { this.close(); event.stop() } } }, close: function() { if (this.step < 0) { return } this.step = -1; for (var f in this.fx) { this.fx[f].clearTimer() } this.center.style.display = this.bottom.style.display = "none"; this.center.className = "mb_loading"; this.fx.overlay.chain(this.setup.pass(false, this)).custom(0); return false }, noClose: function() { this.overlay.setStyle("cursor", "default"); this.closelink.setStyle("cursor", "default"); this.closelink.onclick = this.overlay.onclick = "" } }; Window.onDomReady(MOOdalBox.init.bind(MOOdalBox));