// global variables
var window_width = 0;
var window_height = 0;
var min_width = 955;
var min_height = 600;
var page_name = "";
var fit_to_window = true;
var image_number = 0;
var path = "";
var objAward = null;

// initialization
window.onload = function() {
    // get page name
    var path = window.location.pathname.toLowerCase();
    page_name = path.substr(path.lastIndexOf("/") + 1);

    position_elements()
}

// window resized
window.onresize = function() {
    position_elements();
}

// position page elements
function position_elements() {
    // get window size
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;

    window_width = w > min_width ? w : min_width;
    window_height = h > min_height ? h : min_height;
    
    // assemble primary page
    switch (page_name) {
        case "blast.html":
            addHeader();
            addIcons();
            posCenter2("BlastContent", 700, 479);
            break;
        case "case_studies.html":
            addHeader();
            addIcons();
	// increase first number to reduce left margin on thumbnail grid
            posCenter2("CaseStudiesContent", 700, 363);
            break;
        case "contact.html":
            addHeader();
            addIcons();
            posCenter2("ContactContent", 529, 479);
            break;
        case "thinking.html":
            var qs = document.location.search.toLowerCase();
            addHeader();
            addIcons();
            if (qs.indexOf("where") >= 0)
                thinking_where()
            else if (qs.indexOf("what") >= 0)
                thinking_what()
            else
                posCenter2("ThinkingContent", 529, 479);
            pos("Where", (fit_to_window ? window_width : min_width) - 180, 75);
            pos("What", (fit_to_window ? window_width : min_width) - 180, 112);
            break;
        default:
            // case studies
            if (window.location.pathname.indexOf("/case_studies/") > -1) {
                path = "../";
                addHeader();
                setCaseStudy(0);
            } else {
                addHeader();
                addIcons();
                posCenter2("HomeContent", 529, 479);
                break;
            }
    }
}

// position and display object
function pos(id, x, y) {
    var o = document.getElementById(id);
    
    if(o){
        o.style.left = Math.round(x) + "px";
        o.style.top = Math.round(y) + "px";
        o.style.display = "block";
    }
}

// position only
function posOnly(id, x, y) {
    var o = document.getElementById(id);

    if (o) {
        o.style.left = Math.round(x) + "px";
        o.style.top = Math.round(y) + "px";
    }
}

// position center and display object
function posCenter1(id, w, h) {
    pos(id, (window_width - w) / 2, (window_height - h) / 2);
}

// position center and display object
function posCenter2(id, w, h) {
    pos(id, (window_width - w) / 2, ((((fit_to_window ? window_height : min_height) - 48) - h) + 48) / 2);
}

// add icons to page
function addIcons() {
    if (!document.getElementById("Icons")) {
        var o = document.createElement("DIV");
        o.id = "Icons";
        o.innerHTML = "<div style=\"float:left;\"></div>"
            + "<div style=\"float:left;margin-left:7px;\"></div>"
        document.documentElement.appendChild(o);
    }
    pos("Icons", window_width - 80, window_height - 32);
}

// add header to page
function addHeader() {
    var o = document.getElementById("Header");
    
    if(o.innerHTML.length == 0) {
        o.innerHTML = "<table>"
            + "<tr>"
            + "<td align=\"left\" class=\"logo\">" + (page_name == "index.html" ? "" : "<a href=\"" + path + "index.html\">") + "<img alt=\"Five Creative Group\" height=\"48\" src=\"images/logoFCG2.gif\" width=\"200\" />" + (page_name == "index.html" ? "" : "</a>") + "</td>"
            + "<td align=\"right\" class=\"nav\"><a href=\"" + path + "case_studies.html\">case studies</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"" + path + "thinking.html\">thinking</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"" + path + "contact.html\">contact</a></td>"
            + "</tr>"
            + "</table>";
    }

    if (fit_to_window) {
        var w = (window_width < min_width) ? min_width : window_width;
        o.style.width = w + "px";
        pos(o.id, 0, 0);
    } else {
        o.style.width = min_width + "px";
        pos(o.id, (window_width - min_width) / 2, 0);
    }
}

// setup case study
function setCaseStudy(i) {
    var o = document.getElementById("CaseStudy");
    var oDesc = document.getElementById("CaseStudyDescription");
    var aImg = o.getElementsByTagName("IMG");
    var w = (fit_to_window ? ((window_width < min_width) ? min_width : window_width) : min_width) - 125;
    var h = (fit_to_window ? ((window_height < min_height) ? min_height : window_height) : min_height) - 48 - 37;

    // set image
    if (i != 0) {
        img_out = aImg[image_number];
        image_number = image_number + i;
        if (image_number < 0) image_number = aImg.length - 1;
        if (image_number >= aImg.length) image_number = 0;
    }
    if (img_in == null) i = 1;
    img_in = aImg[image_number];
    var image_width = parseInt(img_in.getAttribute("actualWidth"), 10);
    var image_height = parseInt(img_in.getAttribute("actualHeight"), 10);
    var aspect_image = image_width / image_height;
    var aspect_window = w / h;
    var x_offset = fit_to_window ? 0 : ((window_width - min_width) / 2);

    // set z-index
    for (var n = 0; n < aImg.length; n++) {
        if (img_in == aImg[n]) {
            aImg[n].style.zIndex = 20;
        } else if (img_out == aImg[n]) {
        aImg[n].style.zIndex = 10;
        } else {
            aImg[n].style.display = "none";
        }
    }

    // set layer size
    o.style.width = w + "px";
    o.style.height = h + "px";

    // set image size
    img_in.style.width = aspect_window > aspect_image ? "100%" : "auto";
    img_in.style.height = aspect_window > aspect_image ? "auto" : "100%";
    img_in.style.display = "block";

    // set image position
    if (aspect_window > aspect_image) {
        x2_in = 0;
        x1_in = -w* i;
        img_in.style.marginTop = -Math.round(((w / image_width * image_height) - h) / 2) + "px";
    } else {
        x2_in = -Math.round(((h / image_height * image_width) - w) / 2);
        x1_in = (x2_in * 2) + (-w * i);
        img_in.style.marginTop = "0px";
    }
    if (i == 0) x1_in = x2_in;
    img_in.style.marginLeft = x1_in + "px";

    // position and show case study layers
    pos(o.id, x_offset + 65, 48);
    if (i != 0) {
        hideStory();
        slide_image(w / 15, 30);

        var htmDesc = "<div class=\"text\">" + img_in.getAttribute("description") + "</div><div class=\"count\">" + (image_number + 1) + "/" + aImg.length + "</div>";
        var link = img_in.getAttribute("url");
        if (link) htmDesc += "<a href=\"" + link + "\" target=\"_blank\">see it online</a>";

        oDesc.innerHTML = htmDesc;

        if(objAward)objAward.style.display = "none";
    }
    
    oDesc.style.width = w + "px";
    pos(oDesc.id, ((window_width - 5) - w) / 2 + 5, (fit_to_window ? window_height : min_height) - 37);

    // navigation
    pos("StoryNav", x_offset + w + 14, 82);
    pos("NextNav", x_offset + w + 102, (h - 40) / 2);
    pos("PreviousNav", x_offset, (h - 40) / 2);

    // story
    var oStory = document.getElementById("Story");
    
    story_y1 = story_y1 == null ? 0 : story_y1;
    story_y2 = h + 37;
    
    oStory.style.width = "165px";
    oStory.style.height = (i == 0 ? story_y2 : story_y1) + "px";
    posOnly(oStory.id, x_offset + w - 100, 48);
}

// show story panel
function showStory() {
    document.getElementById("Story").style.display = "block";
    slide_story(story_y2 / 12, 30);
}

// hide story panel
function hideStory() {
    slide_story(-(story_y2 / 12), 30);
}

// thinking sub nav
function thinking_where() {
    document.getElementById("ThinkingContent").style.display = "none";
    document.getElementById("WhatContent").style.display = "none";
    posCenter2("WhereContent", 529, 479);
}
function thinking_what() {
    document.getElementById("ThinkingContent").style.display = "none";
    document.getElementById("WhereContent").style.display = "none";
    posCenter2("WhatContent", 529, 479);
}


/* --- Animated Effects --- */


// slide image for case study
var img_in = null;
var img_out = null;
var x1_in = null;
var x2_in = null;
function slide_image(i, s) {
    if (x1_in < x2_in) {
        x1_in = ((x1_in + i) < x2_in) ? (x1_in + i) : x2_in;
        if (img_out) img_out.style.marginLeft = (parseInt(img_out.style.marginLeft, 10) + Math.round(i)) + "px";
    } else {
        x1_in = ((x1_in - i) > x2_in) ? (x1_in - i) : x2_in;
        if (img_out) img_out.style.marginLeft = (parseInt(img_out.style.marginLeft, 10) - Math.round(i)) + "px";
    }
    img_in.style.marginLeft = Math.round(x1_in) + "px";
    if (x1_in != x2_in) {
        setTimeout("slide_image(" + i + ", " + s + ")", s);
    } else {
        var award = img_in.getAttribute("award");
        if (award) {
            if (!objAward) {
                objAward = document.createElement("DIV");
                objAward.id = "Award";
                objAward.className = award;
                document.documentElement.appendChild(objAward);
            } else {
                objAward.className = award;
            }
            objAward.style.display = "block";
        } 
    }
}

// slide story
var story_y1 = 0;
var story_y2 = null;
function slide_story(i, s) {
    if (i > 0) {
        story_y1 = ((story_y1 + i) < story_y2) ? (story_y1 + i) : story_y2;
        document.getElementById("Story").style.height = Math.round(story_y1) + "px";
        document.getElementById("StoryContent").style.marginTop = Math.round(story_y1 - story_y2) + "px";
        if (story_y1 < story_y2) setTimeout("slide_story(" + i + ", " + s + ")", s);
    } else {
        story_y1 = ((story_y1 + i) > 0) ? (story_y1 + i) : 0;
        document.getElementById("Story").style.height = Math.round(story_y1) + "px";
        document.getElementById("StoryContent").style.marginTop = Math.round(story_y1 - story_y2) + "px";
        if (story_y1 > 0)
            setTimeout("slide_story(" + i + ", " + s + ")", s);
        else 
            document.getElementById("Story").style.display = "none";
    }
}