function init() {
    var tmp = document.getElementById("homePageImage01");
    if (tmp) {
    
        //swap static no-java navbar for rich javascript-enabled navbar
        for(i = 1; i <= 4; i++) {
        
            switch(i) {
                case "1":
                    var aText = "Apprentice's Guide";
                    break;
                case "2":
                    var aText = "Is it for me?";
                    break;
                case "3":
                    var aText = "What do I get?";
                    break;
                case "4":
                    var aText = "Who'll help me?";
                    break;
            }
            
            var aLink = "<a href=javascript:changeGuide(&quot;0" + i + "&quot;)>" + aText + "</a>";
            
	        document.getElementById("homePageNavStatic0" + i).innerHTML = aLink;
	        document.getElementById("homePageNavStatic0" + i).id = 'homePageNav0' + i;
        }
        
        //hide all guide images
        hideAllGuides();
        
        //reveal first guide div
        document.getElementById("homePageImage01").style.display = "block";
        changeOpac(100, "homePageImage01");
        
        //assign first div as unhoverable heading 
        document.getElementById("homePageNav01").style.background = "url('/images/navGuide01Large.gif') no-repeat";
        document.getElementById("homePageNav01").className = "unhoverable";
    }
}

function changeGuide(guideID) {

    //alert("changeGuide(" + guideID + ")");
    
	var speed = Math.round(10);
	var timer = 0;

    hideAllGuides();

    //reveal new div and fade in
    document.getElementById("homePageImage" + guideID).style.display = "block";
	for(i = 0; i <= 100; i++) {
		setTimeout("changeOpac(" + i + ",'" + "homePageImage" + guideID + "')",(timer * speed));
		timer++;
	}
	
	//assign new background and unhoverable class for new div
    document.getElementById("homePageNav" + guideID).style.background = "url('/images/navGuide" + guideID + "Large.gif') no-repeat";
    document.getElementById("homePageNav" + guideID).className = "unhoverable"; 
}

function hideAllGuides() {

    //alert("hideAllGuides");
    
    // set all Guide Divs to transparent, and hide them
    for(i = 1; i <= 4; i++) {
        changeOpac(0, "homePageImage0" + i);
        document.getElementById("homePageImage0" + i).style.display = "none";
    }
    
    //set all respective navbar images to small
    for(i = 1; i <= 4; i++) {
        document.getElementById("homePageNav0" + i).style.background = "url('/images/navGuide0" + i + "Small.gif') no-repeat";
        //apply hoverable class
        document.getElementById("homePageNav0" + i).className = "hoverable";
    }
}

//change the opacity for different browsers
function changeOpac(opacity, id) {

    //alert("hideAllGuides(" + opacity + "," + id + ")");
    
	var object = document.getElementById(id).style; 
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
}

// This should be done attaching to the load event instead.
window.onload = init;