var iBioIn; //ID für Intvervall um Bio einzurollen
var iBioOut; //ID für Intvervall um Bio auszurollen
var iProRoll; //ID für Intvervall um die Profil ein und auszurollen
var pMaxWidth = 430; //Maximale Breite für das Profil
var pTextAlign = 'justify'; //Textausrichtung für das Profil
var bMaxWidth = 350; //Maximale Breite für die Bio
var widthOffset = 0; //Anzahl der Pixel um welche die Breite geändert wird
var tmWidth = 0; //Index für die Inkrementierung des Breitenoffsets


//#############################################################################//

function MouseOver (wer){

// Rücksetzen des Startwerts
    widthOffset = 20;
    
// Schockbild einblenden
    var Pic = document.getElementById(wer);
    Pic.src = "./band/" + wer + "-portrait-col-alt.jpg";

//Bio rollout und Profil rolls beenden
    try{
        var status = 'bio';
        window.clearInterval(iBioOut);
        status = 'Pro';
        window.clearInterval(iProRoll);
    }
    catch(err){ 
        alert(status);
    }
    
//kurz Warten
    sleep(300);

//Starten einrollen der Bio
    iBioIn = window.setInterval(BioRollIn,20);

// Profil einblenden und Formatierung anpassen
    var Profil = document.getElementById('profil_' + wer);
    Profil.style.display = 'block';
    Profil.style.width = '1px';
  
//Starten ausrollen des Profils
    iProRoll = window.setInterval('ProRoll("profil_' + wer + '")',20);

}

//#############################################################################//

function MouseOut(wer){

// Rücksetzen des Startwerts
    widthOffset = 20; 
 
//Standardbild einblenden
    var Pic = document.getElementById(wer);
    Pic.src = "./band/" + wer + "-portrait-col.jpg";

//Bio rollin und Profil rolls beenden
    try{
        var status = 'bio';
        window.clearInterval(iBioOut);
        iBioOut = 0;
        status = 'Pro';
        window.clearInterval(iProRoll);
    }
    catch(err){ 
        alert(status);
    }

//kurz Warten
    sleep(300);

//RollIn der Profile starten
    iProRoll = window.setInterval('ProRoll("dummy")',20);

//Biografi einblenden vorbereiten
    Bio = document.getElementById('bio');
    Bio.style.width = '0px';

//RollOut der Bio starten  -  hat sich erledigt. Is jetzt in ProRoll eingegliedert
//    iBioOut = window.setInterval(BioRollOut,20);

}

//#############################################################################//

function ProRoll(id){
var Flag = true;
tmWidth ++;
//Alle Profile in eine Variable laden
    var Profiles = GetElementsByClass('profil');
    //Jedes Profil einzeln bearbeiten

    for (var i = 0; i < Profiles.length; i++){
        //Aktuelle Breite ermitteln
        pWidht = Profiles[i].style.width;
        try{pWidht = pWidht.substr(0, pWidht.length - 2); } //width gibt String mit Suffix 'px' zurück
        catch(Err){pWidht = 0;}
        
        //Gehört das Profil zum aktuellen Bandmitglied wird es ausgerollt
        if (id == Profiles[i].id){
            var pWidht = parseInt(pWidht) + widthOffset;
            if (pWidht < pMaxWidth) {
                Profiles[i].style.width = pWidht + 'px';
            }
            else{
                Profiles[i].style.width = pMaxWidth + 'px';
                Profiles[i].style.textAlign = 'left';
                window.clearInterval(iProRoll);
            }
        }
        //Ist es ein anders Profil wird es eingerollt
        else{
            pWidht = parseInt(pWidht) - widthOffset
            if (parseInt(pWidht) > 300){Flag = false;} //ist eines der Profile zu breit, wird das RollOut der Bio unterbunden
            if (pWidht > 0){
                Profiles[i].style.width = pWidht + 'px';
            }
            else{
                Profiles[i].style.textAlign = 'center';
                Profiles[i].style.display = 'none';
            }
        }
    }
    //RollOut der Bio starten
    if (Flag == true && iBioOut == 0 && id == 'dummy'){iBioOut = window.setInterval(BioRollOut,20);}
    //Offset vergrössern
    //if ((tmWidth % 4) == 0) { 
    //    tmWidth == 0;
    //    widthOffset = widthOffset * 2
    //}

}

//#############################################################################//

function BioRollIn() {

    //Element holen
    var Bio = document.getElementById('bio');
    
    //Aktuelle Breite ermitteln
    var bWidht = Bio.style.width;
    try{
    bWidht = bWidht.substr(0, bWidht.length - 2); 
    } //width gibt String mit Suffix 'px' zurück
    catch(Err){
    bWidht = bMaxWidth;
    }
    
    //Lets Roll
    bWidht = parseInt(bWidht) - widthOffset;
    if (bWidht > 0) {
        Bio.style.width = bWidht + 'px';
    }
    else{
        Bio.style.display = 'none';
        window.clearInterval(iBioIn);
    }
    //if ((bWidht % 3) == 0) {widthOffset = widthOffset * 2;}
}

//#############################################################################//

function BioRollOut() {

    //Element holen
    var Bio = document.getElementById('bio');
    
    //Bio einblenden wenn nötig
    if(Bio.style.display == 'none'){Bio.style.display = 'block';}
    
    //Aktuelle Breite ermitteln
    var bWidht = Bio.style.width;
    try{bWidht = bWidht.substr(0, bWidht.length - 2); } //width gibt String mit Suffix 'px' zurück
    catch(Err){bWidht = 0;}
    
    //Lets Roll
    bWidht = parseInt(bWidht) + widthOffset;
    if (bWidht < bMaxWidth) {
        Bio.style.width = bWidht + 'px';
    }
    else{
        Bio.style.width = bMaxWidth + 'px';
        window.clearInterval(iBioIn); 
    }
    //if ((bWidht % 3) == 0) {widthOffset = widthOffset * 2;}
}

//#############################################################################//

function GetElementsByClass (myClassName) {
    
    var ReturnArr = new Array();

    //Alle Div-Container holen
    var allDivs = document.getElementsByTagName('Div');

    //Alle Div-Container abgrasen
    for (var i = 0; i < allDivs.length -1; i++){
        //Prüfen ob Div-Container passende Klasse hat
        if (allDivs[i].className == myClassName){
            ReturnArr.push(allDivs[i]);
        }
    }
    return ReturnArr;
}

//#############################################################################//

function geWidthById(id){
    var e = document.getElementById(id)
    var myWidht = e.style.width;
    return myWidht.substr(0, bWidht.length - 2);
}


//#############################################################################//

function sleep (millSeconds){

    //Startzeit merken
    var StartTime = GetTime();
    var NowTime = StartTime;
    //Mach solange nix bis die Wartezeit rum is
    while ( (NowTime - StartTime) < millSeconds) {
         NowTime = GetTime();
    }

}

//#############################################################################//

function GetTime(){
    // akt Systemzeit in Millisekunden umrechnen
    var Heute = new Date();
    return ((Heute.getHours()*86400000)+(Heute.getMinutes()*3600000)+(Heute.getSeconds()*1000)+Heute.getMilliseconds());
}

/*




MouseOver 
Schockbild einblenden
beendet das ausrollen der Bio wenn nötig
beendet das rollen eines Profils wenn nötig
startet das einrollen der Bio
startet das ausrollen des Profil

MouseOut
Normalbild einblenden
beendet das rollen eines Profils wenn nötig
beendet das einrollen der Bio wenn nötig
startet das einrollen des Profils
startet das ausrollen der Bio

ProRoll (wer)
rollt das profil wessen Id übergeben wurde aus 
rollt alle anderen profile ein

BioRollOut
rollt die Bio aus

BioRollIn
rollt die Bio ein

GetElementnsByClass(myClassName)
Liefert alle Elemente mit dem Übergebenen Classname

Sleep(MillSeconds)
hält das Script die angegebenen Millisekunden an

GetTime
Liefert die aktuelle Uhrzeit in Millisekunden

*/