//
//
// 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;
}

//
//
// 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 = 10;
	scrollanim.element = elem;
	
	if (direction == "horiz") {
		scrollanim.timer = setInterval("scrollHorizAnim();", 15);
	}

}

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++;
	}
}


//
//
// Used for fading / zooming image effects.
// Convenience functions: show / hide an element with a fade.
//
//

function fadeOut(elem) {
	if (elem.id) {
		fadeElementSetup(elem.id, 100, 0, 10);
	}
}

function fadeIn(elem) {
	if (elem.id) {
		fadeElementSetup(elem.id, 0, 100, 10);	
	}
}

// Fade: Initialize the fade function

var fadeActive = new Array();
var fadeQueue  = new Array();
var fadeTimer  = new Array();
var fadeClose  = new Array();

function fadeElementSetup(theID, fdStart, fdEnd, fdSteps, fdClose) {

	if (fadeActive[theID] == true) {
		// Already animating, queue up this command
		fadeQueue[theID] = new Array(theID, fdStart, fdEnd, fdSteps);
	} else {
		fadeSteps = fdSteps;
		fadeCurrent = 0;
		fadeAmount = (fdStart - fdEnd) / fadeSteps;
		fadeTimer[theID] = setInterval("fadeElement('"+theID+"', '"+fadeCurrent+"', '"+fadeAmount+"', '"+fadeSteps+"')", 20);
		fadeActive[theID] = true;
		if (fdClose == 1) {
			fadeClose[theID] = true;
		} else {
			fadeClose[theID] = false;
		}
	}
}

// Fade: Do the fade. This function will call itself, modifying the parameters, so
// many instances can run concurrently.

function fadeElement(theID, fadeCurrent, fadeAmount, fadeSteps) {
  
	if (fadeCurrent == fadeSteps) {

	    // We're done, so clear.
	    clearInterval(fadeTimer[theID]);
	    fadeActive[theID] = false;
	    
	    // Should we close it?
	    
	    if (fadeClose[theID] == true) {
	    	document.getElementById(theID).style.visibility = "hidden";
	    }
	    
	    // Hang on.. did a command queue while we were working? If so, make it happen now
	    
	    if (fadeQueue[theID] && fadeQueue[theID] != false) {
	    	fadeElementSetup(fadeQueue[theID][0], fadeQueue[theID][1], fadeQueue[theID][2], fadeQueue[theID][3]);
	    	fadeQueue[theID] = false;
	    }  
  
	} else {
  
		fadeCurrent++;
		
		// Set the opacity depending on if we're adding or subtracting (pos or neg)
		if (fadeAmount < 0) {
			setOpacity(Math.abs(fadeCurrent * fadeAmount), theID);
		} else {
			setOpacity(100 - (fadeCurrent * fadeAmount), theID);
		}
		
		// Keep going, and send myself the updated variables
		clearInterval(fadeTimer[theID]);
		fadeTimer[theID] = setInterval("fadeElement('"+theID+"', '"+fadeCurrent+"', '"+fadeAmount+"', '"+fadeSteps+"')", 15);
	}
}

// Utility: Set the opacity, compatible with a number of browsers. Value from 0 to 100.

function setOpacity(opacity, theID) {

	var object = document.getElementById(theID).style;

	// If it's 100, set it to 99 for Firefox.



	if (navigator.userAgent.indexOf("Firefox") != -1) {
		if (opacity == 100) { opacity = 99.9999; } // This is majorly retarded
	}

	// Multi-browser opacity setting

	object.filter = "alpha(opacity=" + opacity + ")"; // IE/Win
	//object.KhtmlOpacity = (opacity / 100);            // Safari 1.1 or lower, Konqueror
	//object.MozOpacity = (opacity / 100);              // Older Mozilla+Firefox
	object.opacity = (opacity / 100);                 // Safari 1.2, Firefox+Mozilla

}

//
//
// Utility: Math functions for animation calucations - From http://www.robertpenner.com/easing/
// t = time, b = begin, c = change, d = duration
// time = current frame, begin is fixed, change is basically finish - begin, duration is fixed (frames),
//
//

function linear(t, b, c, d)
{
	return c*t/d + b;
}

function sineInOut(t, b, c, d)
{
	return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}

function cubicIn(t, b, c, d) {
	return c*(t/=d)*t*t + b;
}

function cubicOut(t, b, c, d) {
	return c*((t=t/d-1)*t*t + 1) + b;
}

function cubicInOut(t, b, c, d)
{
	if ((t/=d/2) < 1) return c/2*t*t*t + b;
	return c/2*((t-=2)*t*t + 2) + b;
}

function bounceOut(t, b, c, d)
{
	if ((t/=d) < (1/2.75)){
		return c*(7.5625*t*t) + b;
	} else if (t < (2/2.75)){
		return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
	} else if (t < (2.5/2.75)){
		return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
	} else {
		return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
	}
}

//
//
// ----- DISPLAY CODE -----
//

function insertZoomHTML() {

  // All of this junk creates the three <div>'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+'img/loading.png');
  inSpinbox.appendChild(inSpinImage);

  // ZOOM IMAGE
  //
  // <div id="ZoomBox">
  //   <a href="javascript:zoomOut();"><img src="img/spacer.gif" id="ZoomImage" border="0"></a> <!-- THE IMAGE -->
  //   <div id="ZoomClose">
  //     <a href="javascript:zoomOut();"><img src="img/widget.png" width="30" height="30" border="0"></a>
  //   </div>
  // </div>

  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';
  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+'widget.png');
  inImage2.setAttribute('width','30');
  inImage2.setAttribute('height','30');
  inImage2.setAttribute('border','0');
  inLink2.appendChild(inImage2);
  
  // SHADOW
  // Now, the.. shudder.. shadow table.
  
  // <div id="ShadowBox"><table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0"> X
  //   <tr height="25">
  //   <td width="27"><img src="/images/zoom-shadow1.png" width="27" height="25"></td>
  //   <td background="/images/zoom-shadow2.png">&nbsp;</td>
  //   <td width="27"><img src="/images/zoom-shadow3.png" width="27" height="25"></td>
  //   </tr>

  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 = '<img src=';
  var inSpacer1 = document.createElement("img");
  inSpacer1.setAttribute('src',zoomImageURI+'spacer.gif');
  inSpacer1.setAttribute('height', '1');
  inSpacer1.setAttribute('width', '1');
  inSpacer1.style.display = 'block';
  inCol2.appendChild(inSpacer1);

  var inCol3 = document.createElement("td");
  inCol3.style.width = '27px';
  inRow1.appendChild(inCol3);  
  var inShadowImg3 = document.createElement("img");
  inShadowImg3.setAttribute('src', zoomImageURI+'zoom-shadow3.png');
  inShadowImg3.setAttribute('width', '27');
  inShadowImg3.setAttribute('height', '25');
  inShadowImg3.style.display = 'block';
  inCol3.appendChild(inShadowImg3);

  //   <tr>
  //   <td background="/images/zoom-shadow4.png">&nbsp;</td>
  //   <td bgcolor="#ffffff">&nbsp;</td>
  //   <td background="/images/zoom-shadow5.png">&nbsp;</td>
  //   </tr>

}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}