/*
$(".main_display").click(function(){
  $("#go").animate({
    left:"-200px"
  },100);
});
*/
var displayFlip = 0;
var animfinished = true;
var lastClickedThumb;
var displayCurrent;
var backZoomfinished = true;
var zW = 728;
var zH = 1092;
var thumbZoom;
var thumbCount;


callbackChange = function(){
  $("#display_window").one("click", zoomFunction);
  animfinished = true;
}

checkSelectedIsDifferent = function (){
  var thumbnail = arguments[0];
  if ($(thumbnail).attr("src") != $(lastClickedThumb).attr("src")){
    return true;
  } else
  {
    return false;
  }
};



zoomFunction = function(){
  var imgUrl;
  // alert("clicked!");
  imgUrl = $(displayCurrent).attr("src");
  // alert(imgUrl);
  $("#zoom_preview").attr({"src": displayCurrent.attr("src")}).css({
                      "display": "block",
                      "top" : "0px", 
                      "left" : "0px", 
                      "width" : "100%",
                      "height" : "100%",
                      "z-index" : "1000"
                      });

 backZoomfinished = false;
 // hier wird ins bild hineingezoomt.    1092 / 728
 $("#zoom_container").css({"display" : "block", 
                             top : "0px", 
                             left: "0px",
                             width: "370px",
                             height:"556px"
                             }).animate({
                              top : -(zH)/2 + 556 /2 + "px", 
                              left: -(zW)/2 + 370/2 + "px",
                              width: (zW) + "px",
                              height:(zH) + "px"},500, zoomedInCallback).draggable({containment: [
                                  $("#display_window").offset()["left"] - (zW-370), $("#display_window").offset()["top"] - (zH-556), $("#display_window").offset()["left"], $("#display_window").offset()["top"]
                                  ]});
                                                                                   // { containment: [370/2.0,-556/2.5,370,556/2.5] }
  // alert(event.offsetX + "/" + event.offsetY);
};



zoomedInCallback = function(){
  // hier wird das ZoomBild eingehängt...

  var tmpPath = displayCurrent.attr("src").match("(.*?)_t.jpg")
  $("#zoom_image").attr({"src": tmpPath[1] + ".jpg"});
  $("#zoom_image").css({
                      "cursor" : 'move',
                      "display" : "block",
                      "top" : "0px", 
                      "left" : "0px", 
                      "width" : "100%" ,
                      "height" : "100%",
                      "z-index" : "1001"
                      });
}

backzoomCallback = function(){
  $("#zoom_preview").css({"display" : "none"}).attr("src", "/img/transparent.gif");
  $("#zoom_image").css({"display" : "none"}).attr("src", "/img/transparent.gif");
  $("#zoom_container").css({"display" : "none"});
  if (arguments[0]) {
    moveToThumb(arguments[0]);
  }
  $("#display_window").one("click", zoomFunction);
  backZoomfinished = true;
}

moveToThumb = function (){
  var clicked_thumb = arguments[0];     // hier sollte die variable this übergeben werden
  
  var animation_direction = -1; // nach links
  
  if (lastClickedThumb) {
   $(lastClickedThumb).animate({"opacity":1},1000); 
  };
  
  $(clicked_thumb).animate({"opacity": "0.3"}, 1000);


  // wenn die nummer des zuletzt angeklickten thumbs größer ist,
  // dann scrolle nach links, ansonsten scrolle nach rechts.
  /*
  ($(clicked_thumb).attr("id").split("_")[1] * 1) > 
  ($(lastClickedThumb).attr("id").split("_")[1] * 1) ? 
  animation_direction = -1 : 
  animation_direction = 1;
  */
  
  displayFlop = (displayFlip + 1)  % 2;
  
  $("#preview_" + (displayFlop) ).css(
    { top: 0, 
      left: -378 * animation_direction, 
      position : "absolute", 
      display  : "block", 
      width    : 370, 
      height : 556
      }).attr({"src" : $(clicked_thumb).attr("src")});

  $("#preview_" + (displayFlip)).css(
    { top      : 0, 
     left      : 0, 
     position  : "absolute", 
     display   : "block", 
     width     : 370, 
     height    : 556});

  animfinished = false; 
  $("#preview_" + (displayFlop)).animate({
    left: 0
  },1000);

  $("#preview_" + (displayFlip)).animate({
    left: 378 * animation_direction
  },1000, callbackChange);

  //******** Beschreibungstext auswechseln ****** //
  
  // im html ist jedem img.description ein div.description nachgereiht,
  // dieses enthält den beschreibenden text in html.
  $("#description p").html($(clicked_thumb).next().html());


  
  displayFlip = displayFlop;
  displayCurrent = $("#preview_" + (displayFlip));
  lastClickedThumb = clicked_thumb;
};


$(document).ready(function(){
  
  // ****** MAIN FUNCTION ******

  displayCurrent = $("#thumb_0");
  lastClickedThumb = $("#thumb_0");
  /* Slider */
  $("#display_window").one("click", zoomFunction);

  thumbCount = $("img.thumbnail").length;

  $(".thumbnail").click(function(){
    if ((animfinished == true) && (checkSelectedIsDifferent(this) == true) && (backZoomfinished == true)){
      
    moveToThumb(this);
      
    } else if ((backZoomfinished == false) && (animfinished == true) && (checkSelectedIsDifferent(this) == true)){
      animfinished = false; 
      $("#zoom_container").attr("src", displayCurrent.attr("src"));
      var target = $(this);
      $("#zoom_container").animate({
       top :0, 
       left: 0,
       width: 370,
       height: 556},500, function(){backzoomCallback(target)});
      
    }
  });
 

  $("#thumb_next").click(function(){
    var lastClickedThumbIdNr = $(lastClickedThumb)[0].id.split("_")[1] * 1;
    $("#thumb_" + ((lastClickedThumbIdNr + 1) % thumbCount)).click();
    return false;
  });

  $("#thumb_previous").click(function(){
    var lastClickedThumbIdNr = $(lastClickedThumb)[0].id.split("_")[1] * 1;
    $("#thumb_" + ((lastClickedThumbIdNr + thumbCount - 1) % thumbCount)).click();
    return false; // stops event bubbling
  });
  
  $("#display_window").hover(
    function(){
      $("#display_window_navigation a").stop().animate(
        {opacity: 1},100);
    },
    function(){
      $("#display_window_navigation a").stop().animate(
        {opacity: 0.1},100);
    }
    );

  $(window).resize(function(){
    $("#zoom_container").draggable( 'destroy' );

    $("#zoom_container").draggable({"containment" : [
      $("#display_window").offset()["left"] - (zW-370), 
      $("#display_window").offset()["top"] - (zH-556), 
      $("#display_window").offset()["left"], 
      $("#display_window").offset()["top"]      
    ]
    });
  });

  /*
   
  $("#zoom_image").click(function(){
     $("#zoom_container").animate({
     top :0, 
     left: 0,
     width: 370,
     height: 556},500, function(){backzoomCallback()});
  });
  */
  
});