// JavaScript Document

		var panes = 7;			// The number of panels we have
		var paneheight = 304;	// How tall is the panel? Should match 'height' css property for .pane and .holder
		var paneslide = 680;	// This is how far we want the panes to actually *slide*. Rena
		
		var linkcount = 30;		// How many link boxes we want to use to define the angle. The more we use, the more precise (but the slower on some older systems)
		var linkwidth = 34;		// The width of the diagonal link measured across the very top (ie how thick is the line)
		var linkheight = paneheight / linkcount; // The height of the individual link boxes.
		
		var skew = 1.75;			// How far to 'skew' each subsequent link box. You'll need to play with this to get it just right. Use decimals for precision.
		var offset = 1;			// Just a general pixel offset to shove the boxes over to better center them. Adjust as needed.
		
		var ticks = 10;			// How many ticks to use.
		var interval = 25;		// Interval in milliseconds between ticks.
		var tick = 0;			// Current Tick.
		var clickAllowed = 1;	// Boolean to decide whether to ignore clicks or not (important if there is already a panel sliding).
		
		var current = 0;		// Current (last clicked) pane.
		
		function initAccordiagonal()
		{
			var holder = document.getElementById("holder");
			for (x = 0; x < panes; x++)
			{
				var paneleft = x * linkwidth;
		
				pane = document.getElementById("pane" + x);
				pane.style.left = paneleft + (x == current ? 0 : paneslide) + "px";
				for (y = 0; y < linkcount; y++)
				{
					var click = document.createElement('div');
					click.id = "panelink_" + x + "_" + y;
					click.className = "panelink";
					click.style.width = linkwidth + "px";
					click.style.height = linkheight + "px";
					click.style.top = y * linkheight + "px";
					click.style.left = ((linkwidth * x) + (skew * y) + offset + (x == current ? 0 : paneslide)) + "px";
					var func = "doClick(" + x + ")";
					//click.onclick = new Function(func);
					click.onmouseover = new Function(func);
					holder.appendChild(click);
				}
				pane.style.display="inline";
			}
		}
		
		// This is called when the user clicks on a panel.
		function doClick(activepane)
		{
			if (clickAllowed) // only go further if we're listening for clicks at present.
			{
				if (activepane == current) return; // If they're just clicking on the active tab, ignore it
				tick = 0; // Reset Tick count.
				clickAllowed = 0; // Disable clicks
				if (activepane > current) // Take action if they've clicked on a pane higher up in the list
				{
					slidePanel(current + 1, activepane, -1); // Start the slides.
				}
				else
				{
					slidePanel(activepane + 1, current, 1); // start the slides the other way.
				}
				current = activepane; // Set the clicked pane to be the current one.
			}
		}
		
		// This is the repeating function that actually moves the divs around.
		function slidePanel(startpane, endpane, direction)
		{
			if (tick >= ticks) { clickAllowed = 1; return; } // When the cycle is over, turn on clicks again and exit the loop.
		
			distance = paneslide / ticks; // Determines how far to move the panels.
			for (x = startpane; x <= endpane; x++)
			{
				moveDiv("pane" + x, direction * distance); // Calls the movement function for the main pane
				for (y = 0; y < linkcount; y++)
				{
					moveDiv("panelink_" + x + "_" + y, direction * distance); // Calls it again for each of the link boxes.
				}
			}
			tick++; // Increase tick count
			tft = "slidePanel(" + startpane + "," + endpane + "," + direction + ")"; // Set up the function call for the next loop.
			timefunc = new Function(tft); // Create the function.
			setTimeout(timefunc, interval); // Set the timer.
		}
		
		// This function actually does the moving. It just grabs the div by ID and then increments (or decrements) its .left property by the specified amount.
		function moveDiv(divname, amount)
		{
			div = document.getElementById(divname);
			div.style.left = (parseInt(div.style.left.replace("px","")) + amount) + "px";
		}