var modal = RUZEE.ShadedBorder.create({ corner:10, shadow:25});
var modalWindow = null;
var ModalWindow = Class.create({
  initialize: function() {  	    
	this.modalMask = new Element('div', { 'class': 'modalMask', 'id': 'modalMask'})
		.setStyle({'opacity': '.3', 'display': 'none'});
	this.modalRoundedBoxElement = new Element('div', { 'class': 'modalRoundedBox'})
		.setStyle({'display': 'none'});	
	var modalRoundedElement = new Element('div', { 'class': 'modalRounded'});
	this.contentElement = new Element('div', { 'class': 'loading'});
	
	/* dom for modal skin*/
	this.modalBox	 = new Element('div', {className:'modalBox'});
	this.illBox		 = new Element('div', {className:'illBox'});
	this.ill		 = new Element('div', {className:'ill'});
	this.illType	 = new Element('div', {className:'illType'});
	this.messageBox	 = new Element('div', {className:'messageBox'});
	this.outer	 	 = new Element('div', {className:'outer', id:'modalOuter'});
	this.middle 	 = new Element('div', {className:'middle', id:'modalMiddle'});
	this.inner	 	 = new Element('div', {className:'inner', id:'modalInner'});
	this.btnClose 	 = new Element('a',	  {className:'btn btnClose', title:'Close window', href:'#'}).appendText('Close Window');
	
	this.modalBox.nestChildren([this.illType, 		this.ill, 	this.illBox]);
	this.modalBox.nestChildren([this.contentElement,this.inner, this.middle,	this.outer,	this.messageBox]);
	this.modalBox.appendChild ( this.btnClose);	
	this.btnClose.observe('click', function(){	modalWindow.close();});	
	
	this.modalRoundedBoxElement.appendChild(modalRoundedElement);
	modalRoundedElement.appendChild(this.modalBox);
	
	document.body.appendChild(this.modalMask);
	document.body.appendChild(this.modalRoundedBoxElement);
	
	
	border.render($$('.roudedBox'));
	if($('inner') != null) outerBoder.render('inner');
	modal.render($$('.modalRounded'));
  },
  show: function(content, className) {
  	this.contentElement.update("");
	this.addContentToElement(content, this.contentElement);  	
	
	this.modalMask.show();	
	this.modalRoundedBoxElement.show();
	this.modalRoundedBoxElement.className = className == null ? 'modalRoundedBox' : 'modalRoundedBox ' + className;

	//handle resizing the modal mask
	this.updateModalDisplay();
	
	Event.observe(window, "resize", function(event){
		this.updateModalDisplay();
	}.bind(this));
	
	return this;
  },
  close: function() {
  	this.modalMask.hide();
	document.body.style.overflow = '';
	document.body.style.paddingRight = '';
	this.modalRoundedBoxElement.hide();
	this.contentElement.update("");
  },  
  updateModalDisplay: function()
  {
  	var body = $(document.body);
	var bodyDimensions = body.getDimensions();
	body.scrollTo();  	
	this.modalMask.setStyle({
		'position': 'absolute',
		top: '-20px',
		height: (bodyDimensions.height + 40) + "px",
		width: (bodyDimensions.width) + "px"
	});
	var viewDimensions = document.viewport.getDimensions();
	
	var dimensions = this.modalRoundedBoxElement.getDimensions();	
	dimensions.width = Math.max(dimensions.width, 550);
	dimensions.height = Math.max(dimensions.height, 400);	
	var top = ((viewDimensions.height - dimensions.height)/2);
	this.modalRoundedBoxElement.setStyle({
		"position": "absolute",
		"top": ((viewDimensions.height - dimensions.height)/2) + "px",
		"left": ((viewDimensions.width - dimensions.width)/2) + "px"
	});
  },
  addContentToElement: function(content, element)
  {
  	if(typeof content == 'string')
  		element.update(content);
	else if(Object.isElement(content))
		element.appendChild(content);
	else if(Object.isArray(content))
	{
		content.each(function(e){ this.addContentToElement(e, element)}.bind(this));
	}
	else
		alert("Cannot display this object type in a dialog: " + typeof content);
	return element;
  }
});
ModalWindow.instance = function()
{
	if(modalWindow == null)
  		modalWindow = new ModalWindow();
	return modalWindow;
}

var MessageBox = Class.create({
  initialize: function(options) {  	    
	this.options = {
			className: 'messageBox',
			showOK: false,
			showCancel: false,
			onClose: Prototype.emptyFunction,
			onOK: Prototype.emptyFunction,
			onCancel: Prototype.emptyFunction,
			okButtonText: "OK",
			cancelButtonText: "Cancel",
			iframeUrl:false
		};
	Object.extend(this.options,options || {});
	
	this.modalCloseHandler = function(event){
		Event.stop(event);
		this.close();
	}.bind(this);
  },
  
  close: function(){
	var modalWindow = ModalWindow.instance();
  	modalWindow.close();
	this.options.onClose();
	modalWindow.btnClose.stopObserving('click', this.modalCloseHandler);	
  },
  
  show: function(content){

	var modalWindow = ModalWindow.instance();		
	var buttonDiv = new Element ('div');	
	if(this.options.iframeUrl)	
		var content = new Element ('iframe',{frameborder:0, allowtransparency:true, src:this.options.iframeUrl});  	
	else{		
		var btnOK = new Element('input', {
			'class': 'btn btnOK',
			'type': 'button',
			'value': this.options.okButtonText
		});	
	
		btnOK.observe('click', function(event){
			this.close();
			this.options.onOK();			
		}.bind(this));
		
		var btnCancel = new Element('input', {
			'class': 'btn btnCancel',
			'type': 'button',
			'value': this.options.cancelButtonText
		});
		btnCancel.observe('click', function(event){
			this.close();			
			this.options.onCancel();
		}.bind(this));
			
		buttonDiv = new Element('div', {'class': 'messageBoxButtons'});
		if(this.options.showOK)
			buttonDiv.appendChild(btnOK);
		if(this.options.showCancel)
			buttonDiv.appendChild(btnCancel);
	}
	modalWindow.show([content, buttonDiv], this.options.className);
		
	modalWindow.btnClose.observe('click', this.modalCloseHandler);
	return this;  	
  } 
 } 
 );
 
 var ProgressBox = Class.create({
  initialize: function(options) {  	    
	this.options = {
			className: 'progressBox',
			onClose: Prototype.emptyFunction
		};
	Object.extend(this.options,options || {});
  },
  show: function(content){					
	this.progressTextDiv = 	new Element('div', {'class': 'progressText'});
	var progressDivBox = 	new Element('div', {'class': 'progressDivBox'});
	var progressDiv = 		new Element('div', {'class': 'progressDiv'});
	var progressBar = 		new Element('div', {'class': 'progressBar', id:'progressBar'});
	
	progressDivBox.nestChildren([progressBar, progressDiv]);
	
	this.modalWindow = ModalWindow.instance();
	this.modalWindow.addContentToElement(content, this.progressTextDiv);
  	this.modalWindow.show([this.progressTextDiv, progressDivBox], this.options.className);
	return this;  	
  },
  updateText: function(content){
  	this.progressTextDiv.update("");					
	this.modalWindow.addContentToElement(content, this.progressTextDiv);  	
  },
  close: function(){
  	this.modalWindow.close();
	this.options.onClose();
  }
 } 
 );
  
 var WizardDialog = Class.create({
  initialize: function(options) {  	    
	this.options = {
		className: 'wizardBox'
	};
	Object.extend(this.options,options || {});
  },
  
  close: function(){	
	var modalWindow = ModalWindow.instance();
  	modalWindow.close();
  },
  
  show: function(content){
	var modalWindow = ModalWindow.instance();
	modalWindow.show([content], this.options.className);
	return this;  	
  }
 } 
 );