/* class for simplifying full screen alerts that cover up main window contents
	that seem to becoming so popular these days.
	
	programmer: Eric Lien

*/
function AlertHandler(){
	
	//hack for self-referancing timer
	this.id = "AlertHandler" + AlertHandlerIdNumb++;
	window[this.id] = this;
	//end hack	
	
	this.opacif = new Opacifier(); //opacifier to use for fade events
	this.bgopacity = 90; //background opacity
	this.bgfadeintime = "50"; //time it will take for background to fade in
	this.bgfadeouttime = "50"; //time for background to fade out
	this.contentfadeintime = "2000"; //time for content to fade in
	this.contentfadeouttime = "50"; //time for content to fade out
	this.bgdivname = "AlertHandler_background";  //id of background div
	this.contentsdivname = "AlertHandler_contents"; //id of content div
	
	//create divs if they don't yet exist
	if(!document.getElementById(this.bgdivname)) insertTag('div', this.bgdivname);
	if(!document.getElementById(this.contendivname)) insertTag('div', this.contentsdivname);
	
	//set variables containing divs
	this.background = document.getElementById(this.bgdivname);	
	this.contents = document.getElementById(this.contentsdivname);
	
	//set all their essential style information
	this.setElementAttribs();
}

//set the opacity of the background
AlertHandler.prototype.setBackgroundOpacity = function(opac){
	this.bgopacity = opac;
};

//set the background fade in time
AlertHandler.prototype.setBackgroundFadeInTime = function(secs){
	this.bgfadeintime = secs*1000;
};

//set the background fade out time
AlertHandler.prototype.setBackgroundFadeOutTime = function(secs){
	this.bgfadeouttime = secs*1000;
};

//set the content fade in time
AlertHandler.prototype.setContentFadeInTime = function(secs){
	this.contentfadeintime = secs*1000;
};

//set the content fade out time
AlertHandler.prototype.setContentFadeOutTime = function(secs){
	this.contentfadeouttime = secs*1000;
};

//instantly hide alert (not used really)
AlertHandler.prototype.hideAlertsFast = function(){
	this.background.style.display = "none";
	this.contents.style.display = "none";
	this.background.style.zIndex = "-2";
	this.contents.style.zIndex = "-1";
	this.opacif.transparent(this.background.id);
	this.opacif.transparent(this.contents.id);
};

//sets all the essential positioning and dimention information of content and background divs
AlertHandler.prototype.setElementAttribs = function(){
	if(!this.contents){
		insertTag('div', this.contentsdivname);
		this.contents = document.getElementById(this.contentsdivname);
	}
	if(!this.background){
		insertTag('div', this.bgdivname);
		this.background = document.getElementById(this.bgdivname);
	}
	this.hideAlertsFast(); //set display to none
	this.background.style.position = "absolute";
	this.background.style.top = "0px";
	this.background.style.left = "0px";
	var bodyheight;
	if (document.body.scrollHeight && navigator.appVersion.indexOf("Win") != -1) {
	// body.scrollHeight gets the correct value on WIN IE6, but non on MAC
		bodyheight = document.body.scrollHeight;
	}
	else if (document.documentElement.scrollHeight) {
		bodyheight = document.documentElement.scrollHeight;
	}
	else if (document.documentElement.offsetHeight) {
		bodyheight = document.documentElement.offsetHeight;
	}
	this.background.style.height = bodyheight + "px";
	this.background.style.width = "100%";
	
	/* done via css now since you can set a class for each alert
	//this.background.style.background = this.backgroundBackground;
	//this.contents.style.background = this.contentsBackground;
	*/
	
	//shouldn't have to set these...but it doesn't work otherwise...
	this.contents.style.position = "absolute";
	this.contents.style.top = "50px";
	this.contents.style.left = "50px";
	var WD = windowSize();
	this.contents.style.maxWidth ="700px";
	//this.contents.style.maxHeight = "480px";
	
	
};

//show an alert with message of "HTML"
//with content div of class="contentclass"
//and background div of class="bgclass"
AlertHandler.prototype.showAlert = function(HTML, contentclass, bgclass){
	//set the new information for the content and background
	this.setContentClass(contentclass);
	this.setBackgroundClass(bgclass);
	this.setContents(HTML);
	
	//make divs visible and bring them to the front
	this.background.style.display = "block";
	this.background.style.zIndex = "98";
	this.contents.style.display = "block";
	this.contents.style.zIndex = "99";
	
	this.setContentPosition();
	this.fadeIn();
};

//hide the current alert
AlertHandler.prototype.hideAlert = function(){
	var timeout;
	if(this.bgfadeouttime > this.contentfadeouttime) timeout = this.bgfadeouttime;
	else timeout = this.contentfadeouttime;
	//check to make sure window is visible
	if(this.opacif.getOpacity(this.contents.id) > 0){
		//set timer to remove alert completely from page after faded out
		this.hideTimeout = setTimeout("window."+this.id+".removeAlert()", timeout);
		this.fadeOut();
	}
};

//make alert invisible and move to back
//remove contents form alert, so that changing
//style information doesn't display the last alert
AlertHandler.prototype.removeAlert = function(){
	this.contents.innerHTML = "";
	this.background.style.display = "none";
	this.background.style.zIndex = "-2";
	this.contents.style.display = "none";
	this.contents.style.zIndex = "-1";
};

//fade background and contents in
AlertHandler.prototype.fadeIn = function(){
	this.opacif.transOpacity(this.contents.id, 0, 100, this.contentfadeintime);
	this.opacif.transOpacity(this.background.id, 0, this.bgopacity, this.bgfadeintime);
};

//fade background and contents out
AlertHandler.prototype.fadeOut = function(){
	this.opacif.transOpacity(this.contents.id, 100, 0, this.contentfadeouttime);
	this.opacif.transOpacity(this.background.id, this.bgopacity, 0, this.bgfadeouttime);
};

//set the class of the contents div
AlertHandler.prototype.setContentClass = function(contentclass){
	if(contentclass != "undefined") this.contents.setAttribute('class', contentclass);
	else this.contents.setAttribute('class', '');	
}

//set the class of the background div
AlertHandler.prototype.setBackgroundClass = function(bgclass){
	if(bgclass != "undefined") this.background.setAttribute('class', bgclass);
	else this.background.setAttribute('class', '');	
}

//set the innerHTML of the contents div,
//position it in the center,
//and if it was not transparent when entering this function,
//make it opaque after setting new contents
AlertHandler.prototype.setContents = function(HTML){
	var prevOpac = this.opacif.getOpacity(this.contents.id);
	this.opacif.transparent(this.contents.id);
	this.contents.innerHTML = HTML;
	this.setContentPosition();
	if(prevOpac > 0) this.opacif.opaque(this.contents.id);
	
};

//sets the content divs position to be in the middle of the page
//by using the size of the rendered content div's dimmentions,
//and the size of the current window
AlertHandler.prototype.setContentPosition = function(){
	var WD = windowSize(); //get window dimmentions
	WD.middle = new Object();
	WD.middle.x = WD.width/2;
	WD.middle.y = WD.height/2;
	
	this.contents.style.position = "absolute"; 
	//get rendered content element dimmentions
	var left = Math.floor(WD.width - (WD.middle.x + this.contents.offsetWidth/2));
	var top = Math.floor(WD.height - (WD.middle.y + this.contents.offsetHeight/2));
	this.contents.style.top = top+"px";
	this.contents.style.left = left+"px";
};

//enters a tag into the body as the last child and
//sets it's ID attribute (using DOM)
function insertTag(tagname, id){
	var th = document.getElementsByTagName('body')[0];
	var s = document.createElement(tagname);
	s.setAttribute('id', id);
	th.appendChild(s);
	if(!document.getElementById(id)){
		insertTag(tagname, id);
	}
}

//detects the window size and returns the dimentions in pixels
function windowSize() {
	var dim = new Object();
	if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    dim.width = window.innerWidth;
    dim.height = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    dim.width = document.documentElement.clientWidth;
    dim.height = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    dim.width = document.body.clientWidth;
    dim.height = document.body.clientHeight;
  }
  return dim;
}


//include Opacifier
includeJS('/javascript/Opacifier.js');
//var for making object referencing timers possible
var AlertHandlerIdNumb = 0;

/**************************************** Simple EXAMPLE USAGE **********************************

//the alerthandler will automatically insert divs with the ids
//AlertHandler_background and AlertHandler_contents as children of the <body>
//when it is defined
var ah = new AlertHandler;

//html we want to insert into the contents of the alert
var html = "<h1>An Alert</h1>";

//alerts may be styled on a per-class basis with css
//which means you can call many different types of alerts without
//having to have different objects defined
  
var contentsclass = 'trial_alert_contents';
var backgroundclass = 'trial_alert_background';

//to show an alert, you would do:
ah.showAlert(html, contentsclass, backgroundclass);

//to hide an alert, you would do:
ah.hideAlert();

//most likely you will want to write simple javascript wrapper functions to make
//different types of alerts super easy

function errAlert(html){
	ah.showAlert(html, 'error_alert_contents', 'error_alert_background');
}

function promptAlert(html){
	ah.showAlert(html, 'prompt_alert_contents', 'prompt_alert_background');
}

//now all you have to do is write css to style the different alert classes (like background colors)...and that's it.


*****************************************************************************************/