var gesamtHoehe;
var headingHoehe;
var bildHoehe;
var textHoehe;
var textPadding;
var headingPaddingBottom;
var headingPaddingTop;
var wrapperHeight;
$(document).ready(function() {

	$("div.maImgBox").mouseover(function() {

		if(!$(this).hasClass('active')) { // Wenn dieses Element nicht Aktiv ist ...
			headingHoehe = parseInt($(this).find("h2").height()); // Höhe der Textbox ermitteln
			headingPaddingBottom = parseInt($(this).find("h2").css('padding-bottom')); // Wert für Padding-Bottom ermitteln
			headingPaddingTop = parseInt($(this).find("h2").css('padding-top')); // Wert für Padding-Bottom ermitteln
			bildHoehe = parseInt($(this).find("img").attr("fullheight")); // Originalhöhe auslesen
			textHoehe = parseInt($(this).find("p.prodDescr").height()); // Höhe der Textbox ermitteln
			textPadding = parseInt($(this).find("p.prodDescr").css('margin-bottom')); // Wert für Padding-Bottom ermitteln
			gesamtHoehe = headingPaddingTop + headingPaddingBottom + headingHoehe + bildHoehe + textHoehe + textPadding + "px"; // Benötigte Gesamthöhe errechnen
			// Alle laufenden Animationen stopppen
			$(this).stop();
			$(this).find("img").stop();
			$("div.active").stop();
			$("div.active img").stop();

			// Aktives Element deaktivieren
			$("div.active img").animate({ // Bild auf Mindesthöhe verkleinern
				'width': $("div.active img").attr('smallwidth'),
				'height': $("div.active img").attr('smallheight')}, 400);
			$("div.active").animate({'height': $("div.active").attr('containerSmallHeight')}, 400).removeClass('active'); // Container auf Mindesthöhe verkleinern und die "Active"-Klasse entfernen
			
			// Aktuelles Element aktivieren
			$(this).animate({'height': gesamtHoehe}, 400).addClass('active'); // Container auf benötigte Gesamthöhe vergrößern und "Active"-Klasse zuweisen
			$("div.active img").animate({ // Bild auf Originalgröße vergrößern
				'width': $("div.active img").attr('fullwidth'),
				'height': $("div.active img").attr('fullheight')}, 400);
		}

	});

});