/**
 * functions.js
 * Zentrale Javascript Funktionssammlung für damals.de, 
 * muss als letzte JS-Datei im HEAD der Seiten eingebunden werden.
 * 
 * @author J.Hahn <info@buero-hahn.de>
 * @version 2009-07-03
 *
 */

 /*
  * Silbentrennung starten
  */
	Hyphenator.config({
		displaytogglebox : false,
		minwordlength : 4
	});
	
	Hyphenator.run();
	
	
	
	/*
	 * Overlay-Klasse
	 */
	var cmtOverlay = Class.create();

	cmtOverlay.prototype = {
		initialize: function(params) {

			this.defaultParams = new Object ({
				selectSelector : '.cmtFormSelect',
				overlayOpacity : 0.2,
				marginTop : 16
			});

			// Parameter zusammenführen
			this.params = this.mergeParams(params);
			
			this.refOverlay = null;
			this.refOverlayContent = null;

			// Klick auf Dokument schließt alle Select-Felder
			Event.observe(document, 'dom:loaded', this.initOverlay.bindAsEventListener(this));
		},

		/**
		 * function initOverlay();
		 * 
		 * Initialisert die Overlay-Fläche
		 * 
		 * @param void
		 * @return void
		 */
		initOverlay: function() {

			// Overlay-DIV erzeugen
			this.refOverlay =  Element.extend(document.createElement('div'));
			
			this.refOverlay.writeAttribute('id', 'cmtOverlay');
			this.refOverlay.writeAttribute('class', 'cmtOverlay');

			// Overlay-Inhalts-DIV erzeugen
			this.refOverlayContent =  Element.extend(document.createElement('div'));
			
			this.refOverlayContent.writeAttribute('id', 'cmtOverlayContent');
			this.refOverlayContent.writeAttribute('class', 'cmtOverlayContent');

			// Anhängen...
			// 1. Inhalt an Overlay
			$(document.body).insert(this.refOverlayContent);
			// 2. Overlay an Body
			$(document.body).insert(this.refOverlay);

			// Event-Observer: bei Klick ausblenden
			this.refOverlay.observe('click', this.hideOverlay.bindAsEventListener(this))
			
			// anfangs ausblenden
			this.refOverlay.hide();
			this.refOverlayContent.hide();
			
		},
		
		/**
		 * function hideOverlay();
		 * 
		 * Blendet die Overlay-Fläche aus
		 * 
		 * @param void
		 * @return void
		 */
		hideOverlay: function() {
			this.refOverlay.fade({ duration: 0.5, from: this.params.overlayOpacity, to: 0, afterFinishInternal: this.reInitOverlay.bind(this)});
			this.refOverlayContent.fade({ duration: 0.5, from: 1, to: 0});
		},

		/**
		 * function showOverlay();
		 * 
		 * Zeigt die Overlay-Fläche
		 * 
		 * @param void
		 * @return void
		 */
		showOverlay: function() {
			this.refOverlay.setOpacity(0);
			this.refOverlay.show();
			this.refOverlay.fade({ duration: 0.3, from: 0, to: this.params.overlayOpacity});
			
			this.refOverlayContent.show();
			this.refOverlayContent.setOpacity(0);
		},

		/**
		 * function showOverlay();
		 * 
		 * Zeigt die Overlay-Fläche
		 * 
		 * @param void
		 * @return void
		 */
		showContent: function(params) {
			
			// Neue Elemente erstellen:
			// 1. Container
			var refContentContainer = Element.extend(document.createElement('div'));
			//var contentCopy = params.refContent.cloneNode(true);

			// 2. Bild
			var refImage = Element.extend(document.createElement('img'));
			
			// 3. Paragraph
			var refParagraph = Element.extend(document.createElement('p'));
			
			// Eigenschaften und Inhalte der alten Elemente holen
			refSourceImage = $(params.refContent).select('img.imageHasFullView')[0];
			refSourceParagraph = $(params.refContent).select('p')[0];

			 

			// Inhalte kopieren und anhängen
			// 1. Bild
			var date = new Date();

			refImage.src = refSourceImage.src+'?iebuster='+date.getMilliseconds();
			refImage.hide();
			refContentContainer.insert(refImage);		
			
			// 2. Optionale Bildunterschrift
			if (typeof(refSourceParagraph) != 'undefined') {
				refParagraph.innerHTML = refSourceParagraph.innerHTML;
				refParagraph.addClassName('imageCaption');
				refParagraph.hide();
				refContentContainer.insert(refParagraph);
			}	

			this.refOverlayContent.insert(refContentContainer);

			// Event: Warten bis Bild geladen
			refImage.observe('load', this.resizeContent.bindAsEventListener(this));
	
		
			this.showOverlay();

		},
		
		resizeContent: function(ev) {
			
			// Bild geladen, dann anzeigen
			refImage = Event.element(ev);
			refImage.show();
			
			// Breite des Bildes ermitteln und dem folgenden Text zuweisen
			var imageWidth = refImage.getWidth()
			
			refParagraph = this.refOverlayContent.select('p.imageCaption')[0];
			if (typeof(refParagraph) != 'undefined') {
				refParagraph.setStyle({
					width: imageWidth + 'px'
				});
				
				refParagraph.show();
			}

			// Schlussendlich Content anzeigen
			this.refOverlayContent.fade({ duration: 0.3, from: 0, to: 1});

			
			// ContentObere Position: Position ermitteln
			var topPos = this.params.marginTop + document.viewport.getScrollOffsets().top;
			
			// Bild zentrieren
			var windowWidth = document.viewport.getWidth();
			var contentPadding = parseInt(this.refOverlayContent.getStyle('padding-left'));
			var leftPos = Math.floor((windowWidth - imageWidth - contentPadding) / 2);

			this.refOverlayContent.setStyle({
				top: topPos + 'px',
				left: leftPos + 'px',
				position: 'absolute',
				margin: '0px auto',
				width: imageWidth + contentPadding*2 + 'px'
			});
			
			// Falls Bild zu hoch für Browser
			var windowHeight = document.viewport.getHeight();
			var contentHeight = this.refOverlayContent.getHeight() + this.params.marginTop * 2;
	
			if (contentHeight > windowHeight) {
				var newWidth = imageWidth + contentPadding*2 + 40;
				
				this.refOverlayContent.setStyle({
					height: (windowHeight - 4*this.params.marginTop) + 'px',
					overflow: 'auto',
					width: newWidth
				});
			}
		},

		/**
		 * function showOverlay();
		 * 
		 * Zeigt die Overlay-Fläche
		 * 
		 * @param void
		 * @return void
		 */
		reInitOverlay: function(params) {
			this.refOverlay.hide();
			this.refOverlayContent.update('');
			this.refOverlayContent.setStyle ({
				width: 'auto',
				height: 'auto'
			});
		},

		/**
		 * function mergeParams();
		 * 
		 * simuliert ein array_merge
		 * 
		 * @param object Parameter, die mit this.defaultParams verknüpft werden sollen.
		 * @return object Zusammengeführte Objekte
		 */
		mergeParams: function(params) {
			return Object.extend(this.defaultParams, params);
		}
	}
	
	/*
	 * Overlay-Bilderklasse
	 */
	var cmtImages = Class.create();

	cmtImages.prototype = {
		initialize: function(params) {

			this.defaultParams = new Object ({
				imageSelector : '.imageHasFullView'
			});

			// Parameter zusammenführen
			this.params = this.mergeParams(params);

			//this.refOverlay = null;
			//this.refOverlayContent = null;

			// Klick auf Dokument schließt alle Select-Felder
			Event.observe(window, 'load', this.initImages.bindAsEventListener(this));
		},

		/**
		 * function initImages();
		 * 
		 * Initialisert die Bilder: Sucht nach Bildern mit angegebenem Selektor und erweitert diese.
		 * 
		 * @param void
		 * @return void
		 */
		initImages: function() {

			// Overlay-DIV erzeugen
			var images = $$(this.params.imageSelector);

			images.each(
				this.prepareImages.bind(this)
			);
		},

		/**
		 * function prepareImages();
		 * 
		 * Erweitert die Bilder
		 * 
		 * @param void
		 * @return void
		 */
		prepareImages: function() {

			var img = arguments[0];

			img.setStyle({
				cursor: 'pointer'
			});

			Event.observe(img, 'click', this.showImageFullView.bindAsEventListener(this));
		},

		/**
		 * function prepareImages();
		 * 
		 * Erweitert die Bilder
		 * 
		 * @param void
		 * @return void
		 */
		showImageFullView: function(ev) {

			var element = Event.element(ev);
			
			// Es wird der Vater-Container des Bildes übergeben
			var showImageContainer = element.up();
			damalsOverlay.showContent({
				refContent: showImageContainer
			}); 
		},

		/**
		 * function mergeParams();
		 * 
		 * simuliert ein array_merge
		 * 
		 * @param object Parameter, die mit this.defaultParams verknüpft werden sollen.
		 * @return object Zusammengeführte Objekte
		 */
		mergeParams: function(params) {
			return Object.extend(this.defaultParams, params);
		}
	}
	
	damalsOverlay = new cmtOverlay();
	damalsImages = new cmtImages();