function mainMenu() {
    toButton(makeButton('main_tuinen','Tuinen','tuinen.aspx',true,244,93));
    toButton(makeButton('main_teksten','Teksten','teksten.aspx',true,341,78));
    toButton(makeButton('main_johnvanderrest','John van der Rest','johnvanderrest.aspx',true,447,46));
    toButton(makeButton('main_contact','Contact','contact.aspx',true,649,32));
    subMenu();
}

function preLoad() {
    if (document.images) {
        pic1 = loadImage(100,50, "images/main_tuinen.jpg");
        pic2 = loadImage(100,50, "images/main_tuinen_hi.jpg");
        pic3 = loadImage(100,50, "images/main_tuinen_on.jpg");
        pic4 = loadImage(100,50, "images/main_teksten.jpg");
        pic5 = loadImage(100,50, "images/main_teksten_hi.jpg");
        pic6 = loadImage(100,50, "images/main_teksten_on.jpg");
        pic7 = loadImage(100,50, "images/main_johnvanderrest.jpg");
        pic8 = loadImage(100,50, "images/main_johnvanderrest_hi.jpg");
        pic9 = loadImage(100,50, "images/main_johnvanderrest_on.jpg");
        pic10 = loadImage(100,50, "images/main_contact.jpg");
        pic11 = loadImage(100,50, "images/main_contact_hi.jpg");
        pic12 = loadImage(100,50, "images/main_contact_on.jpg");
        pic13 = loadImage(100,50, "images/sub_tuinen.jpg");
        pic14 = loadImage(100,50, "images/sub_tuinen_hi.jpg");
        pic15 = loadImage(100,50, "images/sub_tuinen_on.jpg");
        pic16 = loadImage(100,50, "images/sub_voeding.jpg");
        pic17 = loadImage(100,50, "images/sub_voeding_hi.jpg");
        pic18 = loadImage(100,50, "images/sub_voeding_on.jpg");
        pic19 = loadImage(100,50, "images/sub_ecologisch.jpg");
        pic20 = loadImage(100,50, "images/sub_ecologisch_hi.jpg");
        pic21 = loadImage(100,50, "images/sub_ecologisch_on.jpg");
        pic22 = loadImage(100,50, "images/sub_mulchen.jpg");
        pic23 = loadImage(100,50, "images/sub_mulchen_hi.jpg");
        pic24 = loadImage(100,50, "images/sub_mulchen_on.jpg");
        pic25 = loadImage(100,50, "images/sub_fotoboek.jpg");
        pic26 = loadImage(100,50, "images/sub_fotoboek_hi.jpg");
        pic27 = loadImage(100,50, "images/sub_fotoboek_on.jpg");
        pic28 = loadImage(100,50, "images/sub_teksten_on.jpg");
        pic29 = loadImage(100,50, "images/sub_johnvanderrest_on.jpg");
    }
}

function loadImage(width, height, url) {
     pic = new Image(width, height);
     pic.src= url;
     
     return pic
}

function subMenu() {
    switch (currentPage()) {
        case "teksten.aspx":
            Teksten();
            break;
        case "johnvanderrest.aspx":
            John();
            break;
        case "contact.aspx":
            Contact();
            break;
        default:
            Tuinen();
    }
}

function Teksten() {
    toButton(makeButton('sub_teksten','voeding gaat verder dan eten','teksten.aspx',false,303,113));
}

function John() {
    toButton(makeButton('sub_johnvanderrest','is die man in de tuin!','johnvanderrest.aspx',false,470,95));
}

function Contact() {

}

function Tuinen() {
    toButton(makeButton('sub_tuinen','aanleg en onderhoud','tuinen.aspx',false,249,130));
    toButton(makeButton('sub_voeding','voeding voor de bodem','voeding.aspx',false,380,110));
    toButton(makeButton('sub_ecologisch','ecologisch tuinieren','ecologisch.aspx',false,527,90));
    toButton(makeButton('sub_mulchen','mulchen','mulchen.aspx',false,657,85));
    toButton(makeButton('sub_fotoboek','fotoboek','fotoboek.aspx',false,717,74));
    document.getElementById('main_tuinen').src = "images/main_tuinen_on.jpg";
}

function makeButton(id, alt, url, main, buttonX, buttonY) {
    var button = new Object;
    button.id = id;
    button.alt = alt;
    button.url = url;
    button.main = main;
    button.buttonX = buttonX;
    button.buttonY = buttonY;
    
    return button;
}

function toButton(button) {
    isActive = isActiveButton(button.url);
    var nav = "\n\n";
    
    if (!isActive) nav += "<a href=\"" + button.url + "\">";

    nav += "<img src=\"images/" + button.id;
    if (isActive) nav += "_on";
    nav += ".jpg\" id=\"" + button.id + "\" alt=\"" + button.alt + "\" style=\"position: absolute; top: " + button.buttonY + "px; left: " + button.buttonX + "px;\"";
    if (!isActive) nav += " onmouseover=\"hover(this.id);\" onmouseout=\"restore(this.id)\"";
    nav += " />";
    if (!isActive) nav += "</a>";
    
    document.getElementById('nav').innerHTML += nav;
}

function isActiveButton(buttonUrl) {
    return currentPage() == buttonUrl;
}

function currentPage() {
    currentUrl = document.location.href;
    return currentUrl.substring(currentUrl.lastIndexOf("/")+1, currentUrl.length);
}

function hover(id) {
    img = document.getElementById(id);
    img.src = "images/" + id + "_hi.jpg";
}

function restore(id) {
    img = document.getElementById(id);
    img.src = "images/" + id + ".jpg";
}