/* showcase.js
 * Dependents: mootools.v1.1.js, showcase.xml
 * Dynamically loads images and content into sidwellmaps homepage.  Use showcase.xml file to control the images used. 
 * By: Tim Dupree
 * Created: 6/27/2007
 */

window.addEvent('domready', function(){
	
	//Global Variables
	var showArray = [];
	var srcArray = [];
	var images = [];
	var imgArray = [];
	var zIndex = 25;
	var current = 0;
	var title;
	var titleOut = 500;
	var titleIn = 500;
	var periodical;
	var pause = 1;
	var delay = 7000; // 7 second delay between transitions


	// create image object
	function image(title, alt, src, href){
		this.title = title;
		this.alt = alt;
		this.src = src;
		this.href = href;
	}

/********************* BEGIN AJAX REQUEST *****************************************/
	// Ajax request element
	var myAjax = new Ajax('/showcase/showcase.xml', {
		method: 'get',
		onComplete: function(){
			// get the desired duration for the periodical
			var duration = myAjax.response.xml.getElementsByTagName("delay");
			delay = duration[0].getAttributeNode('duration').value;
			
			// get the items elements
			images = myAjax.response.xml.getElementsByTagName("image");
			
			// loop through items and capture image info
			for(var i = 0; i < images.length; i++){
				// get the attributes of the image element
				var titleTemp = images[i].getAttributeNode('title').value;
				var altTemp = images[i].getAttributeNode('alt').value;
				var srcTemp = images[i].getAttributeNode('src').value;
				var hrefTemp = images[i].getAttributeNode('href').value;

				// add image info to an array
				showArray[i] = new image(titleTemp, altTemp, srcTemp, hrefTemp);
				srcArray[i] = srcTemp;
				new Element('div', {
					'id': i,
					'styles': {
						'z-index': zIndex--
					},
					'class': 'images'
				}).injectInside('imageContainer');
				new Element('a', {
					'id': i+"a",
					'href': hrefTemp,
					'title': titleTemp
				}).injectInside(i +"")
			}

			//Load showcase images
			loadImages();
		}
	});

	//send Ajax request
	myAjax.request();
/********************* END AJAX REQUEST *****************************************/


/********************* BEGIN ASSET REQUEST *****************************************/
	var loadedImages = [];
	var completed = 0;


	function alldone(){
		if(completed == srcArray.length){
			loadedImages.each(function(image, i){
				image.injectInside(i + "a");
			});
			imgArray = $$('.images');
			$('preLoader').remove();
			periodical = imageEngine.periodical(delay);
		}
	}

	function loadImages(){
		srcArray.each(function(src, i){
			loadedImages[i] = new Asset.image(src, {
				id: i + "img",
				title: showArray[i].title,
				alt: showArray[i].alt,
				onload: function(){
					completed++;
					alldone();
				}
			});
		});
	}

/********************* END ASSET REQUEST *****************************************/

	//imageEngine controls the transitions between images
	var imageEngine = function(){
		if(current == (imgArray.length - 1)){
			current = 0;
			imgArray[0].effect('opacity', {duration: 2000,  transition:Fx.Transitions.Cubic.easeOut}).start(1).chain(function(){
				for(var j = 1; j < imgArray.length; j++){
					imgArray[j].setStyle('opacity', 1);
				}
			});
			/*$('imageDescription').effect('opacity', {duration: titleOut,  transition:Fx.Transitions.Cubic.easeOut}).start(0).chain(function(){
				$('imageDescription').setHTML($(current + 'img').getProperty('title')).effect('opacity', {duration: titleIn,  transition:Fx.Transitions.Quart.easeOut}).start(1);
			});*/
			current = -1;
		}
		else if (current != -1){
			imgArray[current].effect('opacity', {duration: 2000,  transition:Fx.Transitions.Cubic.easeOut}).start(0);
			/*$('imageDescription').effect('opacity', {duration: titleOut,  transition:Fx.Transitions.Cubic.easeOut}).start(0).chain(function(){
				$('imageDescription').setHTML($(current + 'img').getProperty('title')).effect('opacity', {duration: titleIn,  transition:Fx.Transitions.Quart.easeOut}).start(1);
			});*/
		}
		current++;
	};



/*	$('imageControlsA').addEvent('click', function(e) {
		if(pause){
			this.setHTML("play");
			$clear(periodical);
			pause = 0;
		}
		else{
			this.setHTML("pause");
			periodical = imageEngine.periodical(5000);

			pause = 1;
		}
	});*/

});