function getSectionId()
{
	var theUrl = document.URL;
	
	if (theUrl.indexOf("#") > -1)
	{
		var queryString = theUrl.substr(theUrl.indexOf("#"));
		var queryStringArray = queryString.split("#");

		if (queryStringArray.length > 1)
				return queryStringArray[1];
	}
	
	return "";
} 

function doPopup()
{
	if (!document.getElementsByTagName)
		return false;

	var links = document.getElementsByTagName("a");

	for (var i = 0; i < links.length; i++)
	{
		if (links[i].className.match("popup"))
		{
			var SectionID = links[i].getAttribute("href").split("#")[1];

			links[i].onmouseover = function ()
			{
				var SectionID = this.getAttribute("href").split("#")[1];
				var blurbImg = document.getElementById('prodBlurbImg');
				var defaultImg = document.getElementById('prodBlurbDefaultImg');
				changeText('prodBlurbText', SectionID, 'Blurb');
				changeImage('prodBlurbImg', SectionID);
				centerImage('prodBlurbImg', SectionID);
				defaultImg.style.display = 'none';
				blurbImg.style.width = 'auto';
				blurbImg.style.height = 'auto';
			}

			if (modemText[SectionID + 'Des'])
			{
				var prodDiv = document.getElementById('prodPopup');
				var prodTextDiv = document.getElementById('prodText');
				var prodNavDiv = document.getElementById('prodNav');
				var prodImg = document.getElementById('prodImg');
				prodDiv.style.display = 'none';
				prodTextDiv.style.display = 'none';		
				prodNavDiv.style.display = 'none';
				prodImg.src = '';

				links[i].onclick = showPopupFromClick;
			}
		}
	}
	
	var sectionId = getSectionId();

	if (sectionId != "")
		showPopup(sectionId);
}

function showPopupFromClick()
{
	var sectionId = this.getAttribute("href").split("#")[1];
	showPopup(sectionId);
	return false;
}

function showPopup(sectionId)
{
	var prodDiv = document.getElementById('prodPopup');
	var prodTextDiv = document.getElementById('prodText');
	var prodNavDiv = document.getElementById('prodNav');
	var navDes = document.getElementById('navDes');
	var navSpec = document.getElementById('navSpec');
	var navMan = document.getElementById('navMan');
	var prodImg = document.getElementById('prodImg');
	var closeButton = document.getElementById('navClose');

	navDes.onmouseover = function ()
	{
		navDes.className = "selectedTab";
		navSpec.className = "tab";
		navMan.className = "tab";
		changeText('prodText', sectionId, 'Des');
	}

	navSpec.onmouseover = function ()
	{
		navDes.className = "tab";
		navSpec.className = "selectedTab";
		navMan.className = "tab";
		changeText('prodText', sectionId, 'Spec');
	}

	navMan.onmouseover = function ()
	{
		navDes.className = "tab";
		navSpec.className = "tab";
		navMan.className = "selectedTab";
		changeText('prodText', sectionId, 'Man');
	}

	closeButton.onclick = function()
	{
		/* Hide popup */
		prodDiv.style.zIndex = '1';
		prodDiv.style.display = 'none';
		prodTextDiv.style.zIndex = '1';
		prodTextDiv.style.display = 'none';
		prodNavDiv.style.zIndex = '1';
		prodNavDiv.style.display = 'none';
		prodImg.src = '';
		return false;
	}

	navDes.className = "selectedTab";
	navSpec.className = "tab";
	navMan.className = "tab";
	changeText('prodText', sectionId, 'Des');
	changeImage('prodImg', sectionId);

	// Display popup
	prodDiv.style.zIndex = '1';
	prodDiv.style.display = 'block';
	prodDiv.focus();
	prodTextDiv.style.zIndex = '1';
	prodTextDiv.style.display = 'block';
	prodTextDiv.focus();
	prodNavDiv.style.zIndex = '1';
	prodNavDiv.style.display = 'block';
	prodNavDiv.focus();
}

function changeText(destID, SectionID, Section)
{
	var destElement = document.getElementById(destID);
	destElement.innerHTML = '<div class=\"heading\">' + SectionID + '</div>' + modemText[SectionID + Section];
}

function changeImage(destID, srcImg)
{
	var destElement = document.getElementById(destID);
	
	if(modemImage[srcImg])
	{
		var imgheight = modemImage[srcImg].height;
		
		if(imgheight == 0)
		{
			destElement.style.display = 'none';
			return;
		}
		
		destElement.style.display = 'inline';
		destElement.src = modemImage[srcImg].src;
	}
	else
		destElement.style.display = 'none';
}

function centerImage(destID,srcImg)
{
	var destElement = document.getElementById(destID);

	if (modemImage[srcImg])
	{
		var imgheight = modemImage[srcImg].height;

		if (imgheight == 0)
			return;

    var parentheight = destElement.parentNode.clientHeight;
		var temp = parentheight - imgheight;

		if ((temp % 2) == 1)
			temp++;

		var topmargin = temp / 2;

		// If the picture is small make it line up with the text
		if (topmargin > 35)
			topmargin = 35;

		destElement.style.marginTop = topmargin + 'px';
	}
}

function addImage(imgID, imgName)
{
	modemImage[imgID] = new Image();
	modemImage[imgID].onerror = function () { this.height = 0; this.width = 0; }
	modemImage[imgID].src = 'Images/' + imgName;
}