window.addEvent('domready',function(){
	
	addImageHistory();
	removeLink();
	
	$('bigThumb').addEvent('click',function(){historieLightBox(this)});
	
});
function removeLink(){
	var elements = $$('img.imageThumb').getParent();
	
	elements.removeProperty('href');
}

function addImageHistory(){
	var imagenew = new Element('img', {
	    'id': 'big_image',
	    'src':'test.jpg',
	    'alt':'test'
	    });
	var src = '';
	//var big = $('hisMax');
	var elements = $$('img.imageThumb');
	var arrImages = $('hiddenImages').getProperty('value').split(',');
	var image = $('big_image');
	var LinkBig = $('bigThumb');
	
	elements.addEvent('mouseover',function(){ 
		//Bilder voll link ändern
		
		for ( var j = 0; j < elements.length; j++) {
			if(elements[j]==this){
				//big.setProperty('href',arrImages[j]);
				LinkBig.setProperty('href',arrImages[j]);
			}
		}
		//bilder ändern
		src = this.getProperty('src');
		imagenew.setProperty('src',src);
		imagenew.replaces(image);
		image = imagenew;
		image.removeProperty('height');
		
		
	});
			
}

function historieLightBox(){
	var allImages 	= $('hiddenImages').getProperty('value').split(',');
	var actimage	= $('bigThumb').getProperty('href');
	var element1	= $('bigThumb');
	
	$('bigThumb').removeProperties('href','target');
	x=document.getElementsByTagName('body')[0].getStyle('width').toInt();
	y=document.getElementsByTagName('body')[0].getStyle('height').toInt();
	if(y<900){
		y = 1000;
	}
	var XY			= [x,y];
	var fensterH	= 500;
	var fensterW	= 500;
	var mitteXY     = [XY[0]/2 - fensterW/2,XY[1]/2 - fensterH/2-100]
	var imageArray = [];
	var extensionpath = location.protocol+'//'+location.host+'/fileadmin/hummel/images/Contentbilder-Test/';
	
	//hintergrund
	var backup = new Element('input',{
		'id':'backup',
		'type':'hidden',
		'value':actimage
	});
	
	var background = new Element('div', {
	    'id': 'historieLightBox',
	    'opacity':'0.00',
	    'z-index':'99',
	    'styles': {
			
			'width':XY[0] ,
			'height':XY[1], 
			'display': 'block',
        	'position':'absolute',
        	'left':'0',
        	'top':'0',
        	'margin':'auto'
        	
    		}
	   });
	
	var schliessen = new Element('div',{
		'styles':{
			'background-image':'url('+extensionpath+'close.png)',
			'width':16,
			'height':16,
			'margin-left':fensterW-20,
			'padding-bottom':10
		},
		'events':{
			'click':function(){
				$('topbar').setStyle('z-index',20);
				element1.setProperty('href', actimage);
				element1.setProperty('target','_blank');
				background.morph({'opacity': 0.0,'background-color': '#000000','width':0,'height':0});
				fenster.morph({'opacity': 0,'background-color': '#ffffff'});
				background.remove();
				fenster.remove();
				
			}
		}
		
	});
	
	
	//weißes fenster
	var fenster = new Element('div', {
		'id':'fenster',
		'opacity':0.00,
		'z-index':'1',
		'styles':{
			'width':500,
			'background-color':'#ffffff',
			'position':'absolute',
	        	'left': mitteXY[0] ,  
	        	'top': mitteXY[1],	 		
	        'padding':10,
			'text-align':'center'
			}
		});
	
	// element einfügen	
	
	
	var activeImage = new Element('img',{
		'src':actimage,
		'styles':{
			'margin':'auto'
		
		}
		
	});
	
	if(allImages.length>1){
		var allImageWrap = new Element('div',{
			
		});
		
		for ( var i = 0; i < allImages.length-1; i++) {
			new Element('img',{
				'src':allImages[i],
				'width':50,
				'height':50,
				'styles':{
					'margin':5,
					'padding':2,
					'border':'1px dashed gray'
				},
				'events': {
			        'click': function(){
						activeImage.removeProperty('height');
						activeImage.setProperty('src',this.getProperty('src'));
						activeImage.removeProperty('height');
						activeImage.removeProperty('width');
			        }
				}
				
			}).inject(allImageWrap);
		}
	}
	backup.inject(fenster);
	schliessen.inject(fenster);	
	activeImage.inject(fenster);
	
	if(allImages.length>1){
		allImageWrap.inject(fenster);
	}
	
	background.inject($('container'),'after');
	fenster.inject(background,'after');
	
	// effect einblenden 
	background.morph({'opacity': 0.7,'background-color': '#000000'});
	fenster.morph({'opacity': 1,'background-color': '#ffffff'});
	$$('body').setStyle('overflow-x','hidden');
	$('topbar').setStyle('z-index',0);
	
}