var i = 0;

var height_exp_pixels = 100;
var mainframe_height_normal = 385;
var mainframe_height_large = mainframe_height_normal + height_exp_pixels;
var canvas_height_normal = 280;
var canvas_height_large = canvas_height_normal + height_exp_pixels;

var topNormal = "15%";
var topEnlarged = "9%";

function setImg(id, url) {
    $("#" + id).attr("src", url);
}

function setImgOver(id, url) {
    $("#" + id).mouseover(function(event){
        $("#" + id).attr("src", url);
    });
}

function setImgOut(id, url) {
    $("#" + id).mouseout(function(event){
        $("#" + id).attr("src", url);
    });
}

function setImgOverOut(id, urlOver, urlOut) {
    setImgOver(id, urlOver);
    setImgOut(id, urlOut);
}

function imgUrlNormal(id) {
    return "gfx/" + id + ".png";
}

function imgUrlOver(id) {
    return "gfx/" + id + "_on.png";
}

function imgUrlChosen(id) {
    return "gfx/" + id + "_chosen.png";
}

var menuWelcome = "menu_welcome";
var menuNews = "menu_news";
var menuArtworks = "menu_artworks";
var menuCv = "menu_cv";
var menuAtelier = "menu_atelier";
var menuLinks = "menu_links";

function prepMenuOverOut(id, chosen) {
    if (chosen) {
        if (id == "menu_artworks") {
            setImgOverOut(id, imgUrlOver(id), imgUrlChosen(id));
        } else {
            setImgOverOut(id, imgUrlChosen(id), imgUrlChosen(id));
        }
        setImg(id, imgUrlChosen(id));
    } else {
        setImgOverOut(id, imgUrlOver(id), imgUrlNormal(id));
        setImg(id, imgUrlNormal(id));
    }
}

function prepMenuOverOutClick(id, clickFunc, chosen) {
    prepMenuOverOut(id, chosen);
    $("#" + id).click(function(event) {
        clickFunc();
    });
}

var curMenu = null;
function prepareMenu() {
    prepMenuOverOutClick("menu_welcome", loadWelcome, true);
    prepMenuOverOutClick("menu_news", loadNews, false);
    prepMenuOverOutClick("menu_artworks", loadArtworks, false);
    prepMenuOverOutClick("menu_cv", loadCv, false);
    prepMenuOverOutClick("menu_atelier", loadAtelier, false);
    prepMenuOverOutClick("menu_links", loadLinks, false);
}

function resizeAndLoadIntoCanvas(resizeIsEnlarge, url) {
    $("#canvas").empty()
    var resfunc = (resizeIsEnlarge ? enlargePageThen : reducePageThen);
    resfunc(function(){
        $("#canvas").empty().load(url);
    });
}

function setCurrentMenu(id) {
    if (curMenu != id) {
        prepMenuOverOut(curMenu, false);
        curMenu = id;
        prepMenuOverOut(curMenu, true);
    }
}

function loadWelcome() {
    if (curMenu != menuWelcome) {
        setCurrentMenu(menuWelcome);
        resizeAndLoadIntoCanvas(false, "_welcome_flash.html");
    }
}
function loadNews() {
    if (curMenu != menuNews) {
        setCurrentMenu(menuNews);
        resizeAndLoadIntoCanvas(true, "_news.html");
    } else {
        $("#canvas").empty().load("_news.html");
    }
}
function loadArtworks() {
    if (curMenu != menuArtworks) {
        setCurrentMenu(menuArtworks);
        resizeAndLoadIntoCanvas(true, "_artworks.html");
    } else {
        $("#canvas").empty().load("_artworks.html");
    }
}
function loadCv() {
    if (curMenu != menuCv) {
        setCurrentMenu(menuCv);
        resizeAndLoadIntoCanvas(false, "_cv.html");
    }
}
function loadAtelier() {
    if (curMenu != menuAtelier) {
        setCurrentMenu(menuAtelier);
        resizeAndLoadIntoCanvas(false, "_atelier.html");
    }
}
function loadLinks() {
    if (curMenu != menuLinks) {
        setCurrentMenu(menuLinks);
        resizeAndLoadIntoCanvas(false, "_links.html");
    }
}

function resizePage(mainHeight, canvasHeight, topDistance, callback) {
    $("#mainframe").animate({
        height: mainHeight/*,
        top: topDistance*/
    }, "normal", null, null);
    $("#canvas").animate({
        height: canvasHeight
    }, "normal" , null, callback);
}

var pageEnlarged = false;
function enlargePageThen(callback) {
    if (!pageEnlarged) {
        $("#canvas").empty(); // Empty canvas before resizing...
        resizePage(mainframe_height_large,canvas_height_large,topEnlarged,
            function() {
                pageEnlarged = true;
                callback();
            });
    } else {
        callback();
    }
}
function reducePageThen(callback) {
    if (pageEnlarged) {
        resizePage(mainframe_height_normal,canvas_height_normal,topNormal,
            function() {
                pageEnlarged = false;
                callback();
            });
    } else {
        callback();
    }
}

$(document).ready(function(){
    loadWelcome();
    $("#bottombar").empty().load("_bottom_menu.html", null, prepareMenu);
});