var imgDivWidth = 0;
var imgDivHeight = 0;
var imgDivBG = "#000000";
var borderColor = "#FFCC00";
var xScroll = screen.width;
var yScroll = screen.height;
var yScrolltop;
var xScrollleft;
var pageWidth;
var pageHeight;

function openPopupDiv(caption) {
	hideComboBox();
	hideMenu();
	getOverlaySize();
	getPageScrollTop();
	getPageSize();
//	showloadingAnimation() ;
//	loadingImage(imageURL) ;
//	if (imgDivWidth == 0 || imgDivHeight == 0 ) {
//		setTimeout("getEnlargeImage('" + imageURL + "','" + caption + "')", 100);
//	}
//	else {
   	document.getElementById('overlayDiv').style.display = '';
		document.getElementById('overlayDiv').style.width = xScroll;
		document.getElementById('overlayDiv').style.height = yScroll;
		document.getElementById('overlayDiv').style.left = -80; // original don't have
//		document.getElementById('divObj').innerHTML = theHTML;
		document.getElementById('imgCaptionCell').innerHTML = '<span style="font-family:  Tahoma, Arial;font-size: 8pt;font-weight: bold;color:white" ><b>' + caption + '</b></span>';
		document.getElementById('popupDiv').style.width = imgDivWidth; 
		document.getElementById('popupDiv').style.height = imgDivHeight;
		document.getElementById('popupDiv').style.top = 0; //yScrolltop + (pageHeight -  imgDivHeight)/2;
		document.getElementById('popupDiv').style.left = -58; //xScrollleft + (pageWidth - imgDivWidth )/2;
		document.getElementById('popupDiv').style.display = '';
//	}
	
}
/*

function linkToLACSD(url) {
	window.open("http://www.lacsd.org/" + url);
}
function showloadingAnimation() {
	document.getElementById('popupDiv').style.top = yScrolltop + (pageHeight -  120)/2;
	document.getElementById('popupDiv').style.left = xScrollleft + (pageWidth - 120)/2;
	document.getElementById('popupDiv').style.display = '';
}

function loadingImage(imageURL) {
   enlargeImage = new Image(); 
   enlargeImage.src = imageURL;
   if (enlargeImage.complete == true) {
   	imgDivWidth = enlargeImage.width + 30;
   	imgDivHeight = enlargeImage.height + 60;
   } else {
	setTimeout("loadingImage('" + imageURL + "')", 100);
   }

}
*/
function closeAll() {
	showComboBox();
	showMenu();
	// Turn off canvas
	document.getElementById('overlayDiv').style.display = 'none';
	document.getElementById('popupDiv').style.display = 'none';
	// Reset caption and photo
	document.getElementById('imgCaptionCell').innerHTML = '';
//	document.getElementById('divObj').innerHTML = 'Loading';
//	imgDivWidth = 0;
//	imgDivHeight = 0;
	document.getElementById('popupDiv').style.width = imgDivWidth;
	document.getElementById('popupDiv').style.height = imgDivHeight;
	document.getElementById('popupDiv').style.top = pageHeight/2;
	document.getElementById('popupDiv').style.left = pageWidth/2;
}

function hideComboBox(){
  var comboBoxes = document.getElementsByTagName("select");

  for (var i=0; i<comboBoxes.length; i++)
    comboBoxes[i].style.display = "none";
}

function showComboBox(){
  var comboBoxes = document.getElementsByTagName("select");

  for (var i=0; i < comboBoxes.length; i++)
    comboBoxes[i].style.display = "";
}

function hideMenu(){
   if(document.getElementById){
		var divs = document.getElementsByTagName("div");
		divs['HM_Menu1'].style.visibility = "hidden";
		divs['HM_Menu2'].style.visibility = "hidden";
		divs['HM_Menu3'].style.visibility = "hidden";
		divs['HM_Menu4'].style.visibility = "hidden";
		divs['HM_Menu5'].style.visibility = "hidden";
		divs['HM_Menu6'].style.visibility = "hidden";
		divs['HM_Menu7'].style.visibility = "hidden";
		divs['HM_Menu8'].style.visibility = "hidden";
	}
}

function showMenu(){
   if(document.getElementById){
		var divs = document.getElementsByTagName("div");
		divs['HM_Menu1'].style.visibility = "visible";
		divs['HM_Menu2'].style.visibility = "visible";
		divs['HM_Menu3'].style.visibility = "visible";
		divs['HM_Menu4'].style.visibility = "visible";
		divs['HM_Menu5'].style.visibility = "visible";
		divs['HM_Menu6'].style.visibility = "visible";
		divs['HM_Menu7'].style.visibility = "visible";
		divs['HM_Menu8'].style.visibility = "visible";
	}
}

function getPageSize(){
	var de = document.documentElement;
	pageWidth = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
	pageHeight = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight
}

function getOverlaySize() {
		if (window.innerHeight && window.scrollMaxY || window.innerWidth && window.scrollMaxX) {	
			yScroll = window.innerHeight + window.scrollMaxY;
			xScroll = window.innerWidth + window.scrollMaxX;
			var deff = document.documentElement;
			var wff = (deff&&deff.clientWidth) || document.body.clientWidth || window.innerWidth || self.innerWidth;
			var hff = (deff&&deff.clientHeight) || document.body.clientHeight || window.innerHeight || self.innerHeight;
			xScroll -= (window.innerWidth - wff);
			yScroll -= (window.innerHeight - hff);
		} else if (document.body.scrollHeight > document.body.offsetHeight || document.body.scrollWidth > document.body.offsetWidth){ // all but Explorer Mac
			yScroll = document.body.scrollHeight;
			xScroll = document.body.scrollWidth;
		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
			yScroll = document.body.offsetHeight;
			xScroll = document.body.offsetWidth;
		}

}  
function getPageScrollTop(){
	
	if (self.pageYOffset || self.pageXOffset) {
		yScrolltop = self.pageYOffset;
		xScrollleft = self.pageXOffset;
	} else if (document.documentElement && document.documentElement.scrollTop || document.documentElement.scrollLeft ){	 // Explorer 6 Strict
		yScrolltop = document.documentElement.scrollTop;
		xScrollleft = document.documentElement.scrollLeft;
	} else if (document.body) {// all other Explorers
		yScrolltop = document.body.scrollTop;
		xScrollleft = document.body.scrollLeft;
	}
}
str = '<link rel="stylesheet" type="text/css" href="/districtsto/balloontip.css" />'+
	'<script type="text/javascript" src="/districtsto/balloontip.js"></script>'

str = str+ '<div id="overlayDiv" onclick="closeAll()"  style="display:none; position: absolute; z-index:90; top:0px; left: 0px;background-color:#4a4747;filter:alpha(opacity=60);-moz-opacity: 0.6;opacity: 0.6;" ></div>' +
		'<div id="popupDiv" style="background:' + imgDivBG + ';border: solid ' + borderColor+ ' 1px;display:none;   z-index: 100; position: absolute;">' + 
  		'<table align="center" cellpadding="4" cellspacing="5">' +
  		'<tr ><td align="center" colspan="2"><div id="divObj">' +

'<div id="SMarguin" class="balloonstyle">' +
'	<table align="left" bgcolor="#FFFFCC" border="0" cellpadding="0" cellspacing="0"><tr><td>' +
'	<img src="/districtsto/SMaguin.jpg" style="float: left; margin-left: 5px; border:1px solid black" /></td>' +
'	<td class="gutter"></td>' +
'	<td><div class="title">Chief Engineer and General Manager</div>' +
'	<div class="name">Stephen Maguin</div>' +
'	<div class="phone">(562) 908-4288, extention 1500</div></td>' +
'	</td></tr></table>' +
'</div>' +
'<div id="KCompton" class="balloonstyle">' +
'	<table align="left" bgcolor="#FFFFCC" border="0" cellpadding="0" cellspacing="0"><tr><td>' +
'	<img src="/districtsto/KCompton.jpg" style="float: left; margin-left: 5px; border:1px solid black" /></td>' +
'	<td class="gutter"></td>' +
'	<td><div class="title">Secretary to the Boards of Directors</div>' +
'	<div class="name">Kimberly Compton</div>' +
'	<div class="phone">(562) 908-4288, extention 1101</div>' +
'	<div class="otherText"><a href="mailto:kcompton@lacsd.org">kcompton@lacsd.org</a></div></td>' +
'	</td></tr></table>' +
'</div>'+
		
'<table border="0" cellpadding="0" cellspacing="0" width="880" align="center">' +
'  <tr>' +
'   <td><img src="/districtsto/spacer.gif" width="374" height="1" border="0" alt=""></td>' +
'   <td><img src="/districtsto/spacer.gif" width="1" height="1" border="0" alt=""></td>' +
'   <td><img src="/districtsto/spacer.gif" width="137" height="1" border="0" alt=""></td>' +
'   <td><img src="/districtsto/spacer.gif" width="7" height="1" border="0" alt=""></td>' +
'   <td><img src="/districtsto/spacer.gif" width="137" height="1" border="0" alt=""></td>' +
'   <td><img src="/districtsto/spacer.gif" width="224" height="1" border="0" alt=""></td>' +
'   <td><img src="/districtsto/spacer.gif" width="1" height="1" border="0" alt=""></td>' +
'  </tr>' +

'  <tr>' +
'   <td rowspan="7"><img name="test_r1_c1" src="/districtsto/test_r1_c1.jpg" width="374" height="660" border="0" alt=""></td>' +
'   <td colspan="5"><img name="test_r1_c2" src="/districtsto/test_r1_c2.jpg" width="506" height="38" border="0" alt=""></td>' +
'   <td><img src="/districtsto/spacer.gif" width="1" height="38" border="0" alt=""></td>' +
'  </tr>' +
'  <tr>' +
'   <td colspan="3"><img name="test_r2_c2" src="/districtsto/test_r2_c2.jpg" width="145" height="42" border="0" alt=""></td>' +
'   <td>' +
'	<a rel="KCompton" href="#">' +
'	<img name="test_r2_c5" src="/districtsto/test_r2_c5.jpg" width="137" height="42" border="0" alt=""></a></td>' +
'   <td rowspan="6"><img name="test_r2_c6" src="/districtsto/test_r2_c6.jpg" width="224" height="622" border="0" alt=""></td>' +
'   <td><img src="/districtsto/spacer.gif" width="1" height="42" border="0" alt=""></td>' +
'  </tr>' +
'  <tr>' +
'   <td colspan="2"><img name="test_r3_c2" src="/districtsto/test_r3_c2.jpg" width="138" height="5" border="0" alt=""></td>' +
'   <td rowspan="5" colspan="2">' +
'	<img name="test_r3_c4" src="/districtsto/test_r3_c4.jpg" width="144" height="580" border="0" alt=""></td>' +
'   <td><img src="/districtsto/spacer.gif" width="1" height="5" border="0" alt=""></td>' +
'  </tr>' +
'  <tr>' +
'   <td colspan="2"><a rel="SMarguin" href="#">' +
'	<img name="test_r4_c2" src="/districtsto/test_r4_c2.jpg" width="138" height="39" border="0" alt=""></a></td>' +
'   <td><img src="/districtsto/spacer.gif" width="1" height="39" border="0" alt=""></td>' +
'  </tr>' +
'  <tr>' +
'   <td colspan="2"><img name="test_r5_c2" src="/districtsto/test_r5_c2.jpg" width="138" height="7" border="0" alt=""></td>' +
'   <td><img src="/districtsto/spacer.gif" width="1" height="7" border="0" alt=""></td>' +
'  </tr>' +
'  <tr>' +
'   <td colspan="2"><a href="#" ><img name="test_r6_c2" src="/districtsto/test_r6_c2.jpg" width="138" height="40" border="0" alt=""></a></td>' +
'   <td><img src="/districtsto/spacer.gif" width="1" height="40" border="0" alt=""></td>' +
'  </tr>' +
'  <tr>' +
'   <td colspan="2"><img name="test_r7_c2" src="/districtsto/test_r7_c2.jpg" width="138" height="489" border="0" alt=""></td>' +
'   <td><img src="/districtsto/spacer.gif" width="1" height="489" border="0" alt=""></td>' +
'  </tr>' +
'</table>' +
	
		'</div></td></tr>'+
		'<tr>'+
	   '<td id="imgCaptionCell"></td>' +
	   '<td align="right"><input type="button" onclick="closeAll()" value="Close"></td>' +
		'</tr>' +
  		'</table>'+
		'</div>'; 
document.write(str);



