/**
 * This is the area fader class
 *
 * tweaked, now requires jquery
 * 
 * @author pete goodman
*/
var areaFader = {

	//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 : if the area is currently fading, don't allow navigation interaction
	currentlyFading : false,
	
	//int : the number of fade areas in the current filter
	activeFadeAreaCount : 0,
	
	//object : container for the html slideshow navigation list elements
	slideshownav : null,
	
	
	/*
	 * initialisation function to show the nav and start the fade
	 */
			init: function() {

				//get the main fade area container
				this.fadeAreaContainer = $('#project-images').addClass('js');
				if (!this.fadeAreaContainer) return false;
				
				//get the main fade areas
				this.fadeAreas = $(this.fadeAreaContainer).find('img');

				// count images
				this.activeFadeAreaCount = this.fadeAreas.length;
				if (this.activeFadeAreaCount < 2) {
				    return false;
				}
				
				//position all the main images within the main area container
				$(this.fadeAreas).each(function(counter){
				    this.xOpacity = 0;
					this.disabled = false;
					this.style.display = "none";
				});
				
				//display the first div area
				this.fadeAreas[0].style.display = 'block';
				this.fadeAreas[0].xOpacity = 0.99;				
				
				//set the navigation links
				this.setNavLinks();
				
				// add image positioning on page load
				$(window).load(function(){
                    areaFader.repositionImages();
				});
			},
	
	
	/*
	 * 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);
				
				// return this value so it can be used to update the number count
				return nextArea;
			},
			
			
	
	/*
	 * 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 set the funtionality of the navigation links
	 */
			setNavLinks: function() {
			    
			    // create slide nav
			    areaFader.slideshownav = $('<ul id="slide-nav" class="clearfix"></ul>');
			    $('#project-details').prepend(areaFader.slideshownav);
			    
				//create back button
				var backbtn = $('<li><a href="#back">&lt;</a></li>');
				$(areaFader.slideshownav).append(backbtn);
				$(backbtn).bind('click', function(e){
				    areaFader.slideBack(e, this);
				});
				
				//forward button
				var fwdbtn = $('<li><a href="#forward">&gt;</a></li>');
				$(areaFader.slideshownav).append(fwdbtn);
				$(fwdbtn).bind('click', function(e){
				    areaFader.slideFwd(e, this);
				});

			    // create numbered buttons
				$(areaFader.fadeAreas).each(function(counter){
				    
				    // calculate what text to display
				    var numLinkDisplay = (counter < 9) ? "0" + (counter+1) : (counter + 1);
				    
				    var numLink = $('<li id="num-'+numLinkDisplay+'" class="numbered"><a href="#'+numLinkDisplay+'">'+numLinkDisplay+'</a></li>');
				    $(areaFader.slideshownav).append(numLink);
    				$(numLink).bind('click', function(e){
    				    areaFader.updateAreaFromNumber(e, counter, this);
    				});
    				
    				// set selected number on first element
    				if (counter < 1) {
    				    $(numLink).addClass('selected');
    				}
				});
			},



	/*
	 * function to move the slideshow back a slide if we aren't currently fading
	 */
			slideBack: function(e, el) {
			    
				// stop the link doing anything
				e.preventDefault();
				el.blur();

                // update area
				if (!areaFader.currentlyFading) {
					var nextArea = areaFader.updatearea('back');
					areaFader.updateSelectedElement(nextArea);
				}
			},



	/*
	 * function to move the slideshow forward a slide if we aren't currently fading
	 */
			slideFwd: function(e, el) {
			    
				// stop the link doing anything
				e.preventDefault();
				el.blur();

                // update area
				if (!areaFader.currentlyFading) {
					var nextArea = areaFader.updatearea('fwd');
    				areaFader.updateSelectedElement(nextArea);
				}
			},
	

	/*
	 * when a link is clicked, fade in to it
	 */					
			updateAreaFromNumber:function(e, counter, el) {
				
				// stop the link doing anything
				e.preventDefault();
				el.blur();
				
				//if the main area fade isn't currently happening when a link is clicked 
				if (!areaFader.currentlyFading && counter != areaFader.currentActiveAreaNo) {
					areaFader.updatearea('fwd', false, counter+1);
					areaFader.updateSelectedElement(el);
			    }
			},
			
			
	/*
	 * update selected element link
	 */
		    updateSelectedElement: function(el){
		        
				$(areaFader.slideshownav).find('li.numbered').each(function(counter){
				   $(this).removeClass('selected'); 
				});
				
				// condition : calculate the selected area number and give it a selected state
				if (typeof el != "object") {
                    el = $(areaFader.slideshownav).find('li.numbered')[el];
				}
				
			    $(el).addClass('selected');
	        },
	
	/*
	 * reposition images correctly on page load
	 */
	        repositionImages: function() {
    	        $(areaFader.fadeAreas).each(function(counter){
    		        var imgWidth = $(this).width();
    		        $(this).css({
    		            left : ((areaFader.fadeAreaContainer.width() - imgWidth)/2) + "px"
    		        });
    		    });
		    }
};