(function() {
	$.fn.benefits = function(options) {
		var isMethodCall = (typeof options == "string") || false;
		var args = arguments;
			
		$(this).each(function() {
			var benefits = $(this).data("benefits");
			
			if (isMethodCall && benefits) {
				if ( benefits[options] && $.isFunction(benefits[options]) ) {
					benefits[options].apply(benefits, $.makeArray(args).slice(1));
				}
			} else if (!isMethodCall) {
				if ( !benefits ) {
					benefits = new $.benefits(this, options);
					$(this).data("benefits", benefits);
				} else {
					benefits.setOptions(options);
				}
			}
		});
		
		return this;
	}
	
	$.benefits = function(elem, options) {
		this.elem = elem;
		this.options = $.extend( {}, $.benefits.defaults, options );
		this.init();
	};
	
	$.extend( $.benefits, {
		defaults: {
			showDuration: 800,
			hideDuration: 800,
			textFadeInDuration: 2000,
			textFadeOutDuration: 1000
		},
		prototype: {
			init: function() {
				this.items = [];
				this.selected = -1;
				
				var items = $(">li", this.elem);
				for (var i=0, n = items.length; i < n; i++) {
					if ($(items[i]).is(".benefit-selected")) {
						if (this.selected < 0) {
							this.selected = i;
						} else {
							$(items[i]).removeClass(".benefit-selected");
						}
					}
					this.items[i] = {
						elem: items[i],
						width: $(items[i]).innerWidth()
					}
					
					if ($(".benefit-content", items[i].elem).length > 0) {
						this.items[i].content = $($(".benefit-content", items[i])[0]);
						this.items[i].content_width = this.items[i].content.innerWidth();
						this.items[i].content_width -= parseInt(this.items[i].content.css("paddingleft")) || 0;
						this.items[i].content_width -= parseInt(this.items[i].content.css("paddingRight")) || 0;
					}
					
					this.items[i].width = $(".benefit-content", items[i]).outerWidth(true) + $(".benefit-header", items[i]).outerWidth(true);
					this.items[i].header_width = $(".benefit-header", items[i]).outerWidth(true);
					$(this.items[i].content).wrapInner( $("<div />").addClass("benefit-fader").css("position","relative") );
					
					if ( $(items[i]).is(".benefit-selected") ) {
						$(this.items[i].elem).css({
							width:this.items[i].width+"px"
						});
						//$(".benefit-fader", this.items[i].elem).css({opacity:''});
					} else {
						$(this.items[i].elem).css({
							width:this.items[i].header_width+"px"
						});
						$(".benefit-fader", this.items[i].elem).css({opacity:0});
					}
				}
				
				
				$(this.selected).addClass(".benefit-selected");
				this.setupEvents();
			},
			
			setupEvents: function() {
				var self = this;
				$(".benefit-header", this.elem).bind("mouseover", function(event) {
					if ( !$(this).parents("li").is(".benefit-selected") ) {
						self.animate.apply(self, [this, event]);
					}
				});
			},
			
			animate: function(elem, event) {
				var toShow, toHide;
				var items;
				var self = this;
				
				//if (this.animating) return;
				
				this.animating = true;
				
				toShow = $(elem).parents("li");
				if ($(toShow).is(".benefit-selected")) return;
				
				toHide = $("li.benefit-selected", this.elem);
				
				items = $(">li", this.elem);
				
				if (toHide.length) {
					toHide = this.items[ $(items).index(toHide) ];
				}
				
				if (toShow.length) {
					toShow = this.items[ $(items).index(toShow) ];
				}
				
				if (toHide) {
					$(toHide.elem).stop();
					$(toHide.elem).removeClass("benefit-selected");
					$(".benefit-fader", toHide.elem).stop().animate({opacity:0}, {queue:false, duration: this.options.textFadeOutDuration});
					$(toHide.elem).animate({width:toHide.header_width}, {queue:false, duration: this.options.hideDuration, easing: "easeInOutExpo", complete:function(){
						
					}});
				}
				
				if (toShow) {
					$(toShow.elem).stop();
					$(toShow.elem).addClass("benefit-selected");
					$(toShow.elem).animate({width:toShow.width}, {queue:false, duration: this.options.showDuration, easing: "easeInOutExpo", complete:function(){
						$(".benefit-fader", this).stop().animate({opacity:1}, {queue:false, duration: self.options.textFadeInDuration, complete:function(){
							if ($.browser.msie) {
								this.style.filter = ''
							}
						}});
					}});
				}
				
				var t = (this.options.hideDuration > this.options.showDuration) ? this.options.hideDuration : this.options.showDuration;
				
				window.setTimeout(function(){
					self.animating = false;
				}, t);
			}
		}
	});
	
	$().ready(function(){
		//to have a balanced show and hide animation, show and hide duration should has equal number
		$(".benefits").benefits({
			showDuration: 1200,
			hideDuration: 1200,
			textFadeInDuration: 2500,
			textFadeOutDuration: 1000
		});
	});
})(jQuery);