<!--
// ---------------------------------------------------------------------------------------------------------------------------------------
// OverDispLay
// A JavaScript function package by Geoph Essex
// Custom-designed Lightbox-inspired portfolio display
// Designed/coded for Hoffman Management & Consulting (hoffmanmanagement.net)
// Designed/coded by Geoph Essex (semperbufo.com)
// Copyright �2008 - open source and free to copy/use (Because, realistically, who could stop you?)
// Appreciation and acknowledgement to Lokesh Dhakar (lokeshdhakar.com), creator of the Lightbox JavaScript package
//
// If you appreciate the coding community, you'll be happy to leave this notice intact
// when using OverDispLay for your own purposes.
// Feel free to alter/modify/add/omit any features
// and add your own credit to the notice as well.
//
// OverDispLay v1.0
// Last modified: 2008-10-09
// This package may not work correctly in all browsers on all platforms.  If you discover an incompatibility
// issue, please feel free to visit multimedium.semperbufo.com and inform the developer.
//
// OverDispLay uses Lightbox-inspired techniques to provide
// the user with a lightbox display that can load Web Pages
// instead of only graphics and descriptive strings.
// It does not require any external JavaScript code or definitions to function.
// If you will be using this JavaScript package as is, then make sure you have the following folders/files in the same directory:
// -- odl_images [folder]
// ---- odl_preloader.gif [image]: the preloader widget to let the viewer know a display is loading
// ---- odl_fadeover.png [image]: dims the main page while the display is active ** DEPRECATED (Unused)
// ---- odl_emptypixel.gif [image]: a transparent gif that helps allow the dimmed main page to be clicked to close the OverDispLay
// -- odl_samples [folder]
// ---- all of the folders/images/HTML files for the specific display pieces
// ---------------------------------------------------------------------------------------------------------------------------------------


// USER INSTRUCTIONS  **************
// Create a folder called "overdisplay" in the same folder as the portfolio HTML page, and upload this package to that folder
// Make sure to include the "images" and sample subfolders in the overdisplay folder
//
//
// **CODE TO PUT IN HTML PAGE**
// In the portfolio HTML page, include the following line (without "//" comment marks) in the HEAD of the HTML:
// <script type="text/javascript" language="javascript" src="overdisplay/overdisplay.js"></script>
//
//
// **CODE TO PUT IN HTML PAGE**
// Where the categories and thumbnails will be displayed, for the user to click and open OverDispLay, put the following three lines:
// <script type="text/javascript" language="javascript">
//   odl_constructLaunchPad();
// </script>
// NOTE: Do not use the "//" comment markers when putting this code in your HTML!
//
//
// **CODE TO PUT IN HTML PAGE**
// Make sure to put the following three lines right before the end of the HTML page's body (before the </body> tag):
// <script type="text/javascript" language="javascript">
//   odl_initOverDispLay();
// </script>
// NOTE: Do not use the "//" comment markers when putting this code in your HTML!
//
//
// **VARIABLES TO SPECIFY BELOW
// Finally, specify the user-defined variables below: the defaults should do nicely, unless you're interested in trying something new.
//
//
// User-defined variables  **************
// Check the following variables to match them to your preferences and requirements:
// -- First are the general settings of the OverDispLay feature
// -- Then a list of categories that you will use in your display pieces
// -- Then a list of the pieces that will be available in your display
//
// NOTE: OverDispLay assigns a window.onresize function - if you use your own, make sure it
// contains the code from ODL's onresize as well (and then remove or comment out the ODL onresize function).
// The window.onresize function resides at the very bottom of this code.
//
// Define the visual features of OverDispLay (default values provided in comments)
// Define the width and height of the thumbnails for the pieces (on the portfolio page)
var odl_thumbnailWidth = 90; // Default = 90
var odl_thumbnailHeight = 45; // Default = 45
// Define how many columns of thumbnails you will have (how many across)
var odl_numThumbnailColumns = 4; // Default = 4
// Define the color of the text in the list of categories, normally and when moused over
var odl_catLinkColor = '#c00717'; // Default = '#c00717'
var odl_catLinkColorHover = '#121212'; // Default = '#121212'
// Define the width and height of the preloader graphic
var odl_preLoaderWidth = 32; // Default = 32
var odl_preLoaderHeight = 32; // Default = 32
// Define the initial width and height of the display itself
var odl_initDisplayWidth = 790; // Default = 800
var odl_initDisplayHeight = 450; // Default = 600
// Define what color and thickness the borders on the display box should be
var odl_borderColors = '#c00717'; // Default = '#c00717'
var odl_borderThickness = 4; // Default = 4
// Define how tall the displayConsoleHeight will be (consider the "CLOSE" graphic's height and the text size in odl_consoleReport)
var odl_displayConsoleHeight = 25; // Default = 25
// Define the color of the text in the information bar below the sample
var odl_reportTextColor = '#929292'; // Default = '#929292'
// Match the width and height of the sequencing buttons (PREVIOUS and NEXT) - make sure they match the graphical dimensions themselves
var odl_seqButtonWidth = 75; // Default = 75
var odl_seqButtonHeight = 25; // Default = 25
// Define how far down the sequencing buttons should appear from the top of the display box
var odl_seqButtonOffsetY = 75; // Default = 75
// Define how opaque/transparent the sequencing buttons are when NOT moused over (0 = transparent, 100 = opaque)
var odl_seqTransValue = 25; // Default = 25
// Define how opaque/transparent the sequencing buttons are when they ARE moused over (0 = transparent, 100 = opaque)
var odl_seqOpaqueValue = 100; // Default = 100
//
// The following two variables specify the URL path
// From the location of the PORTFOLIO PAGE on the server
// to the sample pieces to load and the thumbnails for the pieces, respectively.
// Make sure these are correct, but do not alter the code just below them.
var odl_pathToPieces = 'overdisplay/odl_samples/'; // Default = 'overdisplay/odl_samples/'
var odl_pathToThumbnails = 'thumbnails/'; // Default depends on user preferences and directory structure
//
// This code helps make sure the paths won't result in errors: DO NOT ALTER TWO LINES BELOW
if (odl_pathToPieces!='' && odl_pathToPieces.substring(odl_pathToPieces.length-1)!='/') odl_pathToPieces+='/'; // DO NOT ALTER
if (odl_pathToThumbnails!='' && odl_pathToThumbnails.substring(odl_pathToThumbnails.length-1)!='/') odl_pathToThumbnails+='/'; // DO NOT ALTER
// DO NOT ALTER TWO LINES ABOVE, but alter more below...
//
//
// Define the list of categories for the portfolio: DO NOT ALTER TWO LINES BELOW
var odl_displayCategory = new Array(); // DO NOT ALTER
var listODL = 0; // DO NOT ALTER
// DO NOT ALTER TWO LINES ABOVE, but alter the list below...
//
// **THE LIST OF SAMPLE CATEGORIES: you may add, alter, or remove the pieces listed - ALTER LIST BELOW
// This list is IN ORDER - this is how it will appear on the portfolio page
//
// To MOVE ITEMS AROUND on the list, be sure to include EVERYTHING from:
// odl_displayCategory[listODL++] = {
// ...to...
// } (the closing curly brace)
// Including the first line (with "odl_displayCategory") and the last line (the closing curly brace), that is one entire category definition
//
// The properties of these array elements are as follows:
// title: this is what actually appears on the portfolio page - the clickable link.
// -- be as formal or informal as you want: lowercase, capital, title capitalization - just be consistent
// keywords: these are words or phrases that will match the keywords from the pieces (in the piece's industry and project properties)
// -- NOTE: this should be ALL LOWERCASE with no non-alphabetical characters (or at least consistent throughout)
// -- the category anchor tags on the portfolio page will use these keywords as an argument when it calls the odl_openOverDispLay() function
odl_displayCategory[listODL++] = {
  catType:'project',
  title:'Alternative Advertising',
  keywords:'alternative advertising alternative ads alt ads'
}
odl_displayCategory[listODL++] = {
  catType:'project',
  title:'Brochures',
  keywords:'brochures'
}
odl_displayCategory[listODL++] = {
  catType:'project',
  title:'Consumer Research',
  keywords:'consumer research'
}
odl_displayCategory[listODL++] = {
  catType:'project',
  title:'Email Marketing',
  keywords:'email marketing'
}
odl_displayCategory[listODL++] = {
  catType:'project',
  title:'Email Newsletters',
  keywords:'email newsletters'
}
odl_displayCategory[listODL++] = {
  catType:'project',
  title:'Lobby Posters',
  keywords:'lobby posters'
}
odl_displayCategory[listODL++] = {
  catType:'project',
  title:'Logo Design',
  keywords:'logo design identity design'
}
odl_displayCategory[listODL++] = {
  catType:'project',
  title:'Print Advertising',
  keywords:'print advertising print ads'
}
odl_displayCategory[listODL++] = {
  catType:'project',
  title:'Promotional Cards',
  keywords:'promotional cards promo cards promos'
}
odl_displayCategory[listODL++] = {
  catType:'project',
  title:'Web Ads',
  keywords:'web ads web advertising internet ads internet advertising banner ads'
}
odl_displayCategory[listODL++] = {
  catType:'project',
  title:'Websites',
  keywords:'websites web sites'
}

odl_displayCategory[listODL++] = {
  catType:'industry',
  title:'Consulting',
  keywords:'consulting'
}
odl_displayCategory[listODL++] = {
  catType:'industry',
  title:'"Going Green"',
  keywords:'going green'
}
odl_displayCategory[listODL++] = {
  catType:'industry',
  title:'Jewelry',
  keywords:'jeweler'
}
odl_displayCategory[listODL++] = {
  catType:'industry',
  title:'Law',
  keywords:'law firm'
}
odl_displayCategory[listODL++] = {
  catType:'industry',
  title:'Media',
  keywords:'media industry'
}
odl_displayCategory[listODL++] = {
  catType:'industry',
  title:'Real Estate Development',
  keywords:'real estate'
}
odl_displayCategory[listODL++] = {
  catType:'industry',
  title:'Retail',
  keywords:'retail'
}
odl_displayCategory[listODL++] = {
  catType:'industry',
  title:'Restaurants',
  keywords:'restaurant'
}
odl_displayCategory[listODL++] = {
  catType:'industry',
  title:'Technology',
  keywords:'technology'
}

// END LIST OF SAMPLE CATEGORIES
//
//
// Define the list of sample pieces for the portfolio: DO NOT ALTER TWO LINES BELOW
var odl_displayPiece = new Array(); // DO NOT ALTER
listODL = 0; // DO NOT ALTER
// DO NOT ALTER TWO LINES ABOVE, but alter the list below...
//
// **THE LIST OF SAMPLE PIECES: you may add, alter, or remove the pieces listed - ALTER LIST BELOW
// This list is IN ORDER - both how the thumbnails will appear on the portfolio page, and how it will cycle through the display
//
// To MOVE ITEMS AROUND on the list, be sure to include EVERYTHING from:
// odl_displayPiece[listODL++] = {
// ...to...
// } (the closing curly brace)
// Including the first line (with "odl_displayPiece") and the last line (the closing curly brace), that is one entire piece definition
//
// The properties of these array elements are as follows:
// label: should be an easy to remember reference to the display piece
// -- try to use ONLY A-Z, a-z, 0-9, and - or _ characters (ESPECIALLY NO APOSTROPHES)
// -- NOTE: the thumbnail anchor tag on the portfolio page can use this label as an argument when it calls the odl_openOverDispLay() function
// url: should be the path-and-filename to the display piece's page RELATIVE TO THE PORTFOLIO PAGE (not this JavaScript file's location)
// industry: should be keywords suggesting the industry or industries the job was done for (can be more than one!)
// project: should be keywords suggesting the type of project or projects done (can be more than one!)
// -- NOTE: for industry and project, should be ALL LOWERCASE with no non-alphabetical characters (or at least consistent throughout)
// -- the thumbnail anchor tag on the portfolio page can use these keywords as an argument when it calls the odl_openOverDispLay() function
odl_displayPiece[listODL++] = {
  label:'Glenwood',
  url:odl_pathToPieces+'glenwood.html',
  thumbnail:odl_pathToThumbnails+'glenwood.png',
  industry:'real estate',
  project:'email marketing'
}
odl_displayPiece[listODL++] = {
  label:'Hedden-Osborne',
  url:odl_pathToPieces+'hedden-osborne.html',
  thumbnail:odl_pathToThumbnails+'hedden-osborne.png',
  industry:'real estate',
  project:'email marketing'
}
odl_displayPiece[listODL++] = {
  label:'visentry',
  url:odl_pathToPieces+'visentry.html',
  thumbnail:odl_pathToThumbnails+'visentry.png',
  industry:'technology',
  project:'brochure'
}
odl_displayPiece[listODL++] = {
  label:'john_amorison_web-ad',
  url:odl_pathToPieces+'john_amorison_web-ad.html',
  thumbnail:odl_pathToThumbnails+'john_amorison_web-ad.png',
  industry:'law firm',
  project:'web ad'
}
odl_displayPiece[listODL++] = {
  label:'exquisite_bride',
  url:odl_pathToPieces+'exquisite_bride.html',
  thumbnail:odl_pathToThumbnails+'exquisite_bride.png',
  industry:'retail',
  project:'website'
}
odl_displayPiece[listODL++] = {
  label:'rio22_web-ad1',
  url:odl_pathToPieces+'rio22_web-ad1.html',
  thumbnail:odl_pathToThumbnails+'rio22_web-ad1.png',
  industry:'restaurant',
  project:'web ad'
}
odl_displayPiece[listODL++] = {
  label:'gilin_print2',
  url:odl_pathToPieces+'gilin_print2.html',
  thumbnail:odl_pathToThumbnails+'gilin_print2.png',
  industry:'jeweler',
  project:'print advertising'
}
odl_displayPiece[listODL++] = {
  label:'hmc_consumer_research',
  url:odl_pathToPieces+'hmc_consumer_research.html',
  thumbnail:odl_pathToThumbnails+'hmc_consumer_research.png',
  industry:'consulting',
  project:'consumer research'
}
odl_displayPiece[listODL++] = {
  label:'diversity_affluence_email',
  url:odl_pathToPieces+'diversity_affluence_email.html',
  thumbnail:odl_pathToThumbnails+'diversity_affluence_email.png',
  industry:'consulting',
  project:'email marketing'
}
odl_displayPiece[listODL++] = {
  label:'60_parkway_drive_promo',
  url:odl_pathToPieces+'60_parkway_drive_promo.html',
  thumbnail:odl_pathToThumbnails+'60_parkway_drive_promo.png',
  industry:'real estate',
  project:'promotional card'
}
odl_displayPiece[listODL++] = {
  label:'nj_my_way_web-ad',
  url:odl_pathToPieces+'nj_my_way_web-ad.html',
  thumbnail:odl_pathToThumbnails+'nj_my_way_web-ad.png',
  industry:'media industry',
  project:'web ad'
}
odl_displayPiece[listODL++] = {
  label:'rio22_lobby-poster1',
  url:odl_pathToPieces+'rio22_lobby-poster1.html',
  thumbnail:odl_pathToThumbnails+'rio22_lobby-poster1.png',
  industry:'restaurant',
  project:'lobby poster'
}
odl_displayPiece[listODL++] = {
  label:'rio22_logo',
  url:odl_pathToPieces+'rio22_logo.html',
  thumbnail:odl_pathToThumbnails+'rio22_logo.png',
  industry:'restaurant',
  project:'logo design'
}
odl_displayPiece[listODL++] = {
  label:'sony',
  url:odl_pathToPieces+'sony.html',
  thumbnail:odl_pathToThumbnails+'sony.png',
  industry:'technology',
  project:'promotional cards'
}
odl_displayPiece[listODL++] = {
  label:'rio22_alt-ad2',
  url:odl_pathToPieces+'rio22_alt-ad2.html',
  thumbnail:odl_pathToThumbnails+'rio22_alt-ad2.png',
  industry:'restaurant',
  project:'alternative advertising'
}
odl_displayPiece[listODL++] = {
  label:'60_parkway_drive_email',
  url:odl_pathToPieces+'60_parkway_drive_email.html',
  thumbnail:odl_pathToThumbnails+'60_parkway_drive_email.png',
  industry:'real estate',
  project:'email newsletters'
}
odl_displayPiece[listODL++] = {
  label:'spruce_print2',
  url:odl_pathToPieces+'spruce_print2.html',
  thumbnail:odl_pathToThumbnails+'spruce_print2.png',
  industry:'going green',
  project:'print advertising'
}
odl_displayPiece[listODL++] = {
  label:'rio22_print-ad',
  url:odl_pathToPieces+'rio22_print-ad.html',
  thumbnail:odl_pathToThumbnails+'rio22_print-ad.png',
  industry:'restaurant',
  project:'print advertising'
}
odl_displayPiece[listODL++] = {
  label:'hpd_corp',
  url:odl_pathToPieces+'hpd_corp.html',
  thumbnail:odl_pathToThumbnails+'hpd_corp.png',
  industry:'real estate',
  project:'website'
}
odl_displayPiece[listODL++] = {
  label:'hmc_email',
  url:odl_pathToPieces+'hmc_email.html',
  thumbnail:odl_pathToThumbnails+'hmc_email.png',
  industry:'consulting',
  project:'email marketing'
}
odl_displayPiece[listODL++] = {
  label:'gilin_website',
  url:odl_pathToPieces+'gilin_website.html',
  thumbnail:odl_pathToThumbnails+'gilin_website.png',
  industry:'jeweler',
  project:'website'
}
odl_displayPiece[listODL++] = {
  label:'60_parkway_drive_web-ad',
  url:odl_pathToPieces+'60_parkway_drive_web-ad.html',
  thumbnail:odl_pathToThumbnails+'60_parkway_drive_web-ad.png',
  industry:'real estate',
  project:'web ad'
}
odl_displayPiece[listODL++] = {
  label:'rio22_promo-cards',
  url:odl_pathToPieces+'rio22_promo-cards.html',
  thumbnail:odl_pathToThumbnails+'rio22_promo-cards.png',
  industry:'restaurant',
  project:'promotional cards'
}
odl_displayPiece[listODL++] = {
  label:'rio22_web-ad2',
  url:odl_pathToPieces+'rio22_web-ad2.html',
  thumbnail:odl_pathToThumbnails+'rio22_web-ad2.png',
  industry:'restaurant',
  project:'web ad'
}
odl_displayPiece[listODL++] = {
  label:'rio22_alt-ad3',
  url:odl_pathToPieces+'rio22_alt-ad3.html',
  thumbnail:odl_pathToThumbnails+'rio22_alt-ad3.png',
  industry:'restaurant',
  project:'alternative advertising'
}
odl_displayPiece[listODL++] = {
  label:'rio22_email-marketing',
  url:odl_pathToPieces+'rio22_email-marketing.html',
  thumbnail:odl_pathToThumbnails+'rio22_email-marketing.png',
  industry:'restaurant',
  project:'email marketing'
}
odl_displayPiece[listODL++] = {
  label:'diversity_affluence_consumer_research',
  url:odl_pathToPieces+'diversity_affluence_consumer_research.html',
  thumbnail:odl_pathToThumbnails+'diversity_affluence_consumer_research.png',
  industry:'consulting',
  project:'consumer research'
}
odl_displayPiece[listODL++] = {
  label:'diversity_affluence_logo',
  url:odl_pathToPieces+'diversity_affluence_logo.html',
  thumbnail:odl_pathToThumbnails+'diversity_affluence_logo.png',
  industry:'consulting',
  project:'logo design'
}
odl_displayPiece[listODL++] = {
  label:'rio22_website',
  url:odl_pathToPieces+'rio22_website.html',
  thumbnail:odl_pathToThumbnails+'rio22_website.png',
  industry:'restaurant',
  project:'website'
}
odl_displayPiece[listODL++] = {
  label:'gilin_print1',
  url:odl_pathToPieces+'gilin_print1.html',
  thumbnail:odl_pathToThumbnails+'gilin_print1.png',
  industry:'jeweler',
  project:'print advertising'
}
odl_displayPiece[listODL++] = {
  label:'spruce_print1',
  url:odl_pathToPieces+'spruce_print1.html',
  thumbnail:odl_pathToThumbnails+'spruce_print1.png',
  industry:'going green',
  project:'print advertising'
}
odl_displayPiece[listODL++] = {
  label:'rio22_alt-ad1',
  url:odl_pathToPieces+'rio22_alt-ad1.html',
  thumbnail:odl_pathToThumbnails+'rio22_alt-ad1.png',
  industry:'restaurant',
  project:'alternative advertising'
}
odl_displayPiece[listODL++] = {
  label:'60_parkway_drive_print',
  url:odl_pathToPieces+'60_parkway_drive_print.html',
  thumbnail:odl_pathToThumbnails+'60_parkway_drive_print.png',
  industry:'real estate',
  project:'print advertising'
}
odl_displayPiece[listODL++] = {
  label:'ice_milan',
  url:odl_pathToPieces+'ice_milan.html',
  thumbnail:odl_pathToThumbnails+'ice_milan.png',
  industry:'restaurant',
  project:'website'
}
odl_displayPiece[listODL++] = {
  label:'rio22_web-ad3',
  url:odl_pathToPieces+'rio22_web-ad3.html',
  thumbnail:odl_pathToThumbnails+'rio22_web-ad3.png',
  industry:'restaurant',
  project:'web ad'
}
odl_displayPiece[listODL++] = {
  label:'spruce_web-ad',
  url:odl_pathToPieces+'spruce_web-ad.html',
  thumbnail:odl_pathToThumbnails+'spruce_web-ad.png',
  industry:'going green',
  project:'web ad'
}
odl_displayPiece[listODL++] = {
  label:'rio22_lobby-poster2',
  url:odl_pathToPieces+'rio22_lobby-poster2.html',
  thumbnail:odl_pathToThumbnails+'rio22_lobby-poster2.png',
  industry:'restaurant',
  project:'lobby poster'
}

// END LIST OF SAMPLE PIECES
//
// ONLY change the following line if you are altering the type of graphic used for
// the display control buttons
var controlImageExtension = 'png';
//
// *******************************************************************************
//
// **************  DO NOT CHANGE ANY CODE BELOW THIS LINE  **************
//
// This is the total number of sample pieces
var odl_numDisplayPieces = odl_displayPiece.length;
// This is the total number of sample categories
var odl_numDisplayCategories = odl_displayCategory.length;
// These variables will keep track of the current piece and category being displayed
var odl_currDisplayPiece;
var odl_currDisplayCategory = 'odl_all';

// This function makes sure that numbers on a circular range
// wrap around correctly (i.e., a closed 0 to 9 range, 9 will go up to 0, 0 will go down to 9)
function odl_wrapAroundNum(min,max,originNum,alterNum) {
  var gotoNum = originNum + alterNum;
  if (gotoNum>max) {
    var wrapDiff = gotoNum - max;
    gotoNum = (wrapDiff - 1) + min;
  } else if (gotoNum<min) {
    var wrapDiff = min - gotoNum;
    gotoNum = max - (wrapDiff - 1);
  }
  return gotoNum;
}

// This function will return the array number of the display piece whose label is provided as an argument
function odl_convertLabelToNum(givenLabel) {
  var giveBackNum = 'undefined';
  for(i=0;i<odl_numDisplayPieces;i++) {
    if (odl_displayPiece[i].label==givenLabel) {
      giveBackNum = i;
      break;
    }
  }
  return giveBackNum;
}

// This function changes an image to another image
// It takes an indefinite number of arguments, IN PAIRS
// For each pair:
// The first argument is the HTML DOM id/name of the image element
// The second argument is the FULL path-and-filename of the image to put into it, relative to the page calling the function
function odl_imageSwap() {
	if (document.images) {
		for (i=0; i<odl_imageSwap.arguments.length; i+=2) {
			document[odl_imageSwap.arguments[i]].src = odl_imageSwap.arguments[i+1];
		}
	}
}

// This function controls the image swapping when the display controls are moused over or out
function odl_controlMousing(whichControl,toMode) {
  var imageName = 'odl_control_'+whichControl;
  var imageUrl = 'overdisplay/odl_images/odl_control_'+whichControl+'_'+toMode+'.'+controlImageExtension;
  odl_imageSwap(imageName,imageUrl);
}

// This function creates the thumbnails and category list on the Portfolio Page
function odl_constructLaunchPad() {
// First create the containg DIV
  document.writeln('<div id="odl_launchPad" style="text-align: center; padding: 0px 8px;">');
  document.write('  <b>View our work on:</b> <br />');
// List the categories, and create the links to open categories
// First by project type
  var firstDone = false;
  for(i=0;i<odl_numDisplayCategories;i++) {
    if (odl_displayCategory[i].catType=='project') {
      document.write('<nobr>');
      if (firstDone) {
        document.write('&bull; ');
      } else {
        firstDone = true;
      }
      document.write('<a href="#" style="color: ',odl_catLinkColor,'; font-weight: bold; text-decoration: none;" onmouseover="this.style.color=\'',odl_catLinkColorHover,'\';" onmouseout="this.style.color=\'',odl_catLinkColor,'\';" onclick="odl_openOverDispLay(\'odl_undefined\',\'',odl_displayCategory[i].keywords,'\');">',odl_displayCategory[i].title,'</a></nobr> ');
    }
  }
  document.writeln('  <br /><br />');
  document.write('  <b>In the fields of:</b> <br />');
// Next by project industry
  firstDone = false;
  for(i=0;i<odl_numDisplayCategories;i++) {
    if (odl_displayCategory[i].catType=='industry') {
      document.write('<nobr>');
      if (firstDone) {
        document.write('&bull; ');
      } else {
        firstDone = true;
      }
      document.write('<a href="#" style="color: ',odl_catLinkColor,'; font-weight: bold; text-decoration: none;" onmouseover="this.style.color=\'',odl_catLinkColorHover,'\';" onmouseout="this.style.color=\'',odl_catLinkColor,'\';" onclick="odl_openOverDispLay(\'odl_undefined\',\'',odl_displayCategory[i].keywords,'\');">',odl_displayCategory[i].title,'</a></nobr> ');
    }
  }
  document.writeln('  <br /><br />');
  document.writeln('  <b>Or view a project below.</b><br /><br />');
  document.writeln('  <center><table border="0" cellpadding="0"><tr><td align="left">');
// Set up the thumbnails, which link to the individual pieces
  for(i=0;i<odl_numDisplayPieces;i++) {
    document.write('<a href="#" onclick="odl_openOverDispLay(\'',odl_displayPiece[i].label,'\',\'odl_all\');"><img src="',odl_displayPiece[i].thumbnail,'" style="border: none; padding: 1px;" width="',odl_thumbnailWidth,'" height="',odl_thumbnailHeight,'" align="top"></a>');
    if ((i+1)%odl_numThumbnailColumns==0 || i==odl_numDisplayPieces-1) {
      document.write('<br />');
    }
  }
  document.writeln('  </td></tr></table></center>');
  document.writeln('</div>');
// And finally close the DIV
}

// These variables are declared globally for use as reference to the OverDispLay DOM elements later
var odl_fadeOverLay = 'undefined';
var odl_preLoader = 'undefined';
var odl_displayLayer = 'undefined';
var odl_displayContainer = 'undefined';
var odl_displayConsole = 'undefined';
var odl_consoleReport = 'undefined';
var odl_seqButtonPrev = 'undefined';
var odl_seqButtonNext = 'undefined';

// This function creates the OverDispLay
function odl_constructOverDispLay() {
// First, the "dimming" fade overlay on the base page (odl_fadeOverLay)
  document.writeln('<div id="odl_fadeOverLay" style="z-layer: 2; position: absolute; background-color: #000000; border: none; opacity:0.4; filter:alpha(opacity=40); width: 100%; height: 100%; margin: 0px; padding: 0px; top: 0px; left: 0px; visibility: hidden;"><a href="javascript:odl_closeOverDispLay();"><img src="overdisplay/odl_images/odl_emptypixel.gif" width="100%" height="100%" border="0"></a></div>');
  odl_fadeOverLay = odl_setReference('odl_fadeOverLay');
// Next, the actual layer on which the display resides (odl_displayLayer)
  document.writeln('<div id="odl_displayLayer" style="z-layer: 3; position: absolute; background-color: #ffffff; border: ',odl_borderThickness,'px solid ',odl_borderColors,'; margin: 0px; padding: 0px; top: 0px; left: 0px; width: ',odl_initDisplayWidth,'px; height: ',odl_initDisplayHeight+odl_displayConsoleHeight,'px; visibility: hidden;">');
// The display layer holds an IFRAME which actually loads up the display pieces (odl_displayContainer)
  document.writeln('  <iframe id="odl_displayContainer" name="odl_displayContainer" onload="this.revealMe();" style="width: ',odl_initDisplayWidth,'px; height: ',odl_initDisplayHeight,'px; margin: 0px; padding: 0px; border: none; overflow: auto; background-color: #ffffff; visibility: hidden;"></iframe>');
  odl_displayContainer = odl_setReference('odl_displayContainer');
// The display layer holds an a console with information and a "CLOSE" button (odl_displayConsole)
// The information is in its own object (odl_consoleReport)
  document.writeln('  <div id="odl_displayConsole" style="margin: 0px; padding: 0px; text-align: right; background-color: #ffffff; border: none; width: ',odl_initDisplayWidth,'px;"><div id="odl_consoleReport" style="width: 50%; text-align: left; padding-left: 16px; padding-top: 5px; float: left; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: ',odl_reportTextColor,'; visibility: hidden;">Project 0 out of ',odl_numDisplayPieces,'.</div><a href="javascript:odl_closeOverDispLay();" onmouseover="odl_controlMousing(\'close\',\'lite\');" onmouseout="odl_controlMousing(\'close\',\'norm\');"><img id="odl_control_close" name="odl_control_close" src="overdisplay/odl_images/odl_control_close_norm.png" width="75" height="25" align="top" alt="CLOSE" border="0"></a></div>');
  odl_displayConsole = odl_setReference('odl_displayConsole');
  odl_consoleReport = odl_setReference('odl_consoleReport');
  document.writeln('</div>');
  odl_displayLayer = odl_setReference('odl_displayLayer');
// Next, the preloader graphic that appears between sample loads (odl_preLoader)
  document.writeln('<div id="odl_preLoader" style="z-layer: 4; position: absolute; background-color: transparent; border: none; margin: 0px; padding: 0px; top: 0px; left: 0px; width: ',odl_preLoaderWidth,'px; height: ',odl_preLoaderHeight,'px; visibility: hidden;">');
// This is where the preloader graphic resides - if you change it, change the src reference here!
  document.writeln('<img src="overdisplay/odl_images/odl_preloader.gif" style="border: none;" />');
  document.writeln('</div>');
  odl_preLoader = odl_setReference('odl_preLoader');
// Finally, the two sequencing buttons are added:
// The PREVIOUS button (odl_seqButtonPrev)
// (the image of the button is in this IMG tag - make sure it is updated if you alter the button)
  document.writeln('<div id="odl_seqButtonPrev" style="z-layer: 5; opacity:0.25; filter:alpha(opacity=25); position: absolute; margin: 0px; padding: 0px; top: 0px; left: 0px; visibility: hidden;"><a href="javascript:odl_cycleOverDispLay(-1);" onmouseover="odl_seqAlpha(odl_seqButtonPrev,odl_seqOpaqueValue);odl_controlMousing(\'previous\',\'lite\');" onmouseout="odl_seqAlpha(odl_seqButtonPrev,odl_seqTransValue);odl_controlMousing(\'previous\',\'norm\');"><img id="odl_control_previous" name="odl_control_previous" src="overdisplay/odl_images/odl_control_previous_norm.png" width="75" height="25" align="top" alt="PREVIOUS" border="0"></a></div>');
  odl_seqButtonPrev = odl_setReference('odl_seqButtonPrev');
// The NEXT button (odl_seqButtonPrev)
// (the image of the button is in this IMG tag - make sure it is updated if you alter the button)
  document.writeln('<div id="odl_seqButtonNext" style="z-layer: 5; opacity:0.25; filter:alpha(opacity=25); position: absolute; margin: 0px; padding: 0px; top: 0px; left: 0px; visibility: hidden;"><a href="javascript:odl_cycleOverDispLay(1);" onmouseover="odl_seqAlpha(odl_seqButtonNext,odl_seqOpaqueValue);odl_controlMousing(\'next\',\'lite\');" onmouseout="odl_seqAlpha(odl_seqButtonNext,odl_seqTransValue);odl_controlMousing(\'next\',\'norm\');"><img id="odl_control_next" name="odl_control_next" src="overdisplay/odl_images/odl_control_next_norm.png" width="75" height="25" align="top" alt="NEXT" border="0"></a></div>');
  odl_seqButtonNext = odl_setReference('odl_seqButtonNext');
// Lastly, assign a dummy function to odl_displayContainer to work around IE misbehavior regarding iframe "onload" functionality
  odl_displayContainer.revealMe = function() {
    return;
  }
}

// This function is used to assign DOM object references to variables for ease of reference.
// elementId: is the string ID of the DOM object
// the function returns the object itself
function odl_setReference(elementId) {
  var d = document;
  var el=d.getElementById?d.getElementById(elementId):d.all[elementId];
  return el;
}

// This function gets the browser view's width and height, regardless of scrolling
// It returns an array: value[0] is the width and value[1] is the height
function odl_getViewWdHt() {
  var browserViewWidth, browserViewHeight;
// Have to check across browsers and platforms for the right reference
  if (self.innerHeight) {
    if(document.documentElement.clientWidth){
      browserViewWidth = document.documentElement.clientWidth; 
    } else {
      browserViewWidth = self.innerWidth;
    }
    browserViewHeight = self.innerHeight;
  } else if (document.documentElement && document.documentElement.clientHeight) {
    browserViewWidth = document.documentElement.clientWidth;
    browserViewHeight = document.documentElement.clientHeight;
  } else if (document.body) {
    browserViewWidth = document.body.clientWidth;
    browserViewHeight = document.body.clientHeight;
  }
// And return the values found
  return [browserViewWidth,browserViewHeight];
}

// This function gets the browser view's width and height, INCLUDING scrolling (full size of the HTML in the browser)
// It returns an array: value[0] is the width and value[1] is the height
function odl_getAvailableWdHt() {
// First examine the scrolling range
  var scrollX, scrollY;
// Have to check across browsers and platforms for the right reference
  if (window.innerHeight && window.scrollMaxY) {	
    scrollX = window.innerWidth + window.scrollMaxX;
    scrollY = window.innerHeight + window.scrollMaxY;
  } else if (document.body.scrollHeight > document.body.offsetHeight){
    scrollX = document.body.scrollWidth;
    scrollY = document.body.scrollHeight;
  } else {
    scrollX = document.body.offsetWidth;
    scrollY = document.body.offsetHeight;
	}
// Next, get the browser view's dimensions WITHOUT scrolling (call the previous function)
  var browserView = odl_getViewWdHt();
// Determine the correct version of the height to use (whichever is larger)
  if(scrollY < browserView[1]){
    availableHeight = browserView[1];
  } else { 
    availableHeight = scrollY;
  }
// Determine the correct version of the width to use (whichever is larger)
  if(scrollX < browserView[0]){	
    availableWidth = scrollX;		
  } else {
    availableWidth = browserView[0];
  }
// And return the final values
  return [availableWidth,availableHeight];
}

// This function resizes a DOM object
// el: is the object reference (not a string)
// toWd: is the width to resize the element to, in pixels
// toHt: is the height to resize the element to, in pixels
function odl_resizeElement(el,toWd,toHt) {
  el.style.width = toWd + 'px';
  el.style.height = toHt + 'px';
}

// This function resizes the OverDispLay
// to match the dimensions of the browser
// (so that the dimming fade appears uniform).
function odl_resizeOverDispLay() {
// Get the full browser dimensions
  var availableWdHt = odl_getAvailableWdHt();
// Resize odl_fadeOverLay to match
  odl_resizeElement(odl_fadeOverLay,availableWdHt[0],availableWdHt[1]);
}

// This function centers an element within the browser (vertically AND horizontally)
// el: is the object reference (not a string)
function odl_centerElement(el) {
// Get ONLY the browser view dimensions (not with scrolling)
  var availableWdHt = odl_getViewWdHt();
// Get the element's dimensions
  var elWd = parseInt(el.style.width);
  var elHt = parseInt(el.style.height);
// Do the math to figure out where to place the element
  var centerElementTop = Math.floor((availableWdHt[1] - elHt)/2);
  var centerElementLeft = Math.floor((availableWdHt[0] - elWd)/2);
// Don't let the element go off the top or left sides
  centerElementTop = centerElementTop>0 ? centerElementTop : 0;
  centerElementLeft = centerElementLeft>0 ? centerElementLeft : 0;
// Reposition the element
  el.style.top = centerElementTop + 'px';
  el.style.left = centerElementLeft + 'px';
}

// This function centers the elements of the OverDispLay that require centering
// (The preloader and the display layer itself)
function odl_centerOverDispLay() {
  odl_centerElement(odl_preLoader);
  odl_centerElement(odl_displayLayer);
}

// This function places the sequencing buttons in relation to the display layer
function odl_moveSeqButtons() {
// Find where the TOP of the buttons should be
  var seqTop;
  if (parseInt(odl_displayLayer.style.height)<odl_seqButtonHeight) {
    seqTop = parseInt(odl_displayLayer.style.top);
  } else if (parseInt(odl_displayLayer.style.height)<odl_seqButtonOffsetY+odl_seqButtonHeight) {
    seqTop = Math.floor( ( parseInt(odl_displayLayer.style.top) - parseInt(odl_displayLayer.style.height) ) /2);
  } else {
    seqTop = parseInt(odl_displayLayer.style.top) + odl_seqButtonOffsetY;
  }
// Find where the left of the PREVIOUS button should be
  var seqXPrev = parseInt(odl_displayLayer.style.left);
// Find where the left of the NEXT button should be
  var seqXNext = parseInt(odl_displayLayer.style.left) + parseInt(odl_displayLayer.style.width) - odl_seqButtonWidth;
// Reposition the buttons
  odl_seqButtonPrev.style.top = odl_seqButtonNext.style.top = seqTop + odl_borderThickness + 'px';
  odl_seqButtonPrev.style.left = seqXPrev + odl_borderThickness + 'px';
  odl_seqButtonNext.style.left = seqXNext + odl_borderThickness + 'px';
}

// This function alters the alpha (opacity/transparency) of an element
// el: is the object reference (not a string)
// alphaValue: is an INTEGER: 0 is totally transparent, 100 is totally opaque
function odl_seqAlpha(el,alphaValue) {
// Get the version of the value for "opacity" style
  opacVal = (alphaValue/100);
// Set the "opacity" style
  el.style.opacity = opacVal.toString();
// Set the "filter" style
  el.style.filter = 'alpha(opacity='+alphaValue+')';
}

// This function starts up the whole OverDispLay package
// NOTE: This function MUST be called just before the end of the HTML page's body (before the </body> tag), with the following code...
// <script type="text/javascript" language="javascript">
//   odl_initOverDispLay();
// </script>
function odl_initOverDispLay() {
// Make the OverDispLay
  odl_constructOverDispLay();
// Get it to fill the browser
  odl_resizeOverDispLay();
// Center any elements that need centering
  odl_centerOverDispLay();
// Position the sequencing buttons appropriately
  odl_moveSeqButtons();
}

// This function determines if a given piece is in a given category (industry OR project)
// i: is the array number of the piece
// whatCat: is the string of keyword(s) to look for in the categories
function odl_isInCategory(i,whatCat) {
  var giveBack = false;
  if (whatCat.indexOf(odl_displayPiece[i].industry)>-1 || whatCat.indexOf(odl_displayPiece[i].project)>-1 || whatCat=='odl_all') {
    giveBack = true;
  }
  return giveBack;
}

// This function loads the display piece's URL into the display
// It also assigns the onload behavior (revealMe is a workaround to avoid IE misbehavior)
function odl_retrieveSample(urlToDisplay) {
// Make sure there is a URL
  if (urlToDisplay!='undefined') {
// Load up the URL
    odl_displayContainer.src = urlToDisplay;
    odl_consoleReport.innerHTML = 'Project '+(odl_currDisplayPiece+1)+' out of '+odl_numDisplayPieces+'.';
// When the URL is loaded, unhide the display again (it should always be hidden before this function is called)
// and hide/unhide all necessary elements
    odl_displayContainer.revealMe = function() {
      odl_unHideElement(odl_consoleReport);
      odl_unHideElement(odl_displayContainer);
      odl_hideElement(odl_preLoader);
      var numInCategory = 0;
      var i = 0;
      for(i=0;i<odl_numDisplayPieces;i++) {
        if (odl_isInCategory(i,odl_currDisplayCategory)) {
            numInCategory++;
        }
      }
      if (numInCategory>1) {
        odl_unHideElement(odl_seqButtonPrev);
        odl_unHideElement(odl_seqButtonNext);
      }
    }
  } else {
// If there's no URL provided, then close down the entire OverDispLay
    odl_closeOverDispLay()
  }
}

// This function reveals the given element
// id: is the actual ID of the HTML DOM element
function odl_unHideElement(el) {
  el.style.visibility = 'visible';
}

// This function hides the given element
// id: is the actual ID of the HTML DOM element
function odl_hideElement(el) {
  el.style.visibility = 'hidden';
}

// This function opens up the OverDispLay feature
// pieceLabel: is the LABEL of the display piece to load first (as defined in the list of pieces above)
// OR
// pieceCategory: is the category (keywords) of the pieces to view -- the first in the category will come up first
function odl_openOverDispLay(pieceLabel,pieceCategory) {
// First reveal the dimmer fade, the display layer, and the preLoader
  odl_unHideElement(odl_fadeOverLay);
  odl_resizeOverDispLay();
  odl_unHideElement(odl_displayLayer);
  odl_unHideElement(odl_preLoader);
// Assign the current display number
  if (pieceLabel!='odl_undefined') {
// If given a label, use that piece
    odl_currDisplayPiece = odl_convertLabelToNum(pieceLabel);
// And assign the category if it's given
    if (pieceCategory!='odl_undefined') odl_currDisplayCategory = pieceCategory;
  } else if (pieceCategory!='odl_undefined') {
// If given no label, but a category, go to the first piece in that category, or the first piece in the collection if the category isn't found
    odl_currDisplayPiece = 0;
    for(i=0;i<odl_numDisplayPieces;i++) {
      if (odl_isInCategory(i,pieceCategory)) {
        odl_currDisplayPiece = i;
        break;
      }
    }
    odl_currDisplayCategory = pieceCategory;
  } else {
// If given no label or category, go to the first piece in the collection
    odl_currDisplayPiece = 0;
    odl_currDisplayCategory = 'odl_all';
  }
// Determine the URL of the current display piece
  var urlToDisplay = odl_displayPiece[odl_currDisplayPiece].url;
// Call to load up the display piece
  odl_retrieveSample(urlToDisplay);
}

// This function closes down the OverDispLay feature
function odl_closeOverDispLay() {
// Simply hide all the necessary elements in the OverDispLay
  odl_hideElement(odl_preLoader);
  odl_hideElement(odl_consoleReport);
  odl_hideElement(odl_seqButtonPrev);
  odl_hideElement(odl_seqButtonNext);
  odl_hideElement(odl_displayLayer);
  odl_hideElement(odl_displayContainer);
  odl_hideElement(odl_fadeOverLay);
}

// This function allows the sequencing buttons (PREVIOUS and NEXT) to work in OverDispLay
// whichWay: is either -1 (previous) or 1 (next)
// You might do creative things with different numbers, but it should always be a non-zero integer
function odl_cycleOverDispLay(whichWay) {
  whichWay = Math.round(whichWay);
  odl_hideElement(odl_consoleReport);
  odl_hideElement(odl_seqButtonPrev);
  odl_hideElement(odl_seqButtonNext);
  odl_hideElement(odl_displayContainer);
  odl_unHideElement(odl_preLoader);
// Determine if OverDispLay should go to the "next" piece, or the next IN CATEGORY
  if (odl_currDisplayCategory=='odl_all' || odl_currDisplayCategory=='undefined') {
    odl_currDisplayPiece = odl_wrapAroundNum(0,odl_numDisplayPieces-1,odl_currDisplayPiece,whichWay);
  } else {
    var foundSibling = false;
    var i = 0;
    while (!foundSibling && i<odl_numDisplayPieces) {
      odl_currDisplayPiece = odl_wrapAroundNum(0,odl_numDisplayPieces-1,odl_currDisplayPiece,whichWay);
      i++
      if (odl_isInCategory(odl_currDisplayPiece,odl_currDisplayCategory)) {
          foundSibling = true;
      }
    }
  }
  var urlToDisplay = odl_displayPiece[odl_currDisplayPiece].url;
  odl_retrieveSample(urlToDisplay);
}

// This function performs any necessary upkeep when the user resizes the browser
function odl_resizeCheck() {
// First it resizes the OverDispLay to fit the new browser view
  odl_resizeOverDispLay();
// Then it centers any necessary elements in the new view
  odl_centerOverDispLay();
// And it repositions the sequencing buttons as needed
  odl_moveSeqButtons();
}

// NOTE: OverDispLay assigns a window.onresize function - if you use your own, make sure it
// contains the code from ODL's onresize as well (and then remove or comment out the ODL onresize function below).
// You only need to make sure to call the odl_resizeCheck() function within your own window.onresize function.
window.onresize = function() {
  odl_resizeCheck();
}

// -->
