// functions for the shape-shifting on the home page

var inc, multiplier;

debugging = false;

function add(imag){
  // adds image data to an array 
  // soon I'm going to eliminate the need to pass the height and width in the XML

  if (images == null){
    images = new Array(basehref + imag);
  }
  else {
    temp = new Array(basehref + imag);
    images = images.concat(temp);
  }

  imageCount++;
}

function loadImages(j){
  // each time the image changes, I fetch the two adjacent images in each direction to ensure smooth display

  if (j == 0){
    prev.src = images[imageCount - 1];
    prev2.src = images[imageCount - 2];
    next.src = images[1];
    next2.src = images[2];
  }
  else if (j == 1){
    prev.src = images[0];
    prev2.src = images[imageCount - 1];
    next.src = images[2];
    next2.src = images[3];   
  }
  else if (j == imageCount - 1){
    prev.src = images[j - 1];
    prev2.src = images[j - 2];
    next.src = images[0];
    next2.src = images[1];
  }
  else if (j == imageCount - 2){
    prev.src = images[j - 1];
    prev2.src = images[j - 2];
    next.src = images[j + 1];
    next2.src = images[0];
  }
  else {
    prev.src = images[j - 1];
    prev2.src = images[j - 2];
    next.src = images[j + 1];
    next2.src = images[j + 2];
  }  
}

function processXML(responseXML){
	// process the XML with the image informations
	if (typeof responseXML != "object"){ //if there's an error
		//hide the direction tags
		forward.style.display = "none";
		backward.style.display = "none";
		
		//get rid of the image
		td.innerHTML = "<span class=\"errorText\">Unfortunately, there has been an error, which has been logged.<br>I apologize for the problem and will fix it soon; please try again later.</span>";
		return;
		
		/*
		td.removeChild(image);
		errorText = document.createElement("span");
		errorText.innerHTML = "Unfortunately, there has been an error, which has been logged.<br>I apologize for the problem and will fix it soon; please try again later.";
		td.appendChild(errorText);
		errorText.class = "errorText";
		//alert(errorText.class);
		return;
		*/
	}

	//we should have an equal number of sources, widths, and heights
	var sources = responseXML.getElementsByTagName("source");

	var k;
	for (k = 0; k < sources.length; k++){
		add(sources[k].firstChild.data);
	}

	debug("count: " + imageCount);

	//we have our images, so pick the first one and load it
	currentImage = Math.round(Math.random() * images.length); // begin with a random image

	//now that we have our data, create the new image
	image.src = images[currentImage];
	debug("Loading image", true);
	imageLoaded();
}

function initialize(increment, mult, spacerSize, backwardText, forwardText, XMLsource, XMLdata, XMLfunction){

	// get our elements from the DOM
	table = document.getElementById("table");
	tr = document.getElementById("tr");
	td = document.getElementById("td");
	dev = document.getElementById("dev");
	image = document.getElementById("image");
	
	// set up our links (variable to allow us to build smaller versions
	forward = document.getElementById("forward");
	backward = document.getElementById("backward");
	var spacer = document.getElementById("spacer");

	if (forwardText)
		forward.innerHTML = forwardText;
	else
		forward.innerHTML = "next &gt;&gt;";

	if (backwardText)
		backward.innerHTML = backwardText;
	else
		backward.innerHTML = "&lt;&lt; previous";
	
	
	// set up our spacer
	for (var i = 0; i < spacerSize; i += 2)
	  spacer.innerHTML += "&nbsp; ";

	//set up details for movement
	inc = parseFloat(increment);
	imageCount = 0;
	multiplier = parseFloat(mult);

	// get the XML started
        getXML(XMLsource, XMLdata, XMLfunction);
}

function imageLoaded(){
	if (image.complete == false && imageCount > 0){
		setTimeout("imageLoaded();",1);
		debug(".", true);
		imageCount--;
		return;
	}
	
	debug("done.");

	// pre-cache the nearby images
	prev = new Image();
	next = new Image();
    prev2 = new Image();
    next2 = new Image(); 
	loadImages(currentImage);

	//now that the image is loaded, display it and get the info
	//currentX = image.width;
	//currentY = image.height;
        //debug("start: " + currentX + " | " + currentY);

	//now that the image is enabled, allow people to change the click
	//forward.onclick = "change(1)";
	//backward.onclick = "change(-1)";

	if (window.ActiveXObject) { 
		//if this is IE, we have to render off the page to get the information
		image.style.position = "absolute";
		image.style.display = "block";
		image.style.left = "-10000px";
	}
	else { 
		//if not, we can get the information
		currentY = image.height * multiplier;
		currentX = image.width * multiplier;
	}

	currentY = image.height * multiplier;
	currentX = image.width * multiplier;

	image.width = currentX;
	image.height = currentY;

	//now display the image
	image.style.display = "block";
	image.style.position = "static";

        debug("start dimensions: " + currentX + " | " + currentY);

	table.width = currentX;
   	tr.height = currentY;
}


function initChange(direction){
  //direction is either +1 or -1, going forward or backward
  //we do preliminary stuff first
  var currentX, currentY, currentTransparency, incX, incY, incTransparency, incTime, targetX, targetY;

    var previous = currentImage;
    currentImage += direction; //advance the image count
    if (currentImage >= images.length)
      currentImage = 0;
    else if (currentImage < 0)
      currentImage = imageCount - 1;
      
    if (!images[currentImage]){
    	currentImage = 0;
  		initChange(direction);
  		return;
    }

    //incX = (images[currentImage][1] - images[previous][1]) / inc;
    //incY = (images[currentImage][2] - images[previous][2]) / inc;
	
    //debug("Using increment: " + incX + "&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;" + incY);

    //identify our next image, and get the target data for it, since as the image deforms its X and Y will change
    var targetImage;
    if (direction > 0)
      targetImage = next;
    else if (direction < 0)
      targetImage = prev;

    currentX = image.width;
    currentY = image.height;
	debug("Dimensions @ initChange: " + currentX + " " + currentY);

    targetX = targetImage.width * multiplier; //current values are already affected by the multiplier
    targetY = targetImage.height * multiplier;
	debug("Target Dimensions: " + targetX + " " + targetY);

    incX = (targetX - image.width)/inc;
    incY = (targetY - image.height)/inc;
//	debug(ncX) + " " + parseFloat(targetIncY));
  
    debug("Increment: " + incX + "&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;" + incY);

    //debug("Img-current: " + currentX + "&nbsp|&nbsp;&nbsp;" + currentY);
    //debug("Img-target: " + targetIncX + "&nbsp|&nbsp;&nbsp;" + targetIncY);

    //make it so people can't click forward and back
    
    //load the next images so they're available when needed
    loadImages(currentImage);
    
    //now that we're moving, disable click
    //forward.onclick = "";
    //backward.onclick = "";

    //transparency
    incTransparency = 3/inc;
    currentTransparency = 1;


    //now start the actual change
    change(currentX, currentY, currentTransparency, targetX, targetY, incX, incY, incTransparency, incTime)
}

function change(currentX, currentY, currentTransparency, targetX, targetY, incX, incY, incTransparency){    
  //go
  if (((incX > 0 && currentX < targetX) || (incX < 0 && currentX > targetX)) || ((incY > 0 && currentY < targetY) || (incY < 0 && currentY > targetY))){
  	//if it's in bounds to move
	// for some reason Mozilla 3 treats these operations as strings unless the variables are forced as integers
    if ((incX > 0 && currentX < targetX) || (incX < 0 && currentX > targetX))
      currentX = parseFloat(currentX) + parseFloat(incX);
    if ((incY > 0 && currentY < targetY) || (incY < 0 && currentY > targetY))
      currentY = parseFloat(currentY) + parseFloat(incY);
	
	currentTransparency -= incTransparency;
	
	image.width = currentX;
	image.height = currentY;

	//debug("<br>" + currentX + "&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;" + currentY;

	image.style.opacity = currentTransparency;
	image.style.filter = "alpha(opacity=" + (currentTransparency * 100) + ")";
		
	table.width = currentX;
	tr.height = currentY;

	//i should write this more intelligently so that it does this processing first rather than after it's already done most of these operations
	if (currentTransparency <= 0 && incTransparency > 0){
		//once it's vanished, we switch to the new image from the old one
		//we're splitting this into three, so once currentTransparency is 0, decrement it by 1/3 of the total
		//later I should write a better way to handle this
		incTransparency = incTransparency * -1;
		currentTransparency -= 1;

		//remove the old image and replace it with a new one
		//this forces a refresh
		td.removeChild(image);
		image = document.createElement("img");
		image.src = images[currentImage];
		td.appendChild(image);
		
		//now transition things in
		image.width = currentX;
		image.height = currentY;
		image.style.opacity = currentTransparency;
		image.style.filter = "alpha(opacity=" + (currentTransparency * 100) + ")";
		image.style.display = "block";		
		//debug("<br>switch:" + currentTransparency;
	}
	
	//debug("<br>" + currentTransparency;

	timer = setTimeout("change(" + currentX + ", " + currentY + ", " + currentTransparency + ", " + targetX + ", " + targetY + ", " + incX + ", " + incY + ", " + incTransparency + ")", 1);
  }
  else {
    //make sure everything is squared, and reveal the image

	debug("Final dimensions: " + targetX + " " + targetY);

    image.width = targetX;
    image.height = targetY;

    table.width = targetX;
    tr.height = targetY;
    
    image.style.opacity = 1;
    image.style.filter = "alpha(opacity='100')";

    //re-enable the clicks
    //forward.onclick = "change(1)";
    //backward.onclick = "change(-1)";
  }
}