App={}; // hier werden zentrale App-Daten gespeichert
App.thumbIndex=0; //Index des aktuellen Thumbnails
App.data = [];    // json-Datenklumpen
//-------------------------------------------------
function zeigeGrossesBild(){
  var grossesBild = jQuery(this).attr("longdesc");
  var img = jQuery("<img />").attr("src",grossesBild);
  img.hide();
  jQuery("#imagediv").empty().append(img);
  img.fadeIn("slow");
  jQuery("#msg").html(jQuery(this).attr("name"));
}

function befuelleThumbnailPanel(){
  jQuery.ajax({
    url: "lib/lesebilder.php",
    dataType: "json",
    cache: false,
    beforeSend: function(){
      jQuery("#msg").html("Lade Bilder ...");
      jQuery("#thumbnailpanel div").empty();
      simulateProgressStart();
      jQuery("#slider").slider( "option", "value",0);
    },
    success: function(jsonData){
      jQuery("#msg").html("");
      for(var i=0;i<jsonData.length;i++){
        var aktuellesObjekt = jsonData[i];
        jQuery("<img />")
        .attr("src",aktuellesObjekt.thumb)
        .attr("longdesc",aktuellesObjekt.image)
        .attr("name",aktuellesObjekt.name)
        .appendTo("#thumbnailpanel div");
        
      }
      // jsonData fuer spaetere Verwendung speichern
      App.data = jsonData;
    },
    complete: function(){
      simulateProgressStop();    
      jQuery("#thumbnailpanel div img").click(zeigeGrossesBild);
      registerSlider();
    }
  });//ende ajax

}// ende befuelleThumbnailPanel

function simulateProgressStart(){
  jQuery("#msg").after(jQuery("<p>")
    .css({
      width:"100px",
      height:"1.0em"
    })
    .attr("id","progressbar")
    .progressbar()
    );

  App.progressValue = 0;
  App.progressPID = setInterval(function(){
    if (App.progressValue<100){
      App.progressValue++;
    }else{
      App.progressValue=0;
    }
    $("#progressbar").progressbar({
      value:App.progressValue
    });
  }, 40);
}
function simulateProgressStop(){
  clearInterval( App.progressPID);
  $("#progressbar").progressbar( "destroy" );
}



function einThumbnailVor(){
  /**
   * Wie verschiebe ich den Fensterausschnitt?
   *
   * scrollLeft( value )
   * http://api.jquery.com/scrollLeft/
   *
   * jQuery("#thumbnailpanel").scollLeft(200)
   *
   * jQuery("#thumbnailpanel").animate({scrollLeft:1000},4000)
   *
   * Wie weiss ich, wie breit ein Thumbnail ist?
   *
   *  <dasThumbnail>.position().left
   *
   */
 
  // http://api.jquery.com/jQuery.map/
  var linkePositionen = jQuery("#thumbnailpanel div img").map(
    function(index,thumbnail){
      return jQuery(thumbnail).position().left;
    });
  var anzahlThumbnails = App.data.length;
  //var anzahlTumbnails = jQuery("#thumbnailpanel div img").length;
  if ( App.thumbIndex < anzahlThumbnails-1){
    //  App.thumbIndex hochzaehlen
    App.thumbIndex = App.thumbIndex  + 1;
  }
  var neuePosition = linkePositionen[App.thumbIndex];
  //jQuery("#thumbnailpanel").scrollLeft(neuePosition);
  // http://api.jquery.com/animate/
  //jQuery("#thumbnailpanel").animate({scrollLeft:neuePosition},800,
  // "easeOutBack");
  //jQuery("#thumbnailpanel").animate({scrollLeft:neuePosition},800);

  jQuery("#slider").slider( "option", "value",App.thumbIndex);

//
}// ende einThumbnailVor
function einThumbnailZurueck(){
  var linkePositionen = jQuery("#thumbnailpanel div img").map(
    function(index,thumbnail){
      return jQuery(thumbnail).position().left;
    });
  
  if ( App.thumbIndex > 0 ){
    App.thumbIndex = App.thumbIndex -1;
  }
  var neuePosition = linkePositionen[App.thumbIndex];
  //jQuery("#thumbnailpanel").animate({scrollLeft:neuePosition},800);
  jQuery("#slider").slider( "option", "value",App.thumbIndex);

}//einThumbnailZurueck
function registerSlider(){
  // wid in befuelleThumbnailPanel() aufgerufen
  
  jQuery("#slider").slider({
    min:0,
    max: App.data.length - 1,
    change: function(event,ui){
      geheZuThumbnail(ui.value);
    }
  });
   jQuery("#slider").slider( "option", "value",0);
}
function geheZuThumbnail(index){
  App.thumbIndex = index;
  var linkePositionen = jQuery("#thumbnailpanel div img").map(
    function(index,thumbnail){
      return jQuery(thumbnail).position().left;
    });
  var neuePosition = linkePositionen[index];
  jQuery("#thumbnailpanel").animate({
    scrollLeft:neuePosition
  },800);
}

function switchTheme(){
  var that = jQuery(this);
  $("link[href*=ui]").attr("href",that.attr("href"));
  return false;
}

jQuery(document).ready(function(){
  befuelleThumbnailPanel();
  jQuery("#vor,#zurueck").button();
  jQuery("#vor").click(einThumbnailVor);
  jQuery("#zurueck").click(einThumbnailZurueck);

  jQuery("#themeswitcher a").click(switchTheme);

});