var processDiagramImgPath = '/Files/System/images/processdiagram/';
var processDiagramViewTooltipTime = 500;

var processDiagramImages = new Object();
var processDiagramCurrentPage = 0;
var processDiagramViewTooltipTM = false;
var processDiagramHideTooltipTM = false;
var processDiagramMouseX, processDiagramMouseY;

function initImagesProcessDiagram(id, imgName, imgTooltip) {
	processDiagramImages[id] = new Object();
	processDiagramImages[id]['normal'] = new Image();
	processDiagramImages[id]['normal'].src = processDiagramImgPath + imgName + '-n.gif';
	processDiagramImages[id]['over'] = new Image();
	processDiagramImages[id]['over'].src = processDiagramImgPath + imgName + '-o.gif';
	processDiagramImages[id]['current'] = new Image();
	processDiagramImages[id]['current'].src = processDiagramImgPath + imgName + '-c.gif';
	processDiagramImages[id]['tooltip'] = imgTooltip;
}

function overProcessDiagram(st, obj) {
	if(st) {
		obj.src=processDiagramImages[obj.id].over.src;
	}
	else if(processDiagramCurrentPage == 0) {
		obj.src=processDiagramImages[obj.id].current.src;
	}
	else {
		obj.src=processDiagramImages[obj.id].normal.src;
	}
}

function moveProcessDiagramTooltip(e) {
	if(!e && window.event) {
		e = window.event;
	}
	if(e) {
		processDiagramMouseX = e.clientX;
		processDiagramMouseY = e.clientY;
	}
}

function viewProcessDiagramTooltip(obj, e) {
	if(processDiagramHideTooltipTM) clearTimeout(processDiagramHideTooltipTM);
	if(processDiagramViewTooltipTM) clearTimeout(processDiagramViewTooltipTM);
	if(!e && window.event) {
		e = window.event;
	}
	if(e) {
		var ttDiv = document.getElementById('idProcDiagTooltip');
		if(ttDiv.style.visibility == 'visible' && ttDiv.cParentId != obj.id) {
			ttDiv.style.visibility = 'hidden';
		}
		ttDiv.cParentId = obj.id;
		processDiagramViewTooltipTM = setTimeout('viewProcessDiagramTooltipDo("' + obj.id + '",' + e.clientX + ',' + e.clientY + ');', processDiagramViewTooltipTime);
	}
}

function viewProcessDiagramTooltipDo(objId, x, y) {
	if(processDiagramViewTooltipTM) clearTimeout(processDiagramViewTooltipTM);
	if(processDiagramImages[objId]['tooltip'] && processDiagramImages[objId]['tooltip'].replace(/\s+/, '') != '') {
		var i, str = '';
		var mbTop, mbLeft, dbWidth, dbHeight, dbScrollLeft, dbScrollTop;
		var ttDiv = document.getElementById('idProcDiagTooltip');
		var aTooltipList = processDiagramImages[objId]['tooltip'].split(/\|/);
		for(i = 0; i < aTooltipList.length; i++) {
			str += '<li style="white-space: nowrap; list-style-image: none;"><nobr>' + aTooltipList[i] + '</nobr></li>';
		}
		ttDiv.innerHTML = '<table border="0" cellspacing="0" cellpadding="0"><tr><td style="font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; background-color: #D9E6FF; padding: 7px 11px 7px ' + ((document.all) ? '11px' : '0px') + ';"><ul style="margin: 0px 0px 0px ' + ((document.all) ? '15px' : '0px') + ';">' + str + '</ul></td></tr></table>';
		dbWidth = (document.body.clientWidth) ? document.body.clientWidth : document.body.offsetWidth;
		dbHeight = (document.body.clientHeight) ? document.body.clientHeight : document.body.offsetHeight;
		dbScrollLeft = document.body.scrollLeft;
		dbScrollTop = document.body.scrollTop;
		ttDiv.style.width = ttDiv.getElementsByTagName('TABLE')[0].offsetWidth + 'px';
		ttDiv.style.height = ttDiv.getElementsByTagName('TABLE')[0].offsetHeight + 'px';
		mbLeft = ((processDiagramMouseX) ? processDiagramMouseX : x) + dbScrollLeft;
		if(mbLeft + ttDiv.offsetWidth > dbScrollLeft + dbWidth) {
			mbLeft = (dbScrollLeft + dbWidth) - ttDiv.offsetWidth;
		}
		if(mbLeft < dbScrollLeft) {
			mbLeft = dbScrollLeft;
		}
		mbTop = (((processDiagramMouseY) ? processDiagramMouseY : y) + dbScrollTop) - ttDiv.offsetHeight;
		if(mbTop + ttDiv.offsetHeight > dbScrollTop + dbHeight) {
			mbTop = (((processDiagramMouseY) ? processDiagramMouseY : y) + dbScrollTop);
		}
		if(mbTop < dbScrollTop) {
			mbTop = (((processDiagramMouseY) ? processDiagramMouseY : y) + dbScrollTop);
			if(mbTop + ttDiv.offsetHeight > dbScrollTop + dbHeight) {
				mbTop = dbScrollTop;
			}
		}
		ttDiv.style.left = mbLeft + 'px';
		ttDiv.style.top = mbTop + 'px';
		ttDiv.onclick = null;
		ttDiv.onclick = new Function('window.location=processDiagramImages["' + objId + '"]["link"]');
		ttDiv.style.cursor = 'pointer';
		setTimeout('document.getElementById("idProcDiagTooltip").style.visibility = "visible";', 11);
	}
}

function hideProcessDiagramTooltip() {
	if(processDiagramViewTooltipTM) clearTimeout(processDiagramViewTooltipTM);
	if(processDiagramHideTooltipTM) clearTimeout(processDiagramHideTooltipTM);
	processDiagramHideTooltipTM = setTimeout('hideProcessDiagramTooltipDo();', 250);
}

function hideProcessDiagramTooltipDo() {
	if(processDiagramHideTooltipTM) clearTimeout(processDiagramHideTooltipTM);
	var ttDiv = document.getElementById('idProcDiagTooltip');
	ttDiv.style.visibility = 'hidden';
	ttDiv.innerHTML = '';
	ttDiv.style.left = '1px';
	ttDiv.style.top = '1px';
	
}

function writeProcessDiagram(cPage, pLink1, pLink2, pLink3, pLink4, pLink5, pLink6, pLink7, imgTooltip1, imgTooltip2, imgTooltip3, imgTooltip4, imgTooltip5, imgTooltip6, imgTooltip7) {

    initImagesProcessDiagram('idImgStep1', 'analysis-and-design', 'Project Scoping|Project Kickoff|Choice of Analysis|Technical Infrastructure Advice|Solution Design|Project Design');
    initImagesProcessDiagram('idImgStep2', 'build', 'Build Kickoff|Preparation of Environments|Create Technical Specifications|Development|Internal Unit Test|Internal Integration Test|Customer Unit Test|Documentation');
    initImagesProcessDiagram('idImgStep3', 'implementation', 'Implementation Kickoff|Installation|System Setup|Data Conversion|Customer Integration Test|End-User Education');
    initImagesProcessDiagram('idImgStep4', 'live', 'Day-to-day operation within acceptable performance limit|Final Project Review');
    initImagesProcessDiagram('idImgStep5', 'support', 'Ongoing support with client and stakeholders as needed');
    initImagesProcessDiagram('idImgStep6', 'project-management', 'Project Planning|Risk Analysis and Monitoring|Progress Reporting & Reviews|Issue Management|Tools and Procedures|Communication|Project Administration|Project Change Management');
    initImagesProcessDiagram('idImgStep7', 'training', 'User training runs in parallel with implementation|Parallel training ensures users are ready once implementation goes live|Ongoing training as needed');

	var i, str = '';
	processDiagramCurrentPage = cPage;
	for(i = 1; i <= 7; i++) {
		if(eval('pLink' + i)) {
			processDiagramImages['idImgStep' + i]['link'] = eval('pLink' + i);
		}
	}
	for(i = 1; i <= 7; i++) {
		if(eval('imgTooltip' + i)) {
			processDiagramImages['idImgStep' + i]['tooltip'] = eval('imgTooltip' + i);
		}
	}
	str += '<table width="450" height="410" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td width="70" align="center" valign="top" style="background:#FFFFFF;">' + ((cPage != 6 || cPage == 0) ? '<a href="' + pLink6 + '">' : '') + '<img id="idImgStep6" src="' + ((cPage == 6 || cPage == 0) ? processDiagramImages['idImgStep6'].current.src : processDiagramImages['idImgStep6'].normal.src) + '" width="70" height="410" border="0"' + ((cPage != 6 || cPage == 0) ? ' onMouseOver="overProcessDiagram(1,this); viewProcessDiagramTooltip(this,event);" onMouseOut="overProcessDiagram(0,this); hideProcessDiagramTooltip();"' : ' onMouseOver="viewProcessDiagramTooltip(this,event);" onMouseOut="hideProcessDiagramTooltip();"') + ' onMouseMove="moveProcessDiagramTooltip(event);">' + ((cPage != 6 || cPage == 0) ? '</a>' : '') + '</td><td width="30" style="background:#FFFFFF;">&nbsp;</td><td width="250" style="background:#FFFFFF;"><table width="250" height="410" border="0" cellpadding="0" cellspacing="0">';
	for(i = 1; i <= 5; i++) {
		str += '<tr><td width="250" height="50" align="center" valign="middle" style="background:#FFFFFF;">' + ((i != cPage || cPage == 0) ? '<a href="' + eval('pLink' + i) + '">' : '') + '<img id="idImgStep' + i + '" src="' + ((i == cPage || cPage == 0) ? processDiagramImages['idImgStep' + i].current.src : processDiagramImages['idImgStep' + i].normal.src) + '" width="250" height="50" border="0"' + ((i != cPage || cPage == 0) ? ' onMouseOver="overProcessDiagram(1,this); viewProcessDiagramTooltip(this,event);" onMouseOut="overProcessDiagram(0,this); hideProcessDiagramTooltip();"' : ' onMouseOver="viewProcessDiagramTooltip(this,event);" onMouseOut="hideProcessDiagramTooltip();"') + ' onMouseMove="moveProcessDiagramTooltip(event);">' + ((i != cPage || cPage == 0) ? '</a>' : '') + '</td></tr>';
		if(i != 5) {
			str += '<tr><td height="40" align="center" style="background:#FFFFFF; text-align:center;"><img src="' + processDiagramImgPath + '/arr' + ((i == cPage || i == cPage - 1 || cPage == 0) ? '-c' : '-n') + '.gif" width="25" height="40" border="0"></td></tr>';
		}
	}
	str += '</table></td><td width="30" style="background:#FFFFFF;">&nbsp;</td><td width="70" align="center" valign="top" style="background:#FFFFFF;">' + ((cPage != 7 || cPage == 0) ? '<a href="' + pLink7 + '">' : '') + '<img id="idImgStep7" src="' + ((cPage == 7 || cPage == 0) ? processDiagramImages['idImgStep7'].current.src : processDiagramImages['idImgStep7'].normal.src) + '" width="70" height="410" border="0"' + ((cPage != 7 || cPage == 0) ? ' onMouseOver="overProcessDiagram(1,this); viewProcessDiagramTooltip(this,event);" onMouseOut="overProcessDiagram(0,this); hideProcessDiagramTooltip();"' : ' onMouseOver="viewProcessDiagramTooltip(this,event);" onMouseOut="hideProcessDiagramTooltip();"') + ' onMouseMove="moveProcessDiagramTooltip(event);">' + ((cPage != 7 || cPage == 0) ? '</a>' : '') + '</td></tr></table>';
	str += '<div id="idProcDiagTooltip" style="position: absolute; left: 1px; top: 1px; width: 1px; height: 1px; z-index: 33001; filter: progid:DXImageTransform.Microsoft.Shadow(color=#858585, direction=135, strength=4, enabled=true); visibility: hidden; border: 1px solid #002A88;" onMouseOver="if(processDiagramHideTooltipTM) clearTimeout(processDiagramHideTooltipTM);" onMouseOut="if(processDiagramHideTooltipTM) clearTimeout(processDiagramHideTooltipTM); processDiagramHideTooltipTM = setTimeout(\'hideProcessDiagramTooltipDo();\', 250);"></div>';
	document.write(str);
}