function getAbsolutePosition(element) {
    var r = { x: element.offsetLeft, y: element.offsetTop };
    if (element.offsetParent) {
    var tmp = getAbsolutePosition(element.offsetParent);
    r.x += tmp.x;
    r.y += tmp.y;
    }
    return r;
};

//
//getPageScroll()
//Returns array with x,y page scroll values.
//Core code from - quirksmode.com
//
function getPageScroll(){

     var xScroll, yScroll;

     if (self.pageYOffset) {
             yScroll = self.pageYOffset;
             xScroll = self.pageXOffset;
     } else if (document.documentElement && document.documentElement.scrollTop){         // Explorer 6 Strict
             yScroll = document.documentElement.scrollTop;
             xScroll = document.documentElement.scrollLeft;
     } else if (document.body) {// all other Explorers
             yScroll = document.body.scrollTop;
             xScroll = document.body.scrollLeft;        
     }

     arrayPageScroll = new Array(xScroll,yScroll) 
     return arrayPageScroll;
}

function getPageSize() {

        var xScroll, yScroll;

        if (window.innerHeight && window.scrollMaxY) {
                xScroll = window.innerWidth + window.scrollMaxX;
                yScroll = window.innerHeight + window.scrollMaxY;
        } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
                xScroll = document.body.scrollWidth;
                yScroll = document.body.scrollHeight;
        } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
                xScroll = document.body.offsetWidth;
                yScroll = document.body.offsetHeight;
        }

        var windowWidth, windowHeight;

//        console.log(self.innerWidth);
//        console.log(document.documentElement.clientWidth);

        if (self.innerHeight) {        // all except Explorer
                if(document.documentElement.clientWidth){
                        windowWidth = document.documentElement.clientWidth;
                } else {
                        windowWidth = self.innerWidth;
                }
                windowHeight = self.innerHeight;
        } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
                windowWidth = document.documentElement.clientWidth;
                windowHeight = document.documentElement.clientHeight;
        } else if (document.body) { // other Explorers
                windowWidth = document.body.clientWidth;
                windowHeight = document.body.clientHeight;
        }

        // for small pages with total height less then height of the viewport
        if(yScroll < windowHeight){
                pageHeight = windowHeight;
        } else {
                pageHeight = yScroll;
        }

//        console.log("xScroll " + xScroll)
//        console.log("windowWidth " + windowWidth)

        // for small pages with total width less then width of the viewport
        if(xScroll < windowWidth){
                pageWidth = xScroll;
        } else {
                pageWidth = windowWidth;
        }
//        console.log("pageWidth " + pageWidth)
        //alert(pageWidth + "\n" + pageHeight + "\n" + windowWidth + "\n" + windowHeight);
        arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
        return arrayPageSize;
}

function getObjectHeight(elm)
{
   return elm.offsetHeight;
}

function getObjectWidth(elm)
{
   return elm.offsetWidth;
}

function getWindowSize (w) {
    w = w ? w : window;
    var width = w.innerWidth || (w.document.documentElement.clientWidth || w.document.body.clientWidth);
    var height = w.innerHeight || (w.document.documentElement.clientHeight || w.document.body.clientHeight);
    return [width, height];
}


var displayImageLayer = false;
function showImage(element){

	//	Sichtbaren Divlayer verstecken
	if(displayImageLayer !== false){
		
		$('image_'+displayImageLayer.id).setStyle({
			display: 'none'
		});
	}
	//	Speichern welcher Divlayer jetzt angezeigt wird 
	displayImageLayer = element;
	
	//	Die Ids der Divlayer müssen immer 'image_'+IdWoraufGeklicktWurde heißen
	id = 'image_'+element.id;

	// Breite des Divlayers an die des beinhaltenden Bildes anpassen

	$(id).setStyle({
		visibility:'hidden'			
	});
	$(id).setStyle({
		  display: 'inline',
		  visibility: 'visible'
	});
	
	var image = $(id).getElementsByTagName('img')[0];
	var divLayerWidth;

	if(image){
		divLayerWidth = image.offsetWidth;
	}
	else{
		divLayerWidth = 500;
		//	Wenn es kein Bild gibt den divlayer entfernen
		$(id).removeChild($(id).getElementsByTagName('div')[0]);
	}
	
	$(id).setStyle({
		width: (divLayerWidth)+'px'
	});	
	
	//	Layer in der Mitte positionieren
	var arrayPageSize = getPageSize();
    var arrayPageScroll = getPageScroll();
    var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);
    var lightboxLeft = arrayPageScroll[0];
    
    if(lightboxLeft == 0){
    	windowSize = getWindowSize()[0];
    	//	Halbe HTML-Breite - halbe Divlayerbreite - 220
    	// -220 weil position:absolute;left:0px;top:0px; nicht die äußerst linke ecke ist, sondern die äußerst linke Ecke des Contentbereichs ??
    	lightboxLeft = (windowSize/2)- (divLayerWidth/2) -220;
    }
	
	$(id).setStyle({
		left: lightboxLeft+'px',
		top : lightboxTop+'px'
	});

	// IE6 passt die breiten der Kindelemente nicht von selbst an
	var paragraph = $(id).getElementsByTagName('p')[1];
	if(paragraph){
		$(paragraph).setStyle({
			width: (divLayerWidth)+'px'
		});
		var table = $(id).getElementsByTagName('table')[0];
		$(table).setStyle({
			width: (divLayerWidth)+'px'
		});
	}
}

Event.observe(window, "load", function() {
	if ($('main_image_frame')) var mainImage = $('main_image_frame').getElementsByTagName('img')[0];
	if(mainImage)
	{
		var cords = $$('.cords');
		var hiddenImages = $$('.hidden_image');
		for(var i = 0; i < cords.length; i++){
			$('area_map').innerHTML = $('area_map').innerHTML + '<area href="javascript:void(0);" onclick="javascript:showImage(this);" coords="'+cords[i].value+'" shape="rect" id="hidden_'+i+'"/>';
			hiddenImages[i].id = 'image_hidden_'+i;		
		}
		$(mainImage).useMap="#agent_workspace";
	}
});