var tZS; 
if (!tZS) { tZS = {}; }

jQuery.noConflict();
 
jQuery(window).load(function() {
  if (jQuery('#timeline').length == 0 || !bis || !bis.timeline) { return; }
  tZS.setup.go(bis.timeline, tZS.setup.findPosition(bis.timeline, bis.timeline_aktual_page));
  tZS.setZsHintboxToggle();
});
 
 
/* Platziert die Zeitstrahl-Hintbox immer an der oberen Kante des Zeitstrahls */
tZS.moveZsHintbox = function() {
  var $zeitstrahl = jQuery('#timeline');
  var $hintbox = jQuery('#timeline_hintbox');
  var $zeitstrahl_items = jQuery('#timeline #elementcontainer');
  
  /* Hintbox darf nicht display: none sein, da sonst div. Werte-Ermittlungen scheitern */
  $hintbox.css({
    'visibility': 'hidden',
    'display': 'block'
  });
  
  /* vertikale Verschiebung = "so, dass das Pfeilchen auf (zentrierter) Höhe des ersten Eintrags ist"
  */
  var v_verschiebung = $zeitstrahl_items.position().top;                 // inneres "Padding" des Zeitstrahls
  v_verschiebung += parseInt($zeitstrahl_items.css('font-size')) / 2;    // Halbe Schrifthöhe der ZS-Einträge
  v_verschiebung -= jQuery('#timeline_hintbox #arrow').position().top;   // Position des Pfeilchens innerhalb der Hintbox
  v_verschiebung -= jQuery('#timeline_hintbox #arrow').height() / 2;     // Halbe Höhe des Pfeilchens
  v_verschiebung += jQuery('#header').height();                          // Höhe des Seiten-Headers
  v_verschiebung += parseInt(jQuery('#header').css('margin-bottom'));    // Unterer Margin des Headers
  
  $hintbox.css('top', ($zeitstrahl.position().top + v_verschiebung) + 'px');
  
  $hintbox.css({
    'visibility': 'visible',
    'display': 'none'
  });
};

/* Blendet die Zeitstrahl-Hinweisbox ein/aus bei MouseOver > ZS */ 
tZS.setZsHintboxToggle = function() {
  tZS.moveZsHintbox();
  jQuery('#timeline').mouseover(function() {
    jQuery('#timeline_hintbox').show();
  }).mouseout(function() {
    jQuery('#timeline_hintbox').hide();
  });
}; 
 
tZS.setup =  {
  go: function(data, initPosition) {    
    tZS.setup.handlePageSize();
    
    tZS.setup.changeDom();
  
    var listOfElements = jQuery('<div>').attr('id', 'elementcontainer'); 
    for (var index in data) {
      listOfElements.append(tZS.setup.buildElement(data[index], index));
    }
    jQuery('#topEnd').after(listOfElements);
    
    tZS.setup.setHandlers();
    
    tZS.data = {
      allElements: data
    }; 
    
    tZS.move.centeringEnabled = true;
    var diff = jQuery('#timeline').height() - jQuery('#inner').height(); 
    if (diff > 0) {
      tZS.move.centeringEnabled = false;
      var filler_element = jQuery('<div>').addClass('zs_filler').html('&nbsp;').height(diff + 'px'); 
      jQuery('#lowerEnd').before(filler_element);
    }
    else {
      jQuery('#lowerEnd').height('55px');
    }
    
    tZS.move.toIndex(initPosition);
    
    // prepare draggable
    jQuery('#marker').draggable({
      axis: 'y', 
      containment: 'parent', 
      handle: jQuery('#grabber'), 
      stop: function(dragEvent, uiObject) {
        if (tZS.data.dropped) {
          tZS.data.dropped = false;
        }
        else {
          if (uiObject.position.top < jQuery('#topEnd').height()) {
            tZS.move.toIndex(0);
          }
          else {
            tZS.move.toIndex(tZS.data.allElements.length - 1);
          }
        }
      }
    });
    jQuery(".zs_element").droppable({
      drop: function(dropEvent, uiObject) { 
        var thisIndex = jQuery(this).data('index');
        tZS.move.toIndex(thisIndex);
        tZS.data.dropped = true; 
        dropEvent.stopImmediatePropagation();
        return false;
      }
    });

  }, 
  
  handlePageSize: function() {
    var $timeline = jQuery('#timeline');
    
    var timeline_height = jQuery('#main').outerHeight(true) - jQuery('#right .mediabox').outerHeight(true);
    var timeline_min_height = parseInt($timeline.css('min-height'), 10);
    
    if (timeline_height < timeline_min_height) {
      timeline_height = timeline_min_height;
    }
    
    $timeline.height(timeline_height).show();
  }, 
  
  findPosition: function(data, currentPage) {
    for (var i = 0; i < data.length; i++) {
      if (data[i].Link == currentPage) {
        return i; 
      }
    }
    return 0; 
  }, 
  
  changeDom: function() {
    //jQuery('#zeitstrahl').children().appendTo(jQuery('#timeline')); 
    jQuery('#timeline').empty().append(jQuery('#zeitstrahl_vorlage').children());
    jQuery('#zeitstrahl_vorlage').remove();
  }, 
  
  buildElement: function(data, index) {
    if (!data.Beschriftung) { return null; }
    var element = jQuery('<div>').data('index', index); 
    var text = data.Link ? jQuery('<a>').text(data.Beschriftung).attr('href', data.Link) : jQuery('<span>').text(data.Beschriftung);
    text.addClass('zs_text');
    var droppable = jQuery('<div>').addClass('zs_dropZone');
    var date = jQuery('<span>').text(data.Datum);
    element .append(date)
            .append(droppable)
            .append(text)
            .addClass('zs_element')
    ;
    return element;
  }, 
  
  setHandlers: function() {
    jQuery('#topEnd').click(tZS.move.byUpperEnd);
    jQuery('#lowerEnd').click(tZS.move.byLowerEnd);
    jQuery('#up').click(tZS.move.byUpperButton);
    jQuery('#down').click(tZS.move.byLowerButton);
  }
};  

tZS.move = {
  byUpperEnd: function() {
    tZS.move.byUpperButton();
  }, 
  
  byLowerEnd: function() {
    tZS.move.byLowerButton();
  }, 
  
  byUpperButton: function() {
    if (tZS.data && tZS.data.current) {
      var newIndex = parseInt(tZS.data.current, 10) - 1; 
      if (newIndex < 0) {newIndex = 0;}
      tZS.move.toIndex(newIndex);
      return;
    }
    tZS.move.toIndex(0);
  }, 
  
  byLowerButton: function() {
    if (tZS.data && tZS.data.current !== null) {
      var newIndex = parseInt(tZS.data.current, 10) + 1; 
      if (newIndex > tZS.data.allElements.length - 1) {newIndex = tZS.data.allElements.length - 1;}
      tZS.move.toIndex(newIndex);
      return;
    }
    tZS.move.toIndex(0);
  }, 
  
  toIndex: function(index) {
    if (!tZS.data) {
      tZS.data = {}
    }
    
    tZS.data.current = index;
    if (!tZS.data.posMarker) {
      tZS.data.posMarker = jQuery('#grabber').position();  // has top and left in relation to marker
      tZS.data.markerElement = jQuery('#marker');
    }
    
    var indexedElement = jQuery('#elementcontainer > div:eq(' + index + ')'); 
    var position_to = indexedElement.find('div.zs_dropZone').position(); //  has top and left in relation to inner
    
    tZS.data.markerElement.animate({
        left: (position_to.left - tZS.data.posMarker.left - (tZS.data.markerElement.width() / 2) + 10) + 'px', 
        top:  (position_to.top - tZS.data.posMarker.top) + 'px'
      }, 
      function() {
        // Klassen 
        jQuery('.zs_active').removeClass('zs_active');
        indexedElement.addClass('zs_active');
    
        tZS.move.toCenter();
      }
    ); 
  }, 
  
  toCenter: function() {
    if (!tZS.move.centeringEnabled) {return;}
    if (!tZS.data.zs_center) {
      tZS.data.zs_center = jQuery('#timeline').height() / 2;
      tZS.data.innerObject = jQuery('#inner');
      tZS.data.movMaxNeg = (tZS.data.innerObject.height() - tZS.data.zs_center * 2) * -1 + 25; 
    }
    
    var inner_top = tZS.data.zs_center - jQuery('.zs_active').position().top - (jQuery('.zs_active').height() / 2) ;
    if (inner_top > 0) {inner_top = 0;}
    if (inner_top < tZS.data.movMaxNeg) {inner_top = tZS.data.movMaxNeg;}
    tZS.data.innerObject.animate({top: inner_top + 'px'}, 'slow');
  }
};