$(document).ready(function(){
  // UI initialisieren
  $("#accordion").accordion();
  $("#tabs").tabs();

  // fancybox
  $(".fancybox").fancybox({
    'transitionIn' : 'elastic',
    'transitionOut' : 'elastic',
    'titlePosition' : 'over',
    'speedIn' : 500,
    'speedOut' : 500,
    'overlayShow' : false,
    'opacity' : true,
    'cyclic' : true,
    'centerOnScroll' : true,
    'hideOnContentClick' : true
  });

  // Slideshow
  // welches Element enthält die Bilder?
  var obj = "#eyecatcher #img";
  // wieviele Bilder im Verzeichnis?
  var maximg = 10;
  // Anzeigedauer pro Bild (inkl. Überblendung) in ms
  var interval = 4000;

  window.setInterval("slideshow('" + obj + "','" + maximg + "')",interval);

  // Referenzbilder
  // icon anpassen
  $(".ref img")
    .css("cursor","pointer")
    .attr("title", "zur Galerie")
    // bei Klick Daten aus "alt" ziehen
    .bind("click", function() {
      var rel = $(this).attr("alt");
      data = rel.split(",");
      var pics = 1*data[0];
      var path = "/images/refs/"+data[1]+"/";
      show_refpics(pics,path);
    });
});

/* Rotation der Headergrafiken */
function slideshow(obj,maximg) {
  // #img vorhanden (Startseite) ?
  if($(obj).length < 1) return;

  var imgsrc = $(obj + " img").attr("src");
  var path = imgsrc.slice(0,imgsrc.length-6);
  var actual_image = imgsrc.split("/");
  actual_image = actual_image[actual_image.length - 1];

  var picnr =  1 * actual_image.slice(0,2);
  picnr++;
  if(picnr > 10) picnr = 1;

  if(picnr > 9) var leadingzero = "";
  else var leadingzero = "0";

  var nextimg = imgsrc.slice(0,imgsrc.length - 6) + leadingzero + picnr + ".jpg";

  $(obj + " img")
    .animate({
      "opacity":0.0001
      },1000,function() {
      $(this)
        .animate({
          "opacity":1
        },1000)
        .attr("src",nextimg);
      }
    );
};

// Referenzen in Lightbox zeigen
function show_refpics(pics,path) {
  var markup = '<div id="refpics">';
  for (i=1; i<=pics; i++) {
    markup += '<img class="cloudcarousel" alt="" src="';
    markup += path + i + '.jpg" />';
  }
  markup += '</div>\
  <p id="cc_navi">\
    <img src="/layout/fancybox/fancy_nav_left.png" alt="<" id="rotate-left" title="zurück" />\
    <img src="/layout/fancybox/fancy_nav_right.png" alt=">" id="rotate-right" title="weiter" />\
  </p>\
  <p id="loadingImg"><img src="/images/progressbar.gif" alt="" /></p>';

  var start = parseInt(pics/2);

  $.fancybox(markup, {
    "padding" : 0,
    "margin" : 0,
    "scrolling" : "no",
    "hideOnContentClick" : false,
    "hideOnOverlayClick" : true,
    "overlayShow" : true,
    "overlayOpacity" : 0.75,
    "overlayColor" : "#000",
    "centerOnScroll" : true,
    "autoDimensions" : false,
    "height" : 550,
    "width" : 900
  });

  $("#cc_navi").css({
    "text-align" : "center",
    "position" : "absolute",
    "bottom" : 0,
    "width" : "100%"
  });
  $("#cc_navi img").css("cursor","pointer");

  $("#loadingImg")
  .css({
    "text-align" : "center",
    "position" : "absolute",
    "bottom" : "50%",
    "width" : "100%",
    "z-index" : "99999"
  });

  $("#refpics")
  .css ("background", "transparent")
  .waterwheelCarousel("horizontal",{
    "itemDecreaseFactor" : 0.5,
    "startingItemSeparation" : 80,
    "flankingItems" : 2,
    "centerOffset" : 20,
    "opacityDecreaseFactor" : 0.9
  });

}