// declare global vars
var original_headings = new Array();
var h; // for h3 headings
var h4text; // h4 heading
var isMac; 
var blurbOk;
var clickShowOk;

clickShowOk = (document.getElementById && document.styleSheets && document.styleSheets[0].href) ? 1:0;
// write in stylesheet for portfolio page click and show if the browser can cope with it
if (clickShowOk){
	            document.write('<link rel="stylesheet" type="text/css" href="/css/clickInstructions.css">');
}

function init(){
// check the dhtml functionality for the blurbs at left 
isMac = (navigator.userAgent.indexOf('Mac')!=-1) ? 1:0;
blurbOk = (document.getElementById  && document.createTextNode && document.getElementById("msoverinfo").innerHTML) ? 1:0;

// get the h4 heading which will be used for the WinIE mouseovers
if (blurbOk)
           {
	        h4text = document.getElementById("msoverinfo").getElementsByTagName("h4").item(0).firstChild.nodeValue;
		   }

// if the browser can do it, get h3 headings and attach events
if (clickShowOk){                   
                 h = document.getElementsByTagName("h3");
				 if (h.length==0)
                                {
	                             return;
                                }
                  for (var i=0;i<h.length;i++){
                                               original_headings[i] = h.item(i).innerHTML;// collect the original headings
		                                       h.item(i).innerHTML = '+ ' + h.item(i).innerHTML; // add a plus sign to them
	                                           h.item(i).onclick = showHide;   // assign a function to the click event
                                               h.item(i).onmouseover = function () {this.style.color = '#' + 'cc6600';}//assign function
		                                       h.item(i).onmouseout = function (){this.style.color='#' + '990000';}//assign function
		                    }                             
                 }
}


// This does the show and hide of the sections under the headings
function showHide(){
// find out which heading has been clicked
var j=0;
while (this.innerHTML != h.item(j).innerHTML){j++;}

// change the mouseout function reference
this.onmouseout =  function () {this.style.color = '#' + 'cc9933';}

//change the color of the heading
this.style.color='#' + '333333';

// get a reference to the next object which is the div
if (document.all && !isMac){// for IE Windows
				 var nextObj=this.nextSibling;
				 }
else             {// for W3C compliant browsers
			     var nextObj=this.nextSibling.nextSibling;
				 }

//change the divs' display property and the headings' color
	if (nextObj.style.display=='block'){
	                                  nextObj.style.display='none';
									  this.innerHTML = '+ ' + original_headings[j];
									  }
	else                              {
	                                   nextObj.style.display = 'block';
									   this.innerHTML = '- ' + original_headings[j];
									   }

}