// Array to hold different font types
var fonts = new Array();
fonts[0] = 'Verdana';
fonts[1] = 'Tahoma';
fonts[2] = 'Arial';
fonts[3] = 'Times New Roman';
fonts[4] = 'Courier New';
fonts[5] = 'Comic Sans MS,';
fonts[6] = 'Tahoma';
fonts[7] = 'Geneva';
fonts[8] = 'MS Sans Serif';
fonts[9] = 'Lucida Console';
// Array for the info box, keyed by a div name
var info = new Array();
info['blog'] = "Visit the blog for some pointless and infrequent ramblings";
info['about'] = "Who did what?";
info['links'] = "Some interesting and handy sites";
// Array to determine the colour of each div, this links to the info box
var colours = new Array();
colours['blog'] = "#ff6600";
colours['about'] = 	"#33ff00";
colours['links'] = "#ff0000";

// Change the font for the object passed in (div)
function changeFont(obj) {
  var randomnumber=Math.floor(Math.random()*9)
  randomnumber=randomnumber + 1;
	obj.style.fontFamily = fonts[randomnumber];
	obj.style.zIndex = 5;
	obj.style.borderStyle = 'solid';
	//Display the info box associated with the div passed in
	displayInfoBox(obj);

}

// reinitialise the div passed in
function revertToDefault(obj) {
	obj.style.fontFamily = fonts[0];
	obj.style.textDecoration = 'none';
	obj.style.zIndex = -1;
	obj.style.borderStyle = 'dashed';
	// clear the info box and hide it
	resetInfoBox();
}

// Display the info box for the div, also colour the link line between the div and the infobox
function displayInfoBox(obj) {
 var infoBox = document.getElementById('infoBox');
 var hlink = document.getElementById('hlink');
 infoBox.style.display='block';
 infoBox.innerHTML = info[obj.className];
 infoBox.style.fontFamily = obj.style.fontFamily
 infoBox.style.borderColor = colours[obj.className];
 infoBox.style.borderStyle = 'solid';
 hlink.style.borderTopColor = colours[obj.className];
 hlink.style.borderStyle = 'solid';
 hlink.style.zIndex = 4;
 hlink.style.display='block';
}

// Hide the info box, and hide the link line
function resetInfoBox() {
 var infoBox = document.getElementById('infoBox');
 var hlink = document.getElementById('hlink');
 infoBox.style.display='none';
 infoBox.innerHTML = '';
 infoBox.style.borderColor = 'white';
 hlink.style.borderStyle = 'solid';
 hlink.style.borderTopColor = 'black';
 hlink.style.borderStyle = 'dashed';
 hlink.style.zIndex = -1;
 hlink.style.display='none';
}