// set an array with all of the information for the different cards in it, the numbers on
// the pictures are used to determine which text to use, so if changes are made, they need
// to be reflected in the array and file names
var cardInfo = new Array();
cardInfo[1] = new Array("anchored.html","Anchored-Emerging");
cardInfo[2] = new Array("church.html","Church-World");
cardInfo[3] = new Array("doing.html","Doing-Being");
cardInfo[4] = new Array("global.html","Global-Local");
cardInfo[5] = new Array("individual.html","Individual-Community");
cardInfo[6] = new Array("mind.html","Mind-Spirit");
cardInfo[7] = new Array("orthodox.html","Orthodox-Diverse");
cardInfo[8] = new Array("systematic.html","Systematic-Organic");
cardInfo[9] = new Array("theory.html","Theory-Practice");
cardInfo[10] = new Array("traditional.html","Traditional-Innovative");

// variables for the picture itself, and the rollover <div>
var cardRollover = null;
var cardsPicture = null;

// the X and Y positions of the mouse
var posx = 0;
var posy = 0;

// the "more cards" elements
var moreCardsContainer = null;
var moreCards = null;
var cardListBox = null;

// the HTTP Request object used to get the HTML file needed
var http_request = false;

// add the initialization function to be run when the site opens
if(window.addEventListener)
{
    window.addEventListener("load",homeInit,true);
}
else
{
    window.attachEvent("onload",homeInit);
}

function homeInit(event)
{
	// get the card picture, and add the events to it
	cardsPicture = document.getElementById("cards");

  if(cardsPicture && cardsPicture.parentNode.getElementsByTagName("a").length == 1)
  {
  	cardsPicture.onmouseover = showCard;
  	cardsPicture.onmouseout = hideCard;
  	cardsPicture.onmousemove = moveCard;
  
  	// create and "pre load" the rollover for the card so that browsers that don't 
  	// cache the stylesheet information (cough cough Internet Explorer) won't see a
  	// delay in un-styled content
  	cardRollover = document.createElement("div");
  	cardRollover.className = "cardRollover";
  	cardRollover.style.display = "none";
  	document.body.appendChild(cardRollover);
    
    moreCardsContainer = document.createElement("div");
    moreCardsContainer.id = "idCards";
    
    moreCards = document.createElement("a");
    moreCards.appendChild(document.createTextNode("other tensions"));
    moreCards.onclick = showIDCards;
    
    moreCardsContainer.appendChild(moreCards);
    cardsPicture.parentNode.appendChild(moreCardsContainer);
  }
}

function showIDCards (event)
{
  if(cardListBox == null)
  {
    cardListBox = document.createElement("div");
    cardListBox.id = "cardList";
        
    for(var i = 1; i < cardInfo.length; i++)
    {
      var newLink = document.createElement("a");
      newLink.appendChild(document.createTextNode(cardInfo[i][1]));
      newLink.href = "template/includes/"+cardInfo[i][0]
      newLink.onclick = changeTopGraphic;
      
      cardListBox.appendChild(newLink);
      cardListBox.appendChild(document.createTextNode(" | "));
    }
    
    cardListBox.removeChild(cardListBox.lastChild);
    
    cardListBox.style.top = findPosY(moreCardsContainer)+"px";
    cardListBox.style.left = findPosX(moreCardsContainer)+"px";
    
    document.body.appendChild(cardListBox);
  }
}

function changeTopGraphic(event) {
  // if the event has been saved, then set it, otherwise get the event from the window (for IE)
	if(!event)
  {
  	var event = window.event;
  }

  // prevent the link from redirecting the page
  if(event.preventDefault)
  {
  	event.preventDefault();
  }
  else
  {
  	event.returnValue = false;
  }
  
  var cardNum = 0;
  
  for(var i = 1; i < cardInfo.length; i++)
  {
    if(this.href.indexOf(cardInfo[i][0]) > -1)
    {

      cardNum = i;
    }
  }
  
  if(cardNum > 0)
  {
    cardsPicture.src = "template/i/cards_"+cardNum+".jpg"
    getCardInfo(this.href);
    cardListBox.parentNode.removeChild(cardListBox);
    cardListBox = null;
  }
}

/* 
Thanks to Peter Paul Koch for the next two functions
to determine the X and Y position of an object. 
http://www.quirksmode.org/js/findpos.html
*/

function findPosX(obj)
{
	var curleft = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
		curleft += obj.x;
	return curleft;
}

function findPosY(obj)
{
	var curtop = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		curtop += obj.y;
	return curtop;
}

function doMouseCheck(event)
{

	// make a cross-browser way to access the event object and the x and y location of the mouse
	if (!event) { event = window.event; }

	if (event.pageX || event.pageY)
	{
		posx = event.pageX;
		posy = event.pageY;
	}
	else if (event.clientX || event.clientY)
	{
		posx = event.clientX + document.body.scrollLeft;
		posy = event.clientY + document.body.scrollTop;
	}

	// make sure the created box is within the client window
	if (posx + 465 > document.body.clientWidth)
	{
		posx = document.body.clientWidth - 465;
	}

}

function getCardInfo(filename)
{
	http_request = false;

	if (window.XMLHttpRequest)
	{
		// Mozilla, Safari,...
		try
		{
			http_request = new XMLHttpRequest();
		}
		catch (e)
		{
			http_request = false;
		}
	}

	// IE
	else if (window.ActiveXObject)
	{
		try
		{
			http_request = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (e)
		{
			try
			{
				http_request = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch (e)
			{
				http_request = false;
			}
		}
	}


	if (http_request)
	{
		http_request.onreadystatechange = setCardContents;
		http_request.open('GET', filename, true);
		http_request.send(null);
	}
	else
	{
		cardRollover.innerHTML = "nothing";
		cardRollover.style.display = "none";
	}
}

function setCardContents()
{
	if (http_request.readyState == 4)
	{
		if (http_request.status == 200)
		{
        while(cardRollover.hasChildNodes())
        {
          cardRollover.removeChild(cardRollover.lastChild);
        }
        
        var topDiv = document.createElement("div");
        topDiv.className = "topImage";
        cardRollover.appendChild(topDiv);
    
        var contentDiv = document.createElement("div");
        contentDiv.className = "contentContainer";
        contentDiv.innerHTML = http_request.responseText;
        cardRollover.appendChild(contentDiv);
        
        var bottomDiv = document.createElement("div");
        bottomDiv.className = "bottomImage";
        cardRollover.appendChild(bottomDiv);
        
			cardRollover.style.display = "block";
		}
	}
	
}

function showCard(event)
{
	doMouseCheck(event)
	if(cardRollover)
	{
		// if the card rollover has been pre-loaded, then do the actual loading work      
		if(!cardRollover.innerHTML)
		{
			//remove the preloaded rollover from the page, and style it right
			try
			{
				document.body.removeChild(cardRollover);
			}
			catch(e){}

			// look up what number card this is, and then call the function to retrieve the HTML and set it 
			cardNum = this.src.slice(this.src.indexOf("_")+1);
			cardNum = cardNum.slice(0,cardNum.indexOf("."));
			getCardInfo("template/includes/"+cardInfo[cardNum][0])
		}
		
		// set the current position of the card to just under the mouse cursor, and add it to the document
		cardRollover.style.top = (posy+20)+"px";
		cardRollover.style.left = (posx+10)+"px";
		document.body.appendChild(cardRollover);    
	}
}

function moveCard(event)
{
	doMouseCheck(event);        
	if(cardRollover)
	{
		// set the current position of the card to just under the mouse cursor
		cardRollover.style.top = (posy+20)+"px";
		cardRollover.style.left = (posx+10)+"px";
		// if the card has been lost via latency, then show it
		if(document.body.lastChild != cardRollover)
		{
			document.body.appendChild(cardRollover);       
		}
	}
}

function hideCard(event)
{
	// if the card is on the page, remove it
	if(cardRollover && document.body.lastChild == cardRollover)
	{
		document.body.removeChild(cardRollover);
	}      
}