/*

	Class to present an alert by fading out the screen behind and presenting the 
	alert "in the front" of what is faded out.

*/
var iDialogWidth = 520;
var sDialogIDName = "ScreenAlert_Dialog";
var sDialogTemplate = '<div id="'+sDialogIDName+'" style="border:6px solid #00FF00; background-color:#FFFF99; width:' + iDialogWidth + 'px; height:150px; padding:8px;"><div style="text-align:center; margin-bottom:10px;"><H1 id="ScreenAlert_Title" style="margin-top:0; margin-bottom:14px; font-size:20px;">Title</H1><span id="ScreenAlert_Reason" style="font-size:14px">Reason</span></div><div style="width:70%; height:30px; float:left; margin-top:10px"><a id="ScreenAlert_No" style="font-size:14px;" href=#><img src="/img/icons/Icon - Dialog - Cross.jpg" style="float:left;margin-right:4px;" width="30" height="30" border="0"><div style="position:relative;top:6px;left:10px;">No thank you. I\'ll correct the form.</div></a></div><div style="width:30%; float:left; height:30px; text-align:right; vertical-align:middle; margin-top:10px;"><a id="ScreenAlert_Yes" style="font-size:14px;" href=#><img src="/img/icons/Icon - Dialog - Tick.jpg" style="float:right; margin-left:4px;" width="30" height="30" border="0"><div style="position:relative;top:6px;left:-10px">Yes Please!</div></a></div></div>';

var ScreenAlertWidget = Class.create();

ScreenAlertWidget.prototype = {
	oQueue: {scope:'BubbleHelpQ', position:'end'},
	
	initialize: function() {	
		this.options = Object.extend(
		{
			sAlertText:"",
			sAlertExplanation:"",
			funcYes: null,
			funcNo: null
		}, arguments[0] || {});		

		this.oFadedScreen = this.CreateNewFadedScreen();
		setTimeout(this.DoAlert.bind(this), 1000);
	},
	
	DoAlert: function() {
		this.oDialog = this.PresentAlert();	
	},
	
	CreateNewFadedScreen: function() {
		var oDiv=$(document.createElement("DIV"));
		oDiv.setStyle({display:"none", zIndex:99998, position:'absolute', top:0, left:0, width:"100%", height:"100%", margin:'auto', backgroundColor:"#000"});
		oDiv.setStyle({position:'fixed'});
		document.body.appendChild(oDiv);
		new Effect.Appear(oDiv, {from:0, to:0.5, duration:1});
		
		return oDiv;
	},

	MoveOffScreen: function(oDiv) {
		oDiv.style.top = "-500px";
		oDiv.style.left = "-500px";
	},

	SetStartPosition: function(oDiv) {	
		// Have the dialog coming in from different places from offscreen...
		Position.prepare();		
		this.arWindow = Position.GetWindowSize();
		this.oDialogSize = Element.getDimensions(oDiv);
		oDiv.style.top = "-" + this.oDialogSize.height + "px";
		oDiv.style.left = (this.arWindow[0]-this.oDialogSize.width)/2 + "px";
	},
	
	PresentAlert: function() {
		var oDiv=$(document.createElement("DIV"));
		oDiv.setStyle({id:'Wrapper', position:"absolute", zIndex:99999, top:"0px", left:"0px", width:iDialogWidth+"px"});
		oDiv.update(sDialogTemplate);		
		
		this.MoveOffScreen(oDiv);
		document.body.appendChild(oDiv);		
		
		$("ScreenAlert_Title").update(this.options.sAlertText);
		$("ScreenAlert_Reason").update(this.options.sAlertExplanation);
		var leaf_smaller_settings = {
          tl: false,
          tr: { radius: 8 },
          bl: { radius: 8 },
          br: false,
          antiAlias: true,
          autoPad: true
		}
		new curvyCorners(leaf_smaller_settings, $(sDialogIDName)).applyCornersToAll();
		$("ScreenAlert_No").onclick = this.options.funcNo;
		$("ScreenAlert_Yes").onclick = this.options.funcYes;
		
		// Move the dialog box into the screen...
		this.SetStartPosition(oDiv);
		new Effect.Morph(oDiv, {style:"top:"+((this.arWindow[1]-this.oDialogSize.height)/3)+"px", duration:1});
		
		$("ScreenAlert_Yes").focus();

		return oDiv;
	},
	
	ClearAlert: function() {
		Element.hide(this.oDialog);
		[this.oDialog, this.oFadedScreen].each(function(el){
			new Effect.Fade(el, {from:0.7, to:0, duration:0.5, afterFinish:function() {			
				el.parentNode.removeChild(el);
				}
			})
		});
		
/*		
		this.oDialog.parentNode.removeChild(this.oDialog);
		new Effect.Fade(this.oFadedScreen, {from:0.7, to:0, afterFinish:function() {			
			this.oFadedScreen.parentNode.removeChild(this.oFadedScreen);
			}.bind(this)
		})
*/
	}
}