/**
Here is is, a general DOM dialog box generator

This is the first rendition, so it doesn't have a lot of features yet, but you can set the text and buttons for the box.
It shows itself on creation and hides itself when one of its buttons is clicked and it calls a specified
function when clicked and supplies the returnd value of the button clicked.

To use, you need scriptaculous effects and prototype as well as this file.

In your site style sheet, you need to add the following style

#dialog_overlay-id {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #ffffff;
	z-index: 10000;
}

This styles the overylay layer, next style the dialog box

div.wsd_dlgyn {
	width: 250px;
	background: #e2e2e2;
	border: 1px solid #999999;
	position: absolute;
	z-index: 10001;
	font-size: 12px;
	height: auto;
}

div.wsd_dlgyn div {
	margin: 10px;
}

div.wsd_dlgyn div.buttoncontainer {
	margin: 10px;
	text-align: center;
}

This styles the individual buttons

.dialog_button_yes {
	background:#336699;
    border:1px solid #999999;
    color:#ffffff;
    font-weight:bold;
    margin-right:10px;
    cursor:pointer;
}

.dialog_button_no {
	background:#666666;
    border:1px solid #999999;
    color:#ffffff;
    font-weight:bold;
    margin-left:10px;
    cursor:pointer;
}

Here is a sample

d = new wsd_gendialog({'text':'When you press continue, the information you entered in the yellow boxes will be locked from any further changes. Are you sure you wish to continue?',
			 'buttons':[{'text':'yes', 'className':'dialog_button_yes', 'retval':1}, {'text':'no', 'className':'dialog_button_no', 'retval':0}], 'className':'wsd_dlgyn', 'dialogid':'wsd_dialog', 'onClick':dialog_click});

<div id="dialog_overlay-id"></div>
<div id="wsd_dialog" class="wsd_dlgyn">
	<div class="dialogtext">When you press continue, the information you entered in the yellow boxes will be locked from any further changes. Are you sure you wish to continue?</div>
	<div class="buttoncontainer">
		<button class="dialog_button_yes">yes</button>
		<button class="dialog_button_no">no</button>
	</div>
</div>

A dialog box needs text, an id, a style, a list of buttons and a callback function for the mouse click.
These are specified by js name:value pairs

text:the text for the dialog
className:the class
dialogid:the id for the dialog box element (mainly for styling with css)
onClick: the name of the function to call when a button is clicked
buttons: array of button objects

The buttons need text, a style and a return value

text: the text
className: the class for the button
retval: the value returned if this button is clicked

There are no restrictions on what the return value is as far as being a string or numeric value.

Sample callback function

function dialog_click(val){
	if(val == 1)
		document.basicinfo.submit();
}

*/

Object.extend(Element, {
	getWidth: function(element) {
	   	element = $(element);
	   	return element.offsetWidth;
	},
	setWidth: function(element,w) {
	   	element = $(element);
    	element.style.width = w +"px";
	},
	setHeight: function(element,h) {
   		element = $(element);
    	element.style.height = h +"px";
	},
	setTop: function(element,t) {
	   	element = $(element);
    	element.style.top = t +"px";
	},
	setSrc: function(element,src) {
    	element = $(element);
    	element.src = src;
	},
	setHref: function(element,href) {
    	element = $(element);
    	element.href = href;
	},
	setInnerHTML: function(element,content) {
		element = $(element);
		element.innerHTML = content;
	},
	// added this one meself RM ;-)
	setPos: function(element, x, y) {
	   	element = $(element);
    	element.style.top = y +"px";
    	element.style.left = x+"px";
	}
});

var wsd_gendialog = Class.create({

	'clicked': false,
	'value': '',

	initialize: function(options) {
		this.options = {
			'text':       '',
			'className':		'',
			'buttons':		[{'text':'OK', 'className':'', 'retval':1}],
			'dialogid':		'wsd_dialog'
		};

    	Object.extend(this.options, options || { });
    	//first show create the background
    	this.e = $('dialog_overlay-id');

    	if(!this.e){	// creat it if it doesn't exist
			this.e = Builder.node('div', {'id':'dialog_overlay-id'});
			Element.extend(this.e);
    	}
    	this.e.hide();

		this.objBody = document.getElementsByTagName("body").item(0);
		this.objBody.appendChild(this.e);

		//get page height and scroll offset to position the dialog in the center of the screen
		var arrayPageSize = this.getPageSize();
		var arrayScroll = this.getPageScroll();

		Element.setHeight('dialog_overlay-id', arrayPageSize[1]);	// covers entire document

		// now build the dialog box
		this.d = Builder.node('div', {'id':this.options.dialogid, 'className':this.options.className});
		textcontain = Builder.node('div', {'className':'dialogtext'});
		textcontain.innerHTML = this.options.text;
		this.d.appendChild(textcontain);

		buttcontain = Builder.node('div', {'className':'buttoncontainer'});
		// add the buttons
		this.buttons = [];
		for(i = 0; i < this.options.buttons.length; i++){
			this.buttons[i] = Builder.node('button', {'className':this.options.buttons[i].className});
			this.buttons[i].innerHTML = this.options.buttons[i].text;
			this.buttons[i].retval = this.options.buttons[i].retval;
			Event.observe(this.buttons[i], 'click', this.onClick.bindAsEventListener(this));
			buttcontain.appendChild(this.buttons[i]);
		}
		this.d.appendChild(buttcontain);

		this.objBody.appendChild(this.d);	// add the dialog box and then position it

		Element.extend(this.d);

		// now we have the dialog div built, get its dimensions and center it
		var dim = this.d.getDimensions();
		var wh = arrayPageSize[3];	// window height
		var ww = arrayPageSize[2]; // window width;
		var left = ww / 2 - dim.width / 2;
		var top = wh / 2 - dim.height / 2 + arrayPageScroll[1];
		Element.setPos(this.d, left, top);

		this.show();
	},

	show: function(){
		new Effect.Appear('dialog_overlay-id', { duration: 0.2, from: 0.0, to: 0.8 });
	},

	onClick: function(event){
		button = Event.element(event);
		this.hide();
		if(Object.isFunction(this.options.onClick)){
			try {
				this.options.onClick.call(this, button.retval);
			} catch(e) { alert(e.message); }	// in case it doesn't exist
		} else {
			alert(this.options.onClick+" - is not a function.  Enclosed in quotes in the declaration? or doesn't exist");
		}
		return false;
	},

	hide: function(){
		this.d.remove();
		Effect.Fade('dialog_overlay-id', { duration: 0.2, from: 0.8, to: 0.0 });
	},

	getClickedValue: function(){
		return this.value;
	},

	//
	// getPageSize()
	// Returns array with page width, height and window width, height
	// Core code from - quirksmode.org
	// Edit for Firefox by pHaez
	//
	getPageSize: function(){

		var xScroll, yScroll;

		if (window.innerHeight && window.scrollMaxY) {
			xScroll = document.body.scrollWidth;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}

		var windowWidth, windowHeight;
		if (self.innerHeight) {	// all except Explorer
			windowWidth = self.innerWidth;
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) { // other Explorers
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}

		// for small pages with total height less then height of the viewport
		if(yScroll < windowHeight){
			pageHeight = windowHeight;
		} else {
			pageHeight = yScroll;
		}

		// for small pages with total width less then width of the viewport
		if(xScroll < windowWidth){
			pageWidth = windowWidth;
		} else {
			pageWidth = xScroll;
		}


		arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
		return arrayPageSize;
	},

	//
	// getPageScroll()
	// Returns array with x,y page scroll values.
	// Core code from - quirksmode.org
	//
	getPageScroll: function(){

		var yScroll;

		if (self.pageYOffset) {
			yScroll = self.pageYOffset;
		} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
			yScroll = document.documentElement.scrollTop;
		} else if (document.body) {// all other Explorers
			yScroll = document.body.scrollTop;
		}

		arrayPageScroll = new Array('',yScroll);
		return arrayPageScroll;
	}
});