var PicMash=new Class({
        		Implements:[Events],
        		initialize:function(el,dim,bigsz)
        		{
        			this.bigsz=bigsz;
        			this.p=el.getElement('div.canvas');
        			this.izopen=false;
        			this.cnvel=new Element('div').setStyles({'width':dim.w,'height':dim.h,'position':'absolute','display':'none','z-index':1}).inject(this.p);//element to draw SVG into
        			
        			this.contentel=new Element('div').setStyles({'width':dim.w,'height':dim.h,'position':'absolute','display':'none','z-index':2}).inject(this.p);//element with html of page
        			this.whiteel=new Element('div').setStyles({'width':dim.w,'height':dim.h,'position':'absolute','background-color':'#fff','z-index':1}).inject(this.contentel);//semitransparent white background
        			this.txtel=new Element('div').addClass('textcontent').inject(this.contentel);//element where to put text
        			this.closebtn=new Element('div').addClass('clsbtn').set('title','close me').inject(this.contentel);
        			
        			this.FX=new Fx.Elements([this.whiteel, this.txtel, this.closebtn],{
        				duration:500,
        				onComplete:this.checkState.bind(this)
        			});
        			this.FX.set({'0':{'opacity':0},'1':{'opacity':0},'2':{'opacity':0}});//initial full transparency
        			
        			this.canvas=Raphael(this.cnvel,dim.w,dim.h);
        			this.ims=el.getElements('li span.img img');
        			this.txts=el.getElements('li p');
        			
        			var i=0;
        			this.cnvims=[];
        			
					var bound=el.getElement('div.boundary');//to get position of childs relative to boundary element
        			for(i=0;i<this.ims.length;i++)
        			{
        				var im=this.ims[i];
        				var sr=im.get('src');
        				var pos=im.getPosition(bound);
        				var sz=im.getSize();
						
						var a=$random(-30,30);
						var minx=-10;
						var maxx=10;
						var miny=-10;
						var maxy=10;
						
	        			var x=$random(minx,maxx);
	        			var y=$random(miny,maxy);
	        			
        				this.cnvims[i]=
        				{
        					'pos':pos,
        					'src':sr,
        					'size':sz,
        					'trans':{'x':y,'y':x},
        					'a':a,
        					'frame':this.canvas.image('http://static.mediacentrum.sk/magazin.atlas.sk/images/imgframe.png', pos.x-6, pos.y-6, sz.x+12, sz.y+12),
        					'image':this.canvas.image(sr,pos.x,pos.y,sz.x,sz.y).attr({'cursor':'pointer'})
        				};
        				$(this.cnvims[i].image.node).addEvent('click',this.imClicked.pass(i,this));
        			}
        			
        			//flip-flop
        			this.cnvel.setStyles({'display':'block'});//show svg
					var ul=el.getElement('ul');//hide html
        			ul.setStyles({'display':'none'});
        			
        			this.closebtn.addEvent('click',this.closeBig.bind(this));
        			this.MashUp();
        		},
        		MashUp:function()
        		{
        			for(i=0;i<this.ims.length;i++)
        			{
        				var cnv=this.cnvims[i];
	        			var aobj={rotation:cnv.a,translation:cnv.trans.x+' '+cnv.trans.y};
	        			var im=cnv.image;
	        			var frm=cnv.frame;
	        			
	        			frm.animate(aobj,500);
	        			im.animateWith(frm,aobj,500);
        			}
        		},
        		imClicked:function(i)
        		{
        			var im=this.cnvims[i];
        			var src=im.src.replace('/100/','/'+this.bigsz+'/');//take big picture source
        			
        			this.animated=i;//we have to remeber which one is open
        			this.bigim=this.canvas.image(src,im.pos.x, im.pos.y, im.size.x, im.size.y).attr({'rotation':im.a,'translation':im.trans.x+' '+im.trans.y});
        			
        			this.bigAnim.delay(200,this);
        		},
        		bigAnim:function()
        		{
        			var im=this.cnvims[this.animated];
					this.bigim.animate({'rotation':0,'x':10,'y':10,'width':this.bigsz,'height':Math.round((im.size.y/im.size.x)*this.bigsz)},500,this.showBig.bind(this));
        		},
        		showBig:function()
        		{
        			var im=this.cnvims[this.animated];
        			var src=im.src.replace('/100/','/'+this.bigsz+'/');
        			this.txtel.set('html',this.txts[this.animated].get('html'));
        			this.imgel=new Element('img').set('src',src).setStyles({'position':'absolute','z-index':2,'width':this.bigsz,'height':Math.round((im.size.y/im.size.x)*this.bigsz),'left':10,'top':10}).inject(this.contentel);
        			this.contentel.setStyles({'display':'block'});
        			this.FX.cancel();
        			this.FX.start({'0':{'opacity':0.6},'1':{'opacity':1},'2':{'opacity':1}});
        		},
        		closeBig:function()
        		{
        			this.FX.cancel();
        			this.FX.start({'0':{'opacity':0},'1':{'opacity':0},'2':{'opacity':0}});
        		},
        		removeBig:function()
        		{
        			this.imgel.destroy()
        			var i=this.animated;
        			var im=this.cnvims[i];
        			this.bigim.animate({'rotation':im.a,'x':im.pos.x+im.trans.x,'y':im.pos.y+im.trans.y,'width':im.size.x,'height':im.size.y},500,this.remBig.bind(this));
        		},
        		remBig:function()
        		{
        			this.bigim.remove();
        			this.animated=null;
        			this.izopen=false;
        			//yo dawg we have closed all what we needed
        		},
        		checkState:function()
        		{
        			if(this.izopen)
        			{
        				this.contentel.setStyles({'display':'none'});//hide html element with content and do svg animation
        				this.removeBig();
        			}
        			else
        			{
        				this.izopen=true;
        			}
        		}
        	});