/**
 * Im #balken ist wenig Platz für Inhalt.
 * Damit übermäßiger Inhalt also noch zugänglich bleibt,
 * werden Pfeile zum Blättern eingeblendet, die auch mit der Tastatur
 * angesprungen werden können.
 * Videos werden auf ein Symbol reduziert und können
 * nur im ganzen Viewport angezeigt werden.
 * 
 * @requires jquery
 * @requires jquery.animate-colors
 * @requires jquery.easing
 * @requires multicolumn
 *
 * @author Andy Pillip, besser barrierefrei
 */

/**
 * Ein Element dessen Inhalt auf den Viewport vergrößert wird
 * @param jQuery fullscreenContainer
 */
function fullscreenVideo(fullscreenContainer) {
  /* der Container selbst bleibt Platzhalter im Text,
   * es durch neue Elemente (+) folgende Struktur erstellt:
   * 
   * <fullscreenContainer>
   *+  <a class="open">
   *     <img class="icon">
   *+  </a>
   *+  <div class="fullscreen">
   *+    <p><a class="close"></a></p>
   *+    <a class="play">
   *       <div id="video">
   *        …
   *       </div>
   *+    </a>
   *+  </div>
   *+  <div id="dim"></div>
   * </fullscreenContainer>
   */
  
  // Alles bis auf das Symbol wird in den zu maximierenden
  // Container gepackt
  fullscreenContainer.find('.icon').next()
    .wrap('<div class="fullscreen" style="display: none;" />');
  
  // Der maximierte Container muss auch wieder geschlossen werden können
  fullscreenContainer.find('.fullscreen')
    .prepend('<p><a class="close" href="#" tabindex="1">Schließen</a></p>');
  
  // Das Symbol wird verlinkt und öffnet den Fullscreen
  fullscreenContainer.find('.icon')
    .wrap('<a class="open" href="#" alt="Video öffnen" />');
  
  
  // Weil dem HTML 5 Video kein Poster zugewiesen kann, ohne dass
  // iOS 3 komplett ausgsteigt, wird das Video in einen Link mit
  // einem Hintergrundbild gepackt.
  if(Modernizr.video && $('#fullscreen video').length) {
    $('#fullscreen #video').wrap('<a href="#" class="play" tabindex="2" />');
    $('#fullscreen video').css('visibility', 'hidden');
    $('#fullscreen a.play').click(startVideo);

    $('#fullscreen #video')
      .css('max-width', $('#fullscreen video').attr('width'));
  } else {
    $('#fullscreen #video')
      .css('max-width', $('#fullscreen object').attr('width'));
  }
  
  // Zusätzlich braucht es einen Hintergrund, der die Seite ausblendet
  fullscreenContainer.append('<div id="dim" />');
  
  
  // Click-Handler
  $('#fullscreen a.close').click(closeFullscreen);
  $('#fullscreen a.open').click(openFullscreen); 
  
  extendHTML5Video();
};

	  /****
	   * Hilfsfunktionen für das Vollbild für Videos
	   */
	  function closeFullscreen() {
		  // Das Abspielen des Videos beenden
		  if(Modernizr.video) {
			  try {
				  var vid = document.getElementsByTagName('video')[0];
				  if(! vid.paused) { // pause() startet das Video wieder, falls es auf pause stand
					  vid.pause();
				  }
			  } catch(e) {}
		  } else {
			  try {
				  var flashPlayer = document.getElementsByTagName('object')[0];
				  flashPlayer.sendEvent('play', 'false');
			  } catch(e) {}
		  }
		  		  
		  $('#dim').hide();
		  
		  $('#fullscreen .fullscreen').animate({
			  top: $('#fullscreen .open .icon').offset().top - $(document).scrollTop(),
			  left: $('#fullscreen .open .icon').offset().left,
			  width: $('#fullscreen .open .icon').width(),
			  height: $('#fullscreen .open .icon').height()
		  }, 'slow', function() {
			  	$('#fullscreen .fullscreen').hide();
		  });
	  }
  
  function openFullscreen() {
	  $('#dim').show();
	  $('#fullscreen .fullscreen')
	  	.css({
	  		position: 'fixed',
	  		top: $('#fullscreen .open .icon').offset().top - $(document).scrollTop(),
	  		left: $('#fullscreen .open .icon').offset().left,
	  		width: $('#fullscreen .open .icon').width(),
	  		height: $('#fullscreen .open .icon').height()
	  	})
	  	.show()
	  	.animate({
	  		top: 0,
	  		left: 0,
	  		width: '100%',
	  		height: '100%'
	  	}, 'slow');
  }
  
  /**
   * Bringt das HTML5-Video hinter dem Play-Link wieder zum Vorschein
   * und startet es.
   */
  function startVideo() {
	  $('#fullscreen #video')
	  	.css('background-image', 'none')
	  	.unwrap();
	  $('#fullscreen video').css('visibility', 'visible');
	  var vid=document.getElementsByTagName('video')[0];
	  vid.play();
  }
  
  /**
   * Schließt nach dem fertigen Abspielen des Videos den Fullscreen 
   */
  function extendHTML5Video() {
	  if(Modernizr.video) {
		  var vid=document.getElementsByTagName('video')[0];
		  if(vid) {
			  vid.addEventListener('ended', closeFullscreen, false);
		  }
	  }
  }
  
  /**
   * Sorgt beim JW Flashplayer dafür, dass der Fullscreen
   * nach dem Abspielen geschlossen wird.
   * Muss schon zur Verfügung stehen, bevor das komplette DOM
   * geladen ist.
   */
  function extendFlashPlayer() {
	  var flashPlayer = document.getElementsByTagName('object')[0];
	  flashPlayer.addControllerListener('STOP', 'closeFullscreen');	  
  }
  
  
/**
 * Repräsentiert eine Box in der Spalten horizontal gescrollt
 * werden können
 * @param jQuery boxElement, das ein weiteres Kind enthält, das verschoben wird
 */
columnBox = function(boxElement) {
  boxElement.wrapInner('<div><div></div></div>');
  this.scrollBox = boxElement.find('> div > div');
  
  this.contentContainer = null;
  this.columnContainer = null;
  this.columnWidthPx = null;

  this.initContent();
};

columnBox.prototype.initContent = function() {  
  // Der Inhalt steckt entweder in einem DIV oder in einem
  // imageslider
  if(this.scrollBox.children('ul.imgslider').length > 0) {
    this.contentContainer = this.scrollBox.children('ul.imgslider');
    this.columnContainer = this.contentContainer;
    
    /** @see CSS: 3em width, 0.2em padding, 2 Bilder */
    this.columnWidthPx = this.emToPx(this.contentContainer, 6.4);
  } else {
    this.scrollBox.wrapInner('<div />');
    this.contentContainer = this.scrollBox.children('div:first-child');
    this.columnWidthPx = this.columnize();
  }

  // Die Links machen ohne JavaScript keinerlei Sinn
  this.scrollBox
    .append('<p id="blaettern"><a id="anfang-blaettern" href="#" title="Ganz zurück">&nbsp;</a><a href="#" id="links-blaettern" title="Zurück">&nbsp;</a> <a href="#" id="rechts-blaettern" title="Weiter">&nbsp;</a></p>');

  var self = this;
  
  this.scrollBox.find('#blaettern a').click(function(event) {
    // Mehrfachklicks abfangen
    if(self.scrollBox.find(':animated').length == 0) {
      var newOffset;
      
      switch (this.id) {
      case "anfang-blaettern":
        newOffset = 0;
        break;
      case "links-blaettern":
        newOffset = '+=' + self.columnWidthPx + 'px';
        break;
      case "rechts-blaettern":
        newOffset = '-=' + self.columnWidthPx + 'px';
        break;
      }

      self.contentContainer.animate({
        marginLeft: newOffset
      }, 'slow', function() {self.updateArrows();});
    }
    
    event.preventDefault();
  }); 
  
  this.updateArrows();
};

/**
 * Erzeugt über eine 3rd-party Bibliothek Spalten
 * @return int width of the columns in px
 */
columnBox.prototype.columnize = function() {
  // Multicolumn braucht eine base column, die schon formatiert ist
  // diese wird als Muster verwendet
  // Wenn's ein fullscreen-Element gibt, wird alles andere in diese
  // gepackt
  if(this.contentContainer.children('.nocolumns').length > 0) {
    this.contentContainer.children(':not(.nocolumns)')
      .wrapAll('<div class="columns"><div></div></div>');
  } else {
    this.contentContainer.addClass('columns');
    this.contentContainer.wrapInner('<div />');
  }
  
  // .columns wird später von multicolumns überschrieben
  // der column container ist entweder der contentContainer,
  // oder aber das neu erzeugte Element nach .nocolumns
  this.columnContainer = this.scrollBox.find('.columns');
  var baseColumn = this.columnContainer.children(':first-child');
  
  var mcSettings = new MultiColumnSettings();
  // minimale Höhe = Höhe der gerade erzeugten Musterspalte + Puffer
  mcSettings.minHeight = this.emToPx(baseColumn, 9.6); /** @see CSS */
  mcSettings.extraHeight = 0;
  mcSettings.classNamePrint = 'columnsPrint';
  mcSettings.classNameScreen = 'columnsScreen';
  // der Balken ist nicht von der Fenstergröße abhängig
  // außerdem verursacht ein Neuberechnen den Fehler dass das Blättern nicht
  // mehr funktioniert
  mcSettings.onResizeRewrap = false;
  
  new MultiColumn(this.columnContainer.get(0), mcSettings);
  
  // Das Skript erstellt initial so viele Spalten wie hinpassen
  this.columnContainer.children('div').each(function(index) {
    if(jQuery.trim($(this).text()) == '') {
      $(this).remove();
    }
  });
  
  return baseColumn.outerWidth(true); // this.emToPx(baseColumn, 26); /** @see CSS: 25 + 1 padding */
};

/**
 * Versteckt oder blendet die Pfeile ein, je nachdem
 * wo der Balken steht.
 */
columnBox.prototype.updateArrows = function() {
  var curOffset = parseInt(this.contentContainer.css('margin-left'));
  
  if(this.scrollBox.find('ul.imgslider').length > 0) {
    var lastColumnLeftPx = this.columnWidthPx
                           * (this.columnContainer.find('li').length - 2)
                           / 2; // immer 2 bilder weiter
  } else {
    var lastColumnLeftPx = this.columnWidthPx
                         * (this.columnContainer.children('div')
                             .length - 1);
  }
  
  if(curOffset >= 0) {
    this.scrollBox.find('#links-blaettern').css('visibility', 'hidden');
    this.scrollBox.find('#anfang-blaettern').css('visibility', 'hidden');
  } else {
    this.scrollBox.find('#links-blaettern').css('visibility', 'visible');
    this.scrollBox.find('#anfang-blaettern').css('visibility', 'visible');
  }

  if(lastColumnLeftPx + curOffset <= 0) {
    this.scrollBox.find('#rechts-blaettern').css('visibility', 'hidden');
  } else {
    this.scrollBox.find('#rechts-blaettern').css('visibility', 'visible');
  }
};

/**
 * @param jQuery Element
 * @param int sizeEm Maß in der Einheit em
 * @return int Maß in der Einheit px
 */
columnBox.prototype.emToPx = function(element, sizeEm) {
  return Math.ceil(parseInt(element.css('font-size'))) * sizeEm;
};
  

  
$(document).ready(function(){
if(kcmBigCSS()) { 	
  if($('#balken').length) {
	  
	  /****
	   * Vollbild mit Schließen-Funktion
	   */
	  if($('#fullscreen').length && kcmBigCSS()) {
	    new fullscreenVideo($('#fullscreen'));
	  }
	  
	  /* der Balken ist erst mal nicht zu sehen… */
	  $('#balken').css('display', 'none');
    /* …und dann schön langsam eingeblendet */
    $('#balken').fadeIn(1500);
	  
	  /* wird zum Scrollbalken mit Spalten */
    /* in Timeout = IE Hack */
    window.setTimeout(function() {
	  var kcmColumnBox = new columnBox($('#balken'));
    });
  }
}
});