/**
 * Skripte für ATH
 * @author Andy Pillip, besser barierefrei
 * @requires jQuery 1.4.2
 */


/**
 * veranlasst fuer jedes Werk auf der Seite,
 * dass, falls ein Link darauf existiert, dieser
 * beim Mouse-Over ein Hervorheben des Werks selbst
 * ausloest
 */
function werk_links_erweitern()
{
  var o_ausstellung;
  var o_text;
  var a_werke;
  var a_links;
  
  // Pruefen, ob Ausstellung im Dokument vorhanden, und speichern
  o_ausstellung = document.getElementById( 'ausstellung' );
  if(! o_ausstellung )
    return;
    
  // Pruefen, ob Text mit potentiellen Links vorhanden, speichern
  o_text = document.getElementById( 'ausstellung_text' );
  if(! o_text )
    return;
    
  // die Werk-Links aus der Ausstellung ermitteln und merken
  a_werke = o_ausstellung.getElementsByTagName( 'a' );
  
  // die Links aus dem Text ermitteln und merken
  a_links = o_text.getElementsByTagName( 'a' );
  
  // falls ein Werk-Link mit einem Textlink uebereinstimmt,
  // den Textlink erweitern
  // Text ermitteln und erweitern
  var o_link;
  for( i=0; i<a_werke.length; i++ )
  {
    for( j=0; j<a_links.length; j++ )
    {
      o_link = a_links[ j ];
      if( o_link.href == a_werke[ i ].href )
        werk_link_erweitern( o_link, a_werke[ i ].id );
    }
  }
}

/**
 * erweitert genau einen Textlink so, dass
 * beim Ueberfahren mit der Maus das Werk
 * aktiviert wird
 */
function werk_link_erweitern( o_textlink, id_werklink )
{
  o_textlink.onmouseover = new Function( "", "document.getElementById( '" + id_werklink + "' ).className='aktiv';" );
  o_textlink.onfocus = new Function( "", "document.getElementById( '" + id_werklink + "' ).className='aktiv';" );
  o_textlink.onmouseout = new Function( "", "document.getElementById( '" + id_werklink + "' ).className='';" );
  o_textlink.onblur = new Function( "", "document.getElementById( '" + id_werklink + "' ).className='';" );
}

/**
 * Das Werk auf der Seite soll so groß wie möglich dargestellt werden,
 * sodass immer noch die ganze Seite in den viewport passt.
 */
$(document).ready(function() {
	$("html").addClass("js"); // CSS Regeln bei aktiviertem JS ermöglichen
	
    if($("#maximize-image").length) {
    	// Der Inhalt wird jetzt dem body angepasst, nicht andersrum
		$("body").css("height", "100%");
		$("#content").css("padding-bottom", "0em");

		/**
		 * Collect information about the Image and provide functions
		 * to determine hypothetical sizes and to resize it
		 */
		var imageToMaximize = {
			init: function(imgObj) {
			
				this.imgObj = imgObj;
				this.ratio = this.imgObj.width()/this.imgObj.height();
				this.hMarginPadding =  $(this.imgObj).outerWidth(true)
										- $(this.imgObj).width();
				this.vMarginPadding =  $(this.imgObj).outerHeight(true)
										- $(this.imgObj).height();
			},

		    /**
		     * @param width in px
		     * @returns the height the image would get if it was resized to
		     * the given width
		     */
			ratioHeight: function(width) {
				return width / this.ratio;
			},

			/**
			 * @param height in px
			 * @returns the width the image would get if it was resized to
			 * the given height 
			 */
			ratioWidth: function(height) {
				return height * this.ratio;
			},
			
			/**
			 * resizes the image to a given width by keeping the ratio
			 * @param maxWidth in px
			 * @param maxHeight in px
			 * @returns void
			 */
			fitIn: function(maxWidth, maxHeight) {
		        var newWidth = Math.min(maxWidth, this.ratioWidth(maxHeight));
		        
		        // resize
		        this.imgObj.width(newWidth).height(this.ratioHeight(newWidth));
		        
		        // center vertically
		        this.imgObj.css("margin-top", (maxHeight - this.imgObj.height()) / 2);
			},
			
			/**
			 * @param ancestor to check 
			 * @returns bool is the image a descendant of ancestor?
			 */
			isDescendant: function(ancestor) {
				return $(ancestor).has(this.imgObj).length;
			}
		};
    
		/**
		 * resize the image so that it fits in the available space
		 */
	    function maximizeImage() {
	        var maxHeight = $("body").height();
	        
	        // Höhe von Toplevel-Elementen berücksichtigen
	        $("body > *").each(function() {
	        	if($(this).css("display") != 'none'
	        		&& ! imageToMaximize.isDescendant($(this))) {
	        		maxHeight -= $(this).outerHeight(true);
	        	} 
	        });
	        
	        // und von Elementen in der gleichen Ebene
	        maxHeight -= $("#no-image").outerHeight(true);
	        
	        var maxWidth = $("body").width();
	        
	        imageToMaximize.fitIn(maxWidth, maxHeight);
	    }
	    
	    // bildinformationen initiieren
	    imageToMaximize.init($("#maximize-image img"));
	    
	    // initial das Bild einpassen
	    maximizeImage();
	    // und einblenden
	    $("#maximize-image img").hide().fadeIn('slow');
	    
	    // beim Verlassen der Seite das Kunstwerk ausblenden
	    $(window).unload(function() {
	    	$("#maximize-image img").fadeOut('slow');
	    });
	    
	    // bei Größenänderung des viewports auch Bildgröße anpassen
	    $(window).resize(maximizeImage);
    }
});