/**
 * This is the area fader class for pwc
 *
 * @author pete goodman
 * @package tonic
*/
var areaFader = {

	//the setInterval js object for the main area fade (gets cleared and reset)
	fadeInterval : null,

	//object : the div element surrounding all the main fade areas
	fadeAreaContainer : null,

	//array : cantainer for all the main fade area div objects that will be swapped
	fadeAreas : null,

	//integer : the current area number in the fadeAreas array
	currentActiveAreaNo : 0,

	//boolean : detect whether the xx second cycle of areas fading is currently running
	currentlyRunning : false,

	//boolean : if the area is currently fading, don't allow navigation interaction
	currentlyFading : false,

	//integer : time in milliseconds for pause between each area transition
	changePause : 5000,

	//integer : the speed with which the area will change (lower = quicker)
	changeSpeed : 10,

	//int : the number of fade areas in the current filter
	activeFadeAreaCount : 0,

	//objects : containers for the html elements used for thumbnail navigation
	thumbscrollarea : null,

	//array : container for all thumbnail image objects
	thumbnails : null,


	/*
	 * initialisation function to show the nav and start the fade
	 */
			init: function(changePause, changeSpeed, initPause) {

				//if a pause time has been set, then use it rather than the default
				if (changePause !="") {
					this.changePause = changePause;
				}

				//if a speed has been set, then use it rather than the default
				if (changeSpeed !="") {
					this.changeSpeed = changeSpeed;
				}

				//get the main fade area container
				this.fadeAreaContainer = document.getElementById('slideshowimages');
				if (!this.fadeAreaContainer) return false;

				//get the main fade areas
				this.fadeAreas = this.fadeAreaContainer.getElementsByTagName('div');

				//when initialised, all fade areas are active (ie no active filters)
				this.activeFadeAreaCount = this.fadeAreas.length;

				//set styles for the fade area container
				this.fadeAreaContainer.style.position = "relative";
				this.fadeAreaContainer.style.left = "0px";
				this.fadeAreaContainer.style.top = "0px";
				this.fadeAreaContainer.style.width = "765px";
				this.fadeAreaContainer.style.height = "250px";
				//this.fadeAreaContainer.style.marginBottom = "20px";
				this.fadeAreaContainer.style.backgroundColor = "#ffffff";


				//position all the main images within the main area container
				for (var z=0; z<this.fadeAreas.length; z++) {
					this.fadeAreas[z].style.position = "absolute";
					this.fadeAreas[z].style.left = "0px";
					this.fadeAreas[z].style.top = "0px";
					this.fadeAreas[z].xOpacity = 0;
					this.fadeAreas[z].disabled = false;
					this.fadeAreas[z].style.display = "none";
				}


				//display the first div area
				this.fadeAreas[0].style.display = 'block';
				this.fadeAreas[0].xOpacity = 0.99;

				//get all thumbnails
				this.thumbscrollarea = document.getElementById('imgnav');
				this.thumbnails = this.thumbscrollarea.getElementsByTagName('li');

				//set the opacity on all thumbnails to display them all
				for (var i=0; i<this.thumbnails.length; i++) {
					this.thumbnails[i].xOpacity = 0.99;
				}

				//if the slideshow hasn't been specified to pause from the beginning, start the fade cycle when the page loads
				if (initPause !="paused") {
					LibraryManager.addEvent(window, 'load', this.initfade);
				}

				//set links on each thumbnail to fade them in
				this.setThumbnails();

			},


	/*
	 * function to start the fade cycle when initialised, or the play button is pressed
	 */
			initfade: function() {

				//function called every x seconds to initialise the next area change
				areaFader.fadeInterval = setInterval("areaFader.updatearea();", areaFader.changePause);

				//the fading is in operation
				areaFader.currentlyRunning = true;
			},


	/*
	 * function to pause the fade cycle
	 */
			pausefade: function() {

				//clear the interval
				clearInterval(areaFader.fadeInterval);

				//the fading is no longer in operation
				areaFader.currentlyRunning = false;
			},



	/*
	 * function to update the main area to the next in the loop when the time has elapsed or a navigation button is clicked
	 */
			updatearea: function(direction, fadeOnce, nextArea) {

				//if there is only one image in the active array, and this isn't the initial fade to it, stop
				if (areaFader.activeFadeAreaCount < 2 && !fadeOnce) return false;

				//set variable as we are currently fading:
				areaFader.currentlyFading = true;

				//if a direction hasn't been specified, assume its going to the next area
				if (!direction) {
					direction = 'fwd';
				}

				//variable which will contain the array number of the next area to show...
				if (!nextArea) {

					//work out how many areas there are:
					var areaCount = areaFader.fadeAreas.length;

					//if the user has pressed the 'back' button:
					if (direction == 'back') {

						//start at the current area and work backwards
						for (var x = areaFader.currentActiveAreaNo; x > 0; x--) {

							//look for a non-disabled area
							if (areaFader.fadeAreas[x - 1].disabled !== true) {
								nextArea = x;
								break;
							}
						}

						// nextArea hasn't been detected yet, start again from the end of the loop up until the current one
						if (!nextArea) {

							//start at the end and work backwards
							for (var y = (areaCount - 1); y > areaFader.currentActiveAreaNo; y--) {

								//look for a non-disabled area
								if (areaFader.fadeAreas[y].disabled !== true) {
									nextArea = y + 1;
									break;
								}
							}
						}

						//solve problems of passing through a 0
						nextArea--;

					//if we are getting the next area
					} else {

						//start at the current area and work backwards
						for (var x = areaFader.currentActiveAreaNo; x < (areaCount - 1); x++) {

							//look for a non-disabled area
							if (areaFader.fadeAreas[x + 1].disabled !== true) {
								nextArea = x + 1;
								break;
							}
						}

						// nextArea hasn't been detected yet, start again from the start of the loop up until the current one
						if (!nextArea) {

							//start at the end and work backwards
							for (var y = 0; y < areaFader.currentActiveAreaNo; y++) {

								//look for a non-disabled area
								if (areaFader.fadeAreas[y].disabled !== true) {
									nextArea = y;
									break;
								}
							}
						}
					}

				//if a nextArea value has been sent through, -1 (to eliminate problem of sending through 0)
				} else {
					nextArea--;
				}

				//show the next area (under this one, opacity = 0)
				areaFader.fadeAreas[nextArea].style.display = 'block';

				//swap the main area - by fading in and out
				areaFader.initAreaFadeInOut(nextArea);

				//if the fade is currently running start the count for the next area
				if (areaFader.currentlyRunning) {

					//reset the interval
					areaFader.pausefade();
					areaFader.initfade();
				}
			},



	/*
	 * function to set up the fade between the current area and the next
	 */
			initAreaFadeInOut: function(nextArea) {

				//get the opacity of the two areas (this and next)
				var currentOpacity = areaFader.fadeAreas[areaFader.currentActiveAreaNo].xOpacity;
				var nextOpacity = areaFader.fadeAreas[nextArea].xOpacity;

				//set the new opacities for the new areas
				currentOpacity-= 0.05;
				nextOpacity+= 0.05;

				//set the new opacities
				areaFader.fadeAreas[areaFader.currentActiveAreaNo].xOpacity = currentOpacity;
				areaFader.fadeAreas[nextArea].xOpacity = nextOpacity;

				areaFader.areaFadeInOut(areaFader.fadeAreas[areaFader.currentActiveAreaNo]);
				areaFader.areaFadeInOut(areaFader.fadeAreas[nextArea]);

				//if the old area hasn't finished fading out, end this process...
				if(currentOpacity <= 0) {

					//hide the old area
					areaFader.fadeAreas[areaFader.currentActiveAreaNo].style.display = "none";

					//set the variable to say what number the new area is
					areaFader.currentActiveAreaNo = nextArea;

					//no longer fading, set variable
					areaFader.currentlyFading = false;

				//otherwise repeat this fading process...
				} else {
					setTimeout('areaFader.initAreaFadeInOut(' + nextArea + ')', areaFader.changeSpeed);
				}
			},


	/*
	 * function called repeatedly to set the fade between the current area and the next
	 */
			areaFadeInOut: function(areaObject) {

				// if the area opacity has finished
				if(areaObject.xOpacity<0.99) {
					areaObject.style.opacity = areaObject.xOpacity;
					areaObject.style.MozOpacity = areaObject.xOpacity;
					areaObject.style.KhtmlOpacity = areaObject.xOpacity;

					//for win IE only -
					if (window.attachEvent) {
						areaObject.style.filter = "alpha(opacity=" + (areaObject.xOpacity*100) + ")";
					}
				}
			},

	/*
	 * function to pause the slideshow
	 */
			playPause: function() {

				//condition : if there is no slideshow interval currently set, (play the slideshow)
				if (!areaFader.currentlyRunning) {

					//restart the slideshow
					areaFader.initfade();

				//if the slideshow interval is set, remove it (pause the slideshow)
				} else {

					//pause the slideshow
					areaFader.pausefade();

				}
			},

	/*
	 * set up links on each of the thumbnails
	 */
			setThumbnails: function() {

				//for each thumbnail image
				for (var i=0; i < areaFader.thumbnails.length; i++) {

					//add an on click event for each thumb
					LibraryManager.addEvent(areaFader.thumbnails[i], 'click', areaFader.updateAreaFromThumb);
				}
			},



	/*
	 * when a thumbnail is clicked, fade in to it
	 */
			updateAreaFromThumb:function() {

				//if the main area fade isn't currently happening when a thumbnail is clicked
				if (!areaFader.currentlyFading) {

					//find the current image number in the loop
					for (var i=0; i < areaFader.thumbnails.length; i++) {

						// if the clicked image is the current one in the loop, fade into it
						if (areaFader.thumbnails[i] == this && this.xOpacity > 0.90 && i != areaFader.currentActiveAreaNo) {

							areaFader.thumbnails[i].className = "selected";

							// +1 to remove issue of sending through a zero
							areaFader.updatearea('fwd', false, i + 1);
						} else {
							areaFader.thumbnails[i].className = "";
						}
					}
				}
			}
}