's used to hold the closebox, image, and zoom shadow.
// It's a lot of Javascript for a little HTML. But, hey, this must be the "right way", though, yeah?
// I'd also like to ask forgiveness for the large amounts of tables in use. Sometimes, CSS just doesn't cut it... I think.
var inBody = document.getElementsByTagName("body").item(0);
// WAIT SPINNER
var inSpinbox = document.createElement("div");
inSpinbox.setAttribute('id', 'ZoomSpin');
inSpinbox.style.position = 'absolute';
inSpinbox.style.left = '10px';
inSpinbox.style.top = '10px';
inSpinbox.style.visibility = 'hidden';
inSpinbox.style.zIndex = '5000';
inBody.insertBefore(inSpinbox, inBody.firstChild);
var inSpinImage = document.createElement("img");
inSpinImage.setAttribute('id', 'SpinImage');
inSpinImage.setAttribute('src', zoomImageURI+'zoom-spin-1.png');
inSpinbox.appendChild(inSpinImage);
// ZOOM IMAGE
//
//
var inZoombox = document.createElement("div");
inZoombox.setAttribute('id', 'ZoomBox');
inZoombox.style.position = 'absolute';
inZoombox.style.left = '10px';
inZoombox.style.top = '10px';
inZoombox.style.visibility = 'hidden';
inZoombox.style.zIndex = '499';
// inZoombox.style.background = 'white'; // DEBUG
inBody.insertBefore(inZoombox, inSpinbox.nextSibling);
var inLink1 = document.createElement("a");
inLink1.setAttribute('href','javascript:zoomOut();');
inZoombox.appendChild(inLink1);
var inImage1 = document.createElement("img");
inImage1.setAttribute('src',zoomImageURI+'spacer.gif');
inImage1.setAttribute('id','ZoomImage');
inImage1.setAttribute('border', '0');
inImage1.setAttribute('onMouseOver', 'zoomMouseOver();')
inImage1.setAttribute('onMouseOut', 'zoomMouseOut();')
inImage1.style.display = 'block';
inImage1.style.width = '10px';
inImage1.style.height = '10px';
inLink1.appendChild(inImage1);
var inClosebox = document.createElement("div");
inClosebox.setAttribute('id', 'ZoomClose');
inClosebox.style.position = 'absolute';
inClosebox.style.left = '-15px';
inClosebox.style.top = '-15px';
inClosebox.style.filter = 'alpha(opacity=0)';
inClosebox.style.MozOpacity = '0';
inClosebox.style.opacity = '0';
inClosebox.style.visibility = 'hidden';
inZoombox.appendChild(inClosebox);
var inLink2 = document.createElement("a");
inLink2.setAttribute('href','javascript:zoomOut(1);');
inClosebox.appendChild(inLink2);
var inImage2 = document.createElement("img");
inImage2.setAttribute('src',zoomImageURI+'closebox.png');
inImage2.setAttribute('width','30');
inImage2.setAttribute('height','30');
inImage2.setAttribute('border','0');
inLink2.appendChild(inImage2);
// SHADOW
// Now, the.. shudder.. shadow table.
//
X
//
//  |
// |
//  |
//
var inShadowbox = document.createElement("div");
inShadowbox.setAttribute('id', 'ShadowBox');
inShadowbox.style.position = 'absolute';
inShadowbox.style.left = '50px';
inShadowbox.style.top = '50px';
inShadowbox.style.width = '100px';
inShadowbox.style.height = '100px';
inShadowbox.style.visibility = 'hidden';
inShadowbox.style.zIndex = '45';
inBody.insertBefore(inShadowbox, inZoombox.nextSibling);
var inTable = document.createElement("table");
inTable.setAttribute('border', '0');
inTable.setAttribute('width', '100%');
inTable.setAttribute('height', '100%');
inTable.setAttribute('cellpadding', '0');
inTable.setAttribute('cellspacing', '0');
inShadowbox.appendChild(inTable);
var inRow1 = document.createElement("tr");
inRow1.style.height = '25px';
inTable.appendChild(inRow1);
var inCol1 = document.createElement("td");
inCol1.style.width = '27px';
inRow1.appendChild(inCol1);
var inShadowImg1 = document.createElement("img");
inShadowImg1.setAttribute('src', zoomImageURI+'zoom-shadow1.png');
inShadowImg1.setAttribute('width', '27');
inShadowImg1.setAttribute('height', '25');
inShadowImg1.style.display = 'block';
inCol1.appendChild(inShadowImg1);
var inCol2 = document.createElement("td");
inCol2.setAttribute('background', zoomImageURI+'zoom-shadow2.png');
inRow1.appendChild(inCol2);
// inCol2.innerHTML = '![](;
var inSpacer1 = document.createElement("img");
inSpacer1.setAttribute()
// |
// |
// |
//
inRow2 = document.createElement("tr");
inTable.appendChild(inRow2);
var inCol4 = document.createElement("td");
inCol4.setAttribute('background', zoomImageURI+'zoom-shadow4.png');
inRow2.appendChild(inCol4);
// inCol4.innerHTML = ' ';
var inSpacer2 = document.createElement("img");
inSpacer2.setAttribute('src',zoomImageURI+'spacer.gif');
inSpacer2.setAttribute('height', '1');
inSpacer2.setAttribute('width', '1');
inSpacer2.style.display = 'block';
inCol4.appendChild(inSpacer2);
var inCol5 = document.createElement("td");
inCol5.setAttribute('bgcolor', '#ffffff');
inRow2.appendChild(inCol5);
// inCol5.innerHTML = ' ';
var inSpacer3 = document.createElement("img");
inSpacer3.setAttribute('src',zoomImageURI+'spacer.gif');
inSpacer3.setAttribute('height', '1');
inSpacer3.setAttribute('width', '1');
inSpacer3.style.display = 'block';
inCol5.appendChild(inSpacer3);
var inCol6 = document.createElement("td");
inCol6.setAttribute('background', zoomImageURI+'zoom-shadow5.png');
inRow2.appendChild(inCol6);
// inCol6.innerHTML = ' ';
var inSpacer4 = document.createElement("img");
inSpacer4.setAttribute('src',zoomImageURI+'spacer.gif');
inSpacer4.setAttribute('height', '1');
inSpacer4.setAttribute('width', '1');
inSpacer4.style.display = 'block';
inCol6.appendChild(inSpacer4);
//
// 
// | |
//  |
//
//
var inRow3 = document.createElement("tr");
inRow3.style.height = '26px';
inTable.appendChild(inRow3);
var inCol7 = document.createElement("td");
inCol7.style.width = '27px';
inRow3.appendChild(inCol7);
var inShadowImg7 = document.createElement("img");
inShadowImg7.setAttribute('src', zoomImageURI+'zoom-shadow6.png');
inShadowImg7.setAttribute('width', '27');
inShadowImg7.setAttribute('height', '26');
inShadowImg7.style.display = 'block';
inCol7.appendChild(inShadowImg7);
var inCol8 = document.createElement("td");
inCol8.setAttribute('background', zoomImageURI+'zoom-shadow7.png');
inRow3.appendChild(inCol8);
// inCol8.innerHTML = ' ';
var inSpacer5 = document.createElement("img");
inSpacer5.setAttribute('src',zoomImageURI+'spacer.gif');
inSpacer5.setAttribute('height', '1');
inSpacer5.setAttribute('width', '1');
inSpacer5.style.display = 'block';
inCol8.appendChild(inSpacer5);
var inCol9 = document.createElement("td");
inCol9.style.width = '27px';
inRow3.appendChild(inCol9);
var inShadowImg9 = document.createElement("img");
inShadowImg9.setAttribute('src', zoomImageURI+'zoom-shadow8.png');
inShadowImg9.setAttribute('width', '27');
inShadowImg9.setAttribute('height', '26');
inShadowImg9.style.display = 'block';
inCol9.appendChild(inShadowImg9);
if (includeCaption == 1) {
// CAPTION
//
//
//
//  |
// |
//  |
//
//
var inCapDiv = document.createElement("div");
inCapDiv.setAttribute('id', 'ZoomCapDiv');
inCapDiv.style.display = 'none';
inCapDiv.style.marginLeft = '13px';
inCapDiv.style.marginRight = '13px';
inShadowbox.appendChild(inCapDiv);
var inCapTable = document.createElement("table");
inCapTable.setAttribute('border', '0');
inCapTable.setAttribute('cellpadding', '0');
inCapTable.setAttribute('cellspacing', '0');
inCapTable.setAttribute('align', 'center');
inCapDiv.appendChild(inCapTable);
var inCapRow1 = document.createElement("tr");
inCapTable.appendChild(inCapRow1);
var inCapCol1 = document.createElement("td");
inCapRow1.appendChild(inCapCol1);
var inCapImg1 = document.createElement("img");
inCapImg1.setAttribute('src', zoomImageURI+'zoom-caption-l.png');
inCapImg1.setAttribute('width', '13');
inCapImg1.setAttribute('height', '26');
inCapImg1.style.display = 'block';
inCapCol1.appendChild(inCapImg1);
var inCapCol2 = document.createElement("td");
inCapCol2.setAttribute('background', zoomImageURI+'zoom-caption-fill.png');
inCapCol2.setAttribute('id', 'ZoomCaption');
inCapCol2.setAttribute('valign', 'middle');
inCapCol2.style.fontSize = '14px';
inCapCol2.style.fontFamily = 'Helvetica';
inCapCol2.style.fontWeight = 'bold';
inCapCol2.style.color = '#ffffff';
inCapCol2.style.textShadow = '0px 2px 4px #000000';
inCapCol2.style.whiteSpace = 'nowrap';
inCapRow1.appendChild(inCapCol2);
var inCapCol3 = document.createElement("td");
inCapRow1.appendChild(inCapCol3);
var inCapImg2 = document.createElement("img");
inCapImg2.setAttribute('src', zoomImageURI+'zoom-caption-r.png');
inCapImg2.setAttribute('width', '13');
inCapImg2.setAttribute('height', '26');
inCapImg2.style.display = 'block';
inCapCol3.appendChild(inCapImg2);
}
}
//
// CodaEffects.js - (C) 2007 Panic, Inc.
//
// Used to scroll our tabbed view, display our download popup, and display the giant dialog.
// Requires: Effects.js
//
// Not for redistribution.
// Scroll: Setup Scrolling Stuff
var currentSection = "sites-pane"; // The default loaded section on the page
var tabTag = "-tab";
var paneTag = "-pane";
// Scroll the page manually to the position of element "link", passed to us.
function ScrollSection(link, scrollArea, offset)
{
// Store the last section, and update the current section
if (currentSection == link) {
return;
}
lastSection = currentSection;
currentSection = link;
// Change the section highlight.
// Extract the root section name, and use that to change the background image to 'top', revealing the alt. state
sectionTab = currentSection.split("-")[0] + tabTag;
document.getElementById(sectionTab).className = "active";
if (lastSection) {
lastTab = lastSection.split("-")[0] + tabTag;
document.getElementById(lastTab).className = "inactive";
}
// Get the element we want to scroll, get the position of the element to scroll to
theScroll = document.getElementById(scrollArea);
position = findElementPos(document.getElementById(link));
// Get the position of the offset div -- the div at the far left.
// This is the amount we compensate for when scrolling
if (offset != "") {
offsetPos = findElementPos(document.getElementById(offset));
position[0] = position[0] - offsetPos[0];
}
scrollStart(theScroll, theScroll.scrollLeft, position[0], "horiz");
// return false;
}
// Scroll the page using the arrows
function ScrollArrow(direction, toolbar, scrollArea, offset) {
toolbarElem = document.getElementById(toolbar);
toolbarNames = new Array();
// Find all the
elements in the toolbar, and extract their id's into an array.
if (toolbarElem.hasChildNodes())
{
var children = toolbarElem.childNodes;
for (var i = 0; i < children.length; i++)
{
if (toolbarElem.childNodes[i].tagName == "LI") {
toolbarNames.push(toolbarElem.childNodes[i].id.split("-")[0]);
}
}
}
// Now iterate through our array of tab names, find matches, and determine where to go.
for (var i = 0; i < toolbarNames.length; i++) {
if (toolbarNames[i] == currentSection.split("-")[0]) {
if (direction == "left") {
if (i - 1 < 0) {
gotoTab = toolbarNames[toolbarNames.length - 1];
} else {
gotoTab = toolbarNames[i - 1];
}
} else {
if ((i + 1) > (toolbarNames.length - 1)) {
gotoTab = toolbarNames[0];
} else {
gotoTab = toolbarNames[i + 1];
}
}
}
}
// Go to the section name!
ScrollSection(gotoTab+paneTag, scrollArea, offset);
}
//
// Animated Scroll Functions
// Scrolls are synchronous -- only one at a time.
//
var scrollanim = {time:0, begin:0, change:0.0, duration:0.0, element:null, timer:null};
function scrollStart(elem, start, end, direction)
{
//console.log("scrollStart from "+start+" to "+end+" in direction "+direction);
if (scrollanim.timer != null) {
clearInterval(scrollanim.timer);
scrollanim.timer = null;
}
scrollanim.time = 0;
scrollanim.begin = start;
scrollanim.change = end - start;
scrollanim.duration = 25;
scrollanim.element = elem;
if (direction == "horiz") {
scrollanim.timer = setInterval("scrollHorizAnim();", 15);
}
else {
scrollanim.timer = setInterval("scrollVertAnim();", 15);
}
}
function scrollVertAnim()
{
if (scrollanim.time > scrollanim.duration) {
clearInterval(scrollanim.timer);
scrollanim.timer = null;
}
else {
move = sineInOut(scrollanim.time, scrollanim.begin, scrollanim.change, scrollanim.duration);
scrollanim.element.scrollTop = move;
scrollanim.time++;
}
}
function scrollHorizAnim()
{
if (scrollanim.time > scrollanim.duration) {
clearInterval(scrollanim.timer);
scrollanim.timer = null;
}
else {
move = sineInOut(scrollanim.time, scrollanim.begin, scrollanim.change, scrollanim.duration);
scrollanim.element.scrollLeft = move;
scrollanim.time++;
}
}
//
// LARGE POPUP: Full-Screen Pop-up Functions
//
function showLargePopup(elem) {
var popFullscreen = document.getElementById('fullscreen');
var popLarge = document.getElementById('largepopup');
// Put the correct content in the pop-up
//if (navigator.platform.indexOf('Mac') != -1) {
// document.getElementById('start-download').className = 'show';
// document.getElementById('wrong-os').className = 'hide';
//} else {
// document.getElementById('start-download').className = 'hide';
// document.getElementById('wrong-os').className = 'show';
//}
document.getElementById('start-download').className = 'show';
// document.getElementById('wrong-os').className = 'hide';
// Make fullscreen thing really full screen, and show it
getSize();
popFullscreen.style.height = myScrollHeight + 'px';
popFullscreen.style.display = 'block';
// Position pop-up
popLarge.style.left = ((myWidth - popLarge.offsetWidth) / 2) + 'px';
popLarge.style.top = (((myHeight - popLarge.offsetHeight) / 2) + myScroll) + 'px';
popLarge.style.visibility = 'visible';
refreshTimer = setTimeout("setLocation('"+elem.getAttribute("href")+"')", 1500);
}
function setLocation(loc) {
window.location = loc;
}
function hideLargePopup() {
var popFullscreen = document.getElementById('fullscreen');
var popLarge = document.getElementById('largepopup');
popLarge.style.visibility = 'hidden';
popFullscreen.style.display = 'none';
}
//
// DOWNLOAD SMALL POPUP: Download Hint Pop-up Functions
//
// An advantage of using a timer to do a hide is that we can ignore
// any spurious mouseOut events that have bubbled up, into 's, etc.
var dpopTimer = "";
function showDownloadPopup(e) {
var popDownload = document.getElementById('dpop');
var btnDownload = document.getElementById('download');
if (moveanim.timer != null) {
clearInterval(moveanim.timer);
moveanim.timer = null;
}
// Determine where we should pop up in relation to the download button
position = findElementPos(btnDownload);
popDownload.style.top = (position[1] - (popDownload.offsetHeight - 40)) +"px";
popDownload.style.left = "5" + "px";
// If already trigger a rollover, cancel it because we're back in
if (dpopTimer != "")
{
clearTimeout(dpopTimer);
dpopTimer = "";
} else {
setOpacity(0, 'dpop');
popDownload.style.visibility = 'visible';
moveStart(popDownload, parseInt(popDownload.style.left), parseInt(popDownload.style.left), parseInt(popDownload.style.top) + 10, parseInt(popDownload.style.top), 15);
fadeElementSetup('dpop', 0, 100, 13);
}
}
function hideDownloadPopup() {
// Start timer to hide the pop-up and the overlay
dpopTimer = setTimeout("actuallyHide()", 500);
}
function actuallyHide() {
var popDownload = document.getElementById('dpop');
if (dpopTimer != "")
{
dpopTimer = "";
moveStart(popDownload, parseInt(popDownload.style.left), parseInt(popDownload.style.left), parseInt(popDownload.style.top), parseInt(popDownload.style.top) - 10, 15);
fadeElementSetup('dpop', 100, 0, 13, 1);
}
}
//
// MOVE: Animate the move of an element.
//
// Move is also synchronous. One at a time, please.
//
var moveanim = {time:0, beginX:0, changeX:0.0, beginY:0, changeY:0, duration:0.0, element:null, timer:null};
function moveStart(elem, startX, endX, startY, endY, duration)
{
if (moveanim.timer != null) {
clearInterval(moveanim.timer);
moveanim.timer = null;
}
moveanim.time = 0;
moveanim.beginX = startX;
moveanim.changeX = endX - startX;
moveanim.beginY = startY;
moveanim.changeY = endY - startY;
moveanim.duration = duration;
moveanim.element = elem;
moveanim.timer = setInterval("moveAnimDo();", 15);
}
function moveAnimDo()
{
if (moveanim.time > moveanim.duration) {
clearInterval(moveanim.timer);
moveanim.timer = null;
}
else {
moveX = cubicOut(moveanim.time, moveanim.beginX, moveanim.changeX, moveanim.duration);
moveY = cubicOut(moveanim.time, moveanim.beginY, moveanim.changeY, moveanim.duration);
moveanim.element.style.left = moveX + "px";
moveanim.element.style.top = moveY + "px";
moveanim.time++;
}
}
//console.log("Initialized");
| 
// 
//