var winW;
var winH;
var xmlData;
var nodes;
var topMenus = new Array();
var sideMenus = new Array();
var topNav = new Array();
var sideNav = new Array();
var topPages = new Array();
var sidePages = new Array();
var activeBtn;
var centerX;
var centerY;
var scaleX;
var scaleY;
var paper;
var sPaper;
var paperBg;
var spacer;
var btnScale;
var topNavContainer;
	
var normal = new Array();
normal['dir'] = new Image();
normal['dir'].src = 'images/dir_norm.gif';
normal['news'] = new Image();
normal['news'].src = 'images/news_norm.gif';
normal['credit'] = new Image();
normal['credit'].src = 'images/credit_norm.gif';
normal['emp'] = new Image();
normal['emp'].src = 'images/emp_norm.gif';
normal['ftp'] = new Image();
normal['ftp'].src = 'images/ftp_norm.gif';
normal['plan'] = new Image();
normal['plan'].src = 'images/plan_norm.gif';
normal['contr'] = new Image();
normal['contr'].src = 'images/contractor_norm.gif';
normal['replan'] = new Image();
normal['replan'].src = 'images/replan_norm.gif';
normal['pricing'] = new Image();
normal['pricing'].src = 'images/pricing_norm.gif';
normal['rephoto'] = new Image();
normal['rephoto'].src = 'images/rephoto_norm.gif';
normal['regd'] = new Image();
normal['regd'].src = 'images/regd_norm.gif';
	
var over = new Array();
over['dir'] = new Image();
over['dir'].src = 'images/dir_over.gif';
over['news'] = new Image();
over['news'].src = 'images/news_over.gif';
over['credit'] = new Image();
over['credit'].src = 'images/credit_over.gif';
over['emp'] = new Image();
over['emp'].src = 'images/emp_over.gif';
over['ftp'] = new Image();
over['ftp'].src = 'images/ftp_over.gif';
over['plan'] = new Image();
over['plan'].src = 'images/plan_over.gif';
over['contr'] = new Image();
over['contr'].src = 'images/contractor_over.gif';
over['replan'] = new Image();
over['replan'].src = 'images/replan_over.gif';
over['pricing'] = new Image();
over['pricing'].src = 'images/pricing_over.gif';
over['rephoto'] = new Image();
over['rephoto'].src = 'images/rephoto_over.gif';
over['regd'] = new Image();
over['regd'].src = 'images/regd_over.gif';

var selected;

topPages[0] = "blank";
topPages[1] = "about.xhtml";
topPages[2] = "location.xhtml";
topPages[3] = "contact.xhtml";

sidePages[0] = "graphicdesign.xhtml";
sidePages[1] = "commercial.xhtml";
sidePages[2] = "smallformat.xhtml";
sidePages[3] = "largeformat.xhtml";
sidePages[4] = "plan.xhtml";
sidePages[5] = "scanarchive.xhtml";
sidePages[6] = "photo.xhtml";
sidePages[7] = "fineart.xhtml";
sidePages[8] = "bannerposter.xhtml";
sidePages[9] = "vehicle.xhtml";
sidePages[10] = "mountandlam.xhtml";
sidePages[11] = "finishingbindery.xhtml";
sidePages[12] = "blank";

var homeBg = new Array();
homeBg[0] = new Image();
homeBg[0].src = "images/bgHome1.png";
homeBg[1] = new Image();
homeBg[1].src = "images/bgHome2.png";
homeBg[2] = new Image();
homeBg[2].src = "images/bgHome3.png";
homeBg[3] = new Image();
homeBg[3].src = "images/bgHome4.png";

var tile = new Image();
tile.src = "images/tile.png";
var logo = new Image();
logo.src = "images/logo.png";
var motto = new Image();
motto.src = "images/motto.png";
var contact = new Image();
contact.src = "images/contact.png";
var sideButton = new Image();
sideButton.src = "images/sideButton.png";
	
function init() {
    xmlData = loadXMLData("data.xml");
    nodes = xmlData.getElementsByTagName("pages");
    if (xmlData) {
        for (var i = 0; i < nodes[0].getElementsByTagName("page").length; i++) {
            if (nodes[0].getElementsByTagName("navLocation")[i].childNodes[0].nodeValue == "top") {
                topMenus.push(nodes[0].getElementsByTagName("name")[i].childNodes[0].nodeValue);
            } else {
                sideMenus.push(nodes[0].getElementsByTagName("name")[i].childNodes[0].nodeValue);
            }
        }
    }
		
    if (!window.innerWidth) {
        if (!(document.documentElement.clientWidth == 0)) {
            winW = document.documentElement.clientWidth;
            winH = document.documentElement.clientHeight;
        } else {
            winW = document.body.clientWidth;
            winH = document.body.clientHeight;
        }
    } else {
        winW = window.innerWidth;
        winH = window.innerHeight;
    }
    scaleX = winW / 800;
    scaleY = winH / 567;
	
	topNavContainer = document.getElementById("topNavigation");
    if (topNav.length < 1) {
        for (var t = 0; t < topMenus.length; t++) {
            var elem = document.createElement("a");
            elem.setAttribute("id", "t_" + t);
            elem.setAttribute("class", "topLinks");
            elem.innerHTML = topMenus[t];
            topNav.push(elem);
            topNavContainer.appendChild(elem);
			elem.onclick = navClick;
			elem.onmouseover = navOver;
			elem.onmouseout = navOff;
            if ((t + 1) < topMenus.length) {
                topNavContainer.appendChild(document.createTextNode("|"));
            }
        }
    }
	
    if (sideNav.length < 1) {
        for (var s = 0; s < sideMenus.length; s++) {
            var elem = document.createElement("a");
            elem.setAttribute("id", "s_" + s);
            elem.setAttribute("class", "sideLinks");
            elem.innerHTML = sideMenus[s];
            sideNav.push(elem);
            document.body.appendChild(elem);
			elem.onclick = navClick;
			elem.onmouseover = navOver;
			elem.onmouseout = navOff;
        }
    }
	
    var cvs = document.getElementById("cvs");
    cvs.width = winW - 20;
    cvs.height = winH - 20;
    centerX = (((winW - (85*scaleX)) - (265*scaleX)) / 2) + (265*scaleX);
    centerY = (cvs.height / 2);
    scaleX = (scaleX > scaleY)?scaleY:scaleX;
    paper = new Raphael(cvs, cvs.width, cvs.height);
		
    var sCvs = document.getElementById("sideNav");
    sCvs.height = winH - 271;
    sCvs.width = 230 * btnScale;
    sCvs.style.left = "30px";
    sCvs.style.top = "165px";
    spacer = sCvs.height / sideMenus.length;
    sPaper = new Raphael(sCvs, sCvs.width, sCvs.height);
	
    drawContent();
    drawSideNav();
    navPlacement();
		
    if (!activeBtn) {
        activeBtn = topNav[0];
        activeBtn.style.color = "#ffdd00";
		activeBtn.onclick = new function() {};
		activeBtn.onmouseover = new function() {};
		activeBtn.onmouseout = new function() {};
    }
	var index = activeBtn.id;
    index = index.substr(2);
	var url = activeBtn.id;
    if (url.indexOf("t_") > -1) {
        url = topPages[index];
    } else {
        url = sidePages[index];
    }
    contentBg(url);
}

function handleResize() {
	if (!window.innerWidth) {
        if (!(document.documentElement.clientWidth == 0)) {
            winW = document.documentElement.clientWidth;
            winH = document.documentElement.clientHeight;
        } else {
            winW = document.body.clientWidth;
            winH = document.body.clientHeight;
        }
    } else {
        winW = window.innerWidth;
        winH = window.innerHeight;
    }
    scaleX = winW / 800;
    scaleY = winH / 567;
	
    var cvs = document.getElementById("cvs");
    cvs.width = winW - 20;
    cvs.height = winH - 20;
    centerX = (((winW - (85*scaleX)) - (265*scaleX)) / 2) + (265*scaleX);
    centerY = (cvs.height / 2);
    scaleX = (scaleX > scaleY)?scaleY:scaleX;
	if (paper) { paper.remove(); }
    paper = new Raphael(cvs, cvs.width, cvs.height);
		
    var sCvs = document.getElementById("sideNav");
    sCvs.height = winH - 271;
    sCvs.width = 230 * btnScale;
    sCvs.style.left = "30px";
    sCvs.style.top = "165px";
    spacer = sCvs.height / sideMenus.length;
	if (sPaper) { sPaper.remove(); }
    sPaper = new Raphael(sCvs, sCvs.width, sCvs.height);
	
    drawContent();
    drawSideNav();
    navPlacement();
	if (!activeBtn) {
        activeBtn = topNav[0];
        activeBtn.style.color = "#ffdd00";
		activeBtn.onclick = new function() {};
		activeBtn.onmouseover = new function() {};
		activeBtn.onmouseout = new function() {};
    }
	var index = activeBtn.id;
    index = index.substr(2);
	var url = activeBtn.id;
    if (url.indexOf("t_") > -1) {
        url = topPages[index];
    } else {
        url = sidePages[index];
    }
    contentBg(url);
}
	
function drawContent() {
	paper.clear();
    var leftPath = paper.path("M" + (240*scaleX) + ",130C" + (240*scaleX) + ",130 " + (200*scaleX) + "," + (((winH - 20) / 2) - 24) + " " + (240*scaleX) + "," + (winH - 116) +
        "L" + (265*scaleX) + "," + (winH - 116) + "C" + (265*scaleX) + "," + (winH - 116) + " " + (235*scaleX) + "," + (((winH - 20) / 2) - 24) + " " + (265*scaleX) + ",130" +
        "L" + (240*scaleX) + ",130z");
    leftPath.attr({
        stroke: "#00aeef",
        fill: "#00aeef"
    });

    var rightPath = paper.path("M" + (winW - (60*scaleX)) + ",130C" + (winW - (60*scaleX)) + ",130 " + (winW - (20*scaleX)) + "," + (((winH - 20) / 2) - 24) + " " + (winW - (60*scaleX)) + "," + (winH - 116) +
        "L" + (winW - (85*scaleX)) + "," + (winH - 116) + "C" + (winW - (85*scaleX)) + "," + (winH - 116) + " " + (winW - (55*scaleX)) + "," + (((winH - 20) / 2) - 24) + " " + (winW - (85*scaleX)) + ",130" +
        "L" + (winW - (60*scaleX)) + ",130z");
    rightPath.attr({
        stroke: "#00aeef",
        fill: "#00aeef"
    });
		
    var head = paper.rect(0, 0, winW - 20, 106);
    head.attr({
        fill: "#0067b1",
        stroke: "#0067b1"
    });
    var headNav = paper.rect(0, 106, winW - 20, 24);
    headNav.attr({
        fill: "#00539b",
        stroke: "#00539b"
    });
		
    //10x96
    for (var x = 0; x < winW - 20; x += 10) {
    	paper.image(tile.src, x, winH - 116, 10, 96);
    }
	
    //218x130
    paper.image(logo.src, 30, 27, 218, 130);
    	
    var lineSet = paper.set();
    //308x77
    paper.image(motto.src, centerX - (308 / 2), 106 - 77, 308, 77);
	lineSet.push(
		paper.path("M266 38 L" + ((centerX - (308 / 2)) - (30*scaleX)) + " 38"),
        paper.path("M278 63 L" + ((centerX - (308 / 2)) - (25*scaleX)) + " 63"),
        paper.path("M270 88 L" + ((centerX - (308 / 2)) - (35*scaleX)) + " 88"),
        paper.path("M" + ((centerX + (308 / 2)) + (30*scaleX)) + " 38 L" + (winW - 20) + " 38"),
        paper.path("M" + ((centerX + (308 / 2)) + (25*scaleX)) + " 63 L" + (winW - 20) + " 63"),
        paper.path("M" + ((centerX + (308 / 2)) + (35*scaleX)) + " 88 L" + (winW - 20) + " 88")
    );
    lineSet.attr({
       	stroke: "#00aeef"
    });   
	
    paper.image(contact.src, (winW - 20) / 2 - 676 / 2, (winH - 20) - (110 - (56 / 2)), 676, 56);
}
	
function drawSideNav() {
	sPaper.clear();
    var sideBtnSet = sPaper.set();
    btnScale = (scaleX > scaleY)?scaleY:scaleX;
    for (var s = 0; s < sideMenus.length; s++) { //230 X 21
    	sideBtnSet.push(sPaper.image(sideButton.src, 0, (spacer * s), (230 * btnScale), (21 * btnScale)));
   	}
    sideBtnSet.toBack();
}
	
function navPlacement() {
    var textWidth = 530;
    topNavContainer.style.width = textWidth + "px";
    topNavContainer.style.left = (centerX - (textWidth / 2)) + "px";
	
    for (var s = 0; s < sideNav.length; s++) {
        sideNav[s].style.fontSize = (10 * btnScale) + "px";
        sideNav[s].style.top = (171 + (spacer * s)) + "px";
        sideNav[s].style.left = "40px";
        sideNav[s].style.height = (20 * btnScale) + "px";
        sideNav[s].style.width = (230 * btnScale) + "px";
    }
	
    var mcElem = document.getElementById("mainContent");
    var width = Math.ceil((winW - (95*scaleX)) - (275*scaleX));
    mcElem.style.fontSize = (10 * btnScale) + "px";
    mcElem.style.width = width + "px";
    mcElem.style.height = (winH - 246) + "px";
    mcElem.style.left = (275*scaleX) + "px";
}
	
function navClick(evt) {
	if (!evt) var evt = window.event;
	evt.cancelBubble = true;
	if (evt.stopPropagation) { evt.stopPropagation(); }
	activeBtn.onclick = navClick;
	activeBtn.onmouseover = navOver;
	activeBtn.onmouseout = navOff;
    activeBtn.style.color = "#ffffff";
    activeBtn = evt.target?evt.target:evt.srcElement;
	activeBtn.onclick = new function() {};
	activeBtn.onmouseover = new function() {};
	activeBtn.onmouseout = new function() {};
    activeBtn.style.color = "#ffdd00";
    var index = activeBtn.id;
    index = index.substr(2);
    var url = activeBtn.id;
    if (url.indexOf("t_") > -1) {
        url = topPages[index];
    } else {
        url = sidePages[index];
    }
	loadContent(url);
}

function navOver(evt) {
	if (!evt) var evt = window.event;
	evt.cancelBubble = true;
	if (evt.stopPropagation) { evt.stopPropagation(); }
    var elem = evt.target?evt.target:evt.srcElement;
    elem.style.color = "#ffdd00";
	elem.style.cursor = "pointer";
}

function navOff(evt) {
	if (!evt) var evt = window.event;
	evt.cancelBubble = true;
	if (evt.stopPropagation) { evt.stopPropagation(); }
    var elem = evt.target?evt.target:evt.srcElement;
    elem.style.color = "#ffffff";
	elem.style.cursor = "default";
}
	
function loadXMLData(XMLname) {
    var xmlData;
    if (window.XMLHttpRequest) {
        xmlData = new window.XMLHttpRequest();
        xmlData.open("GET", XMLname, false);
        xmlData.send("");
        return xmlData.responseXML;
    } else if (ActiveXObject("Microsoft.XMLDOM")) {
        xmlData = new ActiveXObject("Microsoft.XMLDOM");
        xmlData.async = false;
        xmlData.load(XMLname);
        return xmlData;
    }
    alert("Error loading document!");
    return null;
}
	
function loadContent(url) {
	if (url == "blank") {
		document.getElementById("mainContent").innerHTML = "";
	} else {
    	var xmlhttp;
    	if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        	xmlhttp = new XMLHttpRequest();
    	} else { // code for IE6, IE5
        	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    	}
    	xmlhttp.onreadystatechange = function() {
        	if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            	document.getElementById("mainContent").innerHTML = xmlhttp.responseText;
        	}
    	}
    	xmlhttp.open("GET", url, true);
    	xmlhttp.send();
	}
    contentBg(url);
}

function smoothScroll(eID) {
 var startY = currentYPosition();
 var stopY = elmYPosition(eID);
  var distance = stopY > startY ? stopY - startY : startY - stopY;
  if (distance < 100) {
       scrollTo(0, stopY); return;
    }
   var speed = Math.round(distance / 100);
   if (speed >= 20) speed = 20;
   var step = Math.round(distance / 25);
   var leapY = stopY > startY ? startY + step : startY - step;
   var timer = 0;
   if (stopY > startY) {
 for ( var i=startY; i<stopY; i+=step ) {
   setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
      leapY += step; if (leapY > stopY) leapY = stopY; timer++;
      } return;
   }
   for ( var i=startY; i>stopY; i-=step ) {
       setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
       leapY -= step; if (leapY < stopY) leapY = stopY; timer++;
   }
}


	
function contentBg(url) {
    var bg = new Image();
    if (activeBtn.id == "t_0") {
        bg.src = homeBg[Math.floor(Math.random() * 4)].src;
    } else if (activeBtn.id.indexOf("t_") > -1) {
        bg.src = "images/bgTop.png";
    } else if (url == "blank") {
        bg.src = "images/bgConstruction.png";
    } else if (url == "graphicdesign.xhtml") {
	bg.src = "images/gdImage.png";
    } else if (url == "largeformat.xhtml") {
        bg.src = "images/bgLargeFMT.png";
    } else if (url == "largeformathints.xhtml") {
        bg.src = "images/bglargehints.png";
    } else if (url == "photo.xhtml") {
        bg.src = "images/bgPhoto.png";
    } else if (url == "plan.xhtml") {
        bg.src = "images/bgPlan.png";
    } else if (url == "scanarchive.xhtml") {
        bg.src = "images/scanback.png";
    } else if (url == "smallformat.xhtml") {
        bg.src = "images/bgCopiers.png";
    } else if (url == "smallformathints.xhtml") {
        bg.src = "images/bgCopiers.png";
    } else if (url == "mountandlam.xhtml") {
        bg.src = "images/bgMountandlam.png";
    } else if (url == "vehicle.xhtml") {
        bg.src = "images/bgVEHICLE.png";
    } else if (url == "fineart.xhtml") {
        bg.src = "images/bgfineart.png";
    } else if (url == "commercial.xhtml") {
        bg.src = "images/bgPRINTING.png";
    } else if (url == "bannerposter.xhtml") {
        bg.src = "images/bannersposterback.png";
    } else if (url == "finishingbindery.xhtml") {
        bg.src = "images/bindaryback.png";
    } else {
        bg.src = "images/blank.png";
    }

	if (paperBg) { paperBg.remove(); }
	paperBg = paper.image(bg.src, (250*scaleX), 130, (winW - (70*scaleX))-(250*scaleX), (winH - 243));
    paperBg.toBack();
}

function swapOver(id) {
    document.getElementById(id).src = over[id].src;
}

function swapOff(id) {
    if (id != selected) {
        document.getElementById(id).src = normal[id].src;
    }
}