/* By Chris Boardman, written in 2009 http://www.chris-boardman.com. Big thanks to http://migrantroo.com. */

now = {
	
	init: function ()
	{
		now.Loader.fetchNewImages();
	}
	
}

now.Loader = {
	
	images: [],
	WEBSERVICE_ENDPOINT: "/get_images.php",
	DEFAULT_IMAGE_WIDTH: 500,
	STREAM_STARTED: false,
	
	fetchNewImages: function ()
	{
		//	Get an array of all the images currently available in the feed
		$.get(now.Loader.WEBSERVICE_ENDPOINT, now.Loader.onRecievedImages);
	},
	
	onRecievedImages: function (json_images)
	{
		//	Feed received and parsed
		//	Parse using JSON
		var parsedImages = JSON.parse(json_images);
		//	For every image available in the feed
		for (image_index in parsedImages)
		{
			//	Grab the image id and queue it up
			var image_id = parsedImages[image_index];
			//	If this image id is not already in the current queue of images
			//	With every currently queued image
			if (now.Loader.numberOfImagesInQueue() > 0)
			{
				for (queued_image in now.Loader.images)
				{
					var isAlreadyQueued = false;
					if ($(now.Loader.images[queued_image]).attr("id") == image_id)
					{
						isAlreadyQueued = true;
					}
				}
				if (!isAlreadyQueued) now.Loader.queueImage(image_id);
			}
			else
			{
				now.Loader.queueImage(image_id);
			}
		}
	},
	
	queueImage: function (id)
	{
		//	With every image to queue
		//	Create and load in the image to html
		var img = document.createElement('img');
		$(img).load(now.Loader.onLoadedImage);
		var src = "http://twitpic.com/show/full/" + id;
		img.src = src;
		img.id = id;
		//	Constrain dimensions as appropriate
		$(img).attr("width", now.Loader.DEFAULT_IMAGE_WIDTH);
	},
	
	onLoadedImage: function ()
	{
		//	Image queued up, in html and all loaded
		now.Loader.push($(this));
		//	Check to see if the stream hasn't started, hence first image has been loaded
		if (!now.Loader.STREAM_STARTED)
		{
			//	Called once to kick of the view
			now.View.init();
		}
	},

	numberOfImagesInQueue: function ()
	{
		return now.Loader.images.length;
	},
	
	pop: function ()
	{
		return now.Loader.images.pop();
	},
	
	push: function (image)
	{
		now.Loader.images.push(image);
	}
	
}

now.View = {
	
	FADE_SPEED: 	500,
	PAUSE_LENGTH: 	4000,
	currentTimeout: null,
	showCount:   	0,
	
	init: function ()
	{
		now.Loader.STREAM_STARTED = true;
		now.View.showNextImage();
	},
	
	pause: function ()
	{
		now.View.currentTimeout = setTimeout(now.View.showNextImage, now.View.PAUSE_LENGTH);
	},
	
	stop: function ()
	{
		clearTimeout(now.View.currentTimeout);
	},
	
	hasImage: function ()
	{
		return $("#image img").length !== 0;
	},
	
	showNextImage: function ()
	{
		//	If there's already an image being shown
		if (now.View.hasImage())
		{
			//	Fade that out and then fade the next in. Nice!
			now.View.hideImage();
		}
		else
		{
			//	No image currently being shown. Load the first image!
			now.View.showImage();
		}
	},
	
	showImage: function ()
	{
		//	If we've got images to load
		if (now.Loader.numberOfImagesInQueue() > 0)
		{
			//	Grab the next image and remove it from the array as well
			var img = now.Loader.pop();
			//	Show the new image
			$("#image").hide();
			$("#image").html("");
			$("#image").append(img);
			$("#image").fadeIn(now.View.FADE_SPEED, now.View.pause);
			
			if (now.View.showCount > 5)
			{
				if (now.Loader.numberOfImagesInQueue() < 10) now.Loader.fetchNewImages();
			}
			
			now.View.showCount++;
		}
		else
		{
			//	No more images to load, stop the app and return
			now.View.stop();
			return;
		}
	},
	
	hideImage: function ()
	{
		//	Fade out the current image and then fade in the next
		$("#image img").fadeOut(now.View.FADE_SPEED, now.View.load);
		now.View.showImage();
	}
	
}

$(document).ready(function(){
	//	Start the app when we're ready
	now.init();
});