Event.observe(document, "dom:loaded", quickbarInit);

var qbe = new Array();
var interval = null;
var time = 8000;

function quickbarInit() {
    // Hole Elemente.
    quickbarGetElements();

    // Initiiere Startposition.
    quickbarSetStartposition();

    // Durchlauf starten.
    quickbarStartInterval();

    // Eventlistener für Reiter 1.
    Event.observe(qbe['reiter1'], 'mouseover', function() {
        quickbarStopInterval();
        quickbarElementAllOff();
        quickbarElementSpecificOn(qbe['reiter1'], qbe['content1']);
    });
    Event.observe(qbe['reiter1'], 'mouseout', function() {
        quickbarStartInterval();
    });

    // Eventlistener für Reiter 2.
    Event.observe(qbe['reiter2'], 'mouseover', function() {
        quickbarStopInterval();
        quickbarElementAllOff();
        quickbarElementSpecificOn(qbe['reiter2'], qbe['content2']);
    });
    Event.observe(qbe['reiter2'], 'mouseout', function() {
        quickbarStartInterval();
    });

    // Eventlistener für Reiter 3.
    Event.observe(qbe['reiter3'], 'mouseover', function() {
        quickbarStopInterval();
        quickbarElementAllOff();
        quickbarElementSpecificOn(qbe['reiter3'], qbe['content3']);
    });
    Event.observe(qbe['reiter3'], 'mouseout', function() {
        quickbarStartInterval();
    });

    // Eventlistener für Reiter 4.
    Event.observe(qbe['reiter4'], 'mouseover', function() {
        quickbarStopInterval();
        quickbarElementAllOff();
        quickbarElementSpecificOn(qbe['reiter4'], qbe['content4']);
    });
    Event.observe(qbe['reiter4'], 'mouseout', function() {
        quickbarStartInterval();
    });

    // Eventlistener für Reiter 5.
    Event.observe(qbe['reiter5'], 'mouseover', function() {
        quickbarStopInterval();
        quickbarElementAllOff();
        quickbarElementSpecificOn(qbe['reiter5'], qbe['content5']);
    });
    Event.observe(qbe['reiter5'], 'mouseout', function() {
        quickbarStartInterval();
    });

    // Eventlistener für Reiter 6.
    Event.observe(qbe['reiter6'], 'mouseover', function() {
        quickbarStopInterval();
        quickbarElementAllOff();
        quickbarElementSpecificOn(qbe['reiter6'], qbe['content6']);
    });
    Event.observe(qbe['reiter6'], 'mouseout', function() {
        quickbarStartInterval();
    });

    // Eventlistener für Reiter 7.
    Event.observe(qbe['reiter7'], 'mouseover', function() {
        quickbarStopInterval();
        quickbarElementAllOff();
        quickbarElementSpecificOn(qbe['reiter7'], qbe['content7']);
    });
    Event.observe(qbe['reiter7'], 'mouseout', function() {
        quickbarStartInterval();
    });

}

function quickbarGetElements() {
    // Hole Elemente.
    qbe['reiter1'] = $$('div.quickbar-reiter1')[0];
    qbe['content1'] = $$('div.quickbar-content1')[0];
    qbe['reiter2'] = $$('div.quickbar-reiter2')[0];
    qbe['content2'] = $$('div.quickbar-content2')[0];
    qbe['reiter3'] = $$('div.quickbar-reiter3')[0];
    qbe['content3'] = $$('div.quickbar-content3')[0];
    qbe['reiter4'] = $$('div.quickbar-reiter4')[0];
    qbe['content4'] = $$('div.quickbar-content4')[0];
    qbe['reiter5'] = $$('div.quickbar-reiter5')[0];
    qbe['content5'] = $$('div.quickbar-content5')[0];
    qbe['reiter6'] = $$('div.quickbar-reiter6')[0];
    qbe['content6'] = $$('div.quickbar-content6')[0];
    qbe['reiter7'] = $$('div.quickbar-reiter7')[0];
    qbe['content7'] = $$('div.quickbar-content7')[0];
    qbe['loader'] = $$('div.quickbar-loader-all');
}

function quickbarSetStartposition() {
    // Initiiere Startposition.
    quickbarElementAllOff();
    quickbarElementSpecificOn(qbe['reiter1'], qbe['content1']);
}

function quickbarStartInterval() {
    quickbarLoaderOn();
    // Durchlauf starten.
    interval = setInterval(function() {
        if (qbe['content1'].style.display == 'block') {
            quickbarElementAllOff();
            quickbarElementSpecificOn(qbe['reiter2'], qbe['content2']);
        } else if (qbe['content2'].style.display == 'block') {
            quickbarElementAllOff();
            quickbarElementSpecificOn(qbe['reiter3'], qbe['content3']);
        } else if (qbe['content3'].style.display == 'block') {
            quickbarElementAllOff();
            quickbarElementSpecificOn(qbe['reiter4'], qbe['content4']);
        } else if (qbe['content4'].style.display == 'block') {
            quickbarElementAllOff();
            quickbarElementSpecificOn(qbe['reiter5'], qbe['content5']);
        } else if (qbe['content5'].style.display == 'block') {
            quickbarElementAllOff();
            quickbarElementSpecificOn(qbe['reiter6'], qbe['content6']);
        } else if (qbe['content6'].style.display == 'block') {
            quickbarElementAllOff();
            quickbarElementSpecificOn(qbe['reiter7'], qbe['content7']);
        } else if (qbe['content7'].style.display == 'block') {
            quickbarElementAllOff();
            quickbarElementSpecificOn(qbe['reiter1'], qbe['content1']);
        }
    }, time);
}

function quickbarStopInterval() {
    quickbarLoaderOff();
    // Durchlauf stoppen.
    clearInterval(interval);
}

function quickbarElementSpecificOn(reiter, content) {
    // Element aktivieren.
    reiter.style.backgroundPosition = 'left bottom';
    content.style.display = 'block';
	//content.appear();
}

function quickbarElementAllOff() {
    // Alle Elemente deaktivieren.
	qbe['reiter1'].style.backgroundPosition = 'left top';
    qbe['content1'].style.display = 'none';
    qbe['reiter2'].style.backgroundPosition = 'left top';
    qbe['content2'].style.display = 'none';
    qbe['reiter3'].style.backgroundPosition = 'left top';
    qbe['content3'].style.display = 'none';
    qbe['reiter4'].style.backgroundPosition = 'left top';
    qbe['content4'].style.display = 'none';
    qbe['reiter5'].style.backgroundPosition = 'left top';
    qbe['content5'].style.display = 'none';
    qbe['reiter6'].style.backgroundPosition = 'left top';
    qbe['content6'].style.display = 'none';
    qbe['reiter7'].style.backgroundPosition = 'left top';
    qbe['content7'].style.display = 'none';
}

function quickbarLoaderOn() {
    qbe['loader'].each(function(loader) {
        loader.style.display = 'block';
    });
}

function quickbarLoaderOff() {
    qbe['loader'].each(function(loader) {
        loader.style.display = 'none';
    });
}