var imageField		= new Array();
var currentImage	= 0;

(function initAcquaControls () {
	window.addEvent('domready', function(){
		// set up image blender
		$each($$("div#headPicture"), function(headerImageBlock, index){
			
			headerImageBlock.setStyle('position', 'relative');
			headerImageBlock.setStyle('top', 0);
			headerImageBlock.setStyle('left', 0);
				
			$each($$("div#headPicture img"), function(headerImage, index){
			 headerImage.setStyle('position', 'absolute');
			 headerImage.setStyle('top', 0);
			 headerImage.setStyle('left', 0);
				
			 if(index == 0){
				headerImage.setStyle('z-index', 30);
			 } else {
				headerImage.setStyle('z-index', (30 + index));
				headerImage.setStyle('opacity', 0);
				headerImage.setStyle('display', 'block');
				
				headerImage.set('tween', {duration: 2000});
				headerImage.set('id', ('imageBlender_' + index));
			 };
			 imageField.push(headerImage);
			});

			var blendImage = function(){ 
				var imageCount = imageField.length;

				currentImage ++;
				if(currentImage == imageCount) {
					for(imageIndex = 1; imageIndex < (imageCount-1); imageIndex ++)	{
						$('imageBlender_' + imageIndex).fade('hide');
					};
					$('imageBlender_' + (imageCount-1)).fade('out');
					currentImage = 0;
				} else
					$('imageBlender_' + currentImage).fade('in');
			};
			
			if(imageField.length > 1)
				blendImage.periodical(5000);
		});
		
		// set up acqua container element 
		$each($$("div.containerElement"), function(container, index){
			var mehrButton 		= container.getElement('div.mehrContent span.mehrLink');
			var mehrInhaltBox	= container.getElement('div.textContainer');
			var teaserInhaltBox	= container.getElement('div.shortyContainer');
			
			if(mehrButton){
				var sliderEffectContent = new Fx.Slide(mehrInhaltBox).hide();
				var sliderEffectShorty  = new Fx.Slide(teaserInhaltBox).show();
				mehrInhaltBox.setStyle('display', 'block');
				
				container.sliderEffectContent = sliderEffectContent;
				container.sliderEffectShorty = sliderEffectShorty;
				container.teaserInhaltBox = teaserInhaltBox;
				
				container.mehrButton= mehrButton;
				
				mehrButton.container = container;
				
				mehrButton.addEvent('click', function(){
					$each($$("div.containerElement.openBox"), function(container, index){
						container.removeClass('openBox');
						container.mehrButton.setStyle('visibility', 'visible');
						container.sliderEffectContent.slideOut();
					});
					
					this.setStyle('visibility', 'hidden');
					this.container.sliderEffectContent.slideIn();
					this.container.addClass('openBox');
				});
			}
		});
	});
	
})();