(function( $ ){

	var methods = {
		init : function(options) {
			this.each(function() {
				var $this = $(this);

				var hoverLink = $this;
				var container = $('<div class="text-hover" />').css({
					'position': 'relative',
					'display': 'block',
					'height': 'auto',
					'margin': '0 auto'
				});
				var normalLinkWrapper = $('<div class="text-hover-normal" />').css({
					'display': 'inline-block',
					'position': 'absolute',
					'top': 0,
					'right': 0,
					'overflow': 'hidden',
					'width': '100%'
				});
				var hoverLinkWrapper = $('<div class="text-hover-hover" />').css({
					'display': 'inline-block',
					'width': 0,
					'overflow': 'hidden',
					'position': 'absolute',
					'top': 0,
					'left': 0
				});

				var normalLink = hoverLink.clone().css({
					'display': 'block',
					'float': 'right',
					'color': '#fff'
				});
				hoverLink.css({
					'color': hoverLink.css('color')
				});

				container.css({
					width: hoverLink.width(),
					height: hoverLink.height()
				});

				hoverLink.wrap(container).after(normalLink);
				normalLink.wrap(normalLinkWrapper);
				hoverLink.wrap(hoverLinkWrapper);


				$this.parents('.text-hover').first().mouseenter(
					function(e) {
						var hover = $('.text-hover-hover', $(this));
						var normal = $('.text-hover-normal', $(this));

						if((e.clientX - $this.offset().left) > ($this.width()/2)) {
							// right in

							hover.css({right: 0, left: 'auto'});
							normal.css({left: 0, right: 'auto'});

							$('div', hover).css({float: 'right'});
							$('div', normal).css({float: 'none'});

						}
						if((e.clientX - $this.offset().left) < ($this.width()/2)) {
							// left in

							normal.css({right: 0, left: 'auto'});
							hover.css({left: 0, right: 'auto'});

							$('div', hover).css({float: 'none'});
							$('div', normal).css({float: 'right'});

						}

						hover.animate({ width:'100%' }, 300, 'easeOutQuad');
						normal.animate({ width: 0 }, 300, 'easeOutQuad');
					}
				).mouseleave(
					function(e) {
						var hover = $('.text-hover-hover', $(this));
						var normal = $('.text-hover-normal', $(this));


						if(e.clientX < $this.offset().left + ($this.width() / 2)) {
							// left out

							normal.css({right: 0, left: 'auto'});
							hover.css({left: 0, right: 'auto'});

							$('div', hover).css({float: 'none'});
							$('div', normal).css({float: 'right'});
						}

						if(e.clientX > $this.offset().left + ($this.width() / 2)) {
							// right out

							hover.css({right: 0, left: 'auto'});
							normal.css({left: 0, right: 'auto'});

							$('div', hover).css({float: 'right'});
							$('div', normal).css({float: 'none'});
						}

						hover.stop(true, true).animate({ width: 0 }, 200, 'easeOutQuad');
						normal.stop(true, true).animate({ width:'100%' }, 200, 'easeOutQuad');
					}
				);
			});
		},

		update: function() {
			this.each(function() {
				var $this = $(this);

				// draw this element temporary to calculate its real size
				var hover =	$('.text-hover-normal div', $this);
				var tmp = $('<div />').css({
					'font-size': hover.css('font-size'),
					'opacity': 0,
					'display': 'inline-block',
					'float': 'left'
				}).text(hover.text());
				$('#navigation').append(tmp);

				$this.css({
					width: tmp.width(),
					height: tmp.height()
				});

				tmp.remove();
			});
		},

		setColor: function(color) {
			this.each(function() {
				var $this = $(this);
				var hover =	$('.text-hover-hover div', $this);

				hover.css('color', color);
			});
		}
	};

	$.fn.textHover = function(method) {
		if ( methods[method] ) {
			return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    	} else if ( typeof method === 'object' || ! method ) {
			return methods.init.apply( this, arguments );
    	} else {
			$.error( 'Method ' +  method + ' does not exist on jQuery.textHover' );
	    }

	};

})( jQuery );