// ***************** Determine the browser type.
var browserType;

if (document.layers) {browserType = "nn4"}
if (document.all) {browserType = "ie"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {
   browserType= "gecko"
}

// ***************** PUBLIC FUNCTIONS - Call these to show/hide the balloon.
// ***************** Set the baseUrl to the site directory where the balloon html pages are stored.
var baseUrl;
baseUrl = "http://www.psoc.net/html/";
//baseUrl = "http://localhost/balloon_test/";

var isBalloonOpen;
var lastPageName;

isBalloonOpen = false;
lastPageName = "";

function ShowBalloon(pageName, left, top, width, height) {
	// Find div and get the style.
	var obj;
	obj = find("Balloon");
	obj = obj.style;
	
	// Check to see if the balloon
	// is already open with this PageName.
	// We want to avoid flicker.
	if (isBalloonOpen == true)
		if (lastPageName == pageName)
			return;
			
	lastPageName = pageName;
	
	// Hide in case it's currently visible.
	// We don't want the balloon open while performing
	// visually distracting tasks such as resizing and page loading.
	obj.visibility = "hidden";
	isBalloonOpen = false;
	
	// Set the location and size.
	obj.left = left + "px";
	obj.top = top + "px";
	obj.width = width + "px";
	obj.height = height + "px";
	
	// Load the page.
	GetBalloonPage(pageName);
}

function HideBalloon() {
	hide("Balloon");
	isBalloonOpen = false;
}

// ***************** Core search, hide, and show functions used to manipulate divs.
function find(elementId) {
	var obj;
	if (browserType == "gecko" )
		obj = eval('document.getElementById("' + elementId + '")');
	else if (browserType == "ie")
		obj = eval('document.getElementById("' + elementId + '")');
	else
		obj = eval('document.layers["' + elementId + '"]');
		
	return obj;
}

function hide(elementId) {
	var obj;
	obj = find(elementId);
	obj.style.visibility = "hidden";
}

function show(elementId) {
	var obj;
	obj = find(elementId);
	obj.style.visibility = "visible";
}

// ***************** Use AJAX to load external HTML page to show in the balloon div.
var httpReq;

function GetUrl(url, callback)
{
	try {
    	netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
	} catch (e) {
		//alert("Permission UniversalBrowserRead denied.");
	}

	// branch for native XMLHttpRequest object
    if (window.XMLHttpRequest) {
      httpReq = new XMLHttpRequest();
      httpReq.abort();
      httpReq.onreadystatechange = callback;
      httpReq.open("GET", url, true);
	  httpReq.send(null);
    // branch for IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
      httpReq = new ActiveXObject("Microsoft.XMLHTTP");
      if (httpReq) {
        httpReq.abort();
        httpReq.onreadystatechange = callback;
        httpReq.open("GET", url, true);
        httpReq.send();
      }
    }
}

function GetBalloonPage(pageName)
{
	// Note: appending Math.random() insures that IE does not load cached versions.
	url = baseUrl + pageName + "?" + Math.random();
	GetUrl(url, GotBalloonPage);
}

function GotBalloonPage() 
{
	// Proceed only if the page loaded.
    if (httpReq.readyState != 4 || httpReq.status != 200) {
      return;
    }
    
    // Get the balloon div.
    var obj;
    obj = find("Balloon");
    
    // Set the table cell and show.
    obj.innerHTML = httpReq.responseText;
    obj.style.visibility = "visible";
    isBalloonOpen = true;
}