/**
 * JavaScript zum Aus- und Einblednen der Sidebar (Navigation)
 * -> lässt die Sidebar animiert verschwinden und klappt sie animiert wieder herein
 * -> effects.js von script.aculo.us wird vorausgesetzt und verwendet
 *
 * @author Weber
 */

//diese Funktion dient zum Ein- und Ausklappen der Sidebar
function sidebar_main() {  
  //wenn die Sidebar ausgeblendet ist, dann...
  if (document.getElementById("sidebar").style.display == 'none') {
    //Wert: so weit fährt alles nach rechts
    var toright = 200;
    sidebar_show(); //-> siehe Funktionsbeschreibung
    //Hier wird ein Cookie mit dem Namen "sidebar" auf den Wert "2" gesetzt
    //dieses Cookie dient zur überprüfung, ob die Sidebar ein oder ausgeklappt ist
    //der Wert 2 definiert den Zustand: "ausgeklappt"
    document.cookie = "sidebar=2; path=/";
    //Moveby ist eine Funktion aus der Effekts.js - Bibliothek
    //dieser Effekt bewegt ein Element um einen bestimmten Wert
    //die Bewegung wird in einer Schleife abgearbeitet, sodass eine "Animation" entsteht
    //das erste Attribut ist das zu bewewegende Element
    //und der zweite Wert gibt die Verschiebung in Y (auf und ab) an
    //der dritte Wert gibt die Verschiebung in X (rechts und links) an.
    new Effect.MoveBy(document.getElementById("sidebar"),0,toright); 
    new Effect.MoveBy(document.getElementById("footer_info_box"),0,toright);
    new Effect.MoveBy(document.getElementById("view"),0,toright);
    //Nach dieser Zeit "1000" [ms] wird die Funktion "sidebar_show_bg" aufgerufen
    window.setTimeout('sidebar_show_bg()',1000);
  }  else  {
    //Wert: so weit fährt alles nach rechts
    var toleft = -200;        
    sidebar_swap_bg(); //-> siehe Funktionsbeschreibung
    //Hier wird ein Cookie mit dem Namen "sidebar" auf den Wert "2" gesetzt
    //dieses Cookie dient zur überprüfung, ob die Sidebar ein oder ausgeklappt ist
    //der Wert 2 definiert den Zustand: "ausgeklappt"
    document.cookie = "sidebar=1; path=/";
    //Moveby ist eine Funktion aus der Effekts.js - Bibliothek
    //dieser Effekt bewegt ein Element um einen bestimmten Wert
    //die Bewegung wird in einer Schleife abgearbeitet, sodass eine "Animation" entsteht
    //das erste Attribut ist das zu bewewegende Element
    //und der zweite Wert gibt die Verschiebung in Y (auf und ab) an
    //der dritte Wert gibt die Verschiebung in X (rechts und links) an.
    new Effect.MoveBy(document.getElementById("sidebar"),0,toleft); 
    new Effect.MoveBy(document.getElementById("footer_info_box"),0,toleft); 
    new Effect.MoveBy(document.getElementById("view"),0,toleft); 
    //Nach dieser Zeit "1000" [ms] wird die Funktion "sidebar_hide" aufgerufen
    window.setTimeout('sidebar_hide()',1000);  //-> siehe Funktionsbeschreibung
  }
}

//diese Funktion versteckt die Sidebar und blendet den Pfeil, der als Linkt dient wieder ein...
function sidebar_hide() {  
  //mit display = 'none' wird das Element unsichtbar
  document.getElementById("sidebar").style.display = 'none';  
  //so kann man ein Element wieder einblenden
  document.getElementById("arrow_anim").style.display = 'block';  
}

//diese Funktion blendet die Sidebar wieder ein
function sidebar_show() {
  //if (navigator.appName == "Microsoft Internet Explorer") -> so kann man den Browser überprüfen...
  document.getElementById("sidebar").style.display = 'block';  
}

//diese Funktion tauscht den Body-Background auf ein anderes Bild um (->strichlierte Linie links)
function sidebar_swap_bg() {   
  document.body.style.backgroundImage="url(/res/pics/body_bg_min.gif)";  
}

//diese Funktion blendet den Pfeil (neben "designers" unter dem "STEININGER" Schriftzug) aus
//und setzt den Bodyhintergrund wieder
function sidebar_show_bg() {
  document.body.style.backgroundImage="url(/res/pics/bodybg.gif)"; 
  document.getElementById("arrow_anim").style.display = 'none';
}

//diese Funktion wird beim Laden der Seite aufgerufen und bewirkt das ausblenden der Sidebar
//das ganze wird ohne Effekt abgewickelt, sodass der Vorgang für den User nicht sichtbar ist...
function onLoad() {
  document.body.style.backgroundImage="url(/res/pics/body_bg_min.gif)"; 
  document.getElementById("sidebar").style.display = 'none';  
  document.getElementById("arrow_anim").style.display = 'block';
  //die Abstände werden manuell gesetzt
  document.getElementById("view").style.marginLeft = 0;  
  document.getElementById("sidebar").style.marginLeft = "-200px";
  document.getElementById("footer_info_box").style.marginLeft = "-80px";    
}