var textarray=["<h1>Bernd Fr&ouml;hlich, Firmeninhaber:</h1><p>Ich freue mich immer, wenn unser Service bis in kleinste Detail hundertprozentig ist. Meine Aufgabe ist es, alle Mitarbeiter zu motivieren, immer ihr Bestes zu geben.</p><br><h1>Christa Fr&ouml;hlich, Leitung Einkauf und Produktion:</h1><p>Am liebsten w&uuml;rde ich um die ganze Welt reisen und aus allen Kulturen Speisen, Gew&uuml;rze und Lifestyle mit in meine K&uuml;che nehmen!</p>",
               "<h1>Sandra Poschmann-Fr&ouml;hlich,<br> Eventmanagerin und Gesch&auml;ftsf&uuml;hrerin der Forum D&uuml;sseldorf Event-Management GmbH</h1><p>Es ist eine gro&szlig;e Herausforderung und Verantwortung ein mittelst&auml;ndisches Familienunternehmen dieser Gr&ouml;&szlig;enordnung in die Zukunft zu f&uuml;hren. Dabei ist es sch&ouml;n, ein gut eingespieltes, kreatives und innovatives Team an meiner Seite zu wissen.</p><h1>Christian Poschmann,<br> Gesch&auml;ftsf&uuml;hrer, Eventmanager</h1><p>Ich war bereits als Operations Manager bei Rhein Fire verantwortlich f&uuml;r die Umsetzung von Gro&szlig;events in der heutigen Esprit Arena. Ich freue mich, meine Erfahrungen nun im eigenen Familienunternehmen einzusetzen und mein Know-how an meine Kollegen weiterzugeben.</p>",
               "<h1>Viddi Vijayakumar, K&uuml;chenchef:</h1><p>Ich wei&szlig; nicht, ob es daran liegt, dass ich geb&uuml;rtig aus Ceylon komme. Aber mein Team sagt mir nach, dass ich &amp;Gew&uuml;rzkompositionen auf der Zunge&amp; trage. Multikulturell aufgewachsen, liebe ich nat&uuml;rlich die Vielfalt der internationalen K&uuml;che.</p>",
               "<h1>Christiane Rossmann, Cateringleitung-Produktion:</h1><p>Ich koordiniere die Produktionsabl&auml;ufe und bin die Schnittstelle zwischen Einkauf und Produktion. So kann ich garantieren, dass unsere Kunden immer p&uuml;nktlich mit frischer Qualit&auml;t beliefert werden. Inklusive meiner Ausbildung bin ich nun schon seit 20 Jahren mit dem Unternehmen verbunden. Durch meine langj&auml;hrige Erfahrung wei&szlig; ich, wo es die hochwertigsten Produkte zu fairem Preis-Leistungsgef&uuml;ge gibt und wie diese kreativ in der K&uuml;che verarbeitet werden k&ouml;nnen. Unsere Kunden kenne ich schon seit Jahren und wei&szlig; genau, worauf sie Wert legen.</p>",
               "<h1>Ronnie Schmale, Projektleiter Logistik und passionierter Weinkenner:</h1><p>Neben der Organisation der gesamten Unternehmenslogistik und der Galopp-Rennbahn D&uuml;sseldorf Grafenberg ist meine Leidenschaft ein guter Wein. Oft besuche ich unsere Lieferanten, um unseren Kunden immer neue Trends und stetige Qualit&auml;t zu pr&auml;sentieren. Besonders genie&szlig;e ich die Weinlese in Frankreich bei &#034;Des Enfants&#034;, an der ich immer gerne teilnehme, wenn meine es Zeit erlaubt.</p>",
               "<h1>Stjepan Josic, Eventlogistiker:</h1><p>Ich arbeite seit 1995 f&uuml;r die Familie Fr&ouml;hlich. Daher habe ich heute einen engen und herzlichen Kontakt zu unseren Stammkunden. Auch meine Frau Velinka arbeitet im Unternehmen in der Produktion. Wir geh&ouml;ren quasi schon zur Familie.</p><h1>Saidou Moussa, Eventlogistiker:</h1><p>Ich f&uuml;hle mich von der Familie Fr&ouml;hlich sehr gesch&auml;tzt. Das erste Weihnachten musste ich in Deutschland alleine feiern, da meine Familie noch in Afrika war. Christa Fr&ouml;hlich hat mich daraufhin am ersten Weihnachtsfeiertag zu sich und Ihren G&auml;sten in Ihr Haus eingeladen und wir haben gemeinsam das Weihnachtsfest gefeiert.</p>",
               "<h1>Ines Rappich, Projektassistentin:</h1><p>Eigentlich br&auml;uchte ich zehn Arme und Beine, aber ich liebe einen schnellen und herausfordernden Arbeitstag. Als Projektassistenz bin ich f&uuml;r Kunden und das gesamte Team die erste Ansprechpartnerin. In der Firma habe ich den Spitznamen &#034;Flying Ines&#034;. </p><h1>Andrea Holzschneider, Projektleitung, Marketing und Debitorenbuchhaltung:</h1><p>Es gibt nichts Sch&ouml;neres, als einen perfekten Augenblick zu arrangieren und kreative Ideen in die Tat umzusetzen. Besonders beeindruckt es mich immer, wie viele Kunden sich im Nachgang einer Veranstaltung herzlich bedanken, dabei haben wir alle doch nur unseren Job gemacht!</p>"];
LightboxOptions = Object.extend({
    fileLoadingImage:        '../images/loading.gif',     
    fileBottomNavCloseImage: '../images/closelabel.png',

    overlayOpacity: 0.7,   
    animate: true,         
    resizeSpeed: 10,       

    borderSize: 20,         

	
	labelImage: "Potrait",
	
	labelOf: "von"
}, window.LightboxOptions || {});

// -----------------------------------------------------------------------------------

var Lightbox = Class.create();

Lightbox.prototype = {
    imageArray: [],
    activeImage: undefined,
    
    // initialize()
    // Constructor runs on completion of the DOM loading. Calls updateImageList and then
    // the function inserts html at the bottom of the page which is used to display the shadow 
    // overlay and the image container.
    //
    initialize: function() {    
        
        this.updateImageList();
        
        
        this.keyboardAction = this.keyboardAction.bindAsEventListener(this);

        if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10;
        if (LightboxOptions.resizeSpeed < 1)  LightboxOptions.resizeSpeed = 1;

	    this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0;
	    this.overlayDuration = LightboxOptions.animate ? 0.2 : 0;  // shadow fade in/out duration

        // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
        // If animations are turned off, it will be hidden as to prevent a flicker of a
        // white 250 by 250 box.
        var size = (LightboxOptions.animate ? 250 : 1) + 'px';
        



        var objBody = $$('body')[0];

		objBody.appendChild(Builder.node('div',{id:'overlay'}));
	
        objBody.appendChild(Builder.node('div',{id:'lightbox'}, [
            Builder.node('div',{id:'outerImageContainer'}, 
                Builder.node('div',{id:'imageContainer'}, [
                    Builder.node('img',{id:'lightboxImage'}), 
                    Builder.node('div',{id:'hoverNav'}, [
                        Builder.node('a',{id:'prevLink', href: '#' }),
                        Builder.node('a',{id:'nextLink', href: '#' })
                    ]),
                    Builder.node('div',{id:'loading'}, 
                        Builder.node('a',{id:'loadingLink', href: '#' }, 
                            Builder.node('img', {src: LightboxOptions.fileLoadingImage})
                        )
                    )
                ])
            ),
            Builder.node('div', {id:'imageDataContainer'},
                Builder.node('div',{id:'imageData'}, [
                    Builder.node('div',{id:'imageDetails'}, [
                        Builder.node('span',{id:'caption'}),
                        Builder.node('span',{id:'numberDisplay'})
                    ])
            		,
                    Builder.node('div',{id:'bottomNav'},
                        Builder.node('a',{id:'bottomNavClose', href: '#' },
                            Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
                        )
                    )
                ])
            )
        ]));


		$('overlay').hide().observe('click', (function() { this.end(); }).bind(this));
		$('lightbox').hide().observe('click', (function(event) { if (event.element().id == 'lightbox') this.end(); }).bind(this));
		$('outerImageContainer').setStyle({ width: size, height: size });
		$('prevLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage - 1); }).bindAsEventListener(this));
		$('nextLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage + 1); }).bindAsEventListener(this));
		$('loadingLink').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
		$('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));

        var th = this;
        (function(){
            var ids = 
                'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' + 
                'imageDataContainer imageData imageDetails caption numberDisplay bottomNav'; // bottomNavClose';   
            $w(ids).each(function(id){ th[id] = $(id); });
        }).defer();
    },

    updateImageList: function() {   
        this.updateImageList = Prototype.emptyFunction;

        document.observe('click', (function(event){
            var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
            if (target) {
                event.stop();
                this.start(target);
            }
        }).bind(this));
    },

    start: function(imageLink) {    

        $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });

        // stretch overlay to fill page and fade in
        var arrayPageSize = this.getPageSize();
        $('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });

        new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });

        this.imageArray = [];
        var imageNum = 0;       

        if ((imageLink.rel == 'lightbox')){
            // if image is NOT part of a set, add single image to imageArray
            this.imageArray.push([imageLink.href, imageLink.title]);         
        } else {
            // if image is part of a set..
            this.imageArray = 
                $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
                collect(function(anchor){ return [anchor.href, anchor.title]; }).
                uniq();
            
            while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
        }

        // calculate top and left offset for the lightbox 
        var arrayPageScroll = document.viewport.getScrollOffsets();
        var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
        var lightboxLeft = arrayPageScroll[0];
        this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
        
        this.changeImage(imageNum);
    },


    changeImage: function(imageNum) {   
        
        this.activeImage = imageNum; // update global var

        // hide elements during transition
        if (LightboxOptions.animate) this.loading.show();
        this.lightboxImage.hide();
        this.hoverNav.hide();
        this.prevLink.hide();
        this.nextLink.hide();
		// HACK: Opera9 does not currently support scriptaculous opacity and appear fx
        this.imageDataContainer.setStyle({opacity: .0001});
        this.numberDisplay.hide();      
        
        var imgPreloader = new Image();
        



        imgPreloader.onload = (function(){
            this.lightboxImage.src = this.imageArray[this.activeImage][0];
            this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
        }).bind(this);
        imgPreloader.src = this.imageArray[this.activeImage][0];
    },


    resizeImageContainer: function(imgWidth, imgHeight) {


        var widthCurrent  = this.outerImageContainer.getWidth();
        var heightCurrent = this.outerImageContainer.getHeight();

 
        var widthNew  = (imgWidth  + LightboxOptions.borderSize * 2);
        var heightNew = (imgHeight + LightboxOptions.borderSize * 2);


        var xScale = (widthNew  / widthCurrent)  * 100;
        var yScale = (heightNew / heightCurrent) * 100;


        var wDiff = widthCurrent - widthNew;
        var hDiff = heightCurrent - heightNew;

        if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'}); 
        if (wDiff != 0) new Effect.Scale(this.outerImageContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration}); 


        var timeout = 0;
        if ((hDiff == 0) && (wDiff == 0)){
            timeout = 100;
            if (Prototype.Browser.IE) timeout = 250;   
        }

        (function(){
            this.prevLink.setStyle({ height: imgHeight + 'px' });
            this.nextLink.setStyle({ height: imgHeight + 'px' });
            this.imageDataContainer.setStyle({ width: widthNew + 'px' });

            this.showImage();
        }).bind(this).delay(timeout / 1000);
    },
    

    showImage: function(){
        this.loading.hide();
        new Effect.Appear(this.lightboxImage, { 
            duration: this.resizeDuration, 
            queue: 'end', 
            afterFinish: (function(){ this.updateDetails(); }).bind(this) 
        });
        this.preloadNeighborImages();
    },


    updateDetails: function() {
    

        if (this.imageArray[this.activeImage][1] != ""){
            this.caption.update(this.imageArray[this.activeImage][1]).show();
        }
        
 
        if (this.imageArray.length > 1){
            this.numberDisplay.update( textarray[this.activeImage]+"<br />"+LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + '  ' + this.imageArray.length).show();

        }

        new Effect.Parallel(
            [ 
                new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }), 
                new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration }) 
            ], 
            { 
                duration: this.resizeDuration, 
                afterFinish: (function() {
	                // update overlay size and update nav
	                var arrayPageSize = this.getPageSize();
	                this.overlay.setStyle({ height: arrayPageSize[1] + 'px' });
	                this.updateNav();
                }).bind(this)
            } 
        );
    },

    //
    //  updateNav()
    //  Display appropriate previous and next hover navigation.
    //
    updateNav: function() {

        this.hoverNav.show();               

        // if not first image in set, display prev image button
        if (this.activeImage > 0) this.prevLink.show();

        // if not last image in set, display next image button
        if (this.activeImage < (this.imageArray.length - 1)) this.nextLink.show();
        
        this.enableKeyboardNav();
    },

    //
    //  enableKeyboardNav()
    //
    enableKeyboardNav: function() {
        document.observe('keydown', this.keyboardAction); 
    },

    //
    //  disableKeyboardNav()
    //
    disableKeyboardNav: function() {
        document.stopObserving('keydown', this.keyboardAction); 
    },

    //
    //  keyboardAction()
    //
    keyboardAction: function(event) {
        var keycode = event.keyCode;

        var escapeKey;
        if (event.DOM_VK_ESCAPE) {  // mozilla
            escapeKey = event.DOM_VK_ESCAPE;
        } else { // ie
            escapeKey = 27;
        }

        var key = String.fromCharCode(keycode).toLowerCase();
        
        if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox
            this.end();
        } else if ((key == 'p') || (keycode == 37)){ // display previous image
            if (this.activeImage != 0){
                this.disableKeyboardNav();
                this.changeImage(this.activeImage - 1);
            }
        } else if ((key == 'n') || (keycode == 39)){ // display next image
            if (this.activeImage != (this.imageArray.length - 1)){
                this.disableKeyboardNav();
                this.changeImage(this.activeImage + 1);
            }
        }
    },

    //
    //  preloadNeighborImages()
    //  Preload previous and next images.
    //
    preloadNeighborImages: function(){
        var preloadNextImage, preloadPrevImage;
        if (this.imageArray.length > this.activeImage + 1){
            preloadNextImage = new Image();
            preloadNextImage.src = this.imageArray[this.activeImage + 1][0];
        }
        if (this.activeImage > 0){
            preloadPrevImage = new Image();
            preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];
        }
    
    },

    //
    //  end()
    //
    end: function() {
        this.disableKeyboardNav();
        this.lightbox.hide();
        new Effect.Fade(this.overlay, { duration: this.overlayDuration });
        $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
    },

    //
    //  getPageSize()
    //
    getPageSize: function() {
	        
	     var xScroll, yScroll;
		
		if (window.innerHeight && window.scrollMaxY) {	
			xScroll = window.innerWidth + window.scrollMaxX;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}
		
		var windowWidth, windowHeight;
		
		if (self.innerHeight) {	// all except Explorer
			if(document.documentElement.clientWidth){
				windowWidth = document.documentElement.clientWidth; 
			} else {
				windowWidth = self.innerWidth;
			}
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) { // other Explorers
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}	
		
		// for small pages with total height less then height of the viewport
		if(yScroll < windowHeight){
			pageHeight = windowHeight;
		} else { 
			pageHeight = yScroll;
		}
	
		// for small pages with total width less then width of the viewport
		if(xScroll < windowWidth){	
			pageWidth = xScroll;		
		} else {
			pageWidth = windowWidth;
		}

		return [pageWidth,pageHeight];
	}
}

document.observe('dom:loaded', function () { new Lightbox(); });