// Bild-Array
var arrImages = new Array;
var intCurrentIndexArrImages = 0;
var intWindowWidth;
var intWindowHeight;
var bolIsGalleryInNeed = false;
var bolSwitchPlayImageToPause = true;
var numIntervalId;

// Alle Bilder, die in der Gallerie angezeigt werden sollen, müssen in diesem Array hinterlegt sein.
$.preloadImages = function(){

  imgHalloween_2010_01 = new Image(700, 525);
  imgHalloween_2010_01.src = "images/Halloween_2010_001.png";
  imgHalloween_2010_01.strTitle = "Halloween 2010";
  imgHalloween_2010_01.strSubtitle = "";
  arrImages.push(imgHalloween_2010_01);
  imgHalloween_2010_02 = new Image(700, 525);
  imgHalloween_2010_02.src = "images/Halloween_2010_002.png";
  imgHalloween_2010_02.strTitle = "Halloween 2010";
  imgHalloween_2010_02.strSubtitle = "";
  arrImages.push(imgHalloween_2010_02);
  imgHalloween_2010_03 = new Image(700, 525);
  imgHalloween_2010_03.src = "images/Halloween_2010_003.png";
  imgHalloween_2010_03.strTitle = "Halloween 2010";
  imgHalloween_2010_03.strSubtitle = "";
  arrImages.push(imgHalloween_2010_03);
  imgFaschingsfruehschoppen_2011_001 = new Image(700, 525);
  imgFaschingsfruehschoppen_2011_001.src = "images/Faschingsfruehschoppen_2011_001.png";
  imgFaschingsfruehschoppen_2011_001.strTitle = "Faschingsfrühschoppen 2011";
  imgFaschingsfruehschoppen_2011_001.strSubtitle = "";
  arrImages.push(imgFaschingsfruehschoppen_2011_001);
  imgFaschingsfruehschoppen_2011_002 = new Image(700, 525);
  imgFaschingsfruehschoppen_2011_002.src = "images/Faschingsfruehschoppen_2011_002.png";
  imgFaschingsfruehschoppen_2011_002.strTitle = "Faschingsfrühschoppen 2011";
  imgFaschingsfruehschoppen_2011_002.strSubtitle = "";
  arrImages.push(imgFaschingsfruehschoppen_2011_002);
  imgFaschingsfruehschoppen_2011_003 = new Image(525, 700);
  imgFaschingsfruehschoppen_2011_003.src = "images/Faschingsfruehschoppen_2011_003.png";
  imgFaschingsfruehschoppen_2011_003.strTitle = "Faschingsfrühschoppen 2011";
  imgFaschingsfruehschoppen_2011_003.strSubtitle = "Der Chef";
  arrImages.push(imgFaschingsfruehschoppen_2011_003);
  imgFaschingsfruehschoppen_2011_004 = new Image(700, 525);
  imgFaschingsfruehschoppen_2011_004.src = "images/Faschingsfruehschoppen_2011_004.png";
  imgFaschingsfruehschoppen_2011_004.strTitle = "Faschingsfrühschoppen 2011";
  imgFaschingsfruehschoppen_2011_004.strSubtitle = "";
  arrImages.push(imgFaschingsfruehschoppen_2011_004);
  imgFaschingsfruehschoppen_2011_005 = new Image(700, 525);
  imgFaschingsfruehschoppen_2011_005.src = "images/Faschingsfruehschoppen_2011_005.png";
  imgFaschingsfruehschoppen_2011_005.strTitle = "Faschingsfrühschoppen 2011";
  imgFaschingsfruehschoppen_2011_005.strSubtitle = "";
  arrImages.push(imgFaschingsfruehschoppen_2011_005);
  imgFaschingsfruehschoppen_2011_006 = new Image(700, 525);
  imgFaschingsfruehschoppen_2011_006.src = "images/Faschingsfruehschoppen_2011_006.png";
  imgFaschingsfruehschoppen_2011_006.strTitle = "Faschingsfrühschoppen 2011";
  imgFaschingsfruehschoppen_2011_006.strSubtitle = "Live-Musik & Gesang mit „Carlo“ Harthan und special guest Linda Jo Rizzo";
  arrImages.push(imgFaschingsfruehschoppen_2011_006);
  imgFaschingsfruehschoppen_2011_007 = new Image(700, 525);
  imgFaschingsfruehschoppen_2011_007.src = "images/Faschingsfruehschoppen_2011_007.png";
  imgFaschingsfruehschoppen_2011_007.strTitle = "2. Faschingsfrühschoppen 2011";
  imgFaschingsfruehschoppen_2011_007.strSubtitle = "Live-Musik mit den „Black Mustangs” und special guest Linda Jo Rizzo";
  arrImages.push(imgFaschingsfruehschoppen_2011_007);

};

// Der Galerie-Container ist der dunkle, durchscheinende Hintergrund, der hier aufgebaut wird; in dieser
// Routine erfolgt am Ende der Aufruf zur Anzeige des ersten Bidles auf dem Array.
$.setGalleryContainer = function(){

  bolIsGalleryInNeed = true;
  intWindowWidth = $(window).width();
  intWindowHeight = $(window).height();

  $('body').append('<div id="idGaleryContainer"></div');
  $('#idGaleryContainer').css({
    backgroundColor: '#001401',
//    backgroundColor: '#000710',
    opacity: '0.97',
    position: 'absolute',
    top: '0px',
    left: '0px',
    width: intWindowWidth,
    height: intWindowHeight
  }).fadeIn();

  $.setPicture();

};

$.runSlideShow = function(){

  if(intCurrentIndexArrImages < arrImages.length - 1){
    intCurrentIndexArrImages = intCurrentIndexArrImages + 1;
    $.setPicture(intCurrentIndexArrImages);
    $('#idImgStartSlideShow').attr({
      src : 'images/imgPauseSlideShow.png',
      alt : 'Pause Slideshow',
      title : 'Pause Slideshow'
    });
  }else{
    $('#idImgStartSlideShow').attr({
      src : 'images/imgStartSlideShow.png',
      alt : 'Starte Slideshow',
      title : 'Starte Slideshow'
    });
    bolSwitchPlayImageToPause = !bolSwitchPlayImageToPause;
    clearInterval(numIntervalId);
  }

};

// Routine für die Anzeige der Bilder, der Bildinformationen und der Steuerelemente für das Verhalten der Galerie
$.setPicture = function(){

  var numImageZoomFactor;

  var oImage = arrImages[intCurrentIndexArrImages];

  // Zu große Bilder müssen ggf. verkleinert werden.
  numImageZoomFactor = $.getImageZoomFactor(oImage);
  // Aber nur, wenn ihre breitere Seite mehr als 650 px hat.
  if (numImageZoomFactor != 1){
    oImage.width = oImage.width * numImageZoomFactor;
    oImage.height = oImage.height * numImageZoomFactor;
  }

  // Die Anzeigenhöhe wird davon bestimmt, ob das Bild im Hoch- oder Querformat vorliegt.
  if(oImage.width >= oImage.height){
    intPositionTop = (intWindowHeight - oImage.height + 30) / 4;
  }else{
    intPositionTop = (intWindowHeight - oImage.height + 30) / 10;
  }

  // Vor jedem (erneuten) Füllen erst den Container leeren
  $('#idGaleryContainer').empty();

  // Der äussere Container erhält eine Box für das anzuzeigende Bild, Texte und die Steuerelemente
  $('#idGaleryContainer').append('<div id="idDivImageBox"></div');

  // Eine Box für das Bild erlaubt, einen durchscheinenden Rand hinzuzufügen, der bei der Positionierung eingerechnet wird.
  $('#idDivImageBox').css({
    backgroundColor: '#113317',
    opacity: '0.99',
    width: oImage.width + 30 + 'px',
    //    Keine Höhenangabe für den Container: die ergibt sich daraus, ob dem Bild eine Überschrift und auch ein Untertitel mitgegeben wird.
    position: 'relative',
    left: (intWindowWidth - oImage.width + 30) / 2 + 'px',
    top: intPositionTop + 'px'
  });

  // Das eigentliche Bild wird der Bild-Box hinzugefügt ...
  $('#idDivImageBox').append('<img id="idGalleryImage" src="' + oImage.src + '" width="' + oImage.width + '" height="' + oImage.height + '" style="border: #ACA7A6 5px solid;" />');
  $('#idGalleryImage').css({
    position: 'relative',
    top: '10px',
    left: '0px'
  }).hide().delay(500).fadeIn(300);

  // genau wie die Bild-Elemente für die Naviagtion, welche ...
  $('#idDivImageBox').append('<div id="idDivGalleryNavi"></div>');

  // einen eigenen Container erhalten
  $('#idDivGalleryNavi').css({
    backgroundColor: '#113317',
    color: '#E5DCDA',
    padding: '10px'
  }).hide().delay(500).fadeIn(300);

  // Als erstes wird angezeigt, um welches von wie vielen Bildern es sich handelt
    $('#idDivGalleryNavi').append('<div id="idDivNaviImages" style="margin: 10px 0;"></div>');
    $('#idDivNaviImages').append('<span id="idSpanImagesCounter" style="float: left; margin-right: 20px; line-height: 40px; color: #B5ACAA; font-weight: bold;">' + (intCurrentIndexArrImages + 1) + ' / ' + arrImages.length +'<span>');


  // Nur wenn nicht das erste Bild angezeigt wird, ist der Button für 'zur kleineren Nummer blättern' eingeblendet
  if(intCurrentIndexArrImages > 0){
    $('#idDivNaviImages').append('<img src="images/imgArrowLeft.png" alt="Voriges Bild" title="Voriges Bild"  id="idImgArrowLeft" style="float: left; margin-right: 10px;" />');
  }
  // Nur wenn nicht das letzte Bild angezeigt wird, ist der Button für 'zur größeren Nummer blättern' eingeblendet
  if(intCurrentIndexArrImages <= arrImages.length - 2){
    $('#idDivNaviImages').append('<img src="images/imgArrowRight.png"  alt="Nächstes Bild" title="Nächstes Bild" id="idImgArrowRight" style="float: left; margin-right: 40px;" />');
  }
  // Schaltfläche zum Starten der Slideshow
  if(intCurrentIndexArrImages <= arrImages.length - 2){
    $('#idDivNaviImages').append('<img src="images/imgStartSlideShow.png" alt="Starte Slideshow" title="Starte Slideshow" id="idImgStartSlideShow" style="float: left;" />');
  }
  // Die Schaltfläche zum Schließen der Galerie
  $('#idDivNaviImages').append('<img src="images/imgCloseGallery.png" alt="Fotogalerie schließen" title="Fotogalerie schließen" id="idImgCloseGallery" style="float: right;" />');
  // Hinterlegte Titel und Untertitel werden eingeblendet
  $('#idDivGalleryNavi').append('<h3 id="idH3ImageTitle">' + oImage.strTitle + '</h3><p>' + oImage.strSubtitle + '</p>');
  $('#idH3ImageTitle').css({
    backgroundColor: '#113317',
    textAlign: 'left',
    paddingTop: '15px',
    color: '#B5ACAA',
    clear: 'both'
  });

  // Ereignis-Handler für das Klicken der Schalftlächen ...
  $('#idImgArrowLeft').click(function(){
    intCurrentIndexArrImages = intCurrentIndexArrImages - 1;
    $.setPicture(intCurrentIndexArrImages);
    clearInterval(numIntervalId);
    event.preventDefault();
  });

  // für die Veränderungen des Mauszeigers beim Überfahren der Schaltflächen
  $('#idImgArrowLeft').hover(function(){
      $('#idImgArrowLeft').css({cursor: 'pointer'});
    },function () {
      $('#idImgArrowLeft').css({cursor: 'default'});
    }
  );

  $('#idImgArrowRight').click(function(){
    intCurrentIndexArrImages = intCurrentIndexArrImages + 1;
    $.setPicture(intCurrentIndexArrImages);
    clearInterval(numIntervalId);
    event.preventDefault();
  });

  $('#idImgArrowRight').hover(function(){
      $('#idImgArrowRight').css({cursor: 'pointer'});
    },function () {
      $('#idImgArrowRight').css({cursor: 'default'});
    }
  );

  $('#idImgStartSlideShow').click(function(){
    if($('#idImgStartSlideShow').attr("src") == "images/imgPauseSlideShow.png"){
      bolSwitchPlayImageToPause = !bolSwitchPlayImageToPause;
    }
    if(bolSwitchPlayImageToPause){
      $.runSlideShow();
      numIntervalId = setInterval("$.runSlideShow()", 4000)
      $('#idImgStartSlideShow').attr({
        src : 'images/imgPauseSlideShow.png',
        alt : 'Pause Slideshow',
        title : 'Pause Slideshow'
      });
    }else{
      $('#idImgStartSlideShow').attr({
        src : 'images/imgStartSlideShow.png',
        alt : 'Starte Slideshow',
        title : 'Starte Slideshow'
      });
      bolSwitchPlayImageToPause = !bolSwitchPlayImageToPause;
      clearInterval(numIntervalId);
    }
  });

  $('#idImgStartSlideShow').hover(function(){
      $('#idImgStartSlideShow').css({cursor: 'pointer'});
    },function () {
      $('#idImgStartSlideShow').css({cursor: 'default'});
    }
  );

  $('#idImgCloseGallery').click(function(){
    $('#idGaleryContainer').empty();
    $('#idGaleryContainer').remove();
    bolIsGalleryInNeed = false;
    intCurrentIndexArrImages = 0;
    clearInterval(numIntervalId);
    event.preventDefault();
  });

  $('#idImgCloseGallery').hover(function(){
      $('#idImgCloseGallery').css({cursor: 'pointer'});
    },function () {
      $('#idImgCloseGallery').css({cursor: 'default'});
    }
  );

};

// Für übergebene Bilder, deren breitere Seite 650 px übersteigt, wird ein Faktor errechnet,
// der mit einer Multiplikation diese Seite auf 650 px verkleinert.
// Kleinere Bilder werden nicht vergrößert.
$.getImageZoomFactor = function(rpoImage){

  var numReturn = 1;
  var bolIsLandscapeMode = false;

  if(rpoImage.width >= rpoImage.height){
    bolIsLandscapeMode = true;
  }

  if(bolIsLandscapeMode && rpoImage.width > 650){
    numReturn = 1 / (rpoImage.width / 650);
  }

  if(rpoImage.height > 650){
    numReturn = 1 / (rpoImage.height / 650);
  }

  return numReturn;

};

$(document).ready(function(){

  $.preloadImages();
//  alert(arrImages.length);

  $(window).resize(function(){
    intWindowWidth = $(window).width();
    intWindowHeight = $(window).height();
    if(bolIsGalleryInNeed){
      $.setGaleryContainer();
    }
  });



});