/*
frankjohannes.com
-----------------
15.8.2011

js/

Verwendete Javascriptbibliotheken und ihre Bedeutung

(Standards, hier wurden keine individuellen Änderungen vorgenommen)
- modernizr.custom.2.0.6.js: Dient dazu, älteren Browsern (z.B. IE6+7) die neuen HTML5-Elemente verständlich zu machen (z.B. <section>, <nav>, <header>)
- jquery-1.6.2.min.js: Standard-Javascript-Bibliothek, die Grundfunktionen für alle anderen Skripte bereithält
- cufon-yui.js: Bibliothek, welche Schriftersetzung von Standardtext zu Canvas-Grafiken mit Truetypefonts vornimmt
- centennial_italic.font.js: enthält den Schriftfont Centennial, dieser wurde von Opentype Font bzw. Truetype zu Javascript konvertiert (auf http://cufon.shoqolate.com/generate/)
- jquery.easing.1.3.js: enthält Definition von verschiedenen Animationen, wird von jquery.slideviewer.1.2.js für die Slideranimation verwendet

(angepasste Skripte, hier wurden individuelle Anpassungen vorgenommen)
- jquery.slideviewer.1.2.js: Stellt den Slider für die einzelnen Bildgalerien bereit. Wurde um eine Ein-/Ausblend-Funktion für die Links-/Rechts-Navigation (Pfeile) ergänzt. Das Einblenden der Ajaxloader-Grafik wurde modifiziert.
  Achtung: Benötigt css/slideviewer.css (enthält keine individuellen Formatierungen, die zusätzlich verfügbare aber nicht benötigte Textnavigation wurde ausgeblendet)

(Hauptskriptdatei der Webseite, von hier werden alle anderen Skripte gesteuert)
- common.js: für Details siehe Beschriftung der Funktionen

css/

(individuelle Anpassungen)
- screen.css: Hauptstyledatei, alle Layoutformatierungen finden sich hier, siehe Beschriftung im Dokument

(unveränderlich)
- reset.css: Browserstandards werden zurückgesetzt (wird vor screen.css angewendet)
- ie.css: einige Besonderheiten für alte IE-Browser
- print.css: Formatierung für Druckansicht
- slideviewer.css: Definitionen für jquery.slideviewer.1.2.js

*/


var introFading = 800; // Überblend-Zeit für Introbilder, 1 Sek = 1000
var introInterval = 3800; // Anzeigedauer je Introbild, 1 Sek = 1000

var interval;

$(document).ready(function() { // erst wenn Seite komplett ist, aber bevor Bilder geladen sind

  /* Mobile Geräte direkt von index.html zu about.html weiterleiten */

  if($('body#intro').length){
    var userAgent = navigator.userAgent;
    var mobileNames = ['iPhone', 'iphone', 'Nokia N9', 'nokia n9', 'nokia', 'HTC', 'LG', 'iPod', 'ipod', 'iPad', 'ipad', 'Android', 'android', 'Windows Phone OS', 'windows phone os'];
    for(i in mobileNames){
      if(userAgent.indexOf(mobileNames[i])!=-1){
        window.location.href = 'portrait.html';
        break;
      }
    }
  }

  /* Cufon überall, außer auf Introseite ---------------------------  */

  if($('body#intro').length==0){ 
    /* Schriftersetzung mit Cufon hier festlegen */
    Cufon.replace('span');
    Cufon.replace('p');
  }

  /* Blätterpfeil zu Beginn einblenden, nur auf Textseiten ---------  */

  if($('p.page').length){
    $('div#next').show();
  }

  /* Galerien initialisieren, nur auf Galerieseiten --------------------  */

  if($('div#gallery ul').length){
    var liElems = $('#gallery ul li');
    var firstAlt = liElems[0].firstElementChild.alt;
    refreshImgDescr(0, liElems.size(), firstAlt);

    /* Kindelemente von Hoverobjekten nicht sensitiv für Mouseout-Events */
    $('div#last, div#next').bind('mouseout', function(e){ if(!isChildOf(e.relatedTarget, 'content')) $(this).hide(); });
  }
});

$(window).bind("load", function() { // erst wenn Seite komplett mit allen Bildern geladen ist

  /* Introgalerie starten, nur auf Introseite ----------------------------  */

  if($('body#intro').length){
    $('#logo').show();
    $("#background-gallery").show();

    resizeCurrentBgImages();
    $('#container').bind('click', function() {
      window.location.href = $('#background-gallery').children().first().attr('href');
    });
    $(window).bind('resize', function(){ resizeCurrentBgImages(); });

    startAnimation();
  }

  /* auf Galerieseiten Galerieslider aktivieren ---------------------  */

  if($('div#gallery').length) $("div#gallery").slideView();

  /* vor/zurück-Buttons, speziell für Galerieseiten -------------------------  */

  if($('div#gallery ul').length){
    $('#last').bind('click', function (){
      $('div#gallery ul').trigger({ type:"click", dir: -1} ); // Klick ruft die in jquery.slideviewer.1.2.js definierten Funktionen auf
    });
    $('#next').bind('click', function (){
      $('div#gallery ul').trigger({ type:"click", dir: 1} );
    });
  }

  /* vor/zurück-Buttons, speziell für Textseiten -------------------------  */

  if($('p.page').length){
    var current = 0;
    $('#next').bind('click', function (){ $('p.current').removeClass('current').next().addClass('current'); });
    $('#last').bind('click', function (){ $('p.current').removeClass('current').prev().addClass('current'); });
    $('#next, #last').bind('click', function (){
      var i = 0;
      $('p.page').each(function(){
        if($(this).hasClass('current')){
          if(i==$('p.page').length-1){ $('#next').hide(); } else { $('#next').show(); }
          if(i==0){ $('#last').hide(); } else { $('#last').show(); }
        }
        i++;
      });
    });
  }
});

/* Tastatur belegen */

$(document).bind('keydown',function(e) {

  var code = (e.keyCode ? e.keyCode : e.which);

  if($('div#gallery ul').length || $('p.page').length || $('p.text').length){
    if(code == 39) { // rechter Pfeil
      if($('div#gallery').length) $('div#gallery ul').trigger({ type:"click", dir: 1} );
      if($('p.page').length && $('#next').css('display')=='block') $('#next').click();
    }
    if(code == 37) { // linker Pfeil
      if($('div#gallery').length) $('div#gallery ul').trigger({ type:"click", dir: -1} );
      if($('p.page').length && $('#last').css('display')=='block') $('#last').click();
    }
    if(code == 38) { // Pfeil hoch
      var href = $('nav ul li.current').prev().children().first().attr('href');
      if(href) window.location.href = href;
    }
    if(code == 40) { // Pfeil runter
      var href = $('nav ul li.current').next().children().first().attr('href');
      if(href) window.location.href = href;
    }
  }
});


/* Hintergrundbild immer vollflächig dem Viewport anpassen */

function resizeBgImage(selector){
  var viewPort = [$(window).width(), $(window).height()];
  var imgSize = [$(selector).width(), $(selector).height()];
  if(viewPort[0]/viewPort[1] > imgSize[0]/imgSize[1]){
    $(selector).width(viewPort[0]);
    $(selector).height(viewPort[0] * imgSize[1]/imgSize[0]);
  } else {
    $(selector).height(viewPort[1]);
    $(selector).width(viewPort[1] * imgSize[0]/imgSize[1]);
  }
  if($(selector).attr('class').substr(0,7)=='center-'){ $(selector).css('left', Math.round((viewPort[0] - $(selector).width()) / 2) + 'px'); }
  if($(selector).attr('class').substr($(selector).attr('class').length-7)=='-center'){ $(selector).css('top', Math.round((viewPort[1] - $(selector).height()) / 2) + 'px'); }
}

/* immer die zwei sich überblendenden Introbilder gleichzeitig skalieren */

function resizeCurrentBgImages(){
  resizeBgImage('#background-gallery a.current img');
  resizeBgImage('#background-gallery a.next img');
}

/* Animation der Introgalerie starten */

function startAnimation(){
  if(!interval){
    interval = window.setInterval(function() {
      changeIntroImage();
    }, introInterval);
  }
}

/* Animation stoppen */

function stopAnimation(){
  window.clearInterval(interval);
}

/* Überblendung animieren und Class-Attribute für aktuelle Introbilder neu setzen */

function changeIntroImage(){
  $('#background-gallery a.current img').animate({
    opacity: 0,
  }, introFading, function() {
    // Animation complete.
    var t = $(this);
    var current = $('#background-gallery a.current');
    var introImg = $('#background-gallery a');
    if(current.next().length){ current.removeClass('current'); current.next().addClass('current'); }
    else { introImg[introImg.length-1].className = ''; introImg[0].className = 'current'; }
    introImg.removeClass('next');
    if($('#background-gallery a.current').next().length) $('#background-gallery a.current').next().addClass('next');
    else $('#background-gallery').children().first().addClass('next');
    t.animate({ opacity: 1 }, 0);
    resizeCurrentBgImages();

  });
}

/* Beschriftung und -zähler von Galeriebildern aktualisieren, hier werden auch die Cufon-Grafiken (für Bildunterschriften) aktualisiert */

function refreshImgDescr(n, pictEls, text){
  if(n==0) $('#last').addClass('soft');
  else $('#last').removeClass('soft');
  if(n==pictEls - 1) $('#next').addClass('soft');
  else $('#next').removeClass('soft');
  $('#page').children().first().html((n+1) + ' / ' + pictEls);
  $('#title').children().first().html(text);
  Cufon.refresh('span');
}

/* Auf Elternelement prüfen */

function isChildOf(obj, parentId){
  var isChild = false
  if(obj){
    if(obj.id && obj.id==parentId) isChild = true;
    else if(obj.parentNode) isChild = isChildOf(obj.parentNode, parentId);
  }
  return isChild;
}

/* Debugmeldung ausgeben */

function debug(obj){
  var s = '';
  if(typeof obj=='object' || typeof obj=='array'){
    for(var key in obj){
      s += key + ' = ' + obj[key] + '\n';
    }
  } else {
    s = obj
  }
  $('#debug').html(s).show();
}