PopupGallery = Class.create();

PopupGallery.prototype = {

	defaultImageWidth: ( AC.Detector.isIE() ? 650 : 510 ),
	previous: null,
	next: null,
	items: [],
	controller: null,
	
	initialize: function ( itemClass )
	{
		var wrapper = $( 'wrapper' ) || ( $( 'wrapper_open' ) || $( 'wrapper_open_programme' ) );
		
		this.items = wrapper.getElementsByClassName( itemClass );
		
		if ( this.items.length > 0 )
		{
			this.createPopup();
			this.setImageAttributes();
		};
	},
	
	createPopup: function ()
	{
		this.closeBtn = Builder.node( 'a', { href: '#close', 'class': 'close' }, 'Close' );
		Event.observe( this.closeBtn, 'click', this.close.bindAsEventListener( this ), false );
		
		// this.popupimg = Builder.node( 'img', { 'class': 'popupimg' } );
		// this.descriptionPanel = Builder.node( 'div', { 'class': 'description' } );
		this.displayPanel = Builder.node( 'div', { 'class': 'movie' } );
		// this.controllerPanel = Builder.node( 'div', { 'class': 'moviecontroller' } );
		
		var middle = [this.closeBtn, this.displayPanel];
		
		this.popup = Builder.node( 'div', { id: 'popup' }, [
			Builder.node( 'div', { 'class': 'topleft' } ),
			Builder.node( 'div', { 'class': 'top' }, [
				// Builder.node( 'div', { 'class': 'topmiddlecap' }, [this.closeBtn] ),
				Builder.node( 'div', { 'class': 'topleftcap' } ),
				Builder.node( 'div', { 'class': 'toprightcap' } )
			] ),
			Builder.node( 'div', { 'class': 'topright' } ),
			Builder.node( 'div', { 'class': 'left' } ),
			Builder.node( 'div', { 'class': 'middle' }, [middle] ),
			Builder.node( 'div', { 'class': 'right' } ),
			Builder.node( 'div', { 'class': 'bottomleft' } ),
			Builder.node( 'div', { 'class': 'bottom' } ),
			Builder.node( 'div', { 'class': 'bottomright' } )
		] );
		
		document.body.appendChild( this.popup, document.body.firstChild );
	},
	
	setImageAttributes: function ()
	{
		for ( var i = this.items.length - 1; i >= 0; i-- )
		{
			// alert( this.items[i] );
			// this.items[i] = this.items[i].getElementsByTagName( 'a' )[0];
			// 
			// var item = this.items[i];
			var item = this.items[i];
			
			if ( item.href.indexOf( 'mov' ) > 0 )
			{
				item.movieUrl = item.href;
				// item.description = item.parentNode.getElementsByClassName( 'description' )[0];
				// var posterFrameSpan = item.parentNode.getElementsByClassName( 'posterFrame' )[0];
				// item.posterFrameUrl = posterFrameSpan.innerHTML.match( /src="(.*)"/ )[1];
				this.setEvent( item, i );
			}
			else
			{
				item.img = new Image();
				item.img.src = item.href;
			}
		};
	},
	
	setEvent: function ( item, i )
	{
		Event.observe( item, 'click', this.onClick.bindAsEventListener( this, item, i ), false );
	},
	
	windowSize: function ()
	{
		var width = window.innerWidth || ( window.document.documentElement.clientWidth || window.document.body.clientWidth );
		var height = window.innerHeight || ( window.document.documentElement.clientHeight || window.document.body.clientHeight );
		var x = window.pageXOffset || ( window.document.documentElement.scrollLeft || window.document.body.scrollLeft );
		var y = window.pageYOffset || ( window.document.documentElement.scrollTop || window.document.body.scrollTop );
		
		return { 'width': width, 'height': height, 'x': x, 'y': y };
	},
	
	onClick: function( evt, item, i )
	{
		// Kleine Grlöße und Position merken
		this.width = ( item.offsetWidth > 80 ) ? 80 : item.offsetWidth;
		this.left = evt.pageX || evt.clientX + ( document.documentElement.scrollLeft ? document.documentElement.scrollLeft
			: document.body.scrollLeft );
 		this.left -= this.width / 2;
		this.height = item.offsetHeight;
		this.top = evt.pageY || evt.clientY + ( document.documentElement.scrollTop ? document.documentElement.scrollTop
			: document.body.scrollTop );
		this.top -= this.height / 2;
		
		Event.stop( evt );
		
		this.resetMovie();
		this.afterClose();
		
		// Falls die Slideshow noch läuft, hier stoppen da sonst der Controller komisch angezeigt wird
		/*
		if ( slideshow)
		{
			slideshow.stop();
		};
		*/
		
		if ( item.movieUrl )
		{
			this.popMovie( evt, item, i );
		}
		else
		{
			this.popImage( evt, item, i );
		}
	},
	
	popMovie: function( evt, item, i )
	{
		this.popup.onclick = '';
		
		Element.addClassName( this.popup, 'video' );
		
		// Film Größe
		var width = AC.Detector.isIE() ? 650 : 510;
		this.padleft = ( this.popup.offsetWidth - width );
		var height = 380;
		this.padtop = ( this.popup.offsetHeight - height );
		
		var controllerstatus = true;
		var movieheight = 276; // height + controller
		
		// Movie initialisieren
		if ( AC.Detector.isQTInstalled() )
		{
			this.movieController = new AC.QuicktimeController();
		};
		
		var after = function ()
		{
			Element.removeClassName( this.popup, 'isanim' );
			Element.addClassName( this.popup, 'popped' );
			
			// this.descriptionPanel.innerHTML = item.description.innerHTML;
			
			if ( AC.Detector.isQTInstalled() )
			{
				var movie = AC.Quicktime.packageMovie( 'movie', item.movieUrl, {
					width: 460,
					height: movieheight,
					controller: controllerstatus,
					showLogo: false,
					cache: true
				} );
				
				this.displayPanel.appendChild( movie );
				
				this.movieController.attachToMovie( movie );
				this.movieController.monitorMovie();
				
				var movie = null;
			};
		}.bind( this );
		
		var left = this.windowSize().x + ( this.windowSize().width - width ) / 2;
		if ( left < this.closeBtn.offsetWidth / 2 )
		{
			left = this.closeBtn.offsetWidth / 2;
		};
		var top = this.windowSize().y + ( this.windowSize().height - height ) * 0.6;
		if ( top < this.padtop / 4)
		{
			top = this.padtop / 4;
		};
		
		this.pop( width, top, height, left, after );
	},
	
	popImage: function ( evt, item, i )
	{
		
	},
	
	pop: function ( width, top, height, left, after )
	{
		this.popup.style.width = this.width + 'px';
		this.popup.style.height = this.height + 'px';
		this.popup.style.left = this.left + 'px';
		this.popup.style.top = this.top + 'px';
		
		this.popup.style.zIndex = '999';
		Element.setOpacity( this.popup, 0 );
		
		new Effect.Parallel( [
			new Effect.MoveBy( this.popup, top - this.top, left - this.left, { sync: true } ),
			new Effect.Scale( this.popup, ( width / this.width ) * 100, { sync: true, scaleMode: { originalWidth: this.width, 
				originalHeight: this.height }, scaleY: false, scaleContent: false } ),
			new Effect.Scale( this.popup, ( height / this.height ) * 100, { sync: true, scaleMode: { originalWidth: this.width,
				originalHeight: this.height }, scaleX: false, scaleContent: false } ),
			new Effect.Appear( this.popup, { sync: true } )
		],
		{ duration: 0.2, beforStart: function () { Element.addClassName( this.popup, 'isanim' ) }.bind( this ), afterFinish: after }
		 );
	},
	
	close: function ( evt )
	{
		if ( evt )
		{
			Event.stop( evt );
		};
		
		// var width = ( this.popupimg.offsetWidth ) ? this.popupimg.offsetWidth : this.popup.offsetWidth - this.padleft;
		var width = this.popup.offsetWidth - this.padleft;
		var left = this.popup.offsetLeft + this.padleft / 2;
		// var height = ( this.popup.offsetHeight ) ? this.popupimg.offsetHeight : this.popup.offsetHeight - this.padtop / 2;
		var height = this.popup.offsetHeight - this.padtop / 2;
		var top = this.popup.offsetTop + this.padtop / 2;
		
		new Effect.Parallel( [
			new Effect.MoveBy( this.popup, this.top - top, this.left - left, { sync: true } ),
			new Effect.Scale( this.popup, ( this.width / width ) * 100, { sync: true, scaleMode: { originalWidth: width, originalHeight: height }, scaleY: false, scaleContent: false } ),
			new Effect.Scale( this.popup, ( this.height / height ) * 100, { sync: true, scaleMode: { originalWidth: width, originalHeight: height }, scaleX: false, scaleContent: false } ),
			new Effect.Fade( this.popup, { sync: true } )
		],
		{ duration: 0.3, beforeStart: this.resetMovie.bind( this ), afterFinish: this.afterClose.bind( this ) }
		 );
	},

	resetMovie: function( evt )
	{
		Element.addClassName( this.popup, 'isanim' );
		Element.removeClassName( this.popup, 'popped' );
		
		if ( this.movieController )
		{
			this.movieController.Stop();
			this.movieController.detachFromMovie();
		};
		
		this.displayPanel.style.display = 'none';
		this.displayPanel.innerHTML = '';
		this.displayPanel.style.display = '';
		// this.descriptionPanel.innerHTML = '';
		// this.controllerPanel.innerHTML = '';
	},
	
	afterClose: function( evt )
	{
		this.popup.style.width = '';
		this.popup.style.height = '';
		this.popup.style.left = '';
		this.popup.style.top = '';
		this.popup.className = '';

		this.popup.style.display = 'none';
		this.popup.style.zIndex = '-10';
		this.popup.style.display = '';
		this.popup.style.visibility = '';

		Element.setOpacity( this.popup, '' );
		
		if ( AC.Detector.isWebKit() )
		{
			if ( !this.scrollTo )
			{
				this.scrollTo = 1;
			};
			window.scroll( this.windowSize().x + this.scrollTo, this.windowSize().y + this.scrollTo );
			this.scrollTo = -this.scrollTo();
			window.scroll( this.windowSize().x + this.scrollTo, this.windowSize().y + this.scrollTo );
			this.scrollTo = -this.scrollTo();
		};
		
		this.resetVar();
	},
	
	resetVar: function ()
	{
		this.width, this.padleft, this.left, this.height, this.padtop, this.top, this.movieController = null;
	}
	
};

Event.observe( window, 'load', function ( event )
{
	new PopupGallery( 'img' );
	new PopupGallery( 'download' );
} );