var run = false;
var bgImages;
var imageNum = 0;
var timerID;

function loadXMLDoc( url ) {
	req = false;
	if(window.XMLHttpRequest) {
		try {
			req = new XMLHttpRequest();
		} catch(e) {
			req = false;
		}
	}
	else if(window.ActiveXObject)
	{
		try {
			req = new ActiveXObject("Msxml2.XMLHTTP");
		} 
		catch(e) {
			try {
				req = new ActiveXObject("Microsoft.XMLHTTP");
			} 
			catch(e) {
				req = false;
			}
		}
	}
	if(req) {
		req.onreadystatechange = processReqChange;
		req.open("GET", url, true);
		req.send("");
	}
}

function processReqChange() {
	if (req.readyState == 4 && req.status == 200 && req.responseXML != null) {
		var slides = [];
		var elem = req.responseXML.getElementsByTagName( 'slide' );
		for( var i = 0; i < elem.length; i++ ) {
			slides.push(elem.item( i ).getAttribute( 'src' ).toString());
		}
		bgImages = load_slides(slides);
	}
}

function load_slides(x) {
	var imgObj = [];
	
	var parent = document.getElementById('backgroundPicture');
	var originalPicture = parent.childNodes[0];
	imgObj.push(originalPicture);
	
	var newPictureElement;
	for( var i in x	) {
		newPictureElement = document.createElement( 'img' );
		newPictureElement.style.visibility = 'hidden'; 
		newPictureElement.style.position = 'absolute';

		newPictureElement.width = '1000';
		newPictureElement.height = '700';
		newPictureElement.src = x[i];
		if(newPictureElement.src != originalPicture.src) {
			parent.appendChild(newPictureElement);
			imgObj.push(newPictureElement);
		}
	}
	return imgObj;
}

function changePicture() {
	//if(run) {
		bgImages[imageNum].style.visibility = 'hidden';
		imageNum = (imageNum+1) % bgImages.length; 
		bgImages[imageNum].style.visibility = 'visible';
		timerID = setTimeout(function() { changePicture() }, 5000);
	//}
}

function startStopSlideShow() { 
	if(!transition) { 
		run = !run;
		if(!run) {
			transition = true;
			clearTimeout(timerID);
			
			document.getElementById('playButton').style.visibility = 'visible';
			document.getElementById('stopButton').style.visibility = 'hidden';

			if(document.getElementById("newsTitle")) { appear.push(Boxes["news"]); }
			if(document.getElementById("mobileTitle")) { appear.push(Boxes["mobile"]); }
			if(document.getElementById("currentConditionsTitle")) { appear.push(Boxes["currentConditions"]); }
			if(document.getElementById("tideTitle")) { appear.push(Boxes["tide"]); }
			
			changeBody();
		}
		else {
			transition = true;
			document.getElementById('stopButton').style.visibility = 'visible';
			document.getElementById('playButton').style.visibility = 'hidden';
			changeBody();
		}
	}
}



var transition = true;
var state = null;

var Boxes = new Array();
var appear = new Array();
var onScreen = new Array();

function runBoxes() {
	//First create all Box objects and put them into an array called Boxes
	if(document.getElementById("newsTitle")) { Boxes["news"] = new Box("news", "left"); }
	if(document.getElementById("mobileTitle")) { Boxes["mobile"] = new Box("mobile", "right"); }
	if(document.getElementById("currentConditionsTitle")) { Boxes["currentConditions"] = new Box("currentConditions", "right"); }
	if(document.getElementById("tideTitle")) { Boxes["tide"] = new Box("tide", "right"); }
	
	if(document.getElementById("newsTitle")) { appear.push(Boxes["news"]); }
	if(document.getElementById("mobileTitle")) { appear.push(Boxes["mobile"]); }
	if(document.getElementById("currentConditionsTitle")) { appear.push(Boxes["currentConditions"]); }
	if(document.getElementById("tideTitle")) { appear.push(Boxes["tide"]); }
		
	changeBody();
}


  /********************************************************************************************/
 /* Constructor                                                                              */
function Box(x, d) { 
	this.name = x;
	this.direction = d;
	
	this.left = document.getElementById(this.name+"Title").offsetLeft;			// for boxes with direction == left
	this.wrapWidth = document.getElementById("wrap").offsetWidth - 50;				// for boxes with direction == right
	this.width = document.getElementById(this.name+"Title").offsetWidth;		// boxes width
	this.height = document.getElementById(this.name+"Body").offsetHeight;   	// boxes height
	this.rightMargin = this.wrapWidth - this.width;
	
	// Critical Debug Point, best not to delete this
	//alert("left = " + this.left +", wrapWidth = " + this.wrapWidth + ", width = " + this.width + ", height = " + this.height);
}

function changeBody() { 
	if(onScreen.length == 0 && appear.length > 0 ) {
		var temp = appear.shift();
		onScreen.push(temp);
		temp.enter();
	}
	else if(onScreen.length > 0) {
		onScreen.pop().exit();
	}
	else {
		transition = false;
	}
}

  /********************************************************************************************/
 /* Enter Interface                                                                          */
Box.prototype.enter = function() { 
	if(this.direction == "left") {
		document.getElementById(this.name+"Title").style.left = 0 + "px";
	} else { 
		document.getElementById(this.name+"Title").style.left = 1000 + "px";
	}
	document.getElementById(this.name+"Title").style.width = 0 + "px";
	document.getElementById(this.name+"Title").style.visibility = "visible";
	
	document.getElementById(this.name+"Body").style.height = 0 + "px";
	this.growHorizontal();
}

 /***************************************************************************************/
/* Begin Enter Functions                                                               */
Box.prototype.growHorizontal = function() {
	var self = this; 
	var delta = Math.floor(this.width/20); 
	var time = 5;
	document.getElementById(this.name+"Title").style.width = parseInt(document.getElementById(this.name+"Title").style.width)+delta+'px';
	if (this.direction == "right") {
		document.getElementById(this.name+"Title").style.left = parseInt(document.getElementById(this.name+"Title").style.left)-delta+'px';
	}
	if(document.getElementById(this.name+"Title").offsetWidth+delta <= this.width) { 
		setTimeout(function() { self.growHorizontal(); }, time);
	}
	else {
		document.getElementById(this.name+"Title").style.width = this.width + 'px';
		if (this.direction == "right") {
			document.getElementById(this.name+"Title").style.left = this.rightMargin + 'px';
		}
		if(this.direction == "left") { this.enterLeft(); }
		else { this.enterRight(); }
	}
}

Box.prototype.enterLeft = function() {
	var self = this; 
	var delta = 20;
	var time = 5; 
	document.getElementById(this.name+"Title").style.left = parseInt(document.getElementById(this.name+"Title").style.left)+delta+'px';
	if(document.getElementById(this.name+"Title").offsetLeft+delta <= this.left) { 
		setTimeout(function() { self.enterLeft(); }, 5);
	} 
	else {
		document.getElementById(this.name+"Title").style.left = this.left + 'px';
		document.getElementById(this.name+"Body").style.visibility = "visible";
		this.growVertical();
	}
} 

Box.prototype.enterRight = function() {
	var self = this; 
	var delta = 20;
	var time = 5; 
	document.getElementById(this.name+"Title").style.left = parseInt(document.getElementById(this.name+"Title").style.left)-delta+'px';
	if(document.getElementById(this.name+"Title").offsetLeft-delta > this.left) { 
		setTimeout(function() { self.enterRight(); }, 5);
	} 
	else {
		document.getElementById(this.name+"Title").style.left = this.left + 'px';
		document.getElementById(this.name+"Body").style.visibility = "visible";
		this.growVertical();
	}
} 

Box.prototype.growVertical = function() { 
	var self = this;
	var delta = Math.floor(this.height/20);
	var time = 5;
	document.getElementById(this.name+"Body").style.height = parseInt(document.getElementById(this.name+"Body").style.height)+delta+'px';
	if(document.getElementById(this.name+"Body").offsetHeight+delta <= this.height) { 
		setTimeout(function() { self.growVertical(); }, 5);
	}
	else {
		document.getElementById(this.name+"Body").style.height = this.height + 'px';
		
		// Start up the next one.  
		// (Recursive decent. We are now at the bottom for the current Box; get the next one
		//  and start again at the top.) 
		if (appear.length > 0) {
			var temp = appear.shift();
			onScreen.push(temp);
			temp.enter();
		}
		else {
			loadXMLDoc("pictures/picList.php?p=home");
			transition = false;
		}
	}
}

/* End Enter Functions                                                                 */   
/**************************************************************************************/



  /********************************************************************************************/
 /* Exit Interface                                                                           */
Box.prototype.exit = function() { 
	this.shrinkVertical(); 
}

 /***************************************************************************************/
/* Begin Exit Functions                                                                */
Box.prototype.shrinkVertical = function() { 
	var self = this;
	var delta = Math.floor(this.height/20);
	var time = 5;
	document.getElementById(this.name+"Body").style.height = parseInt(document.getElementById(this.name+"Body").style.height)-delta+'px';
	if(document.getElementById(this.name+"Body").offsetHeight-10-delta > 0) { 
		setTimeout(function() { self.shrinkVertical(); }, 5);
	}
	else {
		document.getElementById(this.name+"Body").style.visibility = "hidden";
		document.getElementById(this.name+"Body").style.height = 0 + 'px';  
		
		if(this.direction == "left") { 
			this.exitLeft(); 
		}
		else { 
			this.exitRight(); 
		}
	}
}

Box.prototype.exitLeft = function() {
	var self = this; 
	var delta = 20;
	var time = 5; 
	document.getElementById(this.name+"Title").style.left = parseInt(document.getElementById(this.name+"Title").style.left)-delta+'px';
	if(document.getElementById(this.name+"Title").offsetLeft-delta >= 0) { 
		setTimeout(function() { self.exitLeft(); }, 5);
	} 
	else {
		document.getElementById(this.name+"Title").style.left = 0 + 'px';
		this.shrinkHorizontal();
	}
} 

Box.prototype.exitRight = function() {
	var self = this; 
	var delta = 20;
	var time = 5; 
	document.getElementById(this.name+"Title").style.left = parseInt(document.getElementById(this.name+"Title").style.left)+delta+'px';
	if(document.getElementById(this.name+"Title").offsetLeft+delta <= (this.wrapWidth-this.width-20)) { 
		setTimeout(function() { self.exitRight(); }, 5);
	} 
	else {
		document.getElementById(this.name+"Title").style.left = this.wrapWidth-this.width + 'px';
		this.shrinkHorizontal();
	}
} 

Box.prototype.shrinkHorizontal = function() {
	var self = this; 
	var delta = Math.floor(this.width/20);
	var time = 5;
	document.getElementById(this.name+"Title").style.width = parseInt(document.getElementById(this.name+"Title").style.width)-delta+'px';
	if (this.direction == "right") {
		document.getElementById(this.name+"Title").style.left = parseInt(document.getElementById(this.name+"Title").style.left)+delta+'px';
	}
	if(document.getElementById(this.name+"Title").offsetWidth-20-delta >= 0) { 
		setTimeout(function() { self.shrinkHorizontal(); }, time);
	}
	else {
		//dont worry about growHorziontal if direction == right scenario here b/c it just goes hidden
		document.getElementById(this.name+"Title").style.visibility = "hidden";
		document.getElementById(this.name+"Title").style.width = 0 + 'px';
		if (onScreen.length > 0) {
			onScreen.pop().exit();
		}
		else { 
			timerID = setTimeout(function() { changePicture() }, 1500);
			transition = false;
		}
	}
}

/* End Exit Functions                                                                  */   
/**************************************************************************************/