// JavaScript Document
(function($){
	$.fn.extend({ 
		infiniteCarousel: function(options)
		{
			var defaults = 
			{
				transitionSpeed : 100,
				displayTime : 5000,
				textholderHeight : 0,
				displayProgressBar : 1
			};
		var options = $.extend(defaults, options);
	
    		return this.each(function() {
    			
				var o=options;
				var obj = $(this);

				var numImages = $('img', obj).length; // Number of images
				var imgHei = $('li:first').height();
				var imgWid = $('li:first').width();
				var autopilot = 1;
				
				/*$('p', obj).hide();*/ // Hide any text paragraphs in the carousel
				$(obj).width(imgWid).height(imgHei);
			
				// Build progress bar
				if(o.displayProgressBar)
				{
					$(obj).append('<div id="progress" style="position:absolute;bottom:0;background:#bbb;left:'+$(obj).css('paddingLeft')+'"></div>');
					$('#progress').width(imgWid).height(4).css('opacity','.5');
				}
			
				// Move last image and stick it on the front
				$(obj).css({'overflow':'hidden','position':'relative'});
				$('li:last', obj).prependTo($('ul', obj));
				$('ul', obj).css('left',-imgWid+'px');
			
				// Build textholder div thats as wide as the carousel and 20%-25% of the height
				
				// Prev/next button(img) 
				html = '<div id="btn_rt" style="position:absolute;right:0;top:'+((imgHei/2)-15)+'px"><a href="javascript:void(0);"><img style="border:none;margin-right:2px;" alt="next" src="images/rt.png" height="30" width="13"/></a></div>';
				html += '<div id="btn_lt" style="position:absolute;left:0;top:'+((imgHei/2)-15)+'px"><a href="javascript:void(0);"><img style="border:none;margin-left:2px;" alt="prev" src="images/lt.png" height="30" width="13"/></a></div>';
				$(obj).append(html);
			
				// Pause/play button(img)	
				html = '<a href="javascript:void(0);"><img id="pause_btn" src="images/pause.png" style="position:absolute;top:3px;right:3px;border:none;" alt="Pause" height="16" width="16"/></a>';
				html += '<a href="javascript:void(0);"><img id="play_btn" src="images/play.png" style="position:absolute;top:3px;right:3px;border:none;display:none;" alt="Play" height="16" width="16"/></a>';
				$(obj).append(html);
				$('#pause_btn').css('opacity','.5').hover(function(){$(this).animate({opacity:'1'},250)},function(){$(this).animate({opacity:'.5'},250)});
				$('#pause_btn').click(function(){
					autopilot = 0;
					$('#progress').stop().fadeOut();
					clearTimeout(clearInt);
					$('#pause_btn').fadeOut(250);
					$('#play_btn').fadeIn(250);
					
				});
				$('#play_btn').css('opacity','.5').hover(function(){$(this).animate({opacity:'1'},250)},function(){$(this).animate({opacity:'.5'},250)});
				$('#play_btn').click(function(){
					autopilot = 1;
					anim('next');
					$('#play_btn').hide();
					clearInt=setInterval(function(){anim('next');},o.displayTime+o.transitionSpeed);
					setTimeout(function(){$('#pause_btn').show();$('#progress').fadeIn().width(imgWid).height(5);},o.transitionSpeed);
				});
				
				// Left and right arrow image button actions
				$('#btn_rt').css('opacity','.75').click(function(){
					autopilot = 0;
					$('#progress').stop().fadeOut();
					anim('next');
					setTimeout(function(){$('#play_btn').fadeIn(250);},o.transitionSpeed);
					clearTimeout(clearInt);
				}).hover(function(){$(this).animate({opacity:'1'},250)},function(){$(this).animate({opacity:'.75'},250)});
				$('#btn_lt').css('opacity','.75').click(function(){
					autopilot = 0;
					$('#progress').stop().fadeOut();
					anim('prev');
					setTimeout(function(){$('#play_btn').fadeIn(250);},o.transitionSpeed);
					clearTimeout(clearInt);
				}).hover(function(){$(this).animate({opacity:'1'},250)},function(){$(this).animate({opacity:'.75'},250)});
			
				function anim(direction)
				{
					// Fade left/right arrows out when transitioning
					$('#btn_rt').fadeOut(500);
					$('#btn_lt').fadeOut(500);
					
					// animate textholder out of frame
										
					//?? Fade out play/pause?
					$('#pause_btn').fadeOut(250);
					$('#play_btn').fadeOut(250);
			
					if(direction == "next")
					{
						// Copy leftmost (first) li and insert it after the last li
						$('li:first', obj).insertAfter($('li:last', obj));	
						// Update width and left position of ul and animate ul to the left
						$('ul', obj)
							.width(imgWid*(numImages+1))
							.animate({left:-imgWid*1},o.transitionSpeed,function(){
								/*$('li:first', obj).remove();*/
								$('ul', obj).css('left',-imgWid+'px').width(imgWid*numImages);
								$('#btn_rt').fadeIn(500);
								$('#btn_lt').fadeIn(500);
								if(autopilot) $('#pause_btn').fadeIn(250);
								
								if(autopilot)
								{
									$('#progress').width(imgWid).height(4);
									$('#progress').animate({'width':0},o.displayTime,function(){
										$('#pause_btn').fadeOut(50);
										setTimeout(function(){$('#pause_btn').fadeIn(250)},o.transitionSpeed)
									});
								}
							});
					}
					if(direction == "prev")
					{
						// Copy rightmost (last) li and insert it after the first li
						$('li:last', obj).insertBefore($('li:first', obj));
						// Update width and left position of ul and animate ul to the right
						$('ul', obj)
							.width(imgWid*(numImages+1))
							.css('left',-imgWid*1+'px')
							.animate({left:-imgWid},o.transitionSpeed,function(){
								/*$('li:last', obj).remove();*/
								$('ul', obj).width(imgWid*numImages);
								$('#btn_rt').fadeIn(300);
								$('#btn_lt').fadeIn(300);
								if(autopilot) $('#pause_btn').fadeIn(250);
								
							});
					}
				}
				var clearInt = setInterval(function(){anim('next');},o.displayTime+o.transitionSpeed);
				$('#progress').animate({'width':0},o.displayTime+o.transitionSpeed,function(){
					$('#pause_btn').fadeOut(100);
					setTimeout(function(){$('#pause_btn').fadeIn(250)},o.transitionSpeed)
				});
  		});
    	}
	});
})(jQuery);

$(document).ready(function(){
	$('#newsreel').infiniteCarousel({
		displayTime: 5000,
		textholderHeight : .25
	});
});