window.onload = initialise;
function initialise () {
if (document.getElementById("menuMatrix")) {
objMatrix = document.getElementById("menuMatrix");
arrMatrix = objMatrix.getElementsByTagName("a");
for (i = 0; i < arrMatrix.length; i++) {
arrMatrix[i].onmouseout = matrixMouseOut;
arrMatrix[i].onmouseover = matrixMouseOver;
}
}
arrDivision = document.getElementsByTagName("div");
for (i = 0; i < arrDivision.length; i++) {
if (arrDivision[i].className == "contentPrevious" || arrDivision[i].className == "contentFullPrevious") {
//arrDivision[i].getElementsByTagName("span")[0].onclick = panelSpanClick;
arrDivision[i].onclick = panelClick;
arrDivision[i].onmouseout = panelOut;
arrDivision[i].onmouseover = panelPreviousOver;
} else if (arrDivision[i].className == "contentNext" || arrDivision[i].className == "contentFullNext") {
//arrDivision[i].getElementsByTagName("span")[0].onclick = panelSpanClick;
arrDivision[i].onclick = panelClick;
arrDivision[i].onmouseout = panelOut;
arrDivision[i].onmouseover = panelNextOver;
}
}
if (document.getElementById("indexLeft")) {
document.getElementById("indexLeft").onmouseover = indexPanelOver
document.getElementById("indexLeft").onmouseout = indexPanelOut;
document.getElementById("indexLeft").onclick = getK4;
}
if (document.getElementById("indexRight")) {
document.getElementById("indexRight").onmouseover = indexPanelOver
document.getElementById("indexRight").onmouseout = indexPanelOut;
document.getElementById("indexRight").onclick = getK4;
}
if (document.getElementById("mailInfo")) {
objMail = document.getElementById("mailInfo")
objMail.innerHTML = "info@architecten.k4.nl";
}
if (document.getElementById("portfolioNext")) {
document.getElementById("portfolioPrevious").onclick = portPrev;
document.getElementById("portfolioNext").onclick = portNext;
}
/*
** IE5 doesn't slide the panels swiftly (white flashes in between)
** this is caused by a wrong interpretation of background-image (re-initialising it each moveBy-step)
** this can be solved by placing actual images yet we don't want to make them indexable, so we do this virtually
*/
if (document.getElementById("panelLeft") && !document.getElementById("portfolio")) {
objPanelLeftSlide = document.getElementById("panelLeft").getElementsByTagName("div")[0];
objPanelLeftSlide.innerHTML = "![](img/" + objPanelLeftSlide.id + ".jpg)
";
}
if (document.getElementById("panelRight") && !document.getElementById("portfolio")) {
objPanelRightSlide = document.getElementById("panelRight").getElementsByTagName("div")[0];
objPanelRightSlide.innerHTML = "![](img/" + objPanelRightSlide.id + ".jpg)
";
}
/*
** IE5 doesn't allow images to be anchored
*/
if (document.getElementById("logo")) {
document.getElementById("logo").onclick = getK4;
}
}
function matrixMouseOut () {
this.getElementsByTagName("img")[0].src = "img/" + this.parentNode.id + ".jpg";
highlightTargetAudience(this.parentNode, false);
highlightDiscipline(this.parentNode, false);
}
function matrixMouseOver () {
this.getElementsByTagName("img")[0].src = "img/" + this.parentNode.id + "_hover.jpg";
highlightTargetAudience(this.parentNode, true);
highlightDiscipline(this.parentNode, true);
}
function highlightTargetAudience (obj, bln) {
if (obj.id == "index_menu01" || obj.id == "index_menu02" || obj.id == "index_menu03" || obj.id == "index_menu04") {
objTargetAudience = "targetAudience01";
} else if (obj.id == "index_menu05" || obj.id == "index_menu06" || obj.id == "index_menu07" || obj.id == "index_menu08") {
objTargetAudience = "targetAudience02";
} else {
objTargetAudience = "targetAudience03";
}
if (bln) {
document.getElementById(objTargetAudience).style.color = "#007D00";
} else {
document.getElementById(objTargetAudience).style.color = "#000000";
}
}
function highlightDiscipline (obj, bln) {
if (obj.id == "index_menu01" || obj.id == "index_menu05" || obj.id == "index_menu09") {
objDiscipline = "discipline01";
} else if (obj.id == "index_menu02" || obj.id == "index_menu06" || obj.id == "index_menu10") {
objDiscipline = "discipline02";
} else if (obj.id == "index_menu03" || obj.id == "index_menu07" || obj.id == "index_menu11") {
objDiscipline = "discipline03";
} else {
objDiscipline = "discipline04";
}
if (bln) {
document.getElementById(objDiscipline).style.backgroundColor = "#999999";
} else {
document.getElementById(objDiscipline).style.backgroundColor = "#BCBDBE";
}
}
function panelSpanClick () {
if (this.parentNode.parentNode.className == "contentFull") {
idObject = this.parentNode.parentNode.parentNode.parentNode.parentNode.id;
} else {
idObject = this.parentNode.parentNode.parentNode.parentNode.id;
}
if (this.parentNode.className == "contentNext" || this.parentNode.className== "contentFullNext") {
x = -126;
} else {
x = 126;
}
cnt = 0;
moveObject (idObject,x);
}
function panelClick () {
if (document.getElementById("busy").value == "") {
document.getElementById("busy").value = "busy";
if (this.parentNode.className == "contentFull") {
idObject = this.parentNode.parentNode.parentNode.parentNode.id;
} else {
idObject = this.parentNode.parentNode.parentNode.id;
}
if (this.className == "contentNext" || this.className== "contentFullNext") {
x = -126;
} else {
x = 126;
}
cnt = 0;
moveObject (idObject,x);
} else {
return false;
}
}
function panelLeft (abs) {
objPanelLeft = document.getElementById("panelLeft");
idObject = objPanelLeft.getElementsByTagName("div")[0].id;
x = -72;
if (abs > 0) {
x = 72;
}
moveObject (idObject,x);
}
function panelRight (abs) {
objPanelRight = document.getElementById("panelRight");
idObject = objPanelRight.getElementsByTagName("div")[0].id;
x = -105;
if (abs > 0) {
x = 105;
}
moveObject (idObject,x);
}
function panelOut () {
/*
** One way or the other IE6 seems to think the whole content panel may disappear when writing into the div,
** hence this workaround with added spans (spans also added in index-pages)
*/
objTest = this.getElementsByTagName("span")[0];
objTest.innerHTML = "";
}
function panelPreviousOver () {
objTest = this.getElementsByTagName("span")[0];
objTest.innerHTML = "terug";
}
function panelNextOver () {
objTest = this.getElementsByTagName("span")[0];
objTest.innerHTML = "verder";
}
function indexPanelOver() {
object = this.getElementsByTagName("div")[0];
var speed = Math.round(400 / 100);
var timer = 0;
for(i = 60; i >= 10; i--) {
setTimeout("changePanel(" + i + ",'" + object.id + "')",(timer * speed));
timer++;
}
}
function indexPanelOut() {
object = this.getElementsByTagName("div")[0];
var speed = Math.round(400 / 100);
var timer = 0;
for(i = 10; i <= 60; i++) {
setTimeout("changePanel(" + i + ",'" + object.id + "')",(timer * speed));
timer++;
}
}
function changePanel(opacity, idBlend) {
object = document.getElementById(idBlend).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
function getK4 () {
/*
** IE5 doesn't allow images to be anchored
*/
location.href = "http://www.k4.nl/k4/?welkom";
}
function moveObject (idObject, x) {
var obj = document.getElementById(idObject);
var objs = document.getElementById(idObject).style;
if (obj.offsetLeft != null) {
var l = obj.offsetLeft;
objs.left = l+x + "px";
} else if (objs.pixelLeft != null) {
objs.pixelLeft += x;
} else {
obj.moveBy(x,0);
}
cnt++;
if (cnt == 5) {
panelLeft (x);
} else if (cnt == 7) {
panelRight (x);
} else if (cnt < 9) {
setTimeout("moveObject(idObject,x)", 80);
} else if (cnt == 9) {
document.getElementById("busy").value = "";
}
}
function portPrev () {
id = this.href.substring(this.href.lastIndexOf("=") + 1);
portAct(id, -1);
return false;
}
function portNext () {
id = this.href.substring(this.href.lastIndexOf("=") + 1);
portAct(id, 1);
return false;
}
function portAct(id, num) {
//get navigation
objBusy = document.getElementById("busy");
objPrev = document.getElementById("portfolioPrevious");
objNext = document.getElementById("portfolioNext");
//get current stats
pAmount = document.getElementById("portAmount").value;
pLeft = document.getElementById("portLeft");
pCenter = document.getElementById("portCenter");
pRight = document.getElementById("portRight");
//set decrements or increments
pLeftNew = parseFloat(pLeft.value) + num;
pCenterNew = parseFloat(pCenter.value) + num;
pRightNew = parseFloat(pRight.value) + num;
if (num < 0) {
if (pLeftNew < 0) {
pLeftNew = (pAmount - 1);
} else if (pCenterNew < 0) {
pCenterNew = (pAmount - 1);
} else if (pRightNew < 0) {
pRightNew = (pAmount - 1);
}
} else {
if (pLeftNew == pAmount) {
pLeftNew = 0;
} else if (pCenterNew == pAmount) {
pCenterNew = 0;
} else if (pRightNew == pAmount) {
pRightNew = 0;
}
}
//do your thang
portBlend ("divleft" + pLeftNew, "div" + pCenterNew, "divright" + pRightNew, "divleft" + pLeft.value, "div" + pCenter.value, "divright" + pRight.value);
//set new stats
pLeft.value = pLeftNew;
pCenter.value = pCenterNew;
pRight.value = pRightNew;
//set navigation
objPrev.href.substring(0, objPrev.href.lastIndexOf("=") + 1) + pLeftNew;
objNext.href.substring(0, objNext.href.lastIndexOf("=") + 1) + pRightNew ;
return false;
}
function portBlend (divLeft, divCenter, divRight, divLeftOld, divCenterOld, divRightOld) {
document.getElementById("debug").value = "pL: " + divLeft + " - pC: " + divCenter + " - pR: " + divRight;
//speed in milliseconds
var speed = Math.round(400 / 100);
//ready new div
changeOpac(0,divLeft, divCenter, divRight, "", "", "");
document.getElementById(divLeft).style.display = "block";
document.getElementById(divCenter).style.display = "block";
document.getElementById(divRight).style.display = "block";
//fade in -and old one out
var timer = 0;
for(i = 0; i <= 100; i++) {
setTimeout("changeOpac(" + i + ",'" + divLeft + "','" + divCenter + "','" + divRight + "','" + divLeftOld + "','" + divCenterOld + "','" + divRightOld + "')",(timer * speed));
timer++;
}
//hide old div
document.getElementById(divLeftOld).style.display = "none";
document.getElementById(divCenterOld).style.display = "none";
document.getElementById(divRightOld).style.display = "none";
}
function changeOpac(opacity, idBlendLeft, idBlendCenter, idBlendRight, idBlendLeftOld, idBlendCenterOld, idBlendRightOld) {
object = document.getElementById(idBlendLeft).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
object = document.getElementById(idBlendCenter).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
object = document.getElementById(idBlendRight).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
if (idBlendLeftOld) {
objectOld = document.getElementById(idBlendLeftOld).style;
objectOld.opacity = ((100 - opacity) / 100);
objectOld.MozOpacity = ((100 - opacity) / 100);
objectOld.KhtmlOpacity = ((100 - opacity) / 100);
objectOld.filter = "alpha(opacity=" + (100 - opacity) + ")";
}
if (idBlendCenterOld) {
objectOld = document.getElementById(idBlendCenterOld).style;
objectOld.opacity = ((100 - opacity) / 100);
objectOld.MozOpacity = ((100 - opacity) / 100);
objectOld.KhtmlOpacity = ((100 - opacity) / 100);
objectOld.filter = "alpha(opacity=" + (100 - opacity) + ")";
}
if (idBlendRightOld) {
objectOld = document.getElementById(idBlendRightOld).style;
objectOld.opacity = ((100 - opacity) / 100);
objectOld.MozOpacity = ((100 - opacity) / 100);
objectOld.KhtmlOpacity = ((100 - opacity) / 100);
objectOld.filter = "alpha(opacity=" + (100 - opacity) + ")";
}
}