/* HOW TO USE 

*** JS part ***

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="transition_plugin.js"></script>
<script>
$(document).ready(function() {
	$('#transition').rotate({interval: 3500, transition_time: 1000});
});
</script>



*** HTML part ***

<div id="transition" style="position: relative; width: 100px; height: 100px;">
	<img src="img1.jpg" style="position: absolute;" />
	<img src="img2.jpg" style="position: absolute; display: none;" />
	<img src="img3.jpg" style="position: absolute; display: none;" />
</div>


*** ANY PROBLEMS? SPEAK TO BART (bart@propcom.co.uk). ***

*/

(function($) {	
	
	$.fn.rotate = function(options) {
		var defaults = {
			interval: 2000,
			transition_time: 1000
		}
	
		var opts = $.extend(defaults, options);
		var obj = this;
		var num_images = this.find("img").size();
		obj.cur_image = 0;
		setInterval(function() {rot(obj, opts.transition_time, num_images);}, opts.interval);
		
	}		

	// private
	
	function rot(obj, transition_time, num_images) {
		obj.find("img").eq(obj.cur_image).fadeOut(transition_time);
		obj.cur_image++;
		if (obj.cur_image >= num_images) obj.cur_image = 0; 
		obj.find("img").eq(obj.cur_image).fadeIn(transition_time);
	}
	
})(jQuery);