/* window.onload=popupInit; */

function popupInit()
{
	 Popup.init(); 
}  

function showImage(trigger_id)
{
	var trigger=document.getElementById(trigger_id);
	var posArray=findPos(trigger);
	var a=document.getElementById(trigger_id+'_image');
	a.style.left=posArray[0]+'px';
	a.style.top=posArray[1]+'px';  
	a.style.display='block';  
}

function findPos(obj)
{
	var posX=obj.offsetLeft;
	var posY=obj.offsetTop;
	while(obj.offsetParent)
	{
		if(obj.offsetParent==document.getElementById('content'))
		{
			break;
		}
		else
		{
			posX=posX+obj.offsetParent.offsetLeft;
			posY=posY+obj.offsetParent.offsetTop;
			obj=obj.offsetParent;
		}
	}
	posX-=10;
	posY-=5;
	var posArray=[posX,posY];
	return posArray;
}

/*
Bei den Methoden getAttribute(), setAttribute() und removeAttribute() setzt und entfernt 
Internet Explorer 6 die DOM-Eigenschaft anstelle des 
DOM-Stringwerts. element.removeAttribute('class') funktioniert nicht in Internet Explorer 6, 
stattdessen muss element.removeAttribute('className') aufgerufen werden. 
*/

var Popup=
{
	Elements:
	{
		'trigger_id' : ['span_0','span_1','span_2','span_3','span_4','span_5','span_6','span_7'],
		'id' : ['span_0_image','span_1_image','span_2_image','span_3_image','span_4_image','span_5_image',
		'span_6_image','span_7_image'],
		'bild' : ['/images/lagerwaren/mubo01.jpg'],
		'breite' : [450],
		'hoehe' : [288]
	},
	
	init:function() // versteckte Bildcontainer per Javascript setzen
	{
		document.getElementById('content').style.position='relative';
		var n=this.Elements.trigger_id.length;
		for(j=0;j<n;j++)
		{
			this.setContainer(j);  
		}  
	},
	
	setContainer:function(j) // einen Bildcontainer setzen
	{
		var newImgContainer=document.createElement('div');
		newImgContainer.setAttribute('id',this.Elements.id[j]);
		newImgContainer.setAttribute('class','trigger_image');
		newImgContainer.className='trigger_image'; // IE6
		newImgContainer.style.backgroundImage='url('+this.Elements.bild[j]+')';     
		newImgContainer.style.width=this.Elements.breite[j]+'px';
		newImgContainer.style.height=this.Elements.hoehe[j]+'px';
		newImgContainer.style.display='none';
		var a=document.getElementById('bild_container');
		a.appendChild(newImgContainer);
		var switchOffContainer=document.createElement('div');
		switchOffContainer.setAttribute('class','switch_off');
		switchOffContainer.className='switch_off'; // IE6
		var onclick="document.getElementById('"+this.Elements.id[j]+"').style.display='none'";
		switchOffContainer.setAttribute('onclick',onclick);
		switchOffContainer.appendChild(document.createTextNode('X'));
		var b=document.getElementById(this.Elements.id[j]);
		switchOffContainer.onclick=function() // IE6
		{
			document.getElementById(Popup.Elements.id[j]).style.display='none';
		} 
		b.appendChild(switchOffContainer);
	}  
	
}