window.meatscience = {};
window.meatscience.buttonStartX = 20;
window.meatscience.buttonStartY = 30;
window.meatscience.buttonTextPaddingLeft = 5;
window.meatscience.buttonHeight = 32;
window.meatscience.buttonWidth  = window.meatscience.buttonHeight * 6.28; // FIXME: do we need to round this?
window.meatscience.buttonSpacing = 18;
window.meatscience.boxCanvasId = "boxCanvas";
window.meatscience.fadeBackground = false;


window.meatscience.boxes = [];

// This defines how big the "left offset" tail thingy is
// i.e. how far to the left of the div the animation begins
var offsetLeft = 35;

function showPage(pageName) {
	return true;
	var pageURI = "pages/" + pageName + "/page.html"; 
	var iframe = document.getElementById("meatscienceIFrame");
	iframe.src = pageURI;
	hideAllBoxes();
	return false;
}

function addMeatscienceButton(label, divId, link) {
	box = {};
	box.divId = divId;
	box.label = label;
	box.x = window.meatscience.buttonStartX;
	box.y = window.meatscience.buttonStartY + ((window.meatscience.buttonHeight + window.meatscience.buttonSpacing) * window.meatscience.boxes.length);
	box.arrow = link == false;
	box.link = link;
	box.colors = null;
	
	if (box.link) {
		link_section = 'href="' + link + '"';
	} else {
		link_section = 'href="#" onclick="boxButtonClicked(\'' + divId + '\')"';
	}
	
	tag = '<a ' + link_section + ' class="meatscienceButton" style="top:' 
			+ box.y + 'px; left:' + (box.x + window.meatscience.buttonTextPaddingLeft) + 'px; width:' + window.meatscience.buttonWidth + 'px;">'
			+ label + '</a>';

	document.write(tag);
	
	window.meatscience.boxes.push(box);
}

function renderBoxBackground(x, y, width, height, colors, resizeDivCallback) {
  height += 10;
  width += offsetLeft + 10;
  
  window.meatscience.boxCanvasSetup(width, height, colors, resizeDivCallback);
  window.meatscience.boxCanvasStartAnimation();

  canvasElement = document.getElementById("boxCanvas");
  canvasElement.style.visibility = 'visible';
  canvasElement.style.left = (x - offsetLeft) + 'px';
  canvasElement.style.top = (y - 2) + 'px';
  canvasElement.style.width = width + 'px';
  canvasElement.style.height = height + 'px';
}

function hideBoxBackground() {
  canvasElement = document.getElementById("boxCanvas");
  canvasElement.style.visibility = 'hidden';
}

function elementSize(hoo){
	var A=[Math.max(hoo.scrollWidth,hoo.offsetWidth),
			Math.max(hoo.scrollHeight,hoo.offsetHeight)];
  return A;
}

function getResizeDivCallback(currentId) {
	var poobear = function(width, height) {
		divElement = document.getElementById(currentId);
		
		width -= offsetLeft;
		height -= 20;
		
		// We can have negative widths, and height should never be less than the button
		width = Math.max(width, 0.0);
		height = Math.max(height, window.meatscience.buttonHeight);

		var clipString = 'rect(0px, ' + width + 'px, ' + height + 'px, ' + '0px)';
        divElement.style.clip = clipString;
      };
    return poobear;
}

function boxButtonClicked(divId) {
	var boxes = window.meatscience.boxes;
	for (i=0; i < boxes.length; i++) {
		var currentId = boxes[i].divId
		
		// If a div isn't listed for this button, skip it.
		if (currentId == null) continue;

		var divElement = document.getElementById(currentId);
		if(divElement == null) alert("WARNING: trying to hide/show a div that doesn't exist: '" + currentId + "'");
		
		if (currentId == divId) {
			var faderElement = document.getElementById("fader");
					
			// This is the box we're supposed to toggle
			if (divElement.style.visibility != 'visible') {
			  // Its not visible, turn it on
              var canvasX = boxes[i].x + window.meatscience.buttonWidth;
              var canvasY = boxes[i].y;

			  divElement.style.left = canvasX + 'px';
			  divElement.style.top = canvasY + 'px';
			
  			  divElement.style.visibility = 'visible';			

			  if (window.meatscience.fadeBackground) {
				$("#fader").fadeIn("fast");
			  	faderElement.style.visibility = 'visible';
			  }
						
			  var divSize = elementSize(divElement);

              var resizeDivCallback = getResizeDivCallback(currentId);
 
              resizeDivCallback(0,0);
			  renderBoxBackground(boxes[i].x + window.meatscience.buttonWidth, boxes[i].y, divSize[0], divSize[1], boxes[i].colors, resizeDivCallback);
			} else {
			  // Its already visible, turn it off
  			  divElement.style.visibility = 'hidden';

			  if (window.meatscience.fadeBackground) {
				$("#fader").fadeOut("def", function () { $("#fader").hide() });				
			  }
			
              hideBoxBackground();			
			}

		} else {
			// Hide the other boxes
			divElement.style.visibility = 'hidden';
		}
	}
	
	return 1;
}

function hideAllBoxes() {
    hideBoxBackground();

	$("#fader").fadeOut("def", function () { $("#fader").hide() });			  
	
	var boxes = window.meatscience.boxes;
	for (i=0; i < boxes.length; i++) {
		currentId = boxes[i].divId
		
		// If a div isn't listed for this button, skip it.
		if (currentId == null) continue;

		divElement = document.getElementById(currentId);		
		divElement.style.visibility = 'hidden';
	}
}