var staff;
var tempStaff=new Array();

var STANDARD_IMG_HEIGHT=104;
var OFFSET=10;
var LEFT=500;
var TOP=191;
var TOPCONST=191;
var noOnSide;
var NO_ON_WIDTH = 4;

function staffMember(img, alt, name, jd, description)
{
	this.img=img;
	this.alt=alt;
	this.name=name;
	this.jd=jd;
	this.description=description;
}

function addStaff(img, alt, name, jd, description, pos)
{
	if (staff==null)
		tempStaff[pos-1]=new staffMember(img, alt, name, jd, description);
}

function updateConstants()
{
	TOP=TOPCONST+(document.getElementById('diagramArea').offsetTop + OFFSET);
	var navWidth = document.getElementById('Navigation').clientWidth;
	var imageWidth = (navWidth + document.getElementById('main').clientWidth);
	LEFT = (document.body.clientWidth - imageWidth)/2 + navWidth + OFFSET;
}

function drawDiagram()
{
	updateConstants();
	
	staff=tempStaff;
	var html	= addTable()
				+ drawStaff();
	document.getElementById('diagramArea').innerHTML = html;
	document.getElementById('diagramArea').style.height=((STANDARD_IMG_HEIGHT*(noOnSide+2))+(OFFSET*5));
}

function addTable()
{
	var sides=(staff.length - (NO_ON_WIDTH*2));
	var height;
	if (sides%2==0)
		height=sides/2;
	else
		height=(sides+1)/2;
	noOnSide=height;

	height=height*STANDARD_IMG_HEIGHT;
	return	'<img src="images/test.jpg" alt="An image of a board table" '
	+		'style="position:absolute; left:'+(LEFT+STANDARD_IMG_HEIGHT+OFFSET)+'px;'
	+		'top: '+(STANDARD_IMG_HEIGHT+TOP)+'px;"'
	+		'width="'+(NO_ON_WIDTH*STANDARD_IMG_HEIGHT)+'" height="' + height + '"/>'
	+		'<div id="memberDisplay"'
	+		'style="position:absolute; left:'+(LEFT+STANDARD_IMG_HEIGHT+OFFSET)+'px;'
	+		'z-index:1;'
	+		'background-color: #FFFFFF;'
	+		'visibility:hidden;'
	+		'top: '+(STANDARD_IMG_HEIGHT+TOP)+'px;'
	+		'width:'+(NO_ON_WIDTH*STANDARD_IMG_HEIGHT)+'px;'
	+		'height:' + height + 'px;'
	+		'opacity: 80; filter: alpha(opacity=80);"></div>';
}

function drawStaff()
{
	var html='';
	for (i in staff)
	{
		if (i<NO_ON_WIDTH)
			html+=drawTopMember(i,i,true);
		else if (i>=NO_ON_WIDTH && i<noOnSide+NO_ON_WIDTH)
			html+=drawRightMember(i,i-NO_ON_WIDTH,true);
		else if (i>=noOnSide+NO_ON_WIDTH && i<noOnSide+(NO_ON_WIDTH*2))
			html+=drawTopMember(i,i-noOnSide-NO_ON_WIDTH,false);
		else
			html+=drawRightMember(i,i-noOnSide-(2*NO_ON_WIDTH),false);
	}
	
	return html;
}

function displayStaff(i)
{
	var member = staff[i];
	var html	= '<table>'
				+		'<tr>'
				+			'<td>'
//				+				'<div class="floatRight">'
//				+					'<img src="'+member.img+'" alt="'+member.alt+'" />'
//				+				'</div>'
				+				'<div style="font-size:8pt;" align="justify">'
				+ 				'<b>'+member.name+'</b><br/>'
				+ 				member.jd + '<br/>'
				+ 				member.description
				+				'</div>'
				+			'</td>'
				+		'</tr>'
				+		'<tr>'
				+			'<td align="right" colspan="2">'
				+				'<a href="#" onclick="closeDisplay();return false;">close</a>'
				+			'</td>'
				+		'</tr>'
				+ '</table>';
	
	document.getElementById('memberDisplay').innerHTML=html;
	document.getElementById('memberDisplay').style.visibility='visible';
}

function closeDisplay()
{
	document.getElementById('memberDisplay').style.visibility='hidden';
}

function drawTopMember(i,j,top)
{
	var member=staff[i];
	return	'<a href="#" onclick="displayStaff(\''+i+'\');return false;">'
		+		'<img src="'+member.img+'"'
		+		'alt="' + member.alt + '"'
		+		'style="position:absolute; left:' + (LEFT + OFFSET + (STANDARD_IMG_HEIGHT*(++j))) +'px;'
		+		(top
						? 'top: '+TOP+'px;"/>'
						: 'top: '+(TOP + (STANDARD_IMG_HEIGHT*(noOnSide+1))+(OFFSET))+'px;"/>')
		+	'</a>';
}

function drawRightMember(i,j,right)
{
	var member=staff[i];
	return	'<a href="#" onclick="displayStaff(\''+i+'\');return false;">'
		+	'<img src="'+member.img+'"'
		+		'alt="' + member.alt + '"'
		+		'style="position:absolute; left:'
		+	 	(right
					? (LEFT + (STANDARD_IMG_HEIGHT*(NO_ON_WIDTH+1)) + (2*OFFSET)-0) +'px;'
					: LEFT +'px;')
		+		'top: '+(TOP + (STANDARD_IMG_HEIGHT*(++j)))+'px;"/>'
		+	'</a>';
}