;(function($) {
	
	$.fn.animatedRoll = function(options) {
		
		var settings = $.extend(true, {}, $.fn.animatedRoll.defaults, options);
		
		return this.each(function() {
			var $this = $(this);
			var $image = $(settings.image.selector, $this);
			var $text = $(settings.text.selector, $this);
			
			$this.bind("mouseover", function() {
				if ($this.data("rolloutTimer")) clearTimeout($this.data("rolloutTimer"));
				$image.stop().animate(settings.image.hover, 250, "swing");
				$text.stop(true, true).animate(settings.text.hover, 250, "swing", function() {
					$text.css(settings.text.hover);
				});
			});
			
			$this.bind("mouseout", function() {
				$this.data("rolloutTimer", setTimeout(function() {
					$image.stop().animate(settings.image.off, 250, "swing");
					$text.stop(true, true).animate(settings.text.off, 250, "swing", function() {
						$text.css(settings.text.off);
					});
				}, 50));
			});
		});
	};
	
	$.animatedRollLive = function(selector, options) {
		
		var settings = $.extend(true, {}, $.fn.animatedRoll.defaults, options);
		
		$(selector).live("mouseover", function() {
			$(selector).stop().fadeTo(250, 0.4);
			var $this = $(this).stop().fadeTo(250, 1);
			if ($this.data("rolloutTimer")) clearTimeout($this.data("rolloutTimer"));
			$(settings.image.selector, $this).stop().animate(settings.image.hover, 250, "swing");
			var $text = $(settings.text.selector, $this).stop(true, true).animate(settings.text.hover, 250, "swing", function() {
				$text.css(settings.text.hover);
			});
		});
		
		$(selector).live("mouseout", function() {
			$(selector).stop().fadeTo(250, 1);
			var $this = $(this);
			$this.data("rolloutTimer", setTimeout(function() {
				$(settings.image.selector, $this).stop().animate(settings.image.off, 250, "swing");
				var $text = $(settings.text.selector, $this).stop(true, true).animate(settings.text.off, 250, "swing", function() {
					$text.css(settings.text.off);
				});
			}, 50));
		});
	};
	
	$.fn.animatedRoll.defaults = {
		image: {
			selector: "img",
			hover: {},
			off: {}
		},
		text: {
			selector: "ul li",
			hover: {
				color:"#999999"
			},
			off: {
				color:"#666666"
			}
		},
		text: {
			selector: "ul li.yellowTitle",
			hover: {
				color:"#f58220"
			},
			off: {
				color:"#666666"
			}
		},
		text: {
			selector: "ul li.whiteTitle",
			hover: {
				color:"#ffffff"
			},
			off: {
				color:"#666666"
			}
		}/*,
		text: {
			selector: "ul li:first",
			hover: {
				color:"#f58220"
			},
			off: {
				color:"#cbcbcb"
			}
		}*/
	};
})(jQuery);