/*
bildSetzen:
ein Bild namens 'hauptbild' per js in einem Container namens 'bildflaeche' 
maximieren und zentrieren, ohne es zu verzerren; am Ende werden die CSS-Werte
am Bild für top, left, width und height gesetzt.

getStyle:
einen css-Wert routiniert bestimmen, (Parameter js-weiter)

getStyle2:
..Parameter css-näher (IDs und Klassen namentlich angeben)
--> besser

*/



function bildSetzen ()
{

//	alert ("so siehts zu Beginn aus, vor jedem javascript!");

//	onresize = alert ("resize"); //funktioniert, ie bricht danach das Script ab

	var bildcontainer, bild;
	
	bildcontainer = document.getElementById ("bildflaeche");
	bild = document.getElementById ("hauptbild");

//	alert ("Bildcontainer-Breite: " + bildcontainer.clientWidth);
//	alert ("äußere Bildcontainer-Breite: " + window.outerWidth);

//	alert ("Bildbreite: " + bild.width);

//	alert ("Bildcontainer-Breite: " + getStyle (bildcontainer, "width"));   //ie sagt "auto"
//	alert ("Bildcontainer-Breite2: " + getStyle2 ("bildflaeche", "width")); //ie sagt "auto"
//	alert ("Bildcontainer-Breite3: " + bild.width); 						//wie angegeben 400
//	alert ("Bildcontainer-Breite4: " + bildcontainer.width); 				//undefined

//	bild.style.display = "none";
//	alert ("Bildcontainer-Breite: " + bildcontainer.offsetWidth);
//	alert ("Bildcontainer-Höhe: " + bildcontainer.offsetHeight);	//ie sagt 0
//	alert ("Bildcontainer-Höhe: " + bildcontainer.height);			//alle sagen undefined
//	alert ("Bild-Höhe: " + bild.height);							//opera sagt 100 statt offsetHight
											//des html-Attributs height="100%" wegen - inner_css verwenden
//	alert ("Bild-Höhe: " + bild.offsetHeight);						//ie sagt 0
//	alert ("Bild-Breite: " + bild.width);							//opera sagt offsetWidth, warum?
//	alert ("Bild-Breite: " + bild.offsetWidth);						//ie sagt 0
//	bildcontainer.style.width = "800px";
//	alert ("Bildcontainer-Breite: " + bildcontainer.style.width);
//	bildcontainer.style.width = bildcontainer.style.width - "px" + 100 + "px";
//	alert ("Bildcontainer-Breite: " + bildcontainer.style.width);

	//ie abfangen
	if (getStyle (bildcontainer, "width") == "auto")
	{
//		bild.width = "100%";
//		alert ("nur IE");
		return;
	}
//	alert ("nach IE-Abfrage");

//	bildcontainer.style.textAlign = "left";
	if (bild.height * bildcontainer.offsetWidth > bild.width * bildcontainer.offsetHeight)
	{
//		alert ("F1");
//		alert ("1.: " + bild.width * bildcontainer.offsetHeight / bild.height + "px");
	//	bild.width = bild.width * bildcontainer.offsetHeight / bild.height;
	//	bild.height = bildcontainer.offsetHeight;
//		alert ("Bildbreite/-höhe: " + bild.width + "/" + bild.height);
	//	bild.style.top = 0;
	//	bild.style.left = (bildcontainer.offsetWidth - bild.width) / 2;
		bild.style.height = "100%";
	// bzw nix tun: der Container centert das Bild, das Bild ist vertikal maximal
	}
	else
	{
//		alert ("F2 " + bildcontainer.offsetWidth*bild.height/bild.width);
		bild.style.height = "auto";//parseInt (bildcontainer.offsetWidth*bild.height/bild.width) + "px"; // ~unnötig
		bild.style.width =  "100%";//bildcontainer.offsetWidth;
		bild.style.top = (bildcontainer.offsetHeight - bild.height) / 2;
//		bild.style.left = 0; // klingt unnötig
	}
//	alert ("abschließende Bild-Höhe: " + bild.height);
//	alert ("abschließende Bild-Breite: " + bild.width);
//	bild.style.display = "inline";
}




/*
It is then called, for instance, like this:
	getStyle(document.getElementById("container"), "font-size");
*/

function getStyle(oElm, strCssRule){
	var strValue = "";
	if(document.defaultView && document.defaultView.getComputedStyle){
		strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
	}
	else if(oElm.currentStyle){
		strCssRule = strCssRule.replace(/-(w)/g, function (strMatch, p1){
			return p1.toUpperCase();
		});
		strValue = oElm.currentStyle[strCssRule];
	}
	return strValue;
}


function getStyle2(el,styleProp)
{
	var x = document.getElementById(el);
	if (x.currentStyle)
		var y = x.currentStyle[styleProp];
	else if (window.getComputedStyle)
		var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
	return y;
}





// eine weitere Version, Stylewerte auszulesen (ungetestet)

function readStyles(strID, strCSS){
  var strFarbe;
//  Falls der Brower die Methode "getComputedStyle" kennt (W3C-DOM)
  if(window.getComputedStyle){
    strFarbe = window.getComputedStyle(document.getElementById(strID), null).getPropertyValue(strCSS);
  }

  //  Falls der Browser die Methode "currentStyle" kennt (neuere IEs)
  else if(document.getElementById(strID).currentStyle){
    strFarbe = document.getElementById(strID).currentStyle[arrCSS[strCSS]];
  }

  alert(strFarbe);
}