var overlay;
var box;
var opened;
var interval = 50;

function initialize() {
	var bod = document.getElementsByTagName("body")[0];
	
	overlay = document.createElement("div");
	overlay.id = "overlay";
	bod.appendChild(overlay);

	box = document.createElement("div");
	box.id = "box";
	box.className = "box";
	box.style.display = "none";
	box.style.left = "0px";
	box.style.width = "0px";	
	box.innerHTML = "<div class=\"tlc\"><div class=\"tl\"><!-- --></div><div class=\"tl2\"><!-- --></div></div><div id=\"title\" class=\"tm\"><!-- --></div><div class=\"close\" id=\"close\" style=\"display: block\"><a href=\"javascript: void(0);\" onclick=\"closeBox();\"><!-- --></a></div><div id=\"boxContent\" class=\"boxContent\" style=\"padding-left: 0px;\"><!-- --></div>\n";
	box.innerHTML += "<div class=\"bl\"><!-- --></div><div class=\"bm\"><!-- --></div><div class=\"br\"><!-- --></div>\n";
	bod.appendChild(box);
	
	opened = false;
}

function showBox(content) {
	var width;
	if (parseInt(navigator.appVersion)>3) {
	 if (navigator.appName=="Netscape") {
	  width = window.innerWidth;
	 }
	 if (navigator.appName.indexOf("Microsoft")!=-1) {
	  width = document.body.offsetWidth;
	 }
	}
	
	/* ADDED */
	if ( document.getElementById('overlay') == null ) {
		initialize();
	}

	if (window.XMLHttpRequest)
	
		overlay = document.getElementById('overlay');
		overlay.style.display = "block";
	
		var box_width = 860;
		var left_marg = (width - box_width) / 2;
		box.style.width = box_width + "px";
		box.style.left = left_marg + "px";
		
		var next;
		var prev;
		var title;
		var frame_width;
		var margin_left;
		
		if( content == "patc" )
		{
			next = "pp";
			prev = "mc";
			title = "Personal Account Transaction Charges";
			frame_width = 850;
			margin_left = 0;
			var box_width = 860;
			var left_marg = (width - box_width) / 2;
			box.style.width = box_width + "px";
			box.style.left = left_marg + "px";
		}
		else if( content == "pp" )
		{
			next = "pmsc";
			prev = "patc";
			title = "Package Plans";
			frame_width = 780;
			margin_left = 50;
		}
		else if( content == "pmsc" )
		{
			next = "mc";
			prev = "pp";
			title = "Personal Miscellaneous Service Charges";
			frame_width = 475;
			margin_left = 200;
		}
		else if( content == "mc" )
		{
			next = "fs";
			prev = "pmsc";
			title = "Card Service Charges";
			frame_width = 400;
			margin_left = 240;
		}	
		else if( content == "fs" )
		{
			next = "patc";
			prev = "mc";
			title = "Financial Services";
			frame_width = 400;
			margin_left = 240;
		}	
		else if( content == "csc" )
		{
			next = "cmsc";
			prev = "sf";
			title = "Commercial Chequing Account Service Charges";
			frame_width = 780;
			margin_left = 50;			
		}	
		else if( content == "cmsc" )
		{
			next = "bmc";
			prev = "csc";
			title = "Commercial Miscellaneous Service Charges";
			frame_width = 420;
			margin_left = 230;			
		}	
		else if( content == "bmc" )
		{
			next = "csc";
			prev = "cmsc";
			title = "Card Service Charges";
			frame_width = 420;
			margin_left = 230;			
		}
		
		var titleDiv = document.getElementById("title");
		titleDiv.innerHTML = "<h3>" + title + "</h3>\n";
		var boxContent = document.getElementById("boxContent");
		
		boxContent.innerHTML = "<div class=\"frame\" id=\"frame\" name=\"frame\" style=\"margin: auto; margin-left: " + margin_left + "px; width: " + frame_width + "px; height: 470px; position: relative; z-index: 1000;\"></div>";
		
		boxContent.innerHTML += "<div class=\"prev\"><a href=\"javascript: void(0);\" onclick=\"showBox('" + prev + "');\"><img src=\"/common/images/interface/popup/previous.gif\" /></a></div><div class=\"next\"><a href=\"javascript: void(0);\" onclick=\"showBox('" + next + "');\"><img src=\"/common/images/interface/popup/next.gif\" /></a></div>";
		
		http.open('get', '/common/tables/index.php?content=' + content + '&width=' + frame_width);
		http.onreadystatechange = handleResponse;
		http.send(null);
		
		//boxContent.innerHTML = "<object id=\"frame\" name=\"frame\" type=\"text/html\" data=\"/common/tables/" + content + ".php\" style=\"height: 470px; width: 790px;\" scrolling=\"auto\"></object><div class=\"prev\"><a href=\"/common/tables/" + prev + ".php\" target=\"frame\" onclick=\"showBox('" + prev + "');\"><img src=\"/common/images/interface/popup/previous.gif\" /></a></div><div class=\"next\"><a href=\"/common/tables/" + next + ".php\" target=\"frame\" onclick=\"showBox('" + next + "');\"><img src=\"/common/images/interface/popup/next.gif\" /></a></div>";
		
		if(!opened)
		{
			opened = true;
			setOpacity(box, 0);
			box.style.display = "block";
			fadeIn("box",0);
		}
}

function closeBox() {
	opened = false;
	fadeOut("box", 100);
	overlay.style.display = "none";
}

function scrollup()
{
	var table = document.getElementById("table");
	var top = parseInt(table.style.top);
	top = top + interval;
	if( top > 0 )
		top = 0;
	table.style.top = top + "px";
}

function scrolldown()
{
	var table = document.getElementById("table");
	var top = parseInt(table.style.top);
	top = top - interval;
	table.style.top = top + "px";
}


function setOpacity(obj, opacity) {
	opacity = (opacity == 100)?99.999:opacity;
	
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}

function fadeIn(objId,opacity) 
{
	if (document.getElementById) 
	{
		obj = document.getElementById(objId);
		if (opacity <= 100) 
		{
			setOpacity(obj, opacity);
			opacity += 10;
			window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 10);
		}
	}
}

function fadeOut(objId,opacity) 
{
	if (document.getElementById) 
	{
		obj = document.getElementById(objId);
		if (opacity >= 0) 
		{
			setOpacity(obj, opacity);
			opacity = opacity - 10;
			window.setTimeout("fadeOut('"+objId+"',"+opacity+")", 10);
		}
		else
			obj.style.display = "none";
	}
}

//START AJX HERE
var http = createRequestObject();

function createRequestObject() {
	var ro;
	//var browser = navigator.appName;
	if(window.ActiveXObject) { //browser == "Microsoft Internet Explorer"){
		ro = new ActiveXObject("Microsoft.XMLHTTP");
	}else{
		ro = new XMLHttpRequest();
	}
	return ro;
}
	

function handleResponse() {
	if(http.readyState == 4){
		var response = http.responseText;
		
		var x = response.split("|"); 
		document.getElementById("frame").innerHTML = x;
	}
}