if (!window.AjaxPopUp) var AjaxPopUp = new Object(); AjaxPopUp.Methods = { focusableElements: [], currFocused: 0, initialized: false, active: true, options: { title: "AjaxPopUp Window", overlayClose: true, width: 600, height: 420, overlayOpacity: 0.65, overlayDuration: 0.25, slideDownDuration: 0.5, slideUpDuration: 0.5, resizeDuration: 0.25, inactiveFade: true, transitions: true, loadingString: "Please wait. Loading...", closeString: "Close window", closeValue: "X", params: {}, method: 'get', autoFocusing: true }, _options: new Object, setOptions: function(options) { Object.extend(this.options, options || {}); }, _init: function(options) { Object.extend(this._options, this.options); this.setOptions(options); this.MBoverlay = new Element("div", {id: "APP_overlay", style: "opacity: 0"}); this.APPwindow = new Element("div", {id: "APP_window", style: "display: none"}).update( this.MBframe = new Element("div", {id: "APP_frame"}).update( this.MBheader = new Element("div", {id: "APP_header"}).update(
this.MBcaption = new Element("div", {id: "APP_caption"}) ) ) ); this.MBclose = new Element("a", {id: "APP_close", title: this.options.closeString, href: "#"}).update("<span>" + this.options.closeValue + "</span>"); this.MBheader.insert({'bottom':this.MBclose}); this.MBcontent = new Element("div", {id: "APP_content"}).update( this.MBloading = new Element("div", {id: "APP_loading"}).update(this.options.loadingString) ); this.MBframe.insert({'bottom':this.MBcontent}); var injectToEl = this.options.aspnet ? $(document.body).down('form') : $(document.body); injectToEl.insert({'top':this.APPwindow}); injectToEl.insert({'top':this.MBoverlay}); this.initScrollX = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft; this.initScrollY = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop; this.hideObserver = this._hide.bindAsEventListener(this); this.kbdObserver = this._kbdHandler.bindAsEventListener(this); this._initObservers(); this.initialized = true;
}, show: function(content, options) { if(!this.initialized) this._init(options); this.content = content; this.setOptions(options); if(this.options.title) $(this.MBcaption).update(this.options.title); else { $(this.MBheader).hide(); $(this.MBcaption).hide(); } if(this.APPwindow.style.display == "none") { this._appear(); this.event("onShow"); } else { this._update(); this.event("onUpdate"); } }, hide: function(options) { if(this.initialized) { if(options && typeof options.element != 'function') Object.extend(this.options, options); this.event("beforeHide"); if(this.options.transitions) Effect.SlideUp(this.APPwindow, { duration: this.options.slideUpDuration, transition: Effect.Transitions.sinoidal, afterFinish: this._deinit.bind(this) } ); else { $(this.APPwindow).hide(); this._deinit(); } } else throw("AjaxPopUp is not initialized."); }, _hide: function(event) { event.stop(); if(event.element().id == 'APP_overlay' && !this.options.overlayClose) return false; this.hide(); }, _appear: function() {
if(Prototype.Browser.IE && !navigator.appVersion.match(/\b7.0\b/)) { window.scrollTo(0,0); this._prepareIE("100%", "hidden"); } this._setWidth(); this._setPosition(); if(this.options.transitions) { this.MBoverlay.setStyle({opacity: 0}); new Effect.Fade(this.MBoverlay, { from: 0, to: this.options.overlayOpacity, duration: this.options.overlayDuration, afterFinish: function() { new Effect.SlideDown(this.APPwindow, { duration: this.options.slideDownDuration, transition: Effect.Transitions.sinoidal, afterFinish: function(){ this._setPosition(); this.loadContent(); }.bind(this) }); }.bind(this) }); } else { this.MBoverlay.setStyle({opacity: this.options.overlayOpacity}); $(this.APPwindow).show(); this._setPosition(); this.loadContent(); } this._setWidthAndPosition = this._setWidthAndPosition.bindAsEventListener(this); Event.observe(window, "resize", this._setWidthAndPosition); }, resize: function(byWidth, byHeight, options) { var w = this.APPwindow.getDimensions(); var hHeight = $(this.MBheader).getHeight();
var cHeight = $(this.MBcontent).getHeight(); var newHeight = ((w.height - hHeight + byHeight) < cHeight) ? (cHeight + hHeight) : (w.height + byHeight); var newWidth = w.width + byWidth; this.options.width = newWidth; if(options) this.setOptions(options); if(this.options.transitions) { var oWidth = this.MBoverlay.getWidth(); new Effect.Morph(this.APPwindow, { style: "width:" + newWidth + "px; height:" + newHeight + "px; left:" + ((oWidth - newWidth)/2) + "px", duration: this.options.resizeDuration, beforeStart: function(fx){ fx.element.setStyle({overflow:"hidden"}); }, afterFinish: function(fx) { fx.element.setStyle({overflow:"visible"}); this.event("_afterResize"); this.event("afterResize"); }.bind(this) }); } else { this.APPwindow.setStyle({width: newWidth + "px", height: newHeight + "px"}); setTimeout(function() { this.event("_afterResize"); this.event("afterResize"); }.bind(this), 1); } }, _update: function() { $(this.MBcontent).update($(this.MBloading).update(this.options.loadingString));
this.loadContent(); }, loadContent: function () { if(this.event("beforeLoad") != false) { if(typeof this.content == 'string') { var htmlRegExp = new RegExp(/<\/?[^>]+>/gi); if(htmlRegExp.test(this.content)) { this._insertContent(this.content.stripScripts(), function(){ this.content.extractScripts().map(function(script) { return eval(script.replace("<!--", "").replace("// -->", "")); }.bind(window)); }.bind(this)); } else new Ajax.Request( this.content, { method: this.options.method.toLowerCase(), parameters: this.options.params, onSuccess: function(transport) { var response = new String(transport.responseText); this._insertContent(transport.responseText.stripScripts(), function(){ response.extractScripts().map(function(script) { return eval(script.replace("<!--", "").replace("// -->", "")); }.bind(window)); }); }.bind(this), onException: function(instance, exception){ AjaxPopUp.hide(); throw('AjaxPopUp Loading Error: ' + exception); } }); } else if (typeof this.content == 'object') {
this._insertContent(this.content); } else { AjaxPopUp.hide(); throw('AjaxPopUp Parameters Error: Please specify correct URL or HTML element (plain HTML or object)'); } } }, _insertContent: function(content, callback){ $(this.MBcontent).hide().update(""); if(typeof content == 'string') { this.MBcontent.update(new Element("div", { style: "display: none" }).update(content)).down().show(); } else if (typeof content == 'object') { var _htmlObj = content.cloneNode(true); if(content.id) content.id = "APP_" + content.id; $(content).select('*[id]').each(function(el){ el.id = "APP_" + el.id; }); this.MBcontent.update(_htmlObj).down('div').show(); if(Prototype.Browser.IE) $$("#APP_content select").invoke('setStyle', {'visibility': ''}); } var w = this.APPwindow.getDimensions(); if(this.options.height == this._options.height) { AjaxPopUp.resize((this.options.width - w.width), $(this.MBcontent).getHeight() - w.height + $(this.MBheader).getHeight(), { afterResize: function(){ setTimeout(function(){
this._putContent(callback); }.bind(this),1); }.bind(this) }); } else { this._setWidth(); this.MBcontent.setStyle({overflow: 'auto', height: w.height - $(this.MBheader).getHeight() - 13 + 'px'}); setTimeout(function(){ this._putContent(callback); }.bind(this), 1); } }, _putContent: function(callback){ this.MBcontent.show(); this.focusableElements = this._findFocusableElements(); this._setFocus(); if(callback != undefined) callback(); this.event("afterLoad"); }, activate: function(options){ this.setOptions(options); this.active = true; $(this.MBclose).observe("click", this.hideObserver); if(this.options.overlayClose) this.MBoverlay.observe("click", this.hideObserver); $(this.MBclose).show(); if(this.options.transitions && this.options.inactiveFade) new Effect.Appear(this.APPwindow, {duration: this.options.slideUpDuration}); }, deactivate: function(options) { this.setOptions(options); this.active = false; $(this.MBclose).stopObserving("click", this.hideObserver); if(this.options.overlayClose)
this.MBoverlay.stopObserving("click", this.hideObserver); $(this.MBclose).hide(); if(this.options.transitions && this.options.inactiveFade) new Effect.Fade(this.APPwindow, {duration: this.options.slideUpDuration, to: 0.75}); }, _initObservers: function(){ $(this.MBclose).observe("click", this.hideObserver); if(this.options.overlayClose) this.MBoverlay.observe("click", this.hideObserver); if(Prototype.Browser.Gecko) Event.observe(document, "keypress", this.kbdObserver); else Event.observe(document, "keydown", this.kbdObserver); }, _removeObservers: function(){ $(this.MBclose).stopObserving("click", this.hideObserver); if(this.options.overlayClose) this.MBoverlay.stopObserving("click", this.hideObserver); if(Prototype.Browser.Gecko) Event.stopObserving(document, "keypress", this.kbdObserver); else Event.stopObserving(document, "keydown", this.kbdObserver); }, _setFocus: function() { if(this.focusableElements.length > 0 && this.options.autoFocusing == true) {
var firstEl = this.focusableElements.find(function (el){ return el.tabIndex == 1; }) || this.focusableElements.first(); this.currFocused = this.focusableElements.toArray().indexOf(firstEl); firstEl.focus(); } else if($(this.MBclose).visible()) $(this.MBclose).focus(); }, _findFocusableElements: function(){ this.MBcontent.select('input:not([type~=hidden]), select, textarea, button, a[href]').invoke('addClassName', 'APP_focusable'); return this.MBcontent.select('.APP_focusable'); }, _kbdHandler: function(event) { var node = event.element(); switch(event.keyCode) { case Event.KEY_TAB: event.stop(); if(node != this.focusableElements[this.currFocused]) this.currFocused = this.focusableElements.toArray().indexOf(node); if(!event.shiftKey) { if(this.currFocused >= this.focusableElements.length - 1) { this.currFocused = 0; } else { this.currFocused++; } } else { if(this.currFocused <= 0) { this.currFocused = this.focusableElements.length - 1; } else { this.currFocused--; } }
this.focusableElements[this.currFocused].focus(); break; case Event.KEY_ESC: if(this.active) this._hide(event); break; case 32: this._preventScroll(event); break; case 0: if(event.which == 32) this._preventScroll(event); break; case Event.KEY_UP: case Event.KEY_DOWN: case Event.KEY_PAGEDOWN: case Event.KEY_PAGEUP: case Event.KEY_HOME: case Event.KEY_END: if(Prototype.Browser.WebKit && !["textarea", "select"].include(node.tagName.toLowerCase())) event.stop(); else if( (node.tagName.toLowerCase() == "input" && ["submit", "button"].include(node.type)) || (node.tagName.toLowerCase() == "a") ) event.stop(); break; } }, _preventScroll: function(event) { if(!["input", "textarea", "select", "button"].include(event.element().tagName.toLowerCase())) event.stop(); }, _deinit: function () { this._removeObservers(); Event.stopObserving(window, "resize", this._setWidthAndPosition); if(this.options.transitions) {
Effect.toggle(this.MBoverlay, 'appear', {duration: this.options.overlayDuration, afterFinish: this._removeElements.bind(this) }); } else { this.MBoverlay.hide(); this._removeElements(); } $(this.MBcontent).setStyle({overflow: '', height: ''}); }, _removeElements: function () { if (Prototype.Browser.Opera) { window.scrollBy(0, 0); } this.MBoverlay.remove(); this.APPwindow.remove(); if(Prototype.Browser.IE && !navigator.appVersion.match(/\b7.0\b/)) { this._prepareIE("", ""); window.scrollTo(this.initScrollX, this.initScrollY); } if(typeof this.content == 'object') { if(this.content.id && this.content.id.match(/APP_/)) { this.content.id = this.content.id.replace(/APP_/, ""); } this.content.select('*[id]').each(function(el){ el.id = el.id.replace(/APP_/, ""); }); } this.initialized = false; this.event("afterHide"); this.setOptions(this._options); }, _setWidth: function () { this.APPwindow.setStyle({width: this.options.width + "px", height: this.options.height + "px"}); }, _setPosition: function () {
this.APPwindow.setStyle({left: (($(this.MBoverlay).getWidth() - $(this.APPwindow).getWidth()) / 2 ) + "px"}); }, _setWidthAndPosition: function () { $(this.APPwindow).setStyle({width: this.options.width + "px"}); this._setPosition(); }, _getScrollTop: function () { var theTop; if (document.documentElement && document.documentElement.scrollTop) theTop = document.documentElement.scrollTop; else if (document.body) theTop = document.body.scrollTop; return theTop; }, _prepareIE: function(height, overflow){ $$('html, body').invoke('setStyle', {width: height, height: height, overflow: overflow}); $$("select").invoke('setStyle', {'visibility': overflow}); }, event: function(eventName) { var r = true; if(this.options[eventName]) { var returnValue = this.options[eventName](); this.options[eventName] = null; if(!Object.isUndefined(returnValue)) r = returnValue; } Event.fire(document, 'AjaxPopUp:' + eventName); return r; } }; Object.extend(AjaxPopUp, AjaxPopUp.Methods);
function ajaxContactEvent(data){AjaxPopUp.show(data.href,{title: data.title, width: 600, height: 420, method: 'post'});}