/* 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 -5;
  var beltLeftPosition = $belt.position().left;
  // Index des ersten sichtbare Panels
  var firstPanelIndex = 0;
  var restPanelNumber = panelNumber % 5;

  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 - 800;

    $('.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 () {
            $('.belt div:eq(' + (firstPanelIndex+4) + ')').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 + 800;

    // 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;
        case 4:
          $('.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();
                });
              });
            });
          });
          break;
        default:
          alert("error in switch");
          break;
      }
    }
    else {
      $('.belt div:eq(' + (firstPanelIndex+4)  + ')').fadeTo("fast", 0.33, function () {
        $('.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 +5;
      leftHiddenNumber = leftHiddenNumber + 5;
      rightHiddenNumber = rightHiddenNumber -5;

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

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

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

      ready = true;
    });
  }


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

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

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

      ready = true;
    });
  }
 
});