var TICK = 10;
var DURATION = 400;
var phase;

var intervalId = null;
var lastRequestedSection = '';

var startScrollX;
var currentScrollX = 0;
var endScrollX;
var startScrollY;
var currentScrollY = 0;
var endScrollY;

var content;
var staffSection;
var stuffSection;
var mediaSection;
var inventorySection;

function setup() {
    var proseNav = document.getElementById("prose_nav");
    
    var stuffLink = document.createElement("a");
    stuffLink.setAttribute("href", "javascript:showSection('stuff_div')");
    stuffLink.innerHTML = "tools";
    proseNav.replaceChild(stuffLink, document.getElementById("stuff_link"));
    stuffLink.id = "stuff_link";
    
    var staffLink = document.createElement("a");
    staffLink.setAttribute("href", "javascript:showSection('staff_div')");
    staffLink.innerHTML = "support";
    proseNav.replaceChild(staffLink, document.getElementById("staff_link"));
    staffLink.id = "staff_link";
    
    var mediaLink = document.createElement("a");
    mediaLink.setAttribute("href", "javascript:showSection('media_div')");
    mediaLink.innerHTML = "multimedia projects";
    proseNav.replaceChild(mediaLink, document.getElementById("media_link"));
    mediaLink.id = "media_link";
    
    var backLink = document.createElement("a");
    backLink.setAttribute("href", "javascript:showSection('stuff_div')");
    backLink.innerHTML = " ";
    
    var splashLink = document.createElement("a");
    splashLink.setAttribute("href", "javascript:showSection('splash')");
    document.getElementById("title").replaceChild(splashLink, document.getElementById("title_span"));
    
    document.getElementById("main").removeChild(document.getElementById("clear_div"));
    
    content = document.getElementById("content");
    content.style.width = "3032px";
    content.appendChild(stuffSection);
    content.appendChild(staffSection);
    content.appendChild(mediaSection);
    content.appendChild(inventorySection);
    document.getElementById("back_link").appendChild(backLink);
}

function showSection(section) {
    if(section != lastRequestedSection) {
        lastRequestedSection = section;
        switch(section) {
        case 'stuff_div':
            scrollContentTo(758, 0);
            highlight("stuff_link");
            break;
        case 'staff_div':
            scrollContentTo(1516, 0);
            highlight("staff_link");
            break;
        case 'media_div':
            scrollContentTo(2274, 0);
            highlight("media_link");
            break;
        case 'inventory_div':
            scrollContentTo(758, 320);
            highlight(null);
            break;
        case 'splash':
            scrollContentTo(0, 0);
            highlight(null);
            break;
        }
    }
}

function highlight(l) {
    document.getElementById("stuff_link").className = "";
    document.getElementById("staff_link").className = "";
    document.getElementById("media_link").className = "";
    if(l != null)
        document.getElementById(l).className = "highlighted";
}

function scrollContentTo(x, y) {
    if(intervalId != null) {
        window.clearInterval(intervalId);
        intervalId = null;
    }
    
    startScrollX = currentScrollX;
    endScrollX = x;
    startScrollY = currentScrollY;
    endScrollY = y;
    
    phase = 0;
    intervalId = window.setInterval("step();", TICK);
}

function step() {
    phase += TICK;
    
    if(phase >= DURATION) {
        phase = DURATION;
        window.clearInterval(intervalId);
        intervalId = null;
    }
    
    currentScrollX = startScrollX + Math.pow(Math.sin((phase / DURATION) * (Math.PI/2)), 2) * (endScrollX - startScrollX);
    currentScrollY = startScrollY + Math.pow(Math.sin((phase / DURATION) * (Math.PI/2)), 2) * (endScrollY - startScrollY);
    
    document.getElementById("scroll_area").scrollLeft = currentScrollX;
    document.getElementById("scroll_area").scrollTop = currentScrollY;
}

function hideSection(section) {
    switch(section) {
    case 'staff_div':
        var staffDiv = document.getElementById("staff_div");
        staffSection = staffDiv.cloneNode(true);
        document.getElementById("main").removeChild(staffDiv);
        break;
    case 'stuff_div':
        var inventoryLink = document.createElement("a");
        inventoryLink.setAttribute("href", "javascript:showSection('inventory_div')");
        inventoryLink.innerHTML = "List of hardware and software";
        document.getElementById("inventory_link_p").appendChild(inventoryLink);
        
        var stuffDiv = document.getElementById("stuff_div");
        stuffSection = stuffDiv.cloneNode(true);
        document.getElementById("main").removeChild(stuffDiv);
        
        break;
    case 'media_div':
        var mediaDiv = document.getElementById("media_div");
        mediaSection = mediaDiv.cloneNode(true);
        document.getElementById("main").removeChild(mediaDiv);
        break;
    case 'inventory_div':
        var inventoryDiv = document.getElementById("inventory_div");
        inventorySection = inventoryDiv.cloneNode(true);
        document.getElementById("main").removeChild(inventoryDiv);
        inventorySection.className = "lower_content_div";    
        break;
    }
}