//Nav button constructor
function NavButton(imageURL, link, caption) {
	this.imgURL = imageURL;
	this.link = link;
	this.caption = caption;
}

NavButton.prototype.place = function(parentNode) {
	var div = document.createElement("div");
	var img = new Image(50,50);
	img.src = this.imgURL;

	var link = document.createElement("a");
	link.href = this.link;
	
	div.className = "navicon";
	
	link.appendChild(img);
	link.appendChild(document.createElement("br"));
	link.appendChild(document.createTextNode(this.caption));
	
	div.appendChild(link);

	//Get the previous child from the parent
	var leftMargin = 10;
	var children = parentNode.childNodes;
	for(var i = 0; i < children.length; i++) {
		leftMargin += 10 + children[i].offsetWidth;
	}

	div.style.marginLeft = leftMargin + "px";

	parentNode.appendChild(div);
}

//Nav separator constructor
function NavSep() {}

NavSep.prototype.place = function(parentNode) {
	var div = document.createElement("div");
	div.className = "navsep";
	var leftMargin = 10;
	var children = parentNode.childNodes;
	for(var i = 0; i < children.length; i++) {
		leftMargin += 10 + children[i].offsetWidth;
	}

	div.style.marginLeft = leftMargin + "px";
	parentNode.appendChild(div);
}

function makeNav() {
	document.write('<center><div id="navbox"></div></center>');
	// Create the array of buttons
	var buttons = [
		new NavButton("tablet50.png","tabletdraw.html","TabletDraw"),
		new NavButton("moodex50.png","moodex.html","mooDex"),
		new NavSep(),
		new NavButton("contact.png","contact.html","Contact"),
	];

	navBox = document.getElementById("navbox");
	//Place all of the buttons
	for(var i = 0; i < buttons.length; i++) {
		var b = buttons[i];
		b.place(navBox);
	}
	
	//Calculate the navbox width to fit the buttons
	var children = navBox.childNodes;
	var first, last;
	first = children[0];
	last = children[children.length-1];
	navbox.style.width = 35 + (last.offsetLeft + last.offsetWidth) - first.offsetLeft;

}