/*
 * Jonathans Carousel 
 */


(function(jQuery) {

	jQuery.fn.jonathansCarousel = function(){
				
		this.each(function() {  
			var ParentObj = jQuery(this);

			var w         = jQuery("li", ParentObj).width(); 
			var h         = jQuery("li", ParentObj).height(); 
			var l         = ParentObj.find("ul>li").length;
			var lis       = new Array();
			
			ParentObj.width(w); 
			ParentObj.height(h); 
			ParentObj.css({
				overflow: "hidden",
				position: "relative"
			});
			
			ParentObj.find("ul>li").each(function(i) {
				lis[i] = jQuery(this);
				jQuery(this).css({
					position: "absolute",
					zIndex: 0,
					opacity: 0					
				});
			});
			
			lis[0].css({zIndex: 2, opacity: 1});
			lis[1].css({zIndex: 1});
						
			var animateSlide = function(key) {
				
				var nextKey     = ((key+1) >= l) ? 0 : (key+1);		
				var zIndexStart = 2;
				var zIndexStop  = 0;
				
				lis[nextKey].css({zIndex: 1});
				
				lis[key].animate({
					opacity: 0
				}, 1000, function() {
					jQuery(this).css("zIndex", parseInt(zIndexStop));
				});
				
				lis[nextKey].animate({
					opacity: 1
				}, 1000, function() {
					jQuery(this).css("zIndex", parseInt(zIndexStart));
				});
				
				setTimeout(function() {
					jQuery("#hello").html("Key: " + key + " zIndex 1st : " + zIndexStart + " zIndex 2nd : " + zIndexStop);
					animateSlide(nextKey);
				}, 3000);
			};
			
			
			setTimeout(function() {
				animateSlide(0);
			}, 3000);
		});
	  
	};

})(jQuery);