/*ModalBox - The pop-up window thingie with AJAX, based on prototype and script.aculo.us. Copyright Andrey Okonetchnikov (andrej.okonetschnikow@gmail.com), 2006-2007All rights reserved. VERSION 1.6.1Last Modified: 01/11/2010*/ if (!window.Modalbox)
var Modalbox = new Object(); Modalbox.Methods = {
overrideAlert: false, // Override standard browser alert message with ModalBox
focusableElements: [],
currFocused: 0,
initialized: false,
active: true,
options: {

title: "ModalBox Window", // Title of the ModalBox window

overlayClose: true, // Close modal box by clicking on overlay

width: 500, // Default width in px

height: 90, // Default height in px

overlayOpacity: 0.65, // Default overlay opacity

overlayDuration: 0.25, // Default overlay fade in/out duration in seconds

slideDownDuration: 0.5, // Default Modalbox appear slide down effect in seconds

slideUpDuration: 0.5, // Default Modalbox hiding slide up effect in seconds

resizeDuration: 0.25, // Default resize duration seconds

inactiveFade: true, // Fades MB window on inactive state

transitions: true, // Toggles transition effects. Transitions are enabled by default

loadingString: "Please wait. Loading...", // Default loading string message

closeString: "Close window", // Default title attribute for close window link

closeValue: "×", // Default string for close link in the header

params: {},

method: 'get', // Default Ajax request method

autoFocusing: true, // Toggles auto-focusing for form elements. Disable for long text pages.

aspnet: false // Should be use then using with ASP.NET costrols. Then true Modalbox window will be injected into the first form element.
},
_options: new Object, 
setOptions: function(options) {

Object.extend(this.options, options || {});
}, 
_init: function(options) {

// Setting up original options with default options

Object.extend(this._options, this.options);

this.setOptions(options); 

//Creating the overlay

this.MBoverlay = new Element("div", {id: "MB_overlay", style: "opacity: 0"}); 

//Creating the modal window

this.MBwindow = new Element("div", {id: "MB_window", style: "display: none"}).update(


this.MBframe = new Element("div", {id: "MB_frame"}).update(



this.MBheader = new Element("div", {id: "MB_header"}).update(




this.MBcaption = new Element("div", {id: "MB_caption"})



)


)

);

this.MBclose = new Element("a", {id: "MB_close", title: this.options.closeString, href: "#"}).update("<span>" + this.options.closeValue + "</span>");

this.MBheader.insert({'bottom':this.MBclose}); 

this.MBcontent = new Element("div", {id: "MB_content"}).update(


this.MBloading = new Element("div", {id: "MB_loading"}).update(this.options.loadingString)

);

this.MBframe.insert({'bottom':this.MBcontent}); 

// Inserting into DOM. If parameter set and form element have been found will inject into it. Otherwise will inject into body as topmost element.

// Be sure to set padding and marging to null via CSS for both body and (in case of asp.net) form elements. 

var injectToEl = this.options.aspnet ? $(document.body).down('form') : $(document.body);

injectToEl.insert({'top':this.MBwindow});

injectToEl.insert({'top':this.MBoverlay}); 

// Initial scrolling position of the window. To be used for remove scrolling effect during ModalBox appearing

this.initScrollX = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;

this.initScrollY = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop; 

//Adding event observers

this.hideObserver = this._hide.bindAsEventListener(this);

this.kbdObserver = this._kbdHandler.bindAsEventListener(this);

this._initObservers(); 

this.initialized = true; // Mark as initialized
}, 
show: function(content, options) {

if(!this.initialized) this._init(options); // Check for is already initialized 

this.content = content;

this.setOptions(options); 

if(this.options.title) // Updating title of the MB


$(this.MBcaption).update(this.options.title);

else { // If title isn't given, the header will not displayed


$(this.MBheader).hide();


$(this.MBcaption).hide();

} 

if(this.MBwindow.style.display == "none") { // First modal box appearing


this._appear();


this.event("onShow"); // Passing onShow callback

}

else { // If MB already on the screen, update it


this._update();


this.event("onUpdate"); // Passing onUpdate callback

} 
}, 
hide: function(options) { // External hide method to use from external HTML and JS

if(this.initialized) {


// Reading for options/callbacks except if event given as a parameter


if(options && typeof options.element != 'function') Object.extend(this.options, options); 


// Passing beforeHide callback


this.event("beforeHide");


if(this.options.transitions)



Effect.SlideUp(this.MBwindow, { duration: this.options.slideUpDuration, transition: Effect.Transitions.sinoidal, afterFinish: this._deinit.bind(this) } );


else {



$(this.MBwindow).hide();



this._deinit();


}

} else throw("Modalbox is not initialized.");
}, 
_hide: function(event) { // Internal hide method to use with overlay and close link

event.stop(); // Stop event propagation for link elements

/* Then clicked on overlay we'll check the option and in case of overlayClose == false we'll break hiding execution [Fix for #139] */

if(event.element().id == 'MB_overlay' && !this.options.overlayClose) return false;

this.hide();
}, 
alert: function(message){

var html = '<div class="MB_alert"><p>' + message + '</p><input type="button" onclick="Modalbox.hide()" value="OK" /></div>';

Modalbox.show(html, {title: 'Alert: ' + document.title, width: 300});
}, 
_appear: function() { // First appearing of MB

if(Prototype.Browser.IE && !navigator.appVersion.match(/\b7.0\b/)) { // Preparing IE 6 for showing modalbox


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.MBwindow, {






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.MBwindow).show();


this._setPosition(); 


this.loadContent();

}

this._setWidthAndPosition = this._setWidthAndPosition.bindAsEventListener(this);

Event.observe(window, "resize", this._setWidthAndPosition);
}, 
resize: function(byWidth, byHeight, options) { // Change size of MB without loading content

var w = this.MBwindow.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; // is this used anywhere else?

if(options) this.setOptions(options); // Passing callbacks

if(this.options.transitions) {


var oWidth = this.MBoverlay.getWidth();


new Effect.Morph(this.MBwindow, {



style: "width:" + newWidth + "px; height:" + newHeight + "px; left:" + ((oWidth - newWidth)/2) + "px",



duration: this.options.resizeDuration, 



beforeStart: function(fx){




fx.element.setStyle({overflow:"hidden"}); // Fix for MSIE 6 to resize correctly



},



afterFinish: function(fx) {




fx.element.setStyle({overflow:"visible"});




this.event("_afterResize"); // Passing internal callback




this.event("afterResize"); // Passing callback



}.bind(this)


});

} else {


this.MBwindow.setStyle({width: newWidth + "px", height: newHeight + "px"});


setTimeout(function() {



this.event("_afterResize"); // Passing internal callback



this.event("afterResize"); // Passing callback


}.bind(this), 1);

} 
}, 
resizeToContent: function(options){

// Resizes the modalbox window to the actual content height.

// This might be useful to resize modalbox after some content modifications which were changed content height. 

var byHeight = this.options.height - $(this.MBwindow).getHeight();

if(byHeight != 0) {


if(options) this.setOptions(options); // Passing callbacks


Modalbox.resize(0, byHeight);

}
}, 
resizeToInclude: function(element, options){

// Resizes the modalbox window to the cumulative height of element. Calculations are using CSS properties for margins and border.

// This method might be useful to resize modalbox before including or updating content. 

var el = $(element);

var styles = ['margin-top','margin-bottom','border-top-width','border-bottom-width'];

var elHeight = styles.inject(el.getHeight,function(acc,n){

  var x = parseInt(el.getStyle(n), 10);


acc += (isNaN(x) ? 0 : x);


return acc;

});

if(elHeight > 0) {


if(options) this.setOptions(options); // Passing callbacks


Modalbox.resize(0, elHeight);

}
}, 
_update: function() { // Updating MB in case of wizards

$(this.MBcontent).update($(this.MBloading).update(this.options.loadingString));

this.loadContent();
}, 
loadContent: function () {

if(this.event("beforeLoad") != false) { // If callback passed false, skip loading of the content


if(typeof this.content == 'string') {



var htmlRegExp = new RegExp(/<\/?[^>]+>/gi);



if(htmlRegExp.test(this.content)) { // Plain HTML given as a parameter




this._insertContent(this.content.stripScripts(), function(){





this.content.extractScripts().map(function(script) { 






return eval(script.replace("<!--", "").replace("// -->", ""));





}.bind(window));




}.bind(this));



} else // URL given as a parameter. We'll request it via Ajax




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){






Modalbox.hide();






throw('Modalbox Loading Error: ' + exception);





}




}); 


} else if (typeof this.content == 'object') {// HTML Object is given



this._insertContent(this.content);


} else {



Modalbox.hide();



throw('Modalbox 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') { // Plain HTML is given


this.MBcontent.update(new Element("div", { style: "display: none" }).update(content)).down().show();

} else if (typeof content == 'object') { // HTML Object is given


var _htmlObj = content.cloneNode(true); // If node already a part of DOM we'll clone it


// If clonable element has ID attribute defined, modifying it to prevent duplicates


if(content.id) content.id = "MB_" + content.id;


// Add prefix for IDs on all elements inside the DOM node


$(content).select('*[id]').each(function(el){ el.id = "MB_" + el.id; });


this.MBcontent.update(_htmlObj).down('div').show();


if(Prototype.Browser.IE) // Toggling back visibility for hidden selects in IE



$$("#MB_content select").invoke('setStyle', {'visibility': ''});

} 

// Prepare and resize modal box for content

var w = this.MBwindow.getDimensions();

if(this.options.height == this._options.height) {


Modalbox.resize((this.options.width - w.width), $(this.MBcontent).getHeight() - w.height + $(this.MBheader).getHeight(), {



afterResize: function(){




setTimeout(function(){ // MSIE fix





this._putContent(callback);




}.bind(this),1);



}.bind(this)


});

} else { // Height is defined. Creating a scrollable window


this._setWidth();


this.MBcontent.setStyle({overflow: 'auto', height: w.height - $(this.MBheader).getHeight() - 13 + 'px'});


setTimeout(function(){ // MSIE fix



this._putContent(callback);


}.bind(this), 1);

}
}, 
_putContent: function(callback){

this.MBcontent.show();

this.focusableElements = this._findFocusableElements();

this._setFocus(); // Setting focus on first 'focusable' element in content (input, select, textarea, link or button)

if(callback != undefined)


callback(); // Executing internal JS from loaded content

this.event("afterLoad"); // Passing callback
}, 
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.MBwindow, {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.MBwindow, {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); // Gecko is moving focus a way too fast

else


Event.observe(document, "keydown", this.kbdObserver); // All other browsers are okay with keydown
}, 
_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() { 

/* Setting focus to the first 'focusable' element which is one with tabindex = 1 or the first in the form loaded. */

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(); // Focus on first focusable element except close button

} else if($(this.MBclose).visible())


$(this.MBclose).focus(); // If no focusable elements exist focus on close button
}, 
_findFocusableElements: function(){ // Collect form elements or links from MB content

this.MBcontent.select('input:not([type~=hidden]), select, textarea, button, a[href]').invoke('addClassName', 'MB_focusable');

return this.MBcontent.select('.MB_focusable');
}, 
_kbdHandler: function(event) {

var node = event.element();

switch(event.keyCode) {


case Event.KEY_TAB:



event.stop(); 



/* Switching currFocused to the element which was focused by mouse instead of TAB-key. Fix for #134 */ 



if(node != this.focusableElements[this.currFocused])




this.currFocused = this.focusableElements.toArray().indexOf(node); 



if(!event.shiftKey) { //Focusing in direct order




if(this.currFocused >= this.focusableElements.length - 1) {





this.currFocused = 0;




} else {





this.currFocused++;




}



} else { // Shift key is pressed. Focusing in reverse order




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: // For Gecko browsers compatibility



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:



// Safari operates in slightly different way. This realization is still buggy in Safari.



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) { // Disabling scrolling by "space" key

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) { // Remove overlay after-effects in Opera


window.scrollBy(0, 0);

}

this.MBoverlay.remove();

this.MBwindow.remove();

if(Prototype.Browser.IE && !navigator.appVersion.match(/\b7.0\b/)) {


this._prepareIE("", ""); // If set to auto MSIE will show horizontal scrolling


window.scrollTo(this.initScrollX, this.initScrollY);

} 

/* Replacing prefixes 'MB_' in IDs for the original content */

if(typeof this.content == 'object') {


if(this.content.id && this.content.id.match(/MB_/)) {



this.content.id = this.content.id.replace(/MB_/, "");


}


this.content.select('*[id]').each(function(el){ el.id = el.id.replace(/MB_/, ""); });

}

/* Initialized will be set to false */

this.initialized = false;

this.event("afterHide"); // Passing afterHide callback

this.setOptions(this._options); // Settings options object into initial state
}, 
_setWidth: function () { //Set size

this.MBwindow.setStyle({width: this.options.width + "px", height: this.options.height + "px"});
}, 
_setPosition: function () {

this.MBwindow.setStyle({left: (($(this.MBoverlay).getWidth() - $(this.MBwindow).getWidth()) / 2 ) + "px"});
}, 
_setWidthAndPosition: function () {

$(this.MBwindow).setStyle({width: this.options.width + "px"});

this._setPosition();
}, 
_getScrollTop: function () { //From: http://www.quirksmode.org/js/doctypes.html

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}); // IE requires width and height set to 100% and overflow hidden

$$("select").invoke('setStyle', {'visibility': overflow}); // Toggle visibility for all selects in the common document
},
event: function(eventName) {

var r = true;
if(this.options[eventName]) {
	var returnValue = this.options[eventName](); // Executing callback
	this.options[eventName] = null; // Removing callback after execution
	if(!Object.isUndefined(returnValue))        r = returnValue;    }    Event.fire(document, 'Modalbox:' + eventName);    return r;  }}; Object.extend(Modalbox, Modalbox.Methods); if(Modalbox.overrideAlert) window.alert = Modalbox.alert;