(function($){
	
	$.fn.mfcarousel = function(options){
		
		var defaults = {
			totalWidth:900,
			totalHeight:300,
			panelMaxWidth: 464,
	     	panelMinWidth: 145,
			duration: 400,
			transitionWhenClosed:true,
			pause:5000,
			fadeSpeed:400
		}
		
		var options = $.extend(defaults, options);
		
		return this.each(function(){
			var o = options;
			var intervalId;
			
			//wrap with a DIV class, CSS
			//$(this).wrap('<div class="mf_carousel" />');	
			carousel = $(this).parent();
			//carousel.css({width:o.totalWidth, height:o.totalHeight, backgroundColor: '#fff', overflow: 'hidden'});

			//CSS the UL
			$(this).css({listStyle: 'none', margin: 0, padding: 0, width:o.totalWidth + o.panelMaxWidth});
			// openSection = $(this).children('li').eq(o.openItem);
			
			//CSS the LI
			var myLis = $(this).children();
			myLis.css({float: 'left',position:'relative', padding: '0px', display: 'block', marginRight: '0px', height: o.totalHeight, width: o.panelMinWidth});
			$(this).find('img').css({padding: 0,position:'absolute',top:0, left:0});
			
			
			openSection = $(this).find('#mf_open_panel');
			o.currentBlock = openSection;				
			o.lastBlock = openSection;
			openSection.width(o.panelMaxWidth);
			$(this).find('li:last').width(o.panelMaxWidth);
			
			myLis.hover(function(){		
					
					//do not change the width of the Last LI
					if ($(o.lastBlock)[0] !=  $(this).parent().children('li:last')[0])
						$(o.lastBlock).animate({width: o.panelMinWidth+"px"}, { queue:false, duration:o.duration, easing: 'easeOutExpo'}); 

					$(this).animate({width: o.panelMaxWidth+"px"}, { queue:false, duration:o.duration,  easing: 'easeOutExpo'});
					o.currentBlock = this;				
					o.lastBlock = this;
					
					if (o.transitionWhenClosed)
					{
						clearInterval(intervalId);
						if ($(this).children().length > 1)
						{fade($(this));}
					}
					
					
	  	    	}
	  		);
			
			myLis.each(function(){
			if ($(this).children().length > 1 && $(this)[0] == $(o.lastBlock)[0])
			{fade($(this));}
				
				
			});
			
			function fade(theLi) {
					// console.log('fading');
					intervalId = setInterval(function() {
					theLi.children(':last').animate({'opacity' : 0}, o.fadeSpeed, function() {	
						theLi
						   .children(':last')
						   .css('opacity', 1) // Return opacity back to 1 for next time.					
						   .prependTo(theLi); // move it to the top of the LI (end of line).
					})
				}, o.pause);
			} // end fade
			
			
			}); // end each		

		} // End plugin.
	
})(jQuery);


$(function() {
  $('#mf_carousel').mfcarousel({
  closedTransition:true,
  pause:5000,
  fadeSpeed:400
  });
});