var left = 0;
var top = 0;
var width = 20;
var height = 15;
var block;
var zaehler;

function imgPopup(image) {
    var browsername = navigator.userAgent.toLowerCase();
    var IE = (browsername.indexOf("msie")>-1);
    if (IE) {
        left = screen.availWidth/2;
        top = (screen.availHeight/2)*0.8;
    }
    else {
        left = window.innerWidth/2;
        top = window.innerHeight/2;
    }
    
    block = document.createElement('div');
    block.style.width = width+'px';
    block.style.height = height+'px';
    block.style.top = top+'px';
    block.style.left = left+'px';
    block.id = 'imgpopup';
    //block.setAttribute('onClick', 'document.getElementById(\'wrapper\').removeChild(this);');
    
    bildblock = document.createElement('div');
    bildblock.style.visibility='hidden';
    bildblock.onclick = function() {document.getElementById('wrapper').removeChild(this.parentNode);};
    var bild = document.createElement('img');
    var splitSrc = image.firstChild.src.split('/');
    var splitSrc = splitSrc[splitSrc.length-1].split('_');
    var imgSrc = '';
    for (var i=2; i<splitSrc.length; i++) {
        imgSrc += '_'+splitSrc[i];
    }
    bild.src = '/images/cache/800_600'+imgSrc;
    bild.title = 'Klicken, um das Bild zu schließen';
    
    document.getElementById('wrapper').appendChild(block);
    bildblock.appendChild(bild);
    block.appendChild(bildblock);
    
    zaehler = window.setInterval(resizeX,90);
}

function resizeX() {
    if (width<800) {
        width+=50;
        left-=25;
        
        block.style.width = width+'px';
        block.style.left = left+'px';
    }
    else {
        window.clearInterval(zaehler);
        zaehler = window.setInterval(resizeY,90);
    }
}

function resizeY() {
    if (height<600) {
        height+=40;
        top-=20;
        
        block.style.height = height+'px';
        block.style.top = top+'px';
    }
    else {
        window.clearInterval(zaehler);
        block.firstChild.style.visibility="visible";
        width=20;
        height=15;
    }
}

function getY( oElement ) {
    var iReturnValue = 0;
    while( oElement != null ) {
        iReturnValue += oElement.offsetTop;
        oElement = oElement.offsetParent;
    }
    return iReturnValue;
}

function getX( oElement ) {
    var iReturnValue = 0;
    while( oElement != null ) {
        iReturnValue += oElement.offsetLeft;
        oElement = oElement.offsetParent;
    }
    return iReturnValue;
}

var pos = 1;
var max = 1;
var id = 1;

function openOverlay(bid,bcount) {
    pos = 1;
    max = bcount;
    id = bid
    var browsername = navigator.userAgent.toLowerCase();
    var IE = (browsername.indexOf("msie")>-1);
    if (IE) {
        var weite = document.body.clientWidth;
        var hoehe = document.body.clientHeight;
	var IEV = browsername.substr(browsername.indexOf("msie")+5,1);
	IEV="7";
    }
    else {
        var weite = window.innerWidth;
        var hoehe = window.innerHeight;
	var IEV = 999; //so the special IE 7- Code will not take action in other Browsers
    }
    
    var overlay = document.createElement('div');
    overlay.setAttribute('id','overlay');
    if (IEV<8)
	overlay.setAttribute('className','overlay');
    else
        overlay.setAttribute('class','overlay');
    
    overlay.style.height = hoehe+'px';
    
    var innerOverlay = document.createElement('div');
    innerOverlay.setAttribute('id','inneroverlay');
    if (IEV<8)
	innerOverlay.setAttribute('className','innerOverlay');
    else
        innerOverlay.setAttribute('class','innerOverlay');
    
    if (IE) {
	innerOverlay.style.top = (weite*0.7-268)/2+'px';
    }
    else {
	innerOverlay.style.top = (hoehe-268)/2+'px';
    }
    innerOverlay.style.left = (weite-360)/2+'px';
    
    var bild = document.createElement('img');
    bild.setAttribute('src','/images/overlay_'+id+'/'+pos+'.jpg');
    bild.setAttribute('id','olBild');
    bild.style.margin = '4px';
    
    var bild2 = document.createElement('img');
    bild2.setAttribute('src','/images/overlay_navi.png');
    bild2.setAttribute('useMap','#olmap');
    bild2.style.margin = '0 4px 0 4px';
    
    if (IEV<8) {
	var imgmap = document.createElement('<MAP name="olmap">');
	
	map1 = document.createElement('<area shape="rect" coords="0,0,21,21" href="#" onclick="overlayBack(); return false;" title="ein Bild zurück" alt="ein Bild zurück"/>');
	map2 = document.createElement('<area shape="rect" coords="160,0,190,21" href="#" onclick="closeOverlay(); return false;" title="Fenster schließen" alt="Fenster schließen"/>');
	map3 = document.createElement('<area shape="rect" coords="335,0,352,21" href="#" onclick="overlayNext(); return false;" title="ein Bild weiter" alt="ein Bild weiter"/>');
    }
    else {
	var imgmap = document.createElement('map');
	imgmap.setAttribute('name','olmap');
	
	var map1 = document.createElement('area');
	map1.setAttribute('shape','rect');
	map1.setAttribute('coords','0,0,21,21');
	map1.setAttribute('href','#');
	map1.setAttribute('onclick','overlayBack(); return false;');
	map1.setAttribute('title','ein Bild zurück');
	map1.setAttribute('alt','ein Bild zurück');
	
	var map2 = document.createElement('area');
	map2.setAttribute('shape','rect');
	map2.setAttribute('coords','160,0,190,21');
	map2.setAttribute('href','/index.php?seite=home');
	map2.setAttribute('onclick','closeOverlay(); return false;');
	map2.setAttribute('title','Fenster schließen');
	map2.setAttribute('alt','Fenster schließen');
	
	var map3 = document.createElement('area');
	map3.setAttribute('shape','rect');
	map3.setAttribute('coords','335,0,352,21');
	map3.setAttribute('href','#');
	map3.setAttribute('onclick','overlayNext(); return false;');
	map3.setAttribute('title','ein Bild weiter');
	map3.setAttribute('alt','ein Bild weiter');
    }
        
    imgmap.appendChild(map1);
    imgmap.appendChild(map2);
    imgmap.appendChild(map3);
    
    innerOverlay.appendChild(bild);
    innerOverlay.appendChild(bild2);
    innerOverlay.appendChild(imgmap);
    
    document.getElementsByTagName('body')[0].appendChild(overlay);
    document.getElementsByTagName('body')[0].appendChild(innerOverlay);
}

function overlayBack() {
    if (pos==1) {
        var npos = max;
    }
    else {
        npos = pos-1;
    }
    pos = npos;
    document.getElementById('olBild').setAttribute('src','/images/overlay_'+id+'/'+npos+'.jpg');
}

function overlayNext() {
    if (pos==max) {
        var npos = 1;
    }
    else {
        npos = pos+1;
    }
    pos = npos;
    document.getElementById('olBild').setAttribute('src','/images/overlay_'+id+'/'+npos+'.jpg');
}

function closeOverlay() {
    document.getElementsByTagName('body')[0].removeChild(document.getElementById('inneroverlay'));
    document.getElementsByTagName('body')[0].removeChild(document.getElementById('overlay'));
}

function fontSize(size) {
    document.getElementById('content').style.fontSize = size.toString()+'px';
}