var PvMatrix = new Class({
	//implements
	Implements:  [Options], 	
	matrix : 0,

	options: {
		matrix : null,
		myItems : 125,
		nums : 1
	},

	initialize: function(options) {
		//set options
		this.setOptions(options);
		var self = this;
		var oldTop = 0;
		var flag = true;
		var oldLeft = 0;
		var width = 236; 
		var height = 108;
		this.matrix = this.options.matrix;
		//var sm = $$('div[class=bildklein]');
		var sm = $$(".bildklein");
		sm.each(function(foo){
		//for(i=0;i<sm.length;i++){
			foo.addEvent('click', function(e){
				e.preventDefault();
				var parent = foo.getParent();
				var parentRef = parent;
				var pTop = parent.offsetTop;
				var pLeft = parent.offsetLeft;
				
				//parent child holen
				var parentDivs = foo.getParent().getChildren();

				//bigPic holen
				var smPic = parentDivs[0];

				//middlePic holen
				var bigPic = parentDivs[1];

				//bigPic holen
				//var SuPic = parentDivs[2];

				//inhalte holen
				//var inhalt = parentDivs[2];

				//schliessen div holen
				var clBu = parentDivs[2];

				var mover = new Fx.Move(parent, {
						relativeTo: $('content'),
						position: 'upperLeft',
						onComplete: function(){
							//aussen div vergrößern
							parentRef.setStyle('backgroundColor', '#ffffff');
							parentRef.setStyle('z-index','100');
							parentRef.morph({width: 768, height: 360});

							//bildklein verändern
							foo.tween('opacity', [1, 0]);
							
							//bildgross anzeigen
							bigPic.setStyles({
								'z-index' : '150',
								'position' : 'absolute',
								'top' : '0',
								'left' : '0'
							});
							bigPic.set('tween', {duration: 'long'});
							bigPic.tween('opacity', [0, 1]);
							
//							var shadow = new Element('div', {
//									'id': 'myFirstElement',
//									'background-color': '#000000',
//									'opacity' : '0.8',
//									'width' : '100%',
//									'height' : '100%',
//									'position' : 'absolute',
//									'top' : '0px',
//									'left' : '0px'
//							});
							self.addOverlay();

							//bigPic.addEvent('click', function(e){
								//var myURI = new URI('index.php?id=25');
								//myURI.go();
//								var myEffect = new Fx.Morph(parentRef, {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
//								myEffect.start({width: 1022, height: 574});
//								
								clBu.setStyles({
									'z-index' : '200',
									'position' : 'absolute',
									'top' : '5px',
									'right' : '10px',
									'color' : '#ffffff',
									'cursor' : 'pointer'
								});
//								//bildgross anzeigen
//								SuPic.setStyles({
//									'z-index' : '151',
//									'position' : 'absolute',
//									'top' : '0',
//									'left' : '0'
//								});
//								
//								bigPic.tween('opacity', [1, 0]);
//								SuPic.tween('opacity', [0, 1]);
								clBu.tween('opacity', [0, 1]);
								clBu.addEvent('click', function(e){
									//e.stop();
									$('overlay').destroy();
									bigPic.tween('opacity', [1, 0]);
									clBu.tween('opacity', [1, 0]);
									var ef = new Fx.Morph(parent, {duration: 'short', transition: Fx.Transitions.Sine.easeOut});
									//parent.setStyle('backgroundColor', '#000000');
									parent.setStyle('z-index', 5);
									parentRef.setStyle('z-index',5);
									foo.tween('opacity', [0, 1]);
									ef.start({width: width, height: height});
									//parent.morph({width: 252, height: 140});
									
									//parent wieder auf position bringen
									parent.setStyle('top',pTop);
									parent.setStyle('left',pLeft);
									
								});
							//});
						}
				});
				mover.start();

				//beim schliessen 
			});
		//}
		});
    },
	
	addOverlay: function(){
		this.overlay = new Element('div', {
			'id': 'overlay',
				'styles': {
				'position' : 'absolute',
				'top' : 0,
				'left' : 0,
				'opacity': .0,
				'background-color': '#000000',
				'z-index' : '90',
				'width': 960,
				'height': 448
			}
		//}).injectInside('content');
		}).inject('ov', 'before');
		//this.overlay.inject($(document.body), 'top');
		this.overlay.tween('opacity', 0.75);
	}
});