/**
 * Agrob Buchtal - Plural plus Microsite - Javascript
 * @author Sascha Quasthoff
 * @version 0.1
 * @date 28.09.2007
 *
 * 
 * bekannte Fehler:
 * - Überschreiben der Standardwerte der Parameter ist im Moment nicht möglich.
 *
 *
 * Beispiel-Code mit 3 Tabs:
 * 
  <ul id="tabViewNavigation">
    <li><a href="#" rel="tab1">Tab 1</a></li>
    <li><a href="#" rel="tab2">Tab 2</a></li>
    <li><a href="#" rel="tab3">Tab 3</a></li>
  </ul>

  <div id="tabViewWindow">
    <div id="tabViewContainer">
      <div class="tab" id="tab1"> ... </div>
      <div class="tab" id="tab2"> ... </div>
      <div class="tab" id="tab3"> ... </div>
    </div>
  </div>

 */



var PageSys = {


  /**
   * Start der Seitenverarbeitung
   */
  start : function () {

      this.TabbedView.initialize();
      this.Anwendungen.initialize();

  },



  /**
   * 
   */
  Anwendungen : {
    
    initialize : function () {

      $('#anwendungen_liste a').attr( 'href', '#' );
      $('#anwendungen_ansicht img').hide();
      $('#Anwendung_01').show();

      $('#anwendungen_liste a').click( function () {
        $('#anwendungen_ansicht img').fadeOut(400);
        $('#'+$(this).attr('rel')).fadeIn(400);
      });

    }

  },


  /**
   * Tabdarstellung
   */
  TabbedView : {


    /*
     * Parameter und Variablen
     */
    menu          : 'tabViewNavigation',    // ID der Liste zum Anwählen der Tabs
    window        : 'tabViewWindow',        // ID des Sichtfensters
    container     : 'tabViewContainer',     // ID des Containers für alle Tabs
    tabClass      : 'tab',                  // CSS-Klasse der Tabs
    visibleTab    : null,                   // ID des Tabs, der beim Start angezeigt wird
    fx            : 'slide',                // der Überblend-Effekt ('slide', 'fade' und 'show' stehen zur Auswahl)





    /**
     * Bereitet die Seite für die Tabdarstellung vor
     * @param (Object) arg : Die meisten der Parameter können hiermit überschrieben werden
     */
    initialize : function ( arg ) {


      /*
       * Falls vorhanden, überschreibe die Standardwerte der Parameter.
       */
      if (typeof arg == 'object')
        for (i in arg) {
          if (!!this[i] && !!arg[i] && arg[i] != '') this[i] = arg[i];
        }


      /*
       * Wenn kein Tab vorhanden ist, breche hier ab.
       */
      if ( !$('.'+this.tabClass) || $('.'+this.tabClass).length == 0 ) return;


      /*
       * Wenn der Container oder das Sichtfenster fehlen, erzeuge das Element.
       */
      if ( $('#'+this.container).length == 0 ) $('.'+this.tabClass).wrapAll('<div id="'+this.container+'" class="clear"></div>');
      if ( $('#'+this.window).length == 0 ) $('#'+this.container).wrapAll('<div id="'+this.window+'" class="clear"></div>');


      /*
       * Berechne und setze die Styleangaben für den Container und das Sicht-Fenster.
       */
      var vcWidth = 0;
      var vcHeight = 0;

      // Setze die fehlenden CSS-Angaben.
      $('#'+this.window).css({ cssFloat: 'left', overflow: 'hidden', position: 'relative', width: '100%' });
      $('#'+this.container).css({ left: '0', position: 'absolute', top: '0' });
      $('.'+this.tabClass).css({ cssFloat: 'left' });

      // Berechne zuerst die erforderliche Gesamtbreite ...
      $('.'+this.tabClass).each ( function (i) {
        vcWidth += $(this).width();
      });
      $('#'+this.container).width(vcWidth);
      $('.'+this.tabClass).width( $('#'+this.window).width() );

      // ... dann die erforderliche Höhe.
      $('.'+this.tabClass).each ( function (i) {
        vcHeight = ($(this).height() >= vcHeight) ? $(this).height() : vcHeight;
      });
      $('#'+this.container).height(vcHeight);
      $('#'+this.window).height(vcHeight);


      /*
       * Lösche die Linkziele der Tab-Links und erzeuge stattdessen die EventHandler für die Navigationslinks.
       */
      $('#'+this.menu+' a').attr('href', '#');
      $('#'+this.menu+' a').hover(
        function () { $(this).css( 'cursor', 'pointer' ); },
        function () { $(this).css( 'cursor', 'auto' ); }
      );
      $('#'+this.menu+' a').click( function (i) {
        PageSys.TabbedView.showTab($(this).attr('rel'));
      } );


      /*
       * Zeige den Tab an, der als erster angezeigt werden soll.
       */
      this.showTab( (this.visibleTab == null) ? $('#'+this.menu+' a').slice(0,1).attr('rel') : this.visibleTab );

    },





    /**
     * Blendet den übergebenen Tab ein und den gerade angezeigten aus.
     * Hierfür stehen verschiedene Überblend-Effekte zur Verfügung (slide, fade, show).
     * @param (String) tabID : die ID des Tabs
     */
    showTab : function ( tabID ) {


      /*
       * Wenn der anzuzeigende Tab schon angezeigt wird, brauchen wir auch nix weiter ändern.
       */
      if (tabID == this.visibleTab) return;


      /*
       * Berechne die X-Position des anzuzeigenden Tabs innerhalb des Containers.
       */
      var tabOffset = $('#'+tabID).offset();
      var containerOffset = $('#'+tabID).parent().offset();
      var xPos = containerOffset.left - tabOffset.left + 'px';


      switch (this.fx) {

        case 'slide' :
        /*
         * Effekt 'slide':
         * Tabs werden von links nach rechts reingeschoben - und vice versa.
         */
          $('#'+this.container).animate( { left: xPos }, 1000, 'swing' );
          break;


        case 'fade' :
        /*
         * Effekt 'fade':
         * "Sanftes" Einblenden des neuen Tabs.
         */
          $('#'+tabID).hide();
          $('#'+this.container).css( 'left', xPos );
          $('#'+tabID).fadeIn(800);
          break;


        case 'show' :
        /*
         * Effekt 'show'
         * Der neue Tab erscheint einfach an der neuen Position.
         */
          $('#'+this.container).css( 'left', xPos );
          break;
      }


      /*
       * Setze bzw. lösche die CSS-Klasse 'visibleTab'
       * und speichere die ID des neu angezeigten Tabs.
       */
      $('.visibleTab').removeClass('visibleTab');
      $('[@rel="'+tabID+'"]').parent().addClass('visibleTab');
      this.visibleTab = tabID;

    }



  }


};



if (!!$) $(document).ready( function () { PageSys.start(); } );