document.addEvent('domready', function () {
//	console.log($$('.images'));
	var images_i = 0;
	var images_title = new Array(); $$('.images').each(function(v,k,el){
		images_title[k] = el[k].getElement('img').getProperty('alt');});

		function domreadyfn(that){
			that.setProperties({'class':'canvas'});
			
			if (that.i == 1) var multiplikator = -17;
			else var multiplikator = -23;
			
			if (that.i < 4) {
			that.margin_right = (multiplikator*(1+((parseInt( that.getParent('div.images').getStyle('width') )/parseInt(that.getParent('div.images').getNext('div.images').getStyle('width'))))));} else {that.margin_right = 0;}
			that.styles= {
			'display':'block',
			'z-index':998,
			'bottom': -65,
			'right': -370,
			'height':140,
			'width': 125,
			'margin-right': that.margin_right};
			
			that.getParent('div').setStyles(that.styles);
			var holderDiv = that.getParent('div');
		}
		function mouseenterfn(that){
			mouseenterDelayedFn.delay(150, that);
		}
		
		var mouseenterDelayedFn = function(that, event){

			that.myEffect = new Fx.Morph(that, {fps: 35, duration: 400, link: 'ignore', transition: Fx.Transitions.Sine.easeInOut});

		
			if (that.getProperty('width')) {
				width = that.getProperty('width')*4/3;
				height = that.getProperty('height')*4/3;
			} else {
				width = 167;
				height = 167;
			}
			
			that.myEffect.start({'width':width,'height':height,'position':'relative'});


			
			if($$('.bubble')[0]) $$('.bubble')[0].destroy();
			var infoText = new Element('p',{'class':'bubble','styles':{'position':'absolute','top':'0','left':'0','display':'none','opacity':'0'}});
			infoText.innerHTML='<span>'+images_title[that.i]+'</span>';
			that.infoTextEffect = new Fx.Morph(infoText, {duration: 300, link: 'ignore', transition: Fx.Transitions.Sine.easeIn});
			
			var that=that;
			var holderDiv=that.getParent('div');
			that.myDivEffect = new Fx.Morph(that.getParent('div.images'), {duration: 250, link: 'ignore', transition: Fx.Transitions.Sine.easeInOut,
				onComplete:function(holderDiv){
					if($$('.bubble')[0]) $$('.bubble')[0].destroy();
					infoText.inject(holderDiv,'after');
					infoText.setStyle('display', 'block');
					infoText.position({x:(10+holderDiv.getPosition(infoText).x),y:(holderDiv.getPosition(infoText).y-10)});
					that.infoTextEffect.start({'opacity': [0, 1]});
					
				
				}, onCancel:function(that){
					mouseleavefn(that);
					mouseoutfn(that);
				}
			});

			that.styles['margin-right'] -= 45;
			that.styles['right'] += 30;
			that.styles['width'] = 170;
			that.styles['height'] = 190;
			that.styles['bottom'] += 40;
			that.styles['z-index'] = 999;
			that.myDivEffect.start(that.styles);				
//			console.log(that.styles);
			that.styles['margin-right'] += 45;
			that.styles['right'] -= 30;
			that.styles['width'] = 125;
			that.styles['height'] = 140;
			that.styles['bottom'] -= 40;
			that.styles['z-index'] = 998;
		};
		function mouseleavefn(that){
			if (navigator.appVersion.indexOf("MSIE") == -1) {
			if (that.infoTextEffect){
				that.infoTextEffect.cancel();
				}
			if (that.myEffect){
				that.myEffect.cancel();
				}
			if (that.myDivEffect){
				that.myDivEffect.cancel();
				}}
		}
		function mouseoutfn(that){

		
	
		
			that.myEffect = new Fx.Morph(that, {fps: 35, duration: 250, link: 'ignore', transition: Fx.Transitions.Sine.easeInOut});
	
			
			if (that.getProperty('width')) {
				width = that.getProperty('width');
				height = that.getProperty('height');
			} else {
				width = 125;
				height = 125;
			}
				
			
			that.myEffect.start({
		'position':'relative','width': width,'height': height});

			that.myDivEffect = new Fx.Morph(that.getParent('div.images'), {duration: 250, link: 'ignore', transition: Fx.Transitions.Sine.easeInOut});

			if (navigator.appVersion.indexOf("MSIE") == -1) {
			$$('.images').each(function(v,k,el){
				el[k].setStyle('z-index',(el[k].getStyle('z-index')-1));
			});}

			if (that.i < 4) {
			that.margin_right = (-26*(1+((parseInt( that.getParent('div.images').getStyle('width') )/parseInt(that.getParent('div.images').getNext('div.images').getStyle('width'))))));}

			that.myDivEffect.start(that.styles);
			
			that.infoTextEffect = new Fx.Morph($$('.bubble')[0],
				{duration: 200, link: 'ignore', transition: Fx.Transitions.Sine.easeIn, onComplete:function(){$$('.bubble').destroy();}});
				
			that.infoTextEffect.start({'opacity': 0});
		} 

if(typeof pngfix == 'function') {
pngfix();
} 
	
	var image0 = $('image0').addEvents({
		  			"domready":function(){
		  			this.i=0;
		  			domreadyfn(this);},
		  			'mouseenter':function(event){mouseenterDelayedFn(this, event);},
		  			'mouseleave':function(){mouseleavefn(this);},
		  			'mouseout':function(){mouseoutfn(this);}
		});    



	
	var image1 = $('image1').addEvents({
		  			"domready":function(){this.i=1; domreadyfn(this);},'mouseenter':function(event){mouseenterDelayedFn(this, event);},'mouseleave':function(){mouseleavefn(this);},'mouseout':function(){mouseoutfn(this);}
		});    



	
	var image2 = $('image2').addEvents({
		  			"domready":function(){this.i=2; domreadyfn(this);this.getParent('div').setStyle('z-index',998);},'mouseenter':function(event){mouseenterDelayedFn(this, event);},'mouseleave':function(){mouseleavefn(this);},'mouseout':function(){mouseoutfn(this);}
	});    



	
	var image3 = $('image3').addEvents({
		  			"domready":function(){this.i=3; domreadyfn(this); },'mouseenter':function(event){mouseenterDelayedFn(this, event);},'mouseleave':function(){mouseleavefn(this);},'mouseout':function(){mouseoutfn(this);}
	});    



	
	var image4 = $('image4').addEvents({
	  			"domready":function(){this.i=4; domreadyfn(this);},'mouseenter':function(event){mouseenterDelayedFn(this, event);},'mouseleave':function(){mouseleavefn(this);},'mouseout':function(){mouseoutfn(this);}
	});    

});