﻿/*
Andrew McGibbon - andrew@scotdesign.co.uk - 2008
2b Creative Website loading Animation and positioning of elements for design layout
*/

var lyrH = 75;
var lyrStartH = 0;
var slowAfterH = 70;
var scrollSpeed = 1;
var moveAmount = 3;
var slowMoveAmount = 1;
var slideInIntv;
var isOpen = false;
var isLineOpen = false;
var footerLayer;
var footerContent;
var contentMid;
var menuLayer;
var menuCoverLayer;
var lineLayer;
var img2bLogo;
var lineW;
var lineL;
var lineStartW = 0;
var lineStartL;
var lineslowAfterW;
var linescrollSpeed = 5;
var linemoveAmount = 9;
var lineslowMoveAmount = 5;
var xx = 1;

window.onload = startAnimatedLoad;
//window.onload = startStaticLoad;
window.onresize = doResize;

function startAnimatedLoad() {
    lineW = ((document.body.offsetWidth - 800) / 2) + 722;
    lineL = (document.body.offsetWidth - lineW);
    lineStartL = (document.body.offsetWidth);
    lineslowAfterW = (lineW - 50);

    lineLayer = document.getElementById('line');
    img2bLogo = document.getElementById('ctl00_img2bLogo');
    menuLayer = document.getElementById('menuLayer');

    // set position of line layer
    lineLayer.style.width = "0px";
    lineLayer.style.left = lineStartL + "px";

    // set top position of line layer for safari
    if (/Safari/.test(navigator.userAgent)) {
        lineLayer.style.top = img2bLogo.offsetParent.offsetTop + 75 + "px";
        img2bLogo.style.top = "15px";
    }
    else if (/Firefox/.test(navigator.userAgent)) {
        lineLayer.style.top = img2bLogo.offsetTop + 75 + "px";
        img2bLogo.style.top = "15px";
    }
    else {
        lineLayer.style.top = img2bLogo.offsetTop + 65 + "px";
    }

    // set position of menu layer

    setContentSize();
    setMenuPos();
    loadfooter();
}


function startStaticLoad() {
    footerLayer = document.getElementById('footer');
    footerLayer.style.height = lyrH + "px";
    footerLayer.style.visibility = "visible";
    isOpen = true;
    
    setLinePos();
    setContentSize();
    setMenuPos();
}

function doResize() {
    setLinePos();
    setContentSize();
    setMenuPos();
}

function setLinePos() {
    lineW = ((document.body.offsetWidth - 800) / 2) + 726;
    lineL = (document.body.offsetWidth - lineW);
    lineStartL = (document.body.offsetWidth);
    lineslowAfterW = (lineW - 50);

    lineLayer = document.getElementById('line');
    img2bLogo = document.getElementById('ctl00_img2bLogo');

    // set position of line layer
    lineLayer.style.height = "1px";
    lineLayer.style.width = lineW + "px";
    lineLayer.style.left = lineL + "px";

    // set top position of line layer for safari
    if (/Safari/.test(navigator.userAgent)) {
        lineLayer.style.top = img2bLogo.offsetParent.offsetTop + 65 + "px";
    }
    else {
        lineLayer.style.top = img2bLogo.offsetTop + 65 + "px";
    }

}

function setContentSize() {
    contentMid = document.getElementById('content_mid');


    contentMid.style.paddingTop = (document.body.offsetHeight / 11) + "px";
    contentMid.style.height = ((document.body.offsetHeight - 140) - (document.body.offsetHeight / 10)) + "px";


    newWidth = (document.body.offsetWidth - 100)

    if (newWidth <= 690) {
        contentMid.style.width = newWidth + "px";
    }

}

function setMenuPos() {
    menuLayer = document.getElementById('menu');
    menuCoverLayer = document.getElementById('menucover');
    img2bLogo = document.getElementById('ctl00_img2bLogo');

    menuLayer.style.left = (lineL - 5) + "px";
    menuCoverLayer.style.left = (lineL - 5) + "px";

    // set top position of menu layer for safari
    if (/Safari/.test(navigator.userAgent)) {
        menuLayer.style.top = img2bLogo.offsetParent.offsetTop + 80 + "px";
        menuCoverLayer.style.top = img2bLogo.offsetParent.offsetTop + 80 + "px";
    }
    else {
        menuLayer.style.top = (img2bLogo.offsetTop + 80) + "px";
        menuCoverLayer.style.top = (img2bLogo.offsetTop + 80) + "px";
    }
}


function loadfooter() {
    footerLayer = document.getElementById('footer');
    footerLayer.style.height = lyrStartH + "px";
    isOpen = false;
    slideinfooter();

    tmpLine = setTimeout(loadline, 500);
}


function slideinfooter() {
    if ((!isOpen) || (footerLayer.style.visibility == "hidden")) {
        footerLayer.style.visibility = "visible";
        slideInIntv = setInterval(moveup, scrollSpeed);
    }
}

function moveup() {
    if (parseInt(footerLayer.style.height) >= lyrH) {
        footerLayer.style.height = lyrH + "px";
        isOpen = true;
        clearInterval(slideInIntv);
        showFooterContent();
    }
    else {
        if (parseInt(footerLayer.style.height) < slowAfterH) {
            footerLayer.style.height = parseInt(footerLayer.style.height) + moveAmount + "px";
        }
        else {
            if (parseInt((footerLayer.style.height) + slowMoveAmount) >= lyrH) {
                footerLayer.style.height = lyrH + "px";
            }
            else {
                footerLayer.style.height = parseInt(footerLayer.style.height) + slowMoveAmount + "px";
            }
        }
    }

}

function showFooterContent() {
    footerContent = document.getElementById('footer_content');
    footerContent.className = "footer_content_visible";
    loadcontent_foot();
}


function loadline() {
    isLineOpen = false;

    slideinline();
}

function slideinline() {
    if ((!isLineOpen) || (lineLayer.style.visibility == "hidden")) {
        lineLayer.style.visibility = "visible";
        lineInIntv = setInterval(movein, linescrollSpeed);
    }

    tmpTop = setTimeout(loadcontent_top, 2800);
    tmpTop = setTimeout(loadmenu, 3100);
    tmpMid = setTimeout(loadcontent_mid, 3200);
}

// #####################################################################################
function movein() {
    if (parseInt(lineLayer.style.width) >= lineW) {
        isLineOpen = true;
        clearInterval(lineInIntv);
    }
    else {
        if ((parseInt(lineLayer.style.width) < lineslowAfterW) && (isLineOpen = true)) {
            lineLayer.style.width = parseInt(lineLayer.style.width) + linemoveAmount + "px";
            lineLayer.style.left = parseInt(lineLayer.style.left) - linemoveAmount + "px";
        }
        else {
            if (parseInt((lineLayer.style.width) + lineslowMoveAmount) >= lineW) {
                lineLayer.style.width = lineW + "px";
                lineLayer.style.width = lineL + "px";
            }
            else {
                lineLayer.style.width = parseInt(lineLayer.style.width) + lineslowMoveAmount + "px";
                lineLayer.style.left = parseInt(lineLayer.style.left) - lineslowMoveAmount + "px";
            }
        }
    }

}
// #####################################################################################

function loadcontent_top() {

    fadeIn(0, 100, 'content_top');

}

function loadcontent_mid() {
    fadeIn(0, 100, 'content_mid');
}

function loadcontent_foot() {
    fadeIn(0, 100, 'footer_content');
}

function loadmenu() {
    menuCoverLayer.style.visibility = 'hidden';
    fadeIn(0, 100, 'menu');	
}



function fadeIn(i, j, fadeObject) {

    // swap fadein code for visible switching to avoid bugs with browsers and flash using opacity 
    obj = document.getElementById(fadeObject).style;
    obj.visibility = 'visible';
    
    
    /*obj.filter = "alpha(opacity=" + i + ")";
    obj.MozOpacity = i / 100;
    obj.KHTMLOpacity = i / 100;
    obj.opacity = i / 100;

    i = i + 5;

    if (i < j) {
        setTimeout("fadeIn(" + i + "," + j + ",'" + fadeObject + "')", 0);
    }*/
}
