window.addEvent('domready', function() {
	var zst;
	var fx_time = 500;

	var li_elements = $$('#l_projectbar li');
	var li_props = new Array();
	var li_thumbs = new Array();
	var thumbs = new Array();
	
	var fx_thumb = new Array();
	var fx_li_thumb = new Array();
	var thumb_dim = [50, 7, 4, -50, 12, 12]; // [sizeSmall, padding, n-imgsInARow, ypos-sizeSmall, xpos-sizeSmall, startx]
	
	
// generate div-Element to place the thumbnails
	var thumb_div_props;
	var thumb_div = new Element('div', { 'id': 'thumb_div'}).inject($('l_projectbar'), 'before');

	
	var fx_hide_thumb_div = new Fx.Morph(thumb_div, {duration: fx_time}).addEvent('onComplete', function(){
	    thumb_div.setStyle('display', 'none');
	});
 
	fx_show_thumb_div = new Fx.Morph(thumb_div, {duration:fx_time});
	fx_li_show = new Array();
	fx_li_hide = new Array();
	
	li_elements.each(function(element, i) {
		var thumbimg = element.getElement('img');
		li_thumbs[i] = thumbimg.getStyles('width','height');
		li_thumbs[i]['e'] = thumbimg;
		fx_li_thumb[i] = new Fx.Morph(thumbimg, {duration:fx_time});
		
		li_props[i] = element.getCoordinates();
	
// ->> insert additional Buttons & hide li - Elements & difine transition
		var projektlink = element.getElement('a.projektlink');
		var gotoProjectList = new Element('a', { 'class': 'gotoProjectList', 'href':document.URL+'projekte'});
		gotoProjectList.set('html','zum Projektarchiv');
		gotoProjectList.inject(projektlink, 'before');
		projektlink.removeClass('projektlink');
		projektlink.addClass('projektlink_js');

		var showOverview = new Element('a', { 'class': 'showOverview'}).set('html','zurück zur Projektliste');
		showOverview.inject(thumbimg, 'before');
		
		var goBackElements = [showOverview, thumbimg];
		goBackElements.each(function(gBE, j) {		
			gBE.addEvent('click', function(){
				thumb_div.setStyle('display','block');
				fx_show_thumb_div.start({
					'height': thumb_div_props['height']+'px',
					'opacity':'1'
				});
				li_elements[i].setStyle('display','block');
				fx_li_hide[i].start({
					'height': '0px',
					'opacity':'0'
				});
				fx_li_thumb[i].start({
					'height': '1px',
					'width': '1px'
				});
			});
		});
		
		element.setStyles({
		   	'height': '0px',
			'display':'none',
			'opacity':'0'
		});
		fx_li_show[i] = new Fx.Morph(element, {duration:fx_time, wait:false}).addEvent('onStart', function(){
			element.setStyle('display', 'block');
		});
		fx_li_hide[i] = new Fx.Morph(element, {duration:fx_time, wait:false}).addEvent('onComplete', function(){
			element.setStyle('display', 'none');
		});

		
// ->> generate Thumbnail - div
		thumbs[i] = thumbimg.clone().injectInside(thumb_div);
		thumbs[i].setStyles({
		   	'height': thumb_dim[0]+'px',
			'width': thumb_dim[0]+'px',
			'padding':thumb_dim[1]-1+'px'
		});// generate Thumbnail - div <<-

		
// thumbnail - Events ->>
		fx_thumb[i] = new Fx.Morph(thumbs[i], {duration:200, wait:false });
		/*fx_thumb[i] = new Fx.Styles(thumbs[i], {duration:200, wait:false });*/

		thumbs[i].addEvent('mouseenter', function(){
			thumbs[i].setStyle('border-color','#eea025')
			fx_thumb[i].start({
				'border-width': thumb_dim[1]+'px',
				'padding':'0px'
			});	
		});
		thumbs[i].addEvent('mouseleave', function(){
			fx_thumb[i].start({
				'border-width': '1px',
				'border-color':'#ffffff',
				'padding':thumb_dim[1]-1+'px'
			});
		});
		thumbs[i].addEvent('click', function(){
			fx_hide_thumb_div.start({
				'height': '0px'
			});
			li_elements[i].setStyle('display','block');
			fx_li_show[i].start({
				'height': li_props[i]['height']+'px',
				'opacity':'1'
			});
			
			li_thumbs[i]['e'].setStyles({
			   	'height': '1px',
				'width': '1px'
			});
			fx_li_thumb[i].start({
				'height': li_thumbs[i]['height']+'px',
				'width': li_thumbs[i]['width']+'px'
			});
			
			fx_thumb[i].start({
				'border-width': '1px',
				'border-color':'#ffffff',
				'padding':thumb_dim[1]-1+'px'
			});
		});
	});// <<- thumbnail - Events
	
	thumb_div_props = thumb_div.getCoordinates();
});