// Constructor
var Preview = function(el, settings) {

	var self = this;

	settings = $.extend({
		previewClass: 'preview',
		duration: 200,
		delay: 100,
		offset: { left: 0, top: 0 }
	}, settings);

	$(el).each(function() {
		var text = $('a', this).text();
		var label = $(document.createElement('span')).text(text);
		var preview = $(document.createElement('div'))
			.addClass(settings.previewClass).css('opacity', 0)
			.append(label).appendTo(this.parentNode);
		var src = $('a', this).attr('rel');
		var image = $(new Image()).attr({ src: src }).appendTo(preview);
		$.data(this, 'preview', preview);
	});

	this.show = function(el, ev) {
		var preview = $.data(el, 'preview');
		var position = $(el).position();
		if (position.top < $(window).scrollTop() && false) {
			position.top = $(window).scrollTop();
		}
		var size = { width: $(el).outerWidth(), height: $(el).outerHeight() };
		preview.css({ left: position.left + settings.offset.left, top: position.top + settings.offset.top })
		.stop().show().animate(
			{ opacity: 1 },
			{ duration: settings.duration }
		);
	}

	this.hide = function(el, ev) {
		$.data(el, 'preview').stop().animate(
			{ opacity: 0 },
			settings.duration,
			function() { $(this).hide(); }
		);
	}

	$('a', el).bind('mouseenter.imagemap mouseleave.imagemap', function(ev) {
		ev.preventDefault();
		var el = this.parentNode;

		window.clearTimeout($.data(el, 'timer'));

		if ('mouseenter' == ev.type) {
			$.data(el, 'timer', window.setTimeout(function() {
				self.show.call(self, el, ev);
			}, settings.delay))
		}
		else if ('mouseleave' == ev.type) {
			$.data(el, 'timer', window.setTimeout(function() {
				self.hide.call(self, el, ev);
			}, settings.delay))
		}
	});

}

$(window).load(function() {
	// Wait for all the other stuff to load before initing the previews
	var interiorPreview = new Preview($('#design > div > div.interior'), { offset: { left: 240, top: -110 } });
	var sceneryPreview = new Preview($('#design > div > div.scenery'), { offset: { left: 0, top: -293 } });
	var fashionPreview = new Preview($('#design > div > div.fashion'), { offset: { left: -53, top: -293 } });
	var stylingPreview = new Preview($('#design > div > div.styling'), { offset: { left: -160, top: -293 } });
	var partyPreview = new Preview($('#design > div > div.party'), { previewClass:'preview party', offset: { left: -20, top: -293 } });
	var spreadShirtPreview = new Preview($('#design > div > div.spreadshirt'), {
		offset: { left: -362, top: -146 },
		previewClass: 'preview tee'
	});
});