(function ($) {
	$.fn.mapper = function ( options ) {
	
		var defaults = { img: [	'/js/jquery.tupakkajakeho/img/kuva1.jpg', '/js/jquery.tupakkajakeho/img/kuva2.jpg', '/js/jquery.tupakkajakeho/img/kuva3.jpg' ] };
		options = $.extend(defaults, options);
		
		var tOut;
		
		function clearTOut() {	if (tOut) clearTimeout(tOut);}
	
		var $mapImage = $(options.imgId);
	
		$mapImage.parent().css( {
			width: $mapImage.width(),
			height:  $mapImage.height(),
			background : 'transparent url('+options.img[0]+') no-repeat'		
		} );
		
		var $dbImg = $('<div style="position:absolute;background-image:url('+options.img[2]+')"></div>').hide();
		$mapImage.after($dbImg);
	
		$mapImage
			.attr('src', options.img[0])
			.mouseover( function() {
				clearTOut();
				if ($mapImage.attr('src') != options.img[1]) $mapImage.hide().attr('src',options.img[1]).fadeIn();
				$mapImage.fadeTo("slow",1);
			})
			
		$mapImage.parent().mouseout( function() {
			tOut = setTimeout( function() { $mapImage.stop().fadeTo("slow", 0.1); },	100);
		});
		
		return this.each( function(index) {
		
			$(this)
				.mouseover( clearTOut )
				.click( function (e) {
					$(".info").fadeOut() ;
					var $t = $(e.target);								
					var c = $t.attr('coords').split(',');
					$mapImage.fadeTo("slow",0.1);
					$dbImg.hide().css( {
						left:c[0]+'px',
						top:c[1]+'px',
						width:(c[2]-c[0])+'px',
						height:(c[3]-c[1])+'px',
						'background-position': '-'+c[0]+'px -'+c[1]+'px'
					}).fadeIn();
					$( $t.attr('href') ).fadeIn();
					return false;
				});
		});	
	}
 })(jQuery);

	
	jQuery( function () {
		jQuery('#map').mapper( { imgId : '#mapImage' } );
	});