/* Horizontale Bildlaufleiste
 * belt ist um die image panels gelegt und wird verschoben
 * es werden immer vier panels angezeigt und vier verschoben
 */

$(document).ready(function(){
  var $belt = jQuery('.belt');
  var panelNumber = $(".belt > div").length;
  // links rausgeschoben
  var leftHiddenNumber = 0;
  // von rechts noch reinzuschieben
  var rightHiddenNumber = panelNumber -4;
  var beltLeftPosition = $belt.position().left;
  // Index des ersten sichtbare Panels
  var firstPanelIndex = 0;
  var restPanelNumber = panelNumber % 4;

  var dir_array = window.location.pathname.split("/"); // /das-grafikbuero/design/referenzen_web.php
  var dir_size = window.location.pathname.split("/").length;

  var gifs_dir;
  if (dir_array[dir_size-1] == "index.php")
    gifs_dir = "./gifs/";
  else
    gifs_dir = "../gifs/";

  var ready = true;

  $("#arrow_right").click(function(){

    // waehrend scrollen kann nicht geklickt werden
    if (!ready) {
      return;
    }

    // nichts mehr zum scrollen da
    if (rightHiddenNumber < 1) {
      return;
    }
    else {
      ready = false;
    }

    // neue position
    beltLeftPosition = beltLeftPosition - 500;

    $('.belt div:eq(' + firstPanelIndex  + ')').fadeTo("fast", 0.33, function () {
      $('.belt div:eq(' + (firstPanelIndex+1) + ')').fadeTo("fast", 0.33, function () {
        $('.belt div:eq(' + (firstPanelIndex+2) + ')').fadeTo("fast", 0.33, function () {
          $('.belt div:eq(' + (firstPanelIndex+3) + ')').fadeTo("fast", 0.33, function () {

            shiftLeft();

          });
        });
      });
    });
  });


$("#arrow_left").click(function(){

    // waehrend scrollen kann nicht geklickt werden
    if (!ready) {
      return;
    }

    if (leftHiddenNumber < 1) {
      return;
    }
    else {
      ready = false;
    }

    beltLeftPosition = beltLeftPosition + 500;

    // letzt Rest von rechts nach links uebrig,
    // koennen vier, drei, zwei oder 1 panel sein
    if ((restPanelNumber > 0) && (firstPanelIndex == (panelNumber -restPanelNumber))) {

      switch (restPanelNumber) {
        case 1:
          $('.belt div:eq(' + firstPanelIndex + ')').fadeTo("fast", 0.33, function () {
            shiftRight();
          });
          break;
        case 2:
          $('.belt div:eq(' + (firstPanelIndex+1) + ')').fadeTo("fast", 0.33, function () {
            $('.belt div:eq(' + firstPanelIndex + ')').fadeTo("fast", 0.33, function () {
              shiftRight();
            });
          });
          break;
        case 3:
          $('.belt div:eq(' + (firstPanelIndex+2) + ')').fadeTo("fast", 0.33, function () {
            $('.belt div:eq(' + (firstPanelIndex+1) + ')').fadeTo("fast", 0.33, function () {
              $('.belt div:eq(' + firstPanelIndex + ')').fadeTo("fast", 0.33, function () {
                shiftRight();
              });
            });
          });
          break;
        default:
          alert("error in switch");
          break;
      }
    }
    else {
      $('.belt div:eq(' + (firstPanelIndex+3)  + ')').fadeTo("fast", 0.33, function () {
        $('.belt div:eq(' + (firstPanelIndex+2) + ')').fadeTo("fast", 0.33, function () {
          $('.belt div:eq(' + (firstPanelIndex+1) + ')').fadeTo("fast", 0.33, function () {
            $('.belt div:eq(' + firstPanelIndex + ')').fadeTo("fast", 0.33, function () {

              shiftRight();

           });
         });
        });
      });
    }
  });


  function shiftLeft() {
    $belt.animate({left: beltLeftPosition + 'px'}, 1000 , function () {

      firstPanelIndex = firstPanelIndex +4;
      leftHiddenNumber = leftHiddenNumber + 4;
      rightHiddenNumber = rightHiddenNumber -4;

      // anschliessend nichts mehr von rechts reinzuschieben
      if (rightHiddenNumber < 1) {
        $("#arrow_right_image").attr("src", gifs_dir + "pfeil_rechts_120_inaktiv.gif");
        $("#arrow_right_image").attr("alt", "");
        $("#arrow_right_image").attr("title", "");
      }

      // es kann auf jeden Fall wieder nach rechts rausgeschoben weden
      $("#arrow_left_image").attr("src", gifs_dir + "pfeil_links_120.gif");
      $("#arrow_left_image").attr("alt", "Die vorherigen vier Bilder anzeigen");
      $("#arrow_left_image").attr("title", "Die vorherigen vier Bilder anzeigen");

      $('.belt div').fadeTo("fast", 100);

      ready = true;
    });
  }


  function shiftRight() {
    $belt.animate({left: beltLeftPosition + 'px'}, 1000 , function () {

      firstPanelIndex = firstPanelIndex -4;
      leftHiddenNumber = leftHiddenNumber - 4;
      rightHiddenNumber = rightHiddenNumber +4;
      visiblePanelNumber = panelNumber - (leftHiddenNumber + rightHiddenNumber);

      if (leftHiddenNumber < 1) {
        $("#arrow_left_image").attr("src", gifs_dir + "pfeil_links_120_inaktiv.gif");
        $("#arrow_left_image").attr("alt", "");
        $("#arrow_left_image").attr("title", "");
      }
      $("#arrow_right_image").attr("src", gifs_dir + "pfeil_rechts_120.gif");
      $("#arrow_right_image").attr("alt", "Die folgenden vier Bilder anzeigen");
      $("#arrow_right_image").attr("title", "Die folgenden vier Bilder anzeigen");

      ready = true;
    });
  }
 
});