$(document).ready(onReady);

var SkillNav, ProjectList, Caption, ContentFrame;

function onReady () {
    SkillNav = $("ul#SkillNav");
    ProjectList = $("div#Middle_Content");
    Caption = $("div#Caption");
    ContentFrame = $("iframe#ContentFrame");
    ContentFrame.attr("src", "about:blank");
    //ContentFrame.css("height", $(window).height() - 76);
    $(window).resize(onWindowResize);
    beginLoadProjects();
    onWindowResize();
    addFilterHandlers();
}

function addFilterHandlers() {
    var skill;
    skill = SkillNav.children("li:first");

    while (skill.length == 1) {
        skill.click(onSkillClick);
        skill = skill.next();
    }
}

function onSkillClick() {
    var sender = $(this);
    var skillName = sender.attr("ID").toUpperCase();
    closeFrame();
    
    var projectDiv = ProjectList.children("div:first");
    while (projectDiv.length == 1) {
        var project = projectDiv[0].project;
        var skill = project.children("Skills").children("Skill:first");
        while (skill.length == 1) {
            //alert(skill.text().toUpperCase());
            if (skill.text().toUpperCase() == skillName) {
                projectDiv.addClass("solid");
                break;
            }
            projectDiv.removeClass("solid");
            skill = skill.next();
        }
        //alert(project.children("Skills").children("Skill:contains('" + skillName + "')").length);
        projectDiv = projectDiv.next();
    }
}

function onWindowResize() {
    ContentFrame.css("height", $(window).height() - 78);
}

function beginLoadProjects() {
    $.get("Portfolio.xml", "", finishLoadProjects);
}

function finishLoadProjects(xmlDoc) {
    xmlDoc = $(xmlDoc).children(":first");

    var i = 0;
    var target = ProjectList;
    var project = xmlDoc.children("Project:first");
    $("body").css("background-image", "url(\'images/" + project.attr("Abbr") + ".bg50.png\')");

    while (project.length == 1) {
        var newDiv = $(document.createElement("div"));
        newDiv.addClass("Project");

        prepareCaption(newDiv, i);
        //project.attr("Position", i);

        newDiv[0].project = project;
        newDiv.attr("Blank", project.attr("Abbr").toLowerCase() == "blank");
        project.attr("Blank", newDiv.attr("Blank"));
        newDiv.css("background-image", "url(\'images/" + project.attr("Abbr") + ".tn.png\')");
        if (project.attr("Blank") == "false") {
            if (project.children("Url:first").text().length > 0) {
                newDiv.click(onProjectClick);
            }
        } else {
            newDiv.click(onBlankClick);
        }
        newDiv.mouseover(onProjectMouseOver);
        newDiv.mouseout(onProjectMouseOut);
        newDiv.addClass("translucent");

        target.append(newDiv);
        project = project.next();
        i++;
    }
    
}

function onProjectMouseOver () {
    var sender = $(this);
    var project = $(sender[0].project);
    if (project.attr("Blank") == "false") {
        ProjectList.children().removeClass("solid").addClass("invisible");
        sender.removeClass("invisible");
        setSkills(project, "tempActive");
        $("body").css("background-image", "url(\'images/" + project.attr("Abbr") + ".bg50.png\')");
        showCaption(sender);
    }
    sender.addClass("solid");

}

var GRID_WIDTH = 4; var GRID_HEIGHT = 4;
function prepareCaption(target, position) {
    target.attr("GridX", position % GRID_HEIGHT);
    target.attr("GridY", Math.floor(position / GRID_WIDTH));
    //target.html(target.attr("GridX") + ", " + target.attr("GridY"));
    
    var captionStyle = {left: "0px", width: "120px"};
    var relX = target.attr("GridX");
    if (relX < GRID_WIDTH / 2) {
        relX -= 2;
    } else {
        relX--;
    }

    captionStyle["width"] = 135 * (Math.abs(relX) + 1) + 28 * (Math.abs(relX) - 0.5);
    if (relX < 0) {
        captionStyle["left"] = 160;
    } else {
        captionStyle["left"] = (captionStyle["width"] * -1) - 42;
    }
    
    target[0].CaptionStyle = captionStyle;
}

function showCaption(target) {
    var project = $(target[0].project);
    Caption.children("span.Tagline").text(project.children("Tagline").text());
    Caption.children("span.Credits").text(project.children("Credits").text());
    Caption.css(target[0].CaptionStyle);
    Caption.appendTo(target);
    Caption.show();
}

function onProjectMouseOut () {
    var sender = $(this);
    var project = $(sender[0].project);
    
    Caption.hide();
    sender.removeClass("solid");
    //$("body").css("background-image", "none");
    unsetSkills(project, "tempActive");
    ProjectList.children().removeClass("invisible");
}

function onHomeClick() {
    unsetSkills(null, "active");
    closeFrame();
    return false;
}

function closeFrame() {
    ContentFrame.hide();
    ProjectList.show();
    ContentFrame.attr("src", "about:blank");
}

function onBlankClick() {
    var sender = $(this);
    var project = sender[0].project;
    sender.animate({backgroundPosition: '-120px 0px', opacity: '1.0'}, 500, null, function() {$(this).addClass("solid"); $(this).css("opacity", null);} );

}
function onProjectClick () {
    var sender = $(this);
    var project = sender[0].project;

    setSkills(project, "active");
    var url = project.children("Url").text();
    ContentFrame.attr("src", url);
    ContentFrame.show();
    ProjectList.hide();
}

function setSkills(project, className) {
    var skill = project.children("Skills:first").children("Skill:first");
    while (skill.length == 1) {
        SkillNav.children("li#" + skill.text()).addClass(className);
        skill = skill.next();
    }
    
}

function unsetSkills(project, className) {
    if (project != null) {
        var skill = project.children("Skills:first").children("Skill:first");
        while (skill.length == 1) {
            SkillNav.children("li#" + skill.text()).removeClass(className);
            skill = skill.next();
        }
    } else {
        SkillNav.children().removeClass(className);
    }
}

function beginToggleBlank(projectDiv) {
    if (projectDiv == null) {
        projectDiv = ProjectList.children("div:first");
    }
    while (projectDiv.length == 1) {
        var project = $(projectDiv[0].project);
        if (project.attr("Abbr").toLowerCase() == "blank") {
            projectDiv.click();           
            //projectDiv.animate({backgroundPosition: '-120px 0px'}, 300, null, function() {beginToggleBlank(projectDiv.next());});
            //return;
        }
        projectDiv = projectDiv.next();
    }
}