// EventBox 0.0.1a
// No checks.

(function ($, window) {
	
	var 
	
	defaults = {
		
	},
	
	settings,
	
	active = false,
	
	index,
	list,
	timeOut,
	
	eventBox = 'eventBox',
	prefix = 'eventBox_',
	
	publicMethod;
	
	publicMethod = $.fn[eventBox] = $[eventBox] = function(options)
	{
		
		var $this = this;
		
		if ( !$this[0] && $this.selector ) {
			return $this;
		}
		
		options = options || {};
		
		list = [];
		
		$this.each(function() {
			
			// Create an hopefully unique id
			var boxId = prefix + $(this).attr('id');
			
			// Wrap the ul inside the box
			$(this).wrap('<div id="' + boxId + '" class="eventBox" />').wrap('<div class="events" />');
			
			// Extract data from each li, add click events...
			var currentIndex = 0;
			$(this).children('li').each(function() {
				
				// Extract caption, link and image
				var link = $(this).children().first();
				var url = $(link).attr('href');
				var img = $(link).children().first();
				var caption = $(img).attr('title');
				var src = $(img).attr('src');
				
				// Store
				$(this).data('index', currentIndex);
				$(this).data('boxId', boxId);
				$(this).data('caption', caption);
				$(this).data('url', url);
				$(this).data('src', src);
				
				// Replace the image with the caption
				$(this).children().first().html(caption);
				
				// Bind the click
				$(this).click(function() {
					publicMethod.show($(this).data('index'));
					return false;
				});
				
				list[currentIndex] = $(this);
				currentIndex++;
				
			});
			
			// Add the scene and display the first image in the list
			$(this).parent().parent().prepend('<div class="eventBoxScene">' 
				+ '<div class="eventImage currentImage">'
				+ '<a href="' + $(list[0]).data('url') + '">' 
				+ '<img alt="' + $(list[0]).data('caption') 
				+ '" title="' + $(list[0]).data('caption') 
				+ '" src="' + $(list[0]).data('src') + '" />'
				+ '</a>'
				+ '</div>' 
				+ '<div class="eventImage nextImage"></div>'
				+ '</div>');
			
			$(list[0]).addClass('current');
			
		});
		
		index = 0;
		publicMethod.run();
		
		return $this;
		
	};
	
	publicMethod.init = function() {
		
	};
	
	publicMethod.run = function() {
		clearTimeout(timeOut);
		timeOut = setTimeout(publicMethod.next, 5000);
	}
	
	publicMethod.next = function() {
		if (!active) {
			index = index < list.length - 1 ? index + 1 : 0;
			publicMethod.show(index);
		}
	}
	
	publicMethod.show = function(i) {
		
		if ( active ) {
			return;
		}
		
		active = true;
		
		clearTimeout(timeOut);
		
		var element = list[i];
		
		var boxId = $(element).data('boxId');
		
		$('#' + boxId + ' li').removeClass('current');
		$(element).addClass('current');
		
		// Get refs to the two display divs
		var current = $('#' + boxId + '>.eventBoxScene>.currentImage');
		var next = $('#' + boxId + '>.eventBoxScene>.nextImage');
		
		// Set the html of the next div
		$(next).html('<a href="' + $(element).data('url') + '">' 
						+ '<img alt="' + $(element).data('caption') 
						+ '" title="' + $(element).data('caption') 
						+ '" src="' + $(element).data('src') + '" />'
						+ '</a>');
		
		// Show the next
		$(next).animate({ left:'0px' }, 1000, function() {
			$(current).css({ left:'736px' }).removeClass('currentImage').addClass('nextImage');
			$(next).removeClass('nextImage').addClass('currentImage');
			index = i;
			timeOut = setTimeout(publicMethod.next, 5000);
			active = false;
		});
		
	};
	
	publicMethod.settings = defaults;
	
	$(publicMethod.init);
	
}(jQuery, this));