$(document).ready(function() {

	$('#zoom').mouseup(function() {
		if($('.MagicZoomBigImageCont').children().children().attr('usemap') === "") {
			$('.MagicZoomBigImageCont').children().children().attr('usemap','#mapper');
			$('.MagicZoomBigImageCont').children().children().attr('id','imgMap');
		}
	});
	
	// show entdecken layer
	$('#zoom').mouseover(function() {
		$('#entdecken').stop(true, true).show();
		// $(".produkteNaviContent").slideUp("slow");
		// $(".produkteNaviBottom").removeClass("activeBottom"); 
		// $(".trigger").removeClass("on", 500);
		$(".MagicZoomPup").css('display','block');
	});
	$('#zoom').mouseleave(function() {
		$('#entdecken').stop(true, true).hide();
	});


	// open zoom container & close produkte home layer
	$('#zoom').mousedown(function() {
		$('#zoom-big').fadeIn('slow');
		$('.closeZoom').fadeIn('slow');
		$('#zoomTrenner').fadeIn('slow');
		$('#produkteLeft').fadeOut('slow');
		$('#entdecken').fadeOut('slow');
		$('#produkteLayerShort').fadeOut('slow');
		return false;
	});
	
	// close zoom container & open produkte home layer
	$('.closeZoom').mousedown(function() {
		$('#zoom-big').fadeOut('slow');
		$('.closeZoom').fadeOut('slow');
		$('#zoomTrenner').fadeOut('slow');
		$('#produkteLeft').fadeIn('slow');
		return false;
	});
	
	$('.areaClass').mouseover(function(ev) {
		var relToken, leftPX, topPX, leftPos;
		relToken = $(this).attr('rel').split(",");
		
		leftPos = parseInt(relToken[0], 10) + parseInt($('#imgMap').css('left'), 10);
		topPos = parseInt(relToken[1], 10) + parseInt($('#imgMap').css('top'), 10);
		leftPX = leftPos + "px";
		topPX = topPos + "px";
		
		$('.MagicZoomBigImageCont').click(ev);	
		$('#' + relToken[2]).css('left',leftPX);
		$('#' + relToken[2]).css('top',topPX);
		
		// chooses background for different hotspot positions
		if(leftPos < 0) {
			if(topPos < -10) {
				$('#' + relToken[2]).css('background','url(/de/img/produkte/zoom/bg_layer_zoom_01.png) no-repeat');
				$('#' + relToken[2]).css('left',(leftPos + 408) + 'px');
				$('#' + relToken[2]).css('top',(topPos + 266) + 'px');
				$('#' + relToken[2] + ' .layerContent').css('padding-left','0px');
			} else {
				$('#' + relToken[2]).css('background','url(/de/img/produkte/zoom/bg_layer_zoom_01.png) no-repeat');
				$('#' + relToken[2]).css('left',(leftPos + 408) + 'px');
				$('#' + relToken[2] + ' .layerContent').css('padding-left','0px');
			}
		} else {
			if(topPos < -10) {
				$('#' + relToken[2]).css('background','url(/de/img/produkte/zoom/bg_layer_zoom_01.png) no-repeat');
				$('#' + relToken[2] + ' .layerContent').css('padding-left','0');
				$('#' + relToken[2]).css('top',(topPos + 266) + 'px');
			} else {
				$('#' + relToken[2]).css('background','url(/de/img/produkte/zoom/bg_layer_zoom_01.png) no-repeat');
				$('#' + relToken[2] + ' .layerContent').css('padding-left','0');
			}
		}
		
		$('#' + relToken[2]).stop(true, true).fadeIn('slow',function(){});	
	});
	
	$('.areaClass').mouseout(function() {
		if($('.areaClass').attr('rel')) {
			var relToken = $(this).attr('rel').split(",");
			$('#' + relToken[2]).stop(true, true).fadeOut('slow',function(){});
		}
	});
	
	// anzeige der layer
	$('#layer01').mouseover(function() {
		$('#layer01').stop(true, true).show();});
	$('#layer01').mouseleave(function() {
		$('#layer01').stop(true, true).hide();});
	$('#layer02').mouseover(function() {
		$('#layer02').stop(true, true).show();});
	$('#layer02').mouseleave(function() {
		$('#layer02').stop(true, true).hide();});
	$('#layer03').mouseover(function() {
		$('#layer03').stop(true, true).show();});
	$('#layer03').mouseleave(function() {
		$('#layer03').stop(true, true).hide();});
	$('#layer04').mouseover(function() {
		$('#layer04').stop(true, true).show();});
	$('#layer04').mouseleave(function() {
		$('#layer04').stop(true, true).hide();});
	$('#layer05').mouseover(function() {
		$('#layer05').stop(true, true).show();});
	$('#layer05').mouseleave(function() {
		$('#layer05').stop(true, true).hide();});
	$('#layer06').mouseover(function() {
		$('#layer06').stop(true, true).show();});
	$('#layer06').mouseleave(function() {
		$('#layer06').stop(true, true).hide();});
	$('#layer07').mouseover(function() {
		$('#layer07').stop(true, true).show();});
	$('#layer07').mouseleave(function() {
		$('#layer07').stop(true, true).hide();
	});
	
	window.setTimeout(function() {
		$('#zoom-big').fadeOut('slow');		
	}, 500);
});