/*
Script: modalwindow.js
	ModalWindow - Simple javascript popup overlay to replace builtin alert, prompt and confirm.

License:
	PHP-style license.

Copyright:
	Copyright (c) 2009 [Kieron Wilson](http://kd3sign.co.uk/).

Code & Documentation:
	http://kd3sign.co.uk/examples/modalwindow/

*/

var ModalWindow = {
	
	box: null,
	overlay: null,
	
	open: function() {
		var options = arguments[0] || {};
		var defaults = {
			'type': "alert",
			'opacity': "0.5",
			'width': null,
			'height': 'auto',
			'title': "Popup",
			'text': "",
			'yes_button': "Yes",
			'no_button': "No",
			'cancel_button': "Cancel",
			'yes': null,
			'no': null
		};

		for( key in defaults ) {
			this[key] = ( typeof options[key] != "undefined" ) ? options[key] : defaults[key] ;
		}

		this.close();
		this.initOverlay();
		this.initBox();
	},
	
	close: function() {
		if( this.box && this.overlay ) {
			this.remove( this.box );
			this.box = null;
			this.remove( this.overlay );
			this.overlay = null;
			this.removeEvent(window, "keyup", ModalWindow.keyup);
		}
	},
	
	option: function(method) {
		if( this[ method ] ) {
			this[ method ]();
		}
		this.close();
	},
	
	keyup: function(e) {
		var evt = e || window.event;
		if( evt.keyCode == 13 ) {
			ModalWindow.option('yes');
		}
	},
	
	initBox: function() {
		var dim = this.getPageSize();
		
		var boxWidth = ( ( this.width ) ? this.width : ( dim.pageWidth / 4 ) )  + "px";
		var boxHeight = ( typeof this.height == "string" ) ? "auto" : this.height + "px" ;
		
		var boxPosVCentre = ( typeof this.height == "string" ) ? 0 : ( ( dim.windowHeight / 2 ) - ( parseInt(boxHeight) / 2 ) ) ;
		var boxPosHCentre = ( ( dim.pageWidth / 2 ) - ( parseInt(boxWidth) / 2 ) );
		
		var boxPosTop = ( typeof this.height == "string" ) ? "10px" : boxPosVCentre + "px" ;
		var boxPosLeft = boxPosHCentre + "px";
		
		this.box = this.element("div", {
			'class': 'ModalWindowBox',
			'styles' : {
				'width': boxWidth,
				'height': boxHeight,
				'position': "absolute",
				'top': boxPosTop,
				'left': boxPosLeft,
				'zIndex': 1000
			}
		});
		this.inject(this.box);

		switch( this.type ) {
			case "alert" :
			
				var container = this.element("div", {
					'class': "ModalWindowContainer"
				});

				container.appendChild(this.element("h3", {
					'html': this.title
				}));

				container.appendChild(this.element("p", {
					'html': this.text
				}));
				
				if( this.yes != false ) {
					var buttonContainer = this.element("div", {
						'class': "ModalWindowButtons"
					});
					
					buttonContainer.appendChild(this.element("a", {
						'html': this.yes_button,
						'href': "javascript:ModalWindow.close();"
					}));
					
					this.addEvent(window, "keyup", ModalWindow.keyup);
	
					container.appendChild(buttonContainer);
				}
				this.box.appendChild(container);

			break;
			case "confirm" :
			
				var container = this.element("div", {
					'class': "ModalWindowContainer"
				});

				container.appendChild(this.element("h3", {
					'html': this.title
				}));
				
				container.appendChild(this.element("p", {
					'html': this.text
				}));
				
				var buttonContainer = this.element("div", {
					'class': "ModalWindowButtons"
				});
				
				this.addEvent(window, "keyup", ModalWindow.keyup);
				
				if( this.yes ) {
					buttonContainer.appendChild(this.element("a", {
						'html': this.yes_button,
						'href': "javascript:ModalWindow.option('yes');",
						'style': "font-weight: bold;"
					}));
				}
				if( this.no ) {
					buttonContainer.appendChild(this.element("a", {
						'html': this.no_button,
						'href': "javascript:ModalWindow.option('no');"
					}));
				}
				buttonContainer.appendChild(this.element("a", {
					'html': this.cancel_button,
					'href': "javascript:ModalWindow.close();"
				}));

				container.appendChild(buttonContainer);
				this.box.appendChild(container);
				
				

			break;
			case "prompt" :
			
				var container = this.element("div", {
					'class': "ModalWindowContainer"
				});

				container.appendChild(this.element("h3", {
					'html': this.title
				}));
				
				container.appendChild(this.element("p", {
					'html': this.text
				}));
				
				this.input = this.element("input", {
					'name': "prompt",
					'type': "text"
				});
				container.appendChild(this.input);
				
				var buttonContainer = this.element("div", {
					'class': "ModalWindowButtons"
				});
				
				if( this.yes ) {
					buttonContainer.appendChild(this.element("a", {
						'html': ModalWindow.yes_button,
						'href': "javascript:ModalWindow.option('yes');",
						'style': "font-weight: bold;"
					}));
					this.addEvent(window, "keyup", ModalWindow.keyup);
				}
				buttonContainer.appendChild(this.element("a", {
					'html': ModalWindow.cancel_button,
					'href': "javascript:ModalWindow.close();"
				}));

				container.appendChild(buttonContainer);
				this.box.appendChild(container);
				this.input.focus();
			
			break;
		}
		
	},
	
	initOverlay: function() {
		var dim = this.getPageSize();
		this.overlay = this.element("div", {
			'styles': {
			
				'backgroundColor': "black",
				'opacity': this.opacity,
				'position': "absolute",
				'top': "0px",
				'left': "0px",
				'width': dim.pageWidth + "px",
				'height': dim.pageHeight + "px",
				'zIndex': 999
			
			}
		});
		this.inject(this.overlay);
	},
	
	inject: function(el) {
		document.body.appendChild( el );
	},
	
	remove: function(el) {
		document.body.removeChild( el );
	},
	
	element: function() {
		var tag = arguments[0], options = arguments[1];
		var el = document.createElement(tag);
		var attributes = {
			'html': 'innerHTML',
			'class': 'className',
			'for': 'htmlFor',
			'text': 'innerText'
		};
		if( options ) {
			if( typeof options == "object" ) {
				for( name in options ) {
					var value = options[name];
					if(name == "styles") {
						this.setStyles(el, value);
					} else if (attributes[name]) { 
						el[attributes[name]] = value; 
					} else { 
						el.setAttribute(name, value); 
					}
				}
			}
		}
		return el;
	},
	
	addEvent: function( o, e, f ) {
		if(o) {
			if( o.addEventListener ) o.addEventListener(e, f, false );
			else if( o.attachEvent ) o.attachEvent( 'on'+e , f);
		}
	},
	
	removeEvent: function( o, e, f ) {
		if(o) {
			if( o.removeEventListener ) o.removeEventListener( e, f, false );
			else if( o.detachEvent ) o.detachEvent( 'on'+e, f );
		}
	},
	
	setStyles: function(e, o) {
		for( k in o ) {
			this.setStyle(e, k, o[k]);
		}
	},
	
	setStyle: function(e, p, v) {
		if ( p == 'opacity' ) {
			if (window.ActiveXObject) {
				e.style.filter = "alpha(opacity=" + v*100 + ")";
			}
			e.style.opacity = v;
		} else {
			e.style[p] = v;
		}
	},
		
	getPageSize: function() {
		var xScroll, yScroll;
		
		if (window.innerHeight && window.scrollMaxY) {	
			xScroll = window.innerWidth + window.scrollMaxX;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight) {
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else {
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}
		
		var windowWidth, windowHeight;
	
		if (self.innerHeight) {
			if(document.documentElement.clientWidth){
				windowWidth = document.documentElement.clientWidth; 
			} else {
				windowWidth = self.innerWidth;
			}
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) {
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) {
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}	

		if(yScroll < windowHeight){
			pageHeight = windowHeight;
		} else { 
			pageHeight = yScroll;
		}

		if(xScroll < windowWidth){	
			pageWidth = xScroll;		
		} else {
			pageWidth = windowWidth;
		}
	
		return { 'pageWidth': pageWidth, 'pageHeight': pageHeight, 'windowWidth' : windowWidth, 'windowHeight': windowHeight };
	}
	
};