/*
	Class:		slideShow
	Author:		elementalblend.com (brandon burkett)
	
	Desc:		Javscript class that will rotate images (fade in/out) similar to a simple slide show 
*/
var slideShow = 
{
	/* properties */
	gallery: {},
	time: 7000,
	i: 1,
	path:  '../galleryImages/',
	
	/* methods */	
	loadImage: function()
	{
		// determine next image
		slideShow.i = (slideShow.i < (slideShow.gallery.gallery.images.length-1)) ? (slideShow.i+1) : 0;
		
		// force image to load
		var nextImage = new Image(); 
		nextImage.src = slideShow.path+slideShow.gallery.gallery.images[slideShow.i].url;
		//console.log(slideShow.i);		
		
		if(nextImage.complete)
		{
			// call animate function if image loaded
			slideShow.animate(nextImage);							
		}
		else
		{
			nextImage.onload = function()
			{
				// call animate function if image loaded
				slideShow.animate(nextImage);
			}								
		}		
	},
	
	animate: function()
	{		
		// fade image out
		$('#slideShowContainer').animate({ opacity: 0.1}, 1500, function()
		{
			// replace image/text
			var html = 
			'<div id="slideShowImage">'+
				'<a href="galleryDetail.php?image_id='+slideShow.gallery.gallery.images[slideShow.i].id+'">'+
					'<img id="rotate" width="'+slideShow.gallery.gallery.images[slideShow.i].width+'" height="'+slideShow.gallery.gallery.images[slideShow.i].height+'" alt="View Caption Below" src="'+slideShow.path+slideShow.gallery.gallery.images[slideShow.i].url+'"/>'+
				'</a>'+
			'</div>'+
			'<p><em id="rotateCaption" style="background-color: #ffffff">'+slideShow.gallery.gallery.images[slideShow.i].desc+'</em></p>';
			
			$('#slideShowContainer').html(html);
						
			// fade new image in
			$('#slideShowContainer').animate({ opacity: 1}, 1500);								
		});
		
		// loop again
		setTimeout("slideShow.loadImage()", slideShow.time);	
	},

	// initalizer function
	init: function()
	{
		// ajax call to get all images and descriptions
		$.ajax(
		{
			type: 'post',
			dataType: 'json',
	   		url: 'ajaxGallery.php',
	   		data: 'action=getImages',
	   		success: function(jsonObject)
			{		
				// set class property to json return object
				//console.log(jsonObject);
				slideShow.gallery = jsonObject;	
				
				// show gallery html
				var html = 
				'<h1>PHOTO GALLERY</h1>'+
				'<div class="affiliationLink">'+
					'<div class="affiliationSpacing" id="slideShowContainer">'+
						'<div id="slideShowImage">'+
							'<a href="galleryDetail.php?image_id='+slideShow.gallery.gallery.images[0].id+'">'+
								'<img id="rotate" width="'+slideShow.gallery.gallery.images[0].width+'" height="'+slideShow.gallery.gallery.images[0].height+'" alt="View Caption Below" src="'+slideShow.path+slideShow.gallery.gallery.images[0].url+'"/>'+
							'</a>'+
						'</div>'+
						'<p><em id="rotateCaption" style="background-color: #ffffff">'+slideShow.gallery.gallery.images[0].desc+'</em></p>'+
					'</div>'+
				'</div>'+
				'<div class="readMore">'+
					'<a class="inlineLink" href="gallery.php?cat=Program+Activities">View more photos</a>'+
				'</div>';
				
				// load gallery
				$('#slideShow').html(html);
				
				// change image
				setTimeout("slideShow.loadImage()", (slideShow.time - 500));
	   		},
	
			error: function(m1, m2, m3)
			{
				//alert(m1+' | '+m2+' | '+m3)
			}
			// end success
	 	});
	}
}

$(document).ready( function(){ slideShow.init() });