/* Title: floodOfImages
*  Author: Peter Wyss / Atelier Kaempfer, Burgdorf, Switzerland
*  Last Modification: March 10, 2011
*  
*  This script requires jquery, 'galleria' (http://galleria.aino.se/) with
*  the 'twelve' theme and jquery.loadImages.1.0.1.js (http://plugins.jquery.com/node/15200)
*  
*  The script does three things:
*
* 1 Slide show (only one per page):
*   floodOfImages pre-loads all the pictures of the container (div) "headPict".
*   If there is more than one picture in "headPict" the pictures are shown as
*   slide show. Galleria is not required for this slide show.
*
* 2 Picture galleries (up to 9 per page):
*   floodOfImages pre-loads all the pictures in the containers (div)
*   "photoGalleries_#" (# = 1 ... n).
*   Once these pictures are pre-loaded, the container (div) "fotoGallery" is
*   faded in. "fotoGallery" must contain a list (<ul>) with links (<a>).
*   When clicking on the first link in the list, a gallery containing all the
*   pictures in the container "photoGalleries_1" is shown, when clicking on the
*   second link a gallery containing all the  pictures in the container
*   "photoGalleries_2" is shown. One page can thus contain up to 9 different
*   galleries with many pictures each.
*   On IE 6 no galleries are created!
*
* 3 It shows an iframe (for Google Mapes) when clicking on #showMap
*   
*/


var slideShowSources = new Array();

function activateGallery() {
    galleryMenu = $("#fotoGallery");
    newGalleryMenu = $(galleryMenu).clone(true);
    $("#photoGalleries_" + ($("#photoGalleries_1 ~ div").length+1)).after(newGalleryMenu);
    $(newGalleryMenu).addClass('floodOfImagesMenu');
    $(newGalleryMenu).find('p a').addClass("imageGalleryLink");
    $(galleryMenu).fadeIn(3000);
    $("#photoGalleries_1").before('<div id="galleryMask"></div>');
    $('#galleryMask').css({ 'height':'100%',
                            'width':'100%',
                            'opacity':'0.70',
                            'background-color':'#777777',
                            'left':'0',
                            'top':'0',
                            'position':'fixed',
                            'display' : 'none',
                            'z-index' : '0'});
	$(newGalleryMenu).after('<div id="photoGalleryClose"></div>');						
	$('#photoGalleryClose').addClass("imageGalleryCloseButton");							
}


function changeSlide() {
	$("#headPict img:first").fadeTo(1000, 0.1, function(){
        if (slideNumber == slideShowSources.length-1) {
                slideNumber = 0;}
        else {slideNumber++;}
        $("#headPict img:first").attr('src', slideShowSources[slideNumber]);
        $("#headPict img:first").fadeTo(1000, 1.0);
    });
}


function startSlideShow() {
    if (slideShowSources.length > 2) {
		slideNumber = Math.round(1 + Math.random() * (slideShowSources.length - 2));
	}
	else {slideNumber = 0};
    if (slideShowSources.length > 1) {
		    $("#headPict img:first").attr('src', slideShowSources[slideNumber]);
            window.setInterval(function(){changeSlide()}, 10000);
    }
}


$(document).ready(function() {
	    
    $("#fotoGallery").fadeOut("fast");
    
    if ($("#headPict")) {
        imageList = $("#headPict img");
        for (i=0; i < imageList.length; i++) {
                slideShowSources[i] = imageList[i].src;
        }
        $.loadImages(slideShowSources, function(){startSlideShow()});
    }
    
    if(!($.browser.msie && $.browser.version=="6.0") && $("#fotoGallery") && $("#photoGalleries_1")) {
    
            galleryLoaded = new Array();
            var galleryImages = new Array();
            imageList = $("#photoGalleries_1 img, #photoGalleries_1 ~ div img");
            for (i=0; i < imageList.length; i++) {
                    galleryImages[i] = imageList[i].src;
                     galleryLoaded.push(false);
            }
            
            $.loadImages(galleryImages, function(){activateGallery()});
    
            $("#photoGalleries_1, #photoGalleries_1 ~ div").bind("click", function(event) {
                    if (event.stopPropagation) {
                            event.stopPropagation();}
                    else {event.cancleBubble = true;}
            });
            
            /* Workaround for IE8 bug (very slow response to hover event) */
            
            $("#mainNavigation a").hover(function() {
                    $("#mainNavigation a").css({bordercolor: '#FFFFFF'})},
                    function() {});
            
            $("#showMap").click(function(event) {
                 event.preventDefault();
                 if ($("#mapOfZambrone").length == 0) {
                    $("#fotoGallery").after('<div id="mapOfZambrone"><iframe src="http://www.tinymap.net/embedded/q6p4agAcarF?w=700&h=402&clat=38.7083&clng=15.9785&z=15&v=n&c=1&d=1"frameborder="0" scrolling="no" width="700" height="402" marginwidth="0" marginheight="0"></iframe></div>');
                 }                   
                 $("#mapOfZambrone").dialog({ height: 455,
                                     width: 730,
                                     resizable: false,
                                     title: 'Oasi Zambrone / www.kalabrien.ch'});
            });
                    
            $("#fotoGallery").find("p a").bind("click", function(event) {				
                    
                $("#fotoGallery").fadeOut("fast");			
                $("#photoGalleries_1, #photoGalleries_1 ~ div").css({display:'none'});
                    
                $("#galleryMask").css({display:'block'});
				$("#photoGalleryClose").css({display:'block'});
                    
                if (event.stopPropagation) {
                        event.stopPropagation();}
                else {event.cancleBubble = true;}
                event.preventDefault();
                galleryNumber = ($(this).index()) + 1;
                                                                                
                if (!galleryLoaded[galleryNumber-1])
                {
                    galleryHeight = parseInt($('#photoGalleries_' + galleryNumber + ' img:first').css('height'));
                    galleryWidth = parseInt($('#photoGalleries_' + galleryNumber + ' img:first').css('width'));
                    if (galleryHeight == 0) {galleryHeight = 469;}
                    if (galleryWidth == 0) {galleryWidth = 700;}
                    $("#photoGalleries_" + galleryNumber).galleria({		    
                            height: galleryHeight,
                            width: galleryWidth,
                            transition: "pulse",
                            transitionSpeed: 200,
                            imageCrop: true,
                            thumbCrop: true,
                            carousel: false
                            });
                    $("div.galleria-container").css({'position':'fixed',
                                                     'border':'1px solid #FFFFFF',
                                                     'top': '10px'});
                    galleryLoaded[galleryNumber-1] = true;
                }
                
                $("#photoGalleries_" + galleryNumber).css({display:'block'});
                $(newGalleryMenu).css({'display':'block'});
                $(newGalleryMenu).find('p a').css({'text-decoration':'none'});
                $(newGalleryMenu).find('p a:eq(' + (galleryNumber-1) + ')').css({'text-decoration':'underline'});
                $(newGalleryMenu).find('p a:eq(' + (galleryNumber-1) + ')').addClass("imageGalleryVisited");
                $(galleryMenu).find('a:eq(' + (galleryNumber-1) + ')').addClass("imageGalleryVisited");				
                $("#photoGalleryClose").click(function() {
                        $(newGalleryMenu).css({display:'none'});				
                        $(galleryMenu).fadeIn("fast");
                        $("#photoGalleries_" + galleryNumber).css({display:'none'});                                
                        $("#galleryMask").fadeOut("fast");
						$("#photoGalleryClose").fadeOut("fast");
            });	
        });
    }
});