window.addEvent('domready', function(){
	showRandomImages.onDomReady();
});

window.addEvent('load', function(){		
	showRandomImages.start();
});

var tx_cineprogram_pi1 = {
	
	init : function (uid) {	
		this.uid = uid;
		this.divMovieItem = $('movieItem'+uid);	
		this.movieItemCols = $$('#movieItem'+this.uid +' .col');
		
		this.liShort = $('movieShort'+uid);
		this.liMovieDetailText = $('movieDetail'+uid);
		this.liMovieDetailImages = $('movieDetailImages'+uid);
	},
	
	showDetails : function (uid) {
		this.init(uid);	
		
		var showDetailsToggle = $('showDetailsToggle'+this.uid);
		var isHidden = this.liMovieDetailText.hasClass('hidden');
		isHidden ? showDetailsToggle.set('text', tx_cineprogram_pi1_data['labels']['detailsHide']) : showDetailsToggle.set('text', tx_cineprogram_pi1_data['labels']['detailsShow']);
			
		this.liShort.toggleClass('hidden');
		this.liMovieDetailText.toggleClass('hidden');
	},
	
	showPictures : function (uid) {
		this.init(uid);
		
		var showPicturesToggle = $('showPicturesToggle'+this.uid);
		var isHidden = this.liMovieDetailImages.hasClass('hidden');
		isHidden ? showPicturesToggle.set('text', tx_cineprogram_pi1_data['labels']['picturesHide']) : showPicturesToggle.set('text', tx_cineprogram_pi1_data['labels']['picturesShow']);
		
		//prepare imagebrowser
		this.imageBrowser();
		
		//show imagebrowser
		this.liMovieDetailImages.toggleClass('hidden');
	},
	
	showReservationiframe : function (uid,urlEncoded) {
		var url = decodeURIComponent(urlEncoded);
		
		var programItemsContainer = $('programItemsContainer'+uid);
		if(!programItemsContainer) return;

		var position = new Object ({
			scroll : document.getScroll(),
			left : $('movieItem'+uid).getPosition()
		});		
		
		new Fx.Tween('box', 'opacity').set(0.1);
		
		var reservationIframeContainer = new Element('div', {
			'id': 'reservationiframeContainer',
			'styles': {
			        'top': position.scroll.y+'px',
				'left': position.left.x+'px',
				'backgroundImage': 'url(/typo3conf/ext/sfptemplate/files/defaultdomain/images/loader.gif)'
			}
		});
		
		var reservationIframe = new IFrame({
			'name': 'reservationiframe', 
			'src': url, 
			'border': '0',
			'id': 'reservationiframe',
			'events': {
			        load: function(){
					reservationIframeContainer.setStyle('backgroundImage', 'none');
			        }
			}
		});

		
		var reservationTitle = new Element('h1');
		reservationTitle.set('text', tx_cineprogram_pi1_data['labels']['reservationTitle']);
		
		var reservationClose = new Element('p',{
			'events': {
			        'click': function(){
			        	tx_cineprogram_pi1.removeReservationiframe();
			        },
			        'mouseover': function(){
					this.style.cursor = 'pointer'
			        }
		    	}
		});
		reservationClose.set('text', tx_cineprogram_pi1_data['labels']['reservationClose']);
				
		reservationIframe.inject(reservationIframeContainer, 'inside');
		reservationTitle.inject(reservationIframe, 'before');
		reservationClose.inject(reservationTitle, 'after');
		reservationIframeContainer.inject('box', 'before');
		
	},
	
	removeReservationiframe : function () {
		var reservationiframeContainer = $('reservationiframeContainer');
		if(reservationiframeContainer) $('reservationiframeContainer').destroy();
		
		new Fx.Tween('box', 'opacity').set(1);
	},
	
	imageBrowser : function () {	
		var szNormal = 229, szSmall= 152, szFull= 378;

		var kwicks = $$('#movieDetailImages'+this.uid +' .imageBrowser .image');
		var fx = new Fx.Elements(kwicks, {wait: false, duration: 300, transition: Fx.Transitions.Back.easeOut});
		
		kwicks.each(function(kwick, i) {
			kwick.addEvent("mouseenter", function(event) {
				var o = {};
				o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
				kwicks.each(function(other, j) {
					if(i != j) {
						var w = other.getStyle("width").toInt();
						if(w != szSmall) o[j] = {width: [w, szSmall]};
					}
				});
				fx.start(o);
			});
		});
		
		$$('#movieItem'+this.uid +' .imageBrowser').addEvent("mouseleave", function(event) {
			var o = {};
			kwicks.each(function(kwick, i) {
				o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
			});
			fx.start(o);
		});
	}
	
}

var showRandomImages = {

	'props' : {
		'imageContainerWidth' : 899,
		'imageContainerHeight' : 105,
		'maskImage' :  '/typo3conf/ext/sfptemplate/files/defaultdomain/images/mask.png',
		'centerOffsetX' : 80,
		'centerOffsetY' : 200
	},
	
	'headerMediaImgSrcArray' : new Array(),
	'headerMediaImgElementArray' : new Array(),
				
	start : function () {
		this.prepare();
		this.moveImages();
	},
	
	onDomReady : function () {		
		$('col2').set({
			'style': 'background-image: none'
		});
	},	
		
	prepare : function () {

			//remove last trailing entry of array
		cineprogramImages.pop();

			//shuffle images	
		this.headerMediaImgSrcArray = helper.arrayShuffle(cineprogramImages);	

			//create headerMedia container
		this.headerImageContainer = new Element('div', {
			'id' : 'imageContainer',
    			'styles': {
        			'position': 'absolute',
        			'width': this.props.imageContainerWidth+'px',
        			'height': this.props.imageContainerHeight+'px',
        			'overflow': 'hidden'
   			 }
		}),
		
			//create mask
		this.headerMediaMask = new Element('img', {
			'src' : showRandomImages.props.maskImage,
			'width': this.props.imageContainerWidth,
        		'height': this.props.imageContainerHeight,
        		'id' : 'headerImageMask',
			'styles': {
        			'position': 'absolute',
        			'z-index': '100',
				'opacity' : '0.6'
   			}
		}),
			
			// place the mask inside headerImageContainer
		this.headerMediaMask.inject(this.headerImageContainer);
		
			// place the imagecontainer
		this.headerImageContainer.inject($('mainContent'), 'before');

			//generate img tags
		this.headerMediaImgSrcArray.each(function(damMediaArray, index) {
			showRandomImages.headerMediaImgElementArray[index] = showRandomImages.createImageObject(damMediaArray, index);	
		});
	},
	
	createImageObject : function (damMediaArray, index) {
		var headerImageObject = {
				//store source
			props : {
				'src' : damMediaArray[0],
				'dimensions' : {
					'orginalWidth' : damMediaArray[1],
					'orginalHeight' : damMediaArray[2],
					'scaledWidth' : showRandomImages.props.imageContainerWidth,
					'scaledHeight' : helper.imageScale(damMediaArray[1], damMediaArray[2], showRandomImages.props.imageContainerWidth)
				},			
				'title' : damMediaArray[3],
				'caption' : damMediaArray[4]
			}
		};
			//create image
		var imageElement = new Element('img', {
			'src' :  headerImageObject.props.src,
			'id': 'headerImage'+index, 
			'width' : headerImageObject.props.dimensions.scaledWidth,
			'height' : headerImageObject.props.dimensions.scaledHeight,
			'title': headerImageObject.props.title,
			
			'styles' : {
				'position' : 'absolute',
				'z-index' :damMediaArray.length-index,
				'opacity' : 0,
				'width' : headerImageObject.props.dimensions.scaledWidth,
				'height' : headerImageObject.props.dimensions.scaledHeight
			//	'margin-top' : -(headerImageObject.props.dimensions.scaledHeight)+showRandomImages.props.imageContainerHeight
			//	'margin-top' : -(headerImageObject.props.dimensions.scaledHeight)+showRandomImages.props.imageContainerHeight+showRandomImages.props.centerOffsetY
			}
		});
			//append it to headerImage object
		headerImageObject.element = imageElement;
	
		return headerImageObject;
	},
	
	shiftAndPushImageFromMediaElementArray : function () {
	
			//get first element of array
		var imageToManipulate = showRandomImages.headerMediaImgElementArray.shift();
				
			//push the current image to the last position
		showRandomImages.headerMediaImgElementArray.push(imageToManipulate);
			
		return imageToManipulate;
			
	},
	
	moveImages : function () {

		var animation = function () {
			var headerImage = showRandomImages.shiftAndPushImageFromMediaElementArray();
									
			var zoomInFX = new Fx.Morph(headerImage.element, {duration: 25000, transition: Fx.Transitions.linear});
			var fadeInFX = new Fx.Morph(headerImage.element, {duration: 5000});	
			var fadeOutFX = new Fx.Morph(headerImage.element, {duration: 4000});
		
			headerImage.element.inject($('headerImageMask'), 'after');	
			
		
			var imagePositionEndY = (headerImage.props.dimensions.orginalHeight/2)+showRandomImages.props.centerOffsetY;	
	
			fadeInFX.start({
				'opacity' : [0,1]
			});
			
			var marginTopTarget = headerImage.props.dimensions.scaledHeight-showRandomImages.props.imageContainerHeight;
		
			var zoomIn = function () {
				zoomInFX.start({
					'margin-top': [(-headerImage.element.height)+showRandomImages.props.imageContainerHeight, 0]
				});
			};	
			
			zoomIn.delay(200);
	
			var fadeOut = function(){ 
				fadeOutFX.start ({
					'opacity' : [1,0]
				}).chain(function(){
					headerImage.element.destroy();
				});
			};
		
			fadeOut.delay(22000);
		}
		
		animation.periodical(23000);
		
			//first run
		animation();
		
	}

}