//Variable used for calculating the colspan var colSpanFactor = 4; //Number of total buttons in the main navigation section var numOfButtons = 6; //The id of the button which is last clicked var buttonLastClicked = 0; //Hard-coded array defining the button id's and their columnwidths var buttons = new Array(); buttons[0] = Array(52, "Home", "main.html"); buttons[1] = Array(52, "Vision", ""); buttons[2] = Array(62, "Portfolio", ""); buttons[3] = Array(72, "Think tank", ""); buttons[4] = Array(48, "Links", ""); buttons[5] = Array(52, "Contact", ""); /** * Function for manipulating the navigation bar. * @param buttonId - The id of the button clicked. */ function changeNavigationBar(buttonId) { //First change the side images of the previous clicked button document.getElementById("begin-" + buttonLastClicked).src = "images/buttonbegin.gif"; document.getElementById("end-" + buttonLastClicked).src = "images/buttonend.gif"; //Set the side images of the last clicked button document.getElementById("begin-" + buttonId).src = "images/butcornerupleft.gif"; document.getElementById("end-" + buttonId).src = "images/butcornerupright.gif"; //Set the lit images above the previously clicked button back to normal document.getElementById("litnavoptionup" + buttonLastClicked).src = "images/navscanlines.gif"; document.getElementById("litnavoptiondown" + buttonLastClicked).src = "images/navscanlines.gif"; //Adapt the colspan and images of the two navscanline columns if(buttonId == 0 || buttonId == 1 || buttonId == 5) { document.getElementById("litnavoptionup" + buttonId).src = "images/litnavoptionup.gif"; document.getElementById("litnavoptiondown" + buttonId).src = "images/litnavoptiondown.gif"; } else { document.getElementById("litnavoptionup" + buttonId).src = "images/litnavoptionup" + buttonId + ".gif"; document.getElementById("litnavoptiondown" + buttonId).src = "images/litnavoptiondown" + buttonId + ".gif"; } //Change colspan of "navmiddle" element var navMiddleTD = document.getElementById("navmiddle"); navMiddleTD.colSpan = (buttonId * colSpanFactor) + 1; //Modify the width of middleselected TD var middleSelectedTD = document.getElementById("middleselected"); //alert("middle: " + buttons[buttonId][0]); middleSelectedTD.width = buttons[buttonId][0]; //Modify navbar section var navBarTR = document.getElementById("navbar"); //If the first button in the row of buttons is clicked //alert("begin-" + buttonLastClicked); if(buttonId == 0 && buttonLastClicked > 0) { //Delete spacing TD and TD labeled 'navstripesleft' navBarTR.deleteCell(0); navBarTR.deleteCell(0); //Move up the TD labeled 'navstripesright' var tdNavStripesRight = document.getElementById("navstripesright"); if(tdNavStripesRight != null) { tdNavStripesRight.colSpan = (((buttons.length - 1) - buttonId) * colSpanFactor) - 1; } } else if(buttonId == buttons.length - 1 && buttonLastClicked < buttons.length - 1) { //If last button in the row of buttons is clicked //Delete TD labeled 'navstripesright' //Move up the TD labeled 'navstripesleft' navBarTR.deleteCell(navBarTR.cells.length - 1); if(buttonLastClicked > 0) { var tdNavStripesLeft = document.getElementById("navstripesleft"); tdNavStripesLeft.colSpan = (buttonId * colSpanFactor) - 1; } } //If one of the buttons is clicked other than the first or the last var tdNavStripesLeft = document.getElementById("navstripesleft"); //If TD labeled 'navstripesleft' hasn't been added yet after clicking on the first button if(tdNavStripesLeft == null && buttonId != 0) { //Insert a new TD in the corresponding TR en set its properties tdNavStripesLeft = navBarTR.insertCell(0); tdNavStripesLeft.height = 16; tdNavStripesLeft.id = "navstripesleft"; tdNavStripesLeft.style.background = "url(images/subnavstripes.gif)"; } if(tdNavStripesLeft) { //Set the colspan value of the 'navstripesleft' column corresponding the button clicked tdNavStripesLeft.colSpan = (buttonId * colSpanFactor) - 1; } var tdBeforeHome = document.getElementById("beforehome"); //Also reinsert the TD for spacing purposes which was previously removed when clicked on //first or last button if(tdBeforeHome == null && buttonId != 0) { tdBeforeHome = navBarTR.insertCell(0); tdBeforeHome.id = "beforehome"; } var tdNavStripesRight = document.getElementById("navstripesright"); //If TD labeled 'navstripesright' hasn't been added yet after clicking on the last button if(tdNavStripesRight == null && buttonId != buttons.length - 1) { //Insert a 'new' 'navstripesright' TD in the corresponding TR en set its properties tdNavStripesRight = navBarTR.insertCell(navBarTR.cells.length); tdNavStripesRight.height = 16; tdNavStripesRight.id = "navstripesright"; tdNavStripesRight.style.background = "url(images/subnavstripes.gif)"; } if(tdNavStripesRight != null) { //Set the colspan value of the 'navstripesright' column corresponding the button clicked tdNavStripesRight.colSpan = (((buttons.length - 1) - buttonId) * colSpanFactor) - 1; } buttonLastClicked = buttonId; } /** * Function for swapping the image of the banner in the navigationbar. * @param newImage - The relative url of the image to swap to. */ function swapBannerImage(newImage) { var bannerImage = document.getElementById("banner"); if(bannerImage.src != newImage) { bannerImage.src = newImage; } } /** * Function for generating the navigation of * the M4 site dynamically. */ function generateNavigation() { var navCode = generateGeneralBegin(); if(areCookiesEnabled()) { //alert("Cookies enabled"); navCode += generateAdvancedNavigation(); } else { alert("Cookies disabled"); navCode += generateBasicNavigation(); } navCode += generateGeneralEnd(); document.write(navCode); } /** * Function for generating the advanced version of the M4 navigation. */ function generateAdvancedNavigation() { var navCode = ""; //var buttonId = parseFloat(getCookieVariable("buttonId")); var navMiddleColSpan = 0; var navStripesColSpan = 0; if(buttonLastClicked > 0) { navMiddleColSpan = (buttonLastClicked * colSpanFactor) + 1; //alert("navMiddleColSpan = " + navMiddleColSpan); navStripesLeftColSpan = (buttonLastClicked * colSpanFactor) - 1; } else { buttonLastClicked = 0; navMiddleColSpan = 1; //alert("navMiddleColSpan = " + navMiddleColSpan); } //alert("buttonId: " + buttonId); navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; if(navMiddleColSpan > 1) { navCode += " \n"; navCode += " \n"; } else { //The extra columns aren't necessary } navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; if(buttonLastClicked < numOfButtons - 1) { var navStripesRightColSpan = (((numOfButtons - 1) - buttonLastClicked) * colSpanFactor) - 1; navCode += " \n"; } else { //The extra column isn't necessary } return navCode; } /** * Function which generates the basic menu, when cookies aren't enabled. */ function generateBasicNavigation() { var navCode = ""; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; return navCode; } /** * Function which generates the general begin of the navigation. */ function generateGeneralBegin() { var navCode = ""; navCode += "\n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; //if(areCookiesEnabled()) { //var buttonId = parseFloat(getCookieVariable("buttonId")); /*if(!buttonLastClicked) { buttonLastClicked = 0; }*/ for(i=0; i\n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; } else { navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; } } /*} else { for(i=0; i\n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; } }*/ /*navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n";*/ navCode += " \n"; navCode += " \n"; return navCode; } /** * Function which generates the general end of the navigation. */ function generateGeneralEnd() { var navCode = ""; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += " \n"; navCode += "
" + buttons[i][1] + "
" + buttons[i][1] + "
" + buttons[i][1] + "
Vision
Portfolio
Think tank
Links
Contact
\n"; return navCode; } /** * Function which checks if cookies are enabled in clients browser. * @return boolean - True when cookies are enabled, false otherwise. */ function areCookiesEnabled() { var cookieEnabled = (navigator.cookieEnabled)? true : false //if not IE4+ nor NS6+ if (typeof navigator.cookieEnabled == "undefined" && !cookieEnabled){ document.cookie = "testcookie"; cookieEnabled=(document.cookie.indexOf("testcookie")!=-1)? true : false } return cookieEnabled; } /** * Function which sets the id of the last clicked button. * @param buttonId - Id of the button which was clicked as last. */ function setLastClickedButton(buttonId) { buttonLastClicked = buttonId; } /** * Function for getting the value of a corresponding key out of * the cookie string. * @param key - Key of the value to return. * @return value - The value which corresponds with the key. */ function getCookieVariable(key) { key += "="; var value = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(key) // if cookie exists if (offset != -1) { offset += key.length // set index of beginning of value end = document.cookie.indexOf(";", offset); // set index of end of cookie value if (end == -1) { end = document.cookie.length; } value = unescape(document.cookie.substring(offset, end)) } } return value; } /** * Function which sets a value under a corresponding key * in the cookie. * @param key - The key of the cookie entry. * @param value - The value of the cookie entry. */ function setCookieVariable(key, value) { document.cookie = key + "=" + value; } /** * This function opens the theatre window of M4 to showcase media. * Utilizing a helper function per type of media (JPG, Flash, etc.) to write * the specific html code to the theatre window. */ function openTheatreWindow(titleOfMedia, urlOfMedia) { var fullWindow = window.open('', 'Theatre', 'scrollbars=0,menubar=0,width=670,height=648,resizable=0,toolbar=0,location=0,directories=0,status=0,copyhistory=1,screenX='+(screen.width / 6)+',screenY='+(screen.height / 20)+''); var htmlPage = '\n'; htmlPage += '\n'; htmlPage += '\n'; htmlPage += '\n'; htmlPage += 'M4 Theatre\n'; htmlPage += '\n'; htmlPage += '\n'; htmlPage += '\n'; htmlPage += '\n'; htmlPage += '\t\n'; htmlPage += '\t\t\n'; htmlPage += '\t\n'; htmlPage += '\t\n'; htmlPage += '\t\t\n'; htmlPage += '\t\t\n'; htmlPage += '\t\t\n'; htmlPage += '\t\n'; htmlPage += '\t\n'; htmlPage += '\t\t\n'; htmlPage += '\t\n'; htmlPage += '
\n'; if(urlOfMedia.indexOf(".swf") > -1) { htmlPage += openFlash(urlOfMedia); } else if(urlOfMedia.indexOf(".jpg") > -1 || urlOfMedia.indexOf(".gif") > -1) { htmlPage += openImage(titleOfMedia, urlOfMedia); } htmlPage += '\t\t
\n'; htmlPage += '\t\t\t\n'; htmlPage += '\t\t\t\t\n'; htmlPage += '\t\t\t\t\t\n'; htmlPage += '\t\t\t\t\n'; htmlPage += '\t\t\t\t\n'; htmlPage += '\t\t\t\t\t\n'; htmlPage += '\t\t\t\t\t\n'; htmlPage += '\t\t\t\t\n'; htmlPage += '\t\t\t
\n'; htmlPage += '\t\t\t\t\t\t
\n'; htmlPage += '\t\t\t\t\t\t\t' + titleOfMedia + '\n'; htmlPage += '\t\t\t\t\t\t\t' + titleOfMedia + '\n'; htmlPage += '\t\t\t\t\t\t
\n'; htmlPage += '\t\t\t\t\t
\n'; htmlPage += '\t\t
\n'; //htmlPage += '
\n'; htmlPage += '\n'; htmlPage += ''; fullWindow.document.open(); fullWindow.document.write(htmlPage); fullWindow.document.close(); } /** * This function opens a new browser window without any bars and at the size * of the image to show. A new html page is written with the image to be shown. * @param urlToShow - Address of the image to be shown */ function openImage(titleOfMedia, urlOfMedia) { var htmlPage = '\t\t\t' + titleOfMedia + '\n'; return htmlPage; } /** * This function opens a new browser window without any bars and at the size * of the flash movie to show. A new html page is written with the flash movie to be shown. * @param urlToShow - Address of the flash movie to be shown */ function openFlash(urlOfMedia) { var htmlPage = '\t\t\t