/**
 * Decently generic, reusable implementation of a page shading dhtml modal dialog.
 * Requires mootools v1.1
 * Usage: turn any element into a ShadeDialog by adding class="ShadeDialog" and including this script.
 * $('myModalDialogDiv').ShowDialog();
 * $('myModalDialogDiv').HideDialog();
 * Additionally, you have to wrap the page in a div that has z-index < 100, and the ShadeDialog div
 * must be outside of this wrapper div.
 */
 
 
var ShadeDialog = new Class({

	showing: false,
	initialize: function(dialog, options)
	{
		// default options: these and more can be overridden by passing in an options array
		this.options = Object.extend({
			onStart: function(){},
			onComplete: function(){},
			duration: 120,	// ms
			shading: .5,	// range 0 to 1
			classesToHide: ['ShadeDialogHide'] // a list of CSS classes for which all objects should get visibility: hidden when
			// the dialog is shown.  This is typically a workaround for IE6 showing <select> object through the z-indexed shade.
		}, options || {});
	
		this.dialog = $(dialog);
		if (!this.dialog) { alert("The dialog element passed to the ShadeDialog constructor was not found in the DOM."); return; }
		this.dialog.ShadeDialog = this;
		
		if (!(this.shade = $('DialogShade')))
		{
			// create and style the background shade div
			this.shade = document.createElement('div');
			this.shade.setAttribute('id', 'DialogShade');
			this.shade.style.position = 'absolute';
			this.shade.style.left = 0;
			this.shade.style.top = 0;
			this.shade.style.zIndex = 100;
			this.shade.style.visibility = 'hidden';
			this.shade.style.backgroundColor = 'black';
      this.shade.style.cursor = 'pointer';
			this.shade.onclick = function() { ShadeDialog.HideAll(); }
			document.body.appendChild(this.shade);
		}
		
		this.shade.style.height = '1200px';
		this.shade.style.width = '100%';
 
		this.fxShade = new Fx.Style(this.shade, 'opacity', this.options);
		
		// set the public methods as properties of the dialog div while binding them to this ShowDialog object.
		this.dialog.ShowDialog = this.ShowDialog.bind(this);
		this.dialog.PositionDialog = this.PositionDialog.bind(this);
		this.dialog.HideDialog = this.HideDialog.bind(this);
		this.dialog.ToggleDialog = this.ToggleDialog.bind(this);

		this.HideDialog();
	},
	
	ShowDialog: function()
	{
		if (!this.showing)
		{
			this.showing = true;
			
			var shading = this.options.WhiteOut ? 1 : this.options.shading;
			this.shade.style.backgroundColor = this.options.WhiteOut ? 'white' : 'black';
			
			this.HideClassesToHide();
			
			// animate in: the shade opacity
			this.fxShade.clearTimer();
			//this.fxShade.set(0);
			this.shade.style.visibility = 'visible';
			this.fxShade.set(shading);
		
			this.PositionDialog();
			this.dialog.style.visibility = 'visible';
		}
	},
	
	HideDialog: function()
	{
		if (this.showing)
		{
			this.showing = false;
		
			// hide everything
			this.fxShade.clearTimer();
			this.fxShade.set(0);
			this.shade.style.visibility = 'hidden';
			this.dialog.style.visibility = 'hidden';
			
			this.ShowClassesToHide();
		}
	},
	
	HideClassesToHide: function()
	{
        this.ShowClassesToHide(true);
	},
	
	ShowClassesToHide: function(hide)
	{
		// hide or show all <select> objects on the page (because IE6 shows them through z-indexed divs that get placed in front)
		this.options.classesToHide.each(function(c){
		    $$(c).each(function(elem){
		        elem.style.visibility = hide ? 'hidden' : 'visible';
		    });
		});
	},
	
	PositionDialog: function()
	{
		// calculate the dialog absolute position offsets
		var w = window.innerWidth ? window.innerWidth : document.body.clientWidth;
		var h = window.innerHeight ? window.innerHeight : document.body.clientHeight;
		var left = document.body.scrollLeft + (w - this.dialog.clientWidth) / 2;
		var top = document.body.scrollTop + (h - this.dialog.clientHeight) / 2;
		top -= 60;
		
		// center the dialog
		this.dialog.style.left = ((left > 0) ? left : 0) + 'px';
		this.dialog.style.top = ((top > 0) ? top : 0) + 'px';
	},
	
	ToggleDialog: function()
	{
		if (this.showing) this.HideDialog();
		else this.ShowDialog();
	}
});

ShadeDialog.setupComplete = false;
ShadeDialog.setup = function()
{
	if (!ShadeDialog.setupComplete)
	{
		$$('.ShadeDialog').each(function(e){
			e.style.visibility = 'hidden';
			e.style.position = 'absolute';
			e.style.zIndex = 200;
			new ShadeDialog(e);
		});
		
		ShadeDialog.setupComplete = true;
	}
};

ShadeDialog.HideAll = function()
{
  $$('.ShadeDialog').each(function(sd){
    sd.HideDialog();
  });
};


// a static class method
ShadeDialog.handleResize = function()
{
	var shade = $('DialogShade'); 
	
	if (shade)
	{ 
		shade.style.height = '1200px';
		shade.style.width = '100%'; // document.body.scrollWidth + 'px';
	}

	$$('.ShadeDialog').each(function(e){
		if (e.PositionDialog) e.PositionDialog();
	});
};


// on load, get all DOM elements with the classname ShadeDialog, and create ShadeDialog objects for each.
window.addEvent('domready', ShadeDialog.setup);

// on resize, adjust the size of the shade and the position of each dialog
window.addEvent('resize', ShadeDialog.handleResize);