// dialog.js - modal floating dialog box
// using technique from http://bbuchs.f2o.org/floatingdialog/
// requires dialog.css for styling
/*
To-do:
	1) Viewport calculations don't reset after window resize
	2) How do I implement optional paramaters for things like: size, position, underlay color, duration, opacity, etc...
	3) this.underlay.style.height is thrown off by the dialogs not being hidden before calculating the height
*/
var DialogBox = Class.create();

DialogBox.prototype = {
   initialize: function(ele)  {
		this.ele = $(ele);

		// create an underlay object and apply the default style
		var underlay = Builder.node('div',{className:'underlay',id:ele+'_underlay'});
		this.ele.parentNode.appendChild(underlay);
		this.underlay = $(ele+'_underlay')

		// immediately hide both the dialog and the underlay after creation
		Element.toggle(this.ele);	
		Element.toggle(this.underlay);

		Element.addClassName(this.ele,'fixed');				// give object fixed properties - see stylesheet
		Element.addClassName(this.underlay,'underlay');		// give object fixed properties - see stylesheet
   },
   Open: function()  {
   		this.AutoSize();
		new Effect.Appear(this.ele, { duration:0.25 });
		new Effect.Appear(this.underlay, {duration:0.25, to:0.75 });
		return false;
   },
   Close: function()  {
		new Effect.Fade(this.ele, { duration:0.25 });
		new Effect.Fade(this.underlay, { duration:0.25 });
		return false;
   }, 
   Toggle: function() {
		if (this.ele.style.display == 'none' ) {
	   		this.AutoSize();
			new Effect.Appear(this.ele, { duration:0.25 });
			new Effect.Appear(this.underlay, {duration:0.5, to:0.33 });
		} else {
			new Effect.Fade(this.ele, { duration:0.25 });
			new Effect.Fade(this.underlay, { duration:0.25 });
		} 
   },
   AutoSize: function() {
		// make sure the size is in bounds (reducing by 20px)
		var viewportWidth = getViewportWidth();
		var viewportHeight = getViewportHeight();
		var elemWidth = Element.getDimensions(this.ele).width;
		var elemHeight = Element.getDimensions(this.ele).height;
		if ( elemWidth > viewportWidth )
			this.ele.style.width = viewportWidth - 20 + 'px';
		if ( elemHeight > viewportHeight )
			this.ele.style.height = viewportHeight - 20 + 'px';
		// set the dialog location properties
		this.ele.style.left	= ((viewportWidth / 2) - (elemWidth / 2)) +'px';
		this.ele.style.top	= ((viewportHeight / 3) - (elemHeight / 2)) +'px';
	}
};


/* Borrowed from DOJO: get the viewable window size, so we know where to center the dialog */
getViewportWidth = function(){
	var w = 0;
	if (window.innerWidth)	w = window.innerWidth;
	if (document.documentElement && document.documentElement.clientWidth) {
		var w2 = document.documentElement.clientWidth;
		if (!w || w2 && w2 < w) w = w2;
		return w;
	}
	if(document.body) return document.body.clientWidth;
	return 0;
}
getViewportHeight = function(){
	if (window.innerHeight)	return window.innerHeight;
	if (document.documentElement && document.documentElement.clientHeight)	return document.documentElement.clientHeight;
	if (document.body)	return document.body.clientHeight;
	return 0;
}