var retainShading = 0; /* used to retain matching element shading when one is clicked to view the presentation */

function match(obj) {
	if (!retainShading) {
		var id=obj.id;
		for(var i=0; i<arr.length; i++) { 			
			if (arr[i]['id'] == id) {/* found the array element */
				var companions = arr[i]['companions'];
				try {
					document.getElementById(id).style.background='#87ceeb';
					/* loop through companions of two kinds, responds and repeats */					
					var companions = arr[i]['companions'];
					for(var j=0; j<companions.length; j++) { 
						if (companions[j]['isRepeat']) { // Type: repeats
							document.getElementById(companions[j]['id']).style.background='#98dffc';
						} else { // Type: responds
							document.getElementById(companions[j]['id']).style.background='#9fcc9f';
						}		
					}										
				} catch (err) {
					
}}}}}

function wipe() {
	if (!retainShading) {
		for(var i=0; i<arr.length; i++) {
			try {
				document.getElementById(arr[i]['id']).style.background='transparent';
			} catch (err) {
				//alert(i);
}}}}
	
function matchWrap(obj) {
	if (!retainShading) {
		var strWithId = obj.id; // the id is at end: i.e. "barId22"
		var id=strWithId.substr(5);
		var wrapId='w'+id;
		for(var i=0; i<arr.length; i++) { 			
			if (arr[i]['id'] == id) {/* found the array element */
				try {
					document.getElementById(wrapId).style.background='#87ceeb';	
					/* loop through companions of two kinds, responds and repeats */					
					var companions = arr[i]['companions'];
					for(var j=0; j<companions.length; j++) { 
						if (companions[j]['isRepeat']) { // Type: repeats
							document.getElementById('w'+companions[j]['id']).style.background='#98dffc';
						} else { // Type: responds
							document.getElementById('w'+companions[j]['id']).style.background='#9fcc9f';
						}		
					}
				} catch (err) {
					
}}}}}

function wipeWrap() {
	if (!retainShading) {
		for(var i=0; i<arr.length; i++) {
			try {
				document.getElementById('w'+arr[i]['id']).style.background='transparent'; // transparent
			} catch (err) {
}}}}

function present(obj) { /* retain current hover shading */
	retainShading = 0;
	wipe();
	retainShading = 1;
	var s = '';
	var id=obj.id;
	for(var i=0; i<arr.length; i++) { 			
		if (arr[i]['id'] == id) {/* found the array element */
			if (!arr[i]['note']) {
			return; /* done */
			}
			var companions = arr[i]['companions'];
			try {
				/* prepare proximity comparison - assemble matching elements
				this should take into account the two kinds of companions */
				document.getElementById(id).style.background='#87ceeb';
				str = document.getElementById(id).innerHTML;
				//str = str.replace(/<span/g,'<span class=z');
				s = s+'<li>'+str+'</li>';
				/* loop through companions of two kinds, responds and repeats */	
				for(var j=0; j<companions.length; j++) { 
					if (companions[j]['isRepeat']) { // Type: repeats
						document.getElementById(companions[j]['id']).style.background='#87ceeb';
					} else { // Type: responds
						document.getElementById(companions[j]['id']).style.background='#9fcc9f';
					}
					str = document.getElementById(companions[j]['id']).innerHTML;
					str = str.replace(/<span/g,'<span class=z');
					s = s+'<li>'+str+'</li>';							
				}
				s = '<ul>'+s+'</ul><div>'+arr[i]['note']+'</div>';
			} catch (err) {
				
			}
			break;			
		}			
	}
	var d = document.getElementById('showDiv');	
	var filler = "<div style='background-color:#87ceeb;height:18px;padding: 2px;'><a href='#' onclick=document.getElementById('showDiv').style.top=-1000;retainShading=0;wipe();></a></div>";
	document.getElementById('showDivInside').innerHTML = filler+s;	
	d.style.width = 500;		
	d.style.left = clientL();
	d.style.top = findPosY(obj);
}

function presentWrap(obj) { /* retain current hover shading */
	retainShading = 0;
	wipeWrap();
	retainShading = 1;
	var s = '';
	var strWithId = obj.id; // the id is at end: i.e. "barId22"
	var id=strWithId.substr(5);
	var wrapId='w'+id;
	for(var i=0; i<arr.length; i++) { 			
		if (arr[i]['id'] == id) {/* found the array element */
			document.getElementById(wrapId).style.background='#87ceeb';				
			/* loop through companions of two kinds, responds and repeats */					
			var companions = arr[i]['companions'];
			for(var j=0; j<companions.length; j++) { 
				if (companions[j]['isRepeat']) { // Type: repeats
					document.getElementById('w'+companions[j]['id']).style.background='#98dffc';
				} else { // Type: responds
					document.getElementById('w'+companions[j]['id']).style.background='#9fcc9f';
				}		
			}
			// output the note.
			s = '<div><br />'+arr[i]['note']+'</div>';	
		}			
	}
	var d = document.getElementById('showDiv');	
	var filler = "<div style='background-color:#87ceeb;height:18px;padding: 2px;'><a href='#' onclick=document.getElementById('showDiv').style.top=-1000;retainShading=0;wipeWrap();></a></div>";
	document.getElementById('showDivInside').innerHTML = filler+s;	
	d.style.width = 500;		
	d.style.left = clientL();
	d.style.top = findPosY(obj);
}

function clientL() {
	var x;
	if (self.innerHeight) // all except Explorer
	{
		x = self.innerWidth -550;
	}
	else if (document.documentElement && document.documentElement.clientHeight)
		// Explorer 6 Strict Mode
	{
		x = document.documentElement.clientWidth - 540;
	}
	else if (document.body) // other Explorers
	{
		x = document.body.clientWidth - 550;
	}
	return x;
}

function findPosY(obj)
{
	var curtop = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		curtop += obj.y;
	return curtop;
}