/******************************************************************************************************************************************
*****Gal - Imageviewer
**
**   Verwendung: 
**   dem 'onclick'-Attribut muss als Wert den Funktionsaufruf "Gal.showImageBox(imagePath,imageTitle)" zugewiesen werden
**   Parameter:		imagePath - der Dateipfad zum Bild als String
**			imageTitle - der Titeltext des Bildes, welcher angezeigt wird, wenn der Mauszeiger über das angezeigte Bild fährt
** 
**   Beispiel: "Gal.showImageBox('/bilder/bild.gif','Titeltext des Bildes, welcher bei onmouseover angezeigt wird')"
**
**   Im rechten oberen Rand des bildes wird ein 'Schließen'-Icon angezeigt, welches sich im Verzeichnis "bilder/grafik/funktionen/" 
**   befindet und den Dateinamen "closeImage.gif" hat, was ansonsten auf Zeile 120 geändert werden muss.
**
*******************************************************************************************************************************************/


function Gal(){};

Gal.showImageBox = function(imagePath,imageTitle)
{
	var imageFile = new Image();
	if(imageTitle)
		imageFile.title = imageTitle;
	imageFile.onload=function(){Gal.drawImageBox(imageFile)};
	imageFile.src = imagePath;
}

Gal.drawImageBox = function(imageFile)
{
	var msgw,msgh,bordercolor; 
	titleheight=25; //title Height
	bordercolor="#BBBBBB";//boder color
	titlecolor="#99CCFF";//title color

	var myWidth = 0, myHeight = 0;
	if( typeof( window.innerWidth ) == 'number' ) {
	  //Non-IE
	  myWidth = window.innerWidth;
	  myHeight = window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
	  //IE 6+ in 'standards compliant mode'
	  myWidth = document.documentElement.clientWidth;
	  myHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
	  //IE 4 compatible
	  myWidth = document.body.clientWidth;
	  myHeight = document.body.clientHeight;
	}
	
	var imageWidth = imageFile.naturalWidth || imageFile.width;
	var imageHeight = imageFile.naturalHeight || imageFile.height;
  	var scaledImageWidth = imageWidth;
	var scaledImageHeight = imageHeight;
	if(imageWidth>(myWidth-180))
	{
		var scaleFactor = imageWidth/(myWidth-180);
		scaledImageWidth = (imageWidth/scaleFactor);
		scaledImageHeight = (imageHeight/scaleFactor);
	}
	if(scaledImageHeight>(myHeight-160))
	{
		var scaleFactor = scaledImageHeight/(myHeight-160);
		scaledImageWidth= (scaledImageWidth/scaleFactor);
		scaledImageHeight= (scaledImageHeight/scaleFactor);
	}
	imageFile.style.width= scaledImageWidth+"px";
	imageFile.style.height= scaledImageHeight+"px";

	
	var bgObj=document.createElement("div"); 
	bgObj.setAttribute('id','bgDiv'); 
	bgObj.style.position="absolute"; 
	bgObj.style.top="0"; 
	bgObj.style.background="#000000"; 
	/* Transparenzeinstellungen für Hintergrund Internet Explorer */
	bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
	/* Transparenzeinstellungen für Hintergrund Firefox */
	bgObj.style.opacity="0.4"; 
	bgObj.style.left="0";

	var bgWidth = myWidth;
	if(Gal.getDocumentHeight()>myHeight)
		bgWidth = bgWidth-Gal.getScrollerWidth();
 
	bgObj.style.width=bgWidth + "px"; 
	bgObj.style.height=Gal.getDocumentHeight() + "px"; 
	bgObj.style.zIndex = "10000"; 
	bgObj.onclick=function(){Gal.hideImageBox()};	
	
	var msgObj=document.createElement("div");
	msgObj.setAttribute("id","msgDiv"); 
	msgObj.setAttribute("align","center"); 
	msgObj.style.background="white"; 
	msgObj.style.border="1px solid " + bordercolor; 
	msgObj.style.position = "absolute";
	msgObj.style.left = "50%";
	msgObj.style.top = (50+Gal.getScrollXY()[1])+"px";
	if(scaledImageHeight < myHeight-120)
	{
		msgObj.style.height = (scaledImageHeight + 80)+"px";
	}
	else{
		msgObj.style.height = (myHeight-70)+"px";
	}
	msgObj.style.font="12px/1.6em Arial, Helvetica, sans-serif"; 
	msgObj.style.marginLeft = "-"+((scaledImageWidth+100)/2)+"px" ; 
	
	msgObj.style.width = (scaledImageWidth+100)+ "px"; 
	msgObj.style.textAlign = "center"; 
	msgObj.style.zIndex = "10001"; 
	msgObj.style.paddingLeft = "20px";
	msgObj.style.paddingRight = "20px";
	msgObj.onclick=function(){Gal.hideImageBox()};

	var closeImgDiv = document.createElement("div");
	closeImgDiv.style.visibility="visible";
	closeImgDiv.style.textAlign="right";
	closeImgDiv.style.width="100%";
	closeImgDiv.style.marginTop="20px";
	closeImgDiv.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
	closeImgDiv.style.opacity="1"; 
	var closeImg = document.createElement("img");
	closeImg.src = "bilder/grafik/grafik_javascript/closeImage.gif";
	closeImg.onclick=function(){Gal.hideImageBox()};
	closeImg.style.cursor="pointer";
	closeImgDiv.appendChild(closeImg);
	msgObj.appendChild(closeImgDiv);
	
	var imageDiv = document.createElement("div");
	imageDiv.setAttribute("align","center");
	imageDiv.id="imageDiv";
	imageDiv.style.zIndex = "10002";
	imageDiv.style.marginTop="20px";
	imageDiv.style.position="absolute";
	imageDiv.style.left="50%"
	imageDiv.style.top = (70+Gal.getScrollXY()[1])+"px";
	imageDiv.style.marginLeft="-"+((scaledImageWidth-50)/2)+"px";
	imageFile.onclick=function(){Gal.hideImageBox()};
	imageDiv.onclick=function(){Gal.hideImageBox()};
	imageDiv.appendChild(imageFile);
	
	//append the message object
	document.body.appendChild(bgObj); 
	document.body.appendChild(msgObj);
	document.body.appendChild(imageDiv);
	return true;
	
}

Gal.hideImageBox = function()
{
	var bgDiv = document.getElementById("bgDiv");
	var msgDiv = document.getElementById("msgDiv");
	var imageDiv = document.getElementById("imageDiv");
	if(bgDiv)
		document.body.removeChild(bgDiv);
	if(msgDiv)
		document.body.removeChild(msgDiv);
	if(imageDiv)
		document.body.removeChild(imageDiv);
}


Gal.getDocumentHeight = function()
{
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}



Gal.getScrollXY = function() 
{
     var scrOfX = 0, scrOfY = 0;
     if( typeof( window.pageYOffset ) == 'number' ) {
     //Netscape compliant
	scrOfY = window.pageYOffset;
     	scrOfX = window.pageXOffset;
     } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
     //DOM compliant
    	scrOfY = document.body.scrollTop;
     	scrOfX = document.body.scrollLeft;
     } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
     //IE6 standards compliant mode
        scrOfY = document.documentElement.scrollTop;
        scrOfX = document.documentElement.scrollLeft;
     }
     return [ scrOfX, scrOfY ];
}

Gal.getScrollerWidth = function() {
    var scr = null;
    var inn = null;
    var wNoScroll = 0;
    var wScroll = 0;
    scr = document.createElement('div');
    scr.style.position = 'absolute';
    scr.style.top = '-1000px';
    scr.style.left = '-1000px';
    scr.style.width = '100px';
    scr.style.height = '50px';
    scr.style.overflow = 'hidden';
    inn = document.createElement('div');
    inn.style.width = '100%';
    inn.style.height = '200px';
    scr.appendChild(inn);
    document.body.appendChild(scr);
    wNoScroll = inn.offsetWidth;
    scr.style.overflow = 'auto';
    wScroll = inn.offsetWidth;
    document.body.removeChild(
    document.body.lastChild);
    return (wNoScroll - wScroll);
}