(function($){
	$.fn.Fader = function(options) {
		var defaults = {
			ViewerWidth: 1026,
			ViewerHeight: 294,
			List: '.List', // Apply to the UL tag
			ActiveImageClass: 'Active',
			InactiveImageClass: '',
			FadeTimer: '5s', // 5 Seconds
			FadeTransition: 500
		};
		var options = $.extend(defaults, options);
		
		return this.each(function() {
			var obj = $(this);
			var List = obj.find(options.List);
			obj.prepend('<div class="Viewer"><div class="frame1"></div><div class="frame2"></div><div class="items"></div></div>');
			
			var frame = 1;
			var items = List.children().toArray();
			var count = items.length;
			
			var frame1 = obj.find('.frame1');
			var frame2 = obj.find('.frame2');
			var Viewer = obj.find('.Viewer');
			var items = obj.find('.items');
			
			items.append('<ul id="items"></ul>');
			List.children().each(function(i){
				items.children().append('<li rel="'+(i+1)+'"></li>');
			});
			
			Viewer.css({'position':'relative', 'width':options.ViewerWidth+'px', 'height':options.ViewerHeight+'px'});
			frame1.css({'position':'absolute', 'width':options.ViewerWidth+'px', 'height':options.ViewerHeight+'px'});
			frame2.css({'position':'absolute', 'width':options.ViewerWidth+'px', 'height':options.ViewerHeight+'px'});
			items.find('ul').css({'listStyle':'none','margin':'0', 'padding':'0'});
			items.find('li').css({'float':'left'}).addClass('bullet');
			List.children().css({'display':'none'});
			
			Change(List.children(':nth-child(1)'));
			timersStart(); // Start the timers function required to restart the timers if they get stopped
			ButtonsInit();			
			keyNavigation();
			hoverState();
			
			function hoverState() {
				obj.hover(function(){timersStop()},	function(){timersStart()});
			}
			
			function timersStart() {				
				if (count > 1) {
					obj.everyTime(options.FadeTimer, function(i) {
						frame = (frame + 1);
						if (frame > count) {
							frame = 1;
						}
						object = List.children(':nth-child('+ frame +')')
						Change(object);
					});
				}
			}
			
			function Change(object) {
				items.find('li').siblings().removeClass(options.ActiveImageClass);
				items.find('li:nth-child('+frame+')').addClass(options.ActiveImageClass)
				
				frame2.html(object.clone());
				frame2.children().css({'display':'block'});
				
				
				//transition images
				frame2.stop().fadeTo(options.FadeTransition, 1, function(){	// Fade In the new frame
					// switch images
					frame1.html(object.clone());
					frame1.children().css({'display':'block'});
					frame1.show();
					frame2.hide();
					
				});	
			}
			
			function timersStop(){
				obj.stopTime();
			}
			
			function ButtonsInit() {
				items.find('li').bind('click',function(){
					timersStop();
					frame = parseInt($(this).attr('rel'));
					Change(List.children(':nth-child('+ frame +')'));		
				});
			}
			
			function keyNavigation() {
				$(window).keyup(function(event){
					var item = obj.find('.'+options.ActiveImageClass);
					if (event.keyCode == 37) { // Left Key
						// Move left
						timersStop();
						frame = frame - 1;
						if (frame < 1) {
							frame = count;
						}
						
					} else if (event.keyCode == 39) { // Right Key
						// Move Right
						timersStop();
						frame = frame + 1;
						if (frame > count) {
							frame = 1;
						}
					}
					Change(List.children(':nth-child('+ frame +')'));
				})
			}

			
		});
	};
})(jQuery);
