/**
 * JS-Funktionen fuer rottenburg.de
 *
 * seitenblick interaktive medien gmbh
 * Koenigstrasse 16, 70173 Stuttgart
 * fon: 0711/8599818-0
 * fax: 0711/8599818-40
 * e-Mail : info@seitenblick.de
 *
 * Author : Andreas Harnisch <ah@seitenblick.de>
 *
 *  Version: 3.0 (nur Thumbnail-Leiste, Lightbox öffnet bei Klick auf Thumbnail)
 */

/******************************************************************************/
/*--- Bildergalerie ----------------------------------------------------------*/
/******************************************************************************/

/**
 * Sprachvariablen
 */
var txt_preview_show = "Bildergalerie anzeigen";
var txt_preview_close = "Bildergalerie schließen";
var txt_thumb_slide_back = "Vorherige Vorschaubilder";
var txt_thumb_slide_next = "Nächste Vorschaubilder";
var txt_navi_info = "In Standard-Browsern werden bei aktiviertem Javascript nur vier Vorschaubilder aus der Liste angezeigt. Mit den folgenden beiden Links kann man die n&auml;chsten Vorschaubilder anzeigen:";

/**
 * Dimensionen
 */

// Breites eines Thumbnails (inkl. Abstand nach links/rechts)
var thumbs_link_width = 118;
// Sichtbarer Thumbnail-Bereich im Layout (Breite des Wrapper)
var thumbs_viewport = 460;
// Breite der im Viewport sichtbaren Bilder
var thumbs_viewport_inner = 4*thumbs_link_width;
// der IE6 braucht beim Thumb_Wrapper zusaetzlich 18px, sonst werden die letzten Thumbs nicht angezeigt
var ie6margin = 18;   

/**
 * Name         : thumbnail_navigation
 * Beschreibung : Thumbnails zur Vorschau nach links/rechts schieben
 * Bibliothek   : JQuery
 */
$(document).ready(function(){
  if($(".gallery_thumbs").html()!=null){
    // CSS-Eigenschaften für das Scrollen ändern (Thumbs in einer Reihe, nicht mehr untereinander)
    $(".gallery_thumbs").css("height", "79px");
    $(".gallery_thumbs").css("overflow", "hidden");
    // Falls JS aktiviert werden die Navigationslink ergaenzt
    $(".gallery_thumbs").append('<p class="inv">'+txt_navi_info+'</p>');
    $(".gallery_thumbs").append('<div class="gt_back"><a class="gt_btn_back" href="javascript:;" title="'+txt_thumb_slide_back+'"><span class="inv">'+txt_thumb_slide_back+'</span></a></div>');
    $(".gallery_thumbs").append('<div class="gt_next"><a class="gt_btn_next" href="javascript:;" title="'+txt_thumb_slide_next+'"><span class="inv">'+txt_thumb_slide_next+'</span></a></div>');
    // Der Zurueck-Button ist zunaechst ausgeblendet
    $(".gt_back").hide();
   
    // Bei Klick auf den Weiter-Button
    $(".gt_btn_next").click(function(){
      // beim ersten Klick werden die Thumbnails durchnummeriert
      if ( $(this).parent().parent().attr('class') == 'gallery_thumbs' ) {
        var thumb_id = 1;
        var thumb_element = $(this).parent().parent().find('.gallery_thumbs_wrapper').children("a:first");
        while ( thumb_element.html() != null ) {
          thumb_element.addClass('thumb_'+thumb_id);
          thumb_element = thumb_element.next();
          thumb_id++;
        }
        $(this).parent().parent().addClass('thumbs_numbered');
        // Die tatsaechliche Breite (nach Anzahl der Bilder) des Wrapper ermittelt
        var gt_wrapper_count =  $(this).parent().parent().find(".gallery_thumbs_wrapper").children().children().size();
        // Anzahl mal Bildbreite
        var gt_wrapper_width = gt_wrapper_count * thumbs_link_width + ie6margin;
        // und Breite dem Bilderwrapper zuweisen
        $(this).parent().parent().find(".gallery_thumbs_wrapper").css("width", gt_wrapper_width);
        // Die 4. Thumbnails bekommen wieder einen Abstand nach rechts
        $(this).parent().parent().find(".gallery_thumbs_wrapper ul li").removeAttr("class");
      }
      // Aktuelle Position und Gesamtbreite des Bilderwrapper ermitteln
      var current_pos = parseInt($(this).parent().parent().find('.gallery_thumbs_wrapper').css("marginLeft"));
      var gt_wrapper_width = parseInt($(this).parent().parent().find('.gallery_thumbs_wrapper').css("width"));
      // falls die Position zwischen 0 und dem negativen Maximalwert liegt: nach links schieben
      if ( current_pos <= 0 && current_pos > (-(gt_wrapper_width) + thumbs_viewport_inner) ){
        // Neue Position:
        if ( current_pos <= (-(gt_wrapper_width) + ( 5 * thumbs_link_width + ie6margin ) ) ) {
          var new_pos = current_pos - thumbs_link_width;
        } else if ( current_pos <= (-(gt_wrapper_width) + ( 6 * thumbs_link_width + ie6margin ) ) ) {
          var new_pos = current_pos - (2*thumbs_link_width);
        } else if ( current_pos <= (-(gt_wrapper_width) + ( 7 * thumbs_link_width + ie6margin ) ) ) {
          var new_pos = current_pos - (3*thumbs_link_width);
        } else {
          var new_pos = current_pos - thumbs_viewport_inner;
        }
        // fuer die Zeit des Verschiebens die Buttons mit einem Overlay deaktiveren 
        $(this).parent().parent().append('<div class="dont_click"><img src="/i/lightbox-blank.gif" height="79" width="460" alt="" /></div>');
        // den Bilderwrapper auf die neue Position verschieben und das Overlay wieder entfernen
        $(this).parent().parent().find(".gallery_thumbs_wrapper").animate({ marginLeft: new_pos }, 600, function() {
           $(this).parent().parent().find(".dont_click").remove();
        });
        // wenn das letzte Bild sichtbar wird: den Weiter-Button ausblenden
        if (new_pos <= (-(gt_wrapper_width) + thumbs_viewport_inner + ie6margin )) {
          $(this).parent().fadeOut();
        }
      }
      // Zurueck-Button einblenden
      if ($(this).parent().parent().find(".gt_back").css("display") == "none") {
        $(this).parent().parent().find(".gt_back").fadeIn();
      } 
    });
    
    // Bei Klick auf den Zurueck-Button
    $(".gt_btn_back").click(function(){
      // Aktuelle Position und Gesamtbreite des Bilderwrapper ermitteln
      var current_pos = parseInt($(this).parent().parent().find('.gallery_thumbs_wrapper').css("marginLeft"));
      var gt_wrapper_width = parseInt($(this).parent().parent().find('.gallery_thumbs_wrapper').css("width"));
      // falls die Position kleiner als 0 ist: nach rechts schieben
      if ( current_pos <= 0 ){
        // Neue Position:
        if ( current_pos >= - thumbs_viewport_inner ) {
          var new_pos = 0;
        } else {
          var new_pos = current_pos + thumbs_viewport_inner;
        }
        // fuer die Zeit des Verschiebens die Buttons mit einem Overlay deaktiveren 
        $(this).parent().parent().append('<div class="dont_click"><img src="/i/lightbox-blank.gif" height="79" width="460" alt="" /></div>');
        // den Bilderwrapper auf die neue Position verschieben und das Overlay wieder entfernen
        $(this).parent().parent().find(".gallery_thumbs_wrapper").animate({ marginLeft: new_pos }, 600 , function() {
           $(this).parent().parent().find(".dont_click").remove();
        });
        // wenn das erste Bild sichtbar wird: den Zurueck-Button ausblenden
        if (new_pos == 0) {
          $(this).parent().fadeOut();
        }
        // Weiter-Button einblenden
        if (new_pos >= (-(gt_wrapper_width) + thumbs_link_width )) {
          $(this).parent().parent().find(".gt_next").fadeIn();
        }
      } 
    });
    
  }
})