/*
Author: Leigh Kaszick

Use this to rotate through a group of images inside a specified container.
To use this plugin, simply use the following function in your jQuery:

  $('#myimagecontainer').imgRotate();
  
  
To apply captions, place them either inside an alt attribute if using an image, or a title attribute if using an anchor link tag and then use the following code:
$('#myimagecontainer').imgRotate({
			  caption : true
});

//--------------------
	Options
//--------------------

Options can be applied as follows:

 $('#myimagecontainer').imgRotate({
			  caption : true, 
			  tagtype : 'img'
  });
 
 
The following options (with their default values) are currently available:
 
  rotateImgSpeed : 8000   -   the time between the animation being triggered (defualt: 8 seconds)
  fadeSpeed : 2000        -   the time it takes each image to fade in or out (defualt: 2 seconds)
  tagtype : 'img'         -   the tag type being rotated through, while anything can be used here, only img(alt tag) or a(title tag) can have captions (defualt: img)
  startIndex : null       -   the first image in which to show when the function initially triggers (defualt: random)
  
  caption : false         -   determine where captions are on or off (defualt: off)
  captionSpeed : 700      -   the time it takes for the caption to slide in or out (defualt: 0.7 seconds)
  captionOpacity : 0.8    -   the opacity of the caption (defualt: 80% transparent)

  
*/
(function($){
	$.fn.imgRotate = function(options) {
		
		
		var
		defaults = {
			  rotateImgSpeed : 8000,
			  fadeSpeed : 2000,
			  tagtype : 'img',
			  startIndex : null,
			  
			  caption : false,
			  captionSpeed : 700,
			  captionOpacity : 0.8
		}
		var settings = $.extend({}, defaults, options);	
		
		var $this = '#'+$(this).attr("id"),		
		list = $this+' '+settings.tagtype,
		listLength = $(list).length,
		captionDiv = '.caption',
		captions = new Array();
		
		$(list).css({position: "absolute"});
	
	
		// if start index isn't set, then use random
		if(settings.startIndex == null) { 
			settings.startIndex = Math.floor(Math.random()*(listLength));
		}
		
		
		if(settings.caption == true){
			
			//determine wheter to use alt of title
			if($(list+':eq(' + settings.startIndex + ')').attr("alt") != null){
				$alt = 'alt';
			} else {
				$alt = 'title';
			}
			
			$('<div class="caption"><span></span></div>').prependTo($this);
			
			$('.caption').css({
						background: "#000 url('i/bullet-caption-arrow.gif') 10px center no-repeat",
						color: "#fff",
						opacity: "0.8",
						display: "inline-block",
						"font-size" : "11px",
						padding: "1px 10px 1px 30px",
						position: "absolute",
						bottom: "20px",
						right: "20px",
						"z-index" : "1000",
						height: "2em"	  
							  });
			
			$('.caption span').css({
						display: "block",
						"white-space": "nowrap"   
								   });
	

			  
			  //fade caption initially, helps with cross browser opacity and keeps my css valid with less effort :)
			 $(captionDiv).fadeTo(0, settings.captionOpacity);
			 
		  
			  //put image alt tags into an array and hide all images.
			  for(i = 0, len = listLength; i < len; i++){
				  captions[i] = $(list+':eq(' + i + ')').attr($alt);
			  }	
		  
		  }
		  
		  //initially hide images
		  $(list).css({display: "none"});
		  
		  //show initial image and caption
		  $(list+':eq(' + settings.startIndex + ')').show();
		  
		  //apply initial caption text
		  if(settings.caption == true){
			  $($this+' .caption span').text(captions[settings.startIndex]);
		  }
		  
		  //interval to rotate images and caption
		  setInterval(function(){
							   
			  //fades out current image			   
			  $(list+':eq(' + settings.startIndex + ')').fadeOut(settings.fadeSpeed);	  
			  
			  
			  if(settings.caption == true){
				  //animates caption and changes text within the caption
				  $($this+' .caption').animate({width: "0px"}, settings.captionSpeed, function(){
					  $($this+' .caption span').text("");
					  $($this+' .caption span').text(captions[settings.startIndex]);
					  width = $($this+' .caption span').width();
					  $($this+' .caption').animate({width: width}, settings.captionSpeed);
				  });
			  }
			  
			  //changes the current image flag
			  if(settings.startIndex == (listLength-1)){
				  settings.startIndex = 0;
			  } else {
				  settings.startIndex = settings.startIndex+1;	
			  }
			  
			  //fade in new image
			  $(list+':eq(' + settings.startIndex + ')').fadeIn(settings.fadeSpeed);		
			  
		  }, settings.rotateImgSpeed);
		  
		
		  return this;	
	
	}
})(jQuery);