(function ($) {
	$.fn.imageOverlay = function (options) {

		$.fn.imageOverlay.defaults = {
			opacity: 0.7,
			duration: 'normal',
			easing: 'linear',
			from: 0,
			to: 0,
			imageElement: '.image',
			descriptionElement: '.description'
		};

		var settings = $.extend({}, $.fn.imageOverlay.defaults, options),
		anim = function (e, t) {
			e.stop().animate({
				top: t
			}, settings.duration, settings.easing);	
		};

		return this.each(function (i, e) {

			var $this = $(e),
			$img = $(settings.imageElement, e),
			$desc = $(settings.descriptionElement, e),
			width = parseFloat($(this).width()) || 640,
			height = parseFloat($(this).height()) || 480,
			from = height - parseFloat(settings.from),
			to = (settings.to !== 0) ? height - settings.to : parseFloat(settings.to);

			$this.css({
				overflow: 'hidden',
				position: 'relative'
			});

			$img.css({
				top: 0,
				left: 0,
				position: 'absolute'
			});

			$desc.css({
				display: 'block',
				width: width,
				height: height,
				opacity: settings.opacity,
				top: from,
				left: 0,
				position: 'absolute'
			});

			$this.bind('mouseenter',function () {
				anim($desc, to);
			}).bind('mouseleave',function () {
				anim($desc, from);
			});

		});

	};

}(jQuery));