/*
 Script to read files from two folders on server, output javascript and 
 XHTML for homepage feature

 Required - files in two folders:
 
 featuretext
 
 Format:
 
 <h1>Featured</h1><h3>Title</h3><p>Prargraph. <a href="http://me.engin.umich.edu">More...</a></p>~~~~http://me.engin.umich.edu
 
 Tilda's allw the php code to seperate the URL from the featured text
 
 featureimages
 
 Format:
 
 jpg, png, gif
 171px W x 174px H
 
 *filenames should be the same, ie:
 image1.txt, image1.jpg
 graph.txt, graph,gif
 etc...


 Javascript is inline because this feature is only on the homepage, and the javascript is written by the php script. 
 It would be possible to create N number of text boxes with a hidden style, and show as needed, but I felt it
 might reduce performance

*/

var itemPosition = new Array();    // image position
var itemText = new Array();        // item h1, h3, p

var currentPos = new Array();		// initial position
var nextPos = new Array();			// positions that will move

var i = new Number();				// General purpose counter
var j = new Number();				// Current item
i = 0;
j = 0;



var featureName = new Array();
var featureURL = new Array();
var featurePicture = new Array();
var arrayOrder = new Array();

// File: readXML.js

// Start function when DOM has completely loaded 
$(document).ready(function(){ 

	// Open the students.xml file
	$.get("inc/features.xml",{},function(xml){
      	
		// Build an HTML string
		myHTMLOutput = '';
	  	
		// Run the function for each student tag in the XML file
		$('feature',xml).each(function(i) {
			featureName[i] = $(this).find("text").text();
			featureURL[i] = $(this).find("url").text();
			featurePicture[i] = $(this).find("picture").text();
		});
	//	myHTMLOutput += '</table>';
		
		for (i=0;i<featureName.length;i++) {
			arrayOrder[i] = i;
		} 
		
		// Randomize
		fisherYates(arrayOrder);
	
		for (i=0;i<featureName.length;i++) {
			itemText[i] = featureName[arrayOrder[i]];
		} 
	
		$("#featuretext").append(itemText[0]);

		for (i=0;i<featureName.length;i++) {
			
			leftpos = (i * 220);
			if (leftpos > 5*220) {
				leftpos = 6*220;
			}
			
			myHTMLOutput += '<div class="featureimage" id="feature' + i + '" style="left: ' + leftpos + 'px;"><a href="' + featureURL[arrayOrder[i]] + '"><img src="featureimages/' + featurePicture[arrayOrder[i]] + '" /></a></div>';
			
		} 

		$("#featureslides").append(myHTMLOutput);
		
		for (i=1;i<featureName.length;i++) {
			$("#feature" + i + " img").animate({ opacity: .5 }, {queue: false}, 0 );
		}
	});
});
 

// Randomization function
function fisherYates ( myArray ) {
  var i = myArray.length;
  if ( i == 0 ) return false;
  while ( --i ) {
     var j = Math.floor( Math.random() * ( i + 1 ) );
     var tempi = myArray[i];
     var tempj = myArray[j];
     myArray[i] = tempj;
     myArray[j] = tempi;
   }
}

for (i=0;i<7;i++) {
	currentPos[i] = i;
	jay = i;
}

function moveleft() {
	if (j+1 >= itemText.length) {
		j = 0;
	} else {
		j++;
	}
	
$("#feature" + currentPos[0]).animate({ opacity: 0 }, 100, 
	function() {  
		$("#feature" + currentPos[0]).attr({ style: "left: 1320px;"});
		$("#feature" + currentPos[0]).animate({ opacity: 1 }, 10 ); 
		$("#feature" + currentPos[0]+ " img").animate({ opacity: .5 }, 10 );
		changePosition(0);
	}
);

$("#feature"+currentPos[1]).animate({ left: 0*220 }, 500);
$("#feature"+currentPos[1]+" img").animate({ opacity: 1 }, 500);

$("#feature"+currentPos[2]).animate({ left: 1*220 }, 500 );
$("#feature"+currentPos[3]).animate({ left: 2*220 }, 500 );
$("#feature"+currentPos[4]).animate({ left: 3*220 }, 500 );
$("#feature"+currentPos[5]).animate({ left: 4*220 }, 500 );
$("#feature"+currentPos[6]).animate({ left: 5*220 }, 500 );

changeText();

changePosition(1);
changePosition(2);
changePosition(3);
changePosition(4);
changePosition(5);
changePosition(6);

}

function changeText() {
	// time in milliseconds
	// 500 = 1/2 a second, 1000 = 1 second etc…
	var timer = 250;
  $("#featuretext").animate({ opacity: 0}, timer );
  $("#featuretext").queue(function () {
		$(this).empty().html(itemText[j]);
		$(this).dequeue();
	  });
  $("#featuretext").animate({ opacity: 1}, timer );
  $("#featuretext").queue(function () {
		$(this).dequeue();
	  });
}

function changePosition(positionNo) {
	if (currentPos[positionNo]+1 == itemText.length) { currentPos[positionNo] = 0; } else { currentPos[positionNo]++; }
}

function changePositionNeg(positionNo) {
	if (currentPos[positionNo] == 0) { 
		currentPos[positionNo] = itemText.length - 1;
	} else { 
		currentPos[positionNo]--; 
	}
}


function moveright(boxestomove) {
	if (j == 0) {
		j = itemText.length - 1;
	} else {
		j--;
	}

	if (currentPos[0] == 0) { 
		aPos = itemText.length - 1;
	} else { 
		aPos = currentPos[0]-1; 
	}
	

	$("#feature" + aPos + " img").animate({ opacity: 1 }, 0, 
		function() {  
			$("#feature" + aPos).animate({ opacity: 1 }, 10 ); 
			$("#feature" + aPos).attr({ style: "left: 0px;"});
		}
	);
	
	$("#feature"+currentPos[0]).animate({ left: 1*220 }, 500); // 
	$("#feature"+currentPos[0]+" img").animate({ opacity: .5 }, 500);

	$("#feature"+currentPos[1]).animate({ left: 2*220 }, 500);
	$("#feature"+currentPos[2]).animate({ left: 3*220 }, 500 );
	$("#feature"+currentPos[3]).animate({ left: 4*220 }, 500 );
	$("#feature"+currentPos[4]).animate({ left: 5*220 }, 500 );
	$("#feature"+currentPos[5]).animate({ left: 6*220 }, 500, 

		function() {  
	
			changePositionNeg(0);
			changePositionNeg(1);
			changePositionNeg(2);
			changePositionNeg(3);
			changePositionNeg(4);
			changePositionNeg(5);
			changePositionNeg(6);
		}
	);

		
	changeText();

}