function showHistory() {
    var object  = items;
    var start   = 0;
    var ende    = 4;

    var bblock  = $("#bblockAkt");
    var jblock  = $("#jblockAkt");

    var leftscroll  = $("#zeitlinie-links");
    var rightscroll = $("#zeitlinie-rechts");

    var bElements   = "";
    var jElements   = "";
    var hover       = [];

    $(object).each(function(index) {
        if (index >= start && index <= ende)
        {
            var obj = {};
            bElements += '<div id="b' + this.wann.substr(0, 4) + '" onclick="showYear(' + this.wann.substr(0, 4) + ')" title="' + this.imgTitle + '" style="background: url(' + this.imgSrc + ')"><span>' + this.wann + '<br />' + this.was +'</span></div>';
            jElements += '<div id="j' + this.wann.substr(0, 4) + '" onclick="showYear(' + this.wann.substr(0, 4) + ')">' + this.wann.substr(0, 4) + '</div>';
            obj.css = "b" + this.wann.substr(0, 4);
            hover[index]    = obj;
        }
    });

    var links   = '<img src="/images/zeitlinie-stop-links.png" alt="stop" />';
    var rechts  = '<img src="/images/zeitlinie-rechts.png"     alt="weiter" onclick="nextYear(5,9)" style="cursor: pointer;" />';

    bblock.html(bElements);
    jblock.html(jElements);
    leftscroll.html(links);
    rightscroll.html(rechts);

    //$(hover).each(function(index) {
    //    $("#" + this.css).hoverbox();
    //});
}

function showWerkstatt() {
    var object  = items;
    var start   = 0;
    var ende    = 2;

    var bblock  = $("#bblockAkt");
    var jblock  = $("#jblockAkt");

    var leftscroll  = $("#zeitlinie-links");
    var rightscroll = $("#zeitlinie-rechts");

    var bElements   = "";
    var jElements   = "";
    var hover       = [];

    $(object).each(function(index) {
        if (index >= start && index <= ende)
        {
            var obj = {};
            bElements += '<div id="b' + this.className + '" onclick="showWerkstattStep(\'' + this.className + '\')" title="' + this.imgTitle + '" style="background: url(' + this.imgSrc + ')"></div>';
            jElements += '<div id="j' + this.className + '" onclick="showWerkstattStep(\'' + this.className + '\')">' + this.titel + '</div>';
            obj.css = "b" + this.titel;
            hover[index]    = obj;
        }
    });

    var links   = '<img src="/images/zeitlinie-stop-links.png" alt="stop" />';
    var rechts  = '<img src="/images/zeitlinie-rechts.png"     alt="weiter" onclick="nextWerkstattStep(3,5)" style="cursor: pointer;" />';

    bblock.html(bElements);
    jblock.html(jElements);
    leftscroll.html(links);
    rightscroll.html(rechts);

    //$(hover).each(function(index) {
    //    $("#" + this.css).hoverbox();
    //});
}

function showKollektionen() {
    var object  = items;
    var start   = 0;
    var ende    = 3;

    var bblock  = $("#bblockAkt");
    var jblock  = $("#jblockAkt");

    var leftscroll  = $("#zeitlinie-links");
    var rightscroll = $("#zeitlinie-rechts");

    var bElements   = "";
    var jElements   = "";
    var hover       = [];

    $(object).each(function(index) {
        if (index >= start && index <= ende)
        {
            var obj = {};
            bElements += '<div class="kollektionbox" id="b' + this.className + '" onmouseover="showKollektion(\'' + this.className + '\')" onmouseout="hideKollektion(\'' + this.className + '\')" onclick="openKollektion(\'' + this.className + '\')" title="' + this.keyword + '" style="background: url(' + this.imgSrc + ') no-repeat"><span>' + this.titel + '</span></div>';
            jElements += '<div class="navKollektion" id="j' + this.className + '" onmouseover="showKollektion(\'' + this.className + '\')" onmouseout="hideKollektion(\'' + this.className + '\')" onclick="openKollektion(\'' + this.className + '\')">' + this.titel + '</div>';
            obj.css = "b" + this.className;
            hover[index]    = obj;
        }
    });

    var links   = '<img src="/images/zeitlinie-stop-links.png" alt="stop" />';
    var rechts  = '<img src="/images/zeitlinie-rechts.png"     alt="weiter" onclick="nextKollektionen(4,7)" style="cursor: pointer;" />';
    if (ende > object.length - 1) {
        rechts  = '<img src="/images/zeitlinie-stop-rechts.png" alt="stop" />';
    }
    bblock.html(bElements);
    jblock.html(jElements);
    leftscroll.html(links);
    rightscroll.html(rechts);

    //$(hover).each(function(index) {
    //    $("#" + this.css).hoverbox();
    //});
}

function nextYear(start, ende) {
    var object  = items;
    var bblockAkt   = $("#bblockAkt");
    var bblockNext  = $("#bblockNext");
    var bblockPrev  = $("#bblockPrev");
    var jblockAkt   = $("#jblockAkt");
    var jblockNext  = $("#jblockNext");
    var jblockPrev  = $("#jblockPrev");

    var leftscroll  = $("#zeitlinie-links");
    var rightscroll = $("#zeitlinie-rechts");

    var bElements = "";
    var jElements = "";
    var hover   = [];

    $(object).each(function(index) {
        if (index >= start && index <= ende) {
            var obj = {};
            bElements += '<div id="b' + this.wann.substr(0, 4) + '" onclick="showYear(' + this.wann.substr(0, 4) + ')" title="' + this.imgTitle + '" style="background: url(' + this.imgSrc + ')"><span>' + this.wann + '<br />' + this.was + '</span></div>';
            jElements += '<div id="j' + this.wann.substr(0, 4) + '" onclick="showYear(' + this.wann.substr(0, 4) + ')">' + this.wann.substr(0, 4) + '</div>';
            obj.css = "b" + this.wann.substr(0, 4);
            hover[index]    = obj;
        }
    });

    var prevStart   = start - 5;
    var prevEnde    = ende - 5;

    var nextStart   = start + 5;
    var nextEnde    = ende + 5;

    var links   = '<img src="/images/zeitlinie-links.png"  alt="zurück" onclick="prevYear(' + prevStart + ',' + prevEnde + ')" style="cursor: pointer;" />';
    var rechts  = '<img src="/images/zeitlinie-rechts.png" alt="weiter" onclick="nextYear(' + nextStart + ',' + nextEnde + ')" style="cursor: pointer;" />';
    if (nextStart > object.length - 1) {
        rechts  = '<img src="/images/zeitlinie-stop-rechts.png" alt="stop" />';
    }

    leftscroll.html(links);
    rightscroll.html(rechts);

    bblockPrev.hide();
    jblockPrev.hide();

    bblockAkt.hide('slide', { direction: "left" });
    jblockAkt.hide('slide', { direction: "left" });

    bblockNext.html(bElements);
    jblockNext.html(jElements);
    bblockNext.show('slide', { direction: "right" });
    jblockNext.show('slide', { direction: "right" });

    bblockAkt.html(bElements);
    jblockAkt.html(jElements);

    //$(hover).each(function(index) {
    //   $("#" + this.css).hoverbox();
    //});
}

function nextWerkstattStep(start, ende) {
    var object  = items;
    var bblockAkt   = $("#bblockAkt");
    var bblockNext  = $("#bblockNext");
    var bblockPrev  = $("#bblockPrev");
    var jblockAkt   = $("#jblockAkt");
    var jblockNext  = $("#jblockNext");
    var jblockPrev  = $("#jblockPrev");

    var leftscroll  = $("#zeitlinie-links");
    var rightscroll = $("#zeitlinie-rechts");

    var bElements = "";
    var jElements = "";
    var hover   = [];

    $(object).each(function(index) {
        if (index >= start && index <= ende)
        {
            var obj = {};
            bElements += '<div id="b' + this.className + '" onclick="showWerkstattStep(\'' + this.className + '\')" title="' + this.imgTitle + '" style="background: url(' + this.imgSrc + ')"></div>';
            jElements += '<div id="j' + this.className + '" onclick="showWerkstattStep(\'' + this.className + '\')">' + this.titel + '</div>';
            obj.css = "b" + this.className;
            hover[index]    = obj;
        }
    });

    var prevStart   = start - 3;
    var prevEnde    = ende - 3;

    var nextStart   = start + 3;
    var nextEnde    = ende + 3;

    var links   = '<img src="/images/zeitlinie-links.png"  alt="zurück" onclick="prevWerkstattStep(' + prevStart + ',' + prevEnde + ')" style="cursor: pointer;" />';
    var rechts  = '<img src="/images/zeitlinie-rechts.png" alt="weiter" onclick="nextWerkstattStep(' + nextStart + ',' + nextEnde + ')" style="cursor: pointer;" />';
    if (nextStart > object.length - 1) {
        rechts  = '<img src="/images/zeitlinie-stop-rechts.png" alt="stop" />';
    }

    leftscroll.html(links);
    rightscroll.html(rechts);

    bblockPrev.hide();
    jblockPrev.hide();

    bblockAkt.hide('slide', { direction: "left" });
    jblockAkt.hide('slide', { direction: "left" });

    bblockNext.html(bElements);
    jblockNext.html(jElements);
    bblockNext.show('slide', { direction: "right" });
    jblockNext.show('slide', { direction: "right" });

    bblockAkt.html(bElements);
    jblockAkt.html(jElements);

    //$(hover).each(function(index) {
    //    $("#" + this.css).hoverbox();
    //});
}

function nextKollektionen(start, ende) {
    var object  = items;
    var bblockAkt   = $("#bblockAkt");
    var bblockNext  = $("#bblockNext");
    var bblockPrev  = $("#bblockPrev");
    var jblockAkt   = $("#jblockAkt");
    var jblockNext  = $("#jblockNext");
    var jblockPrev  = $("#jblockPrev");

    var leftscroll  = $("#zeitlinie-links");
    var rightscroll = $("#zeitlinie-rechts");

    var bElements = "";
    var jElements = "";
    var hover   = [];

    $(object).each(function(index) {
        if (index >= start && index <= ende)
        {
            var obj = {};
            bElements += '<div class="kollektionbox" id="b' + this.className + '" onmouseover="showKollektion(\'' + this.className + '\')" onmouseout="hideKollektion(\'' + this.className + '\')" onclick="openKollektion(\'' + this.className + '\')" title="' + this.keyword + '" style="background: url(' + this.imgSrc + ') no-repeat"><span>' + this.titel + '</span></div>';
            jElements += '<div class="navKollektion" id="j' + this.className + '" onmouseover="showKollektion(\'' + this.className + '\')" onmouseout="hideKollektion(\'' + this.className + '\')" onclick="openKollektion(\'' + this.className + '\')">' + this.titel + '</div>';
            obj.css = "b" + this.className;
            hover[index]    = obj;
        }
    });

    var prevStart   = start - 4;
    var prevEnde    = ende - 4;

    var nextStart   = start + 4;
    var nextEnde    = ende + 4;

    var links   = '<img src="/images/zeitlinie-links.png"  alt="zurück" onclick="prevKollektionen(' + prevStart + ',' + prevEnde + ')" style="cursor: pointer;" />';
    var rechts  = '<img src="/images/zeitlinie-rechts.png" alt="weiter" onclick="nextKollektionen(' + nextStart + ',' + nextEnde + ')" style="cursor: pointer;" />';
    if (nextStart > object.length - 1) {
        rechts  = '<img src="/images/zeitlinie-stop-rechts.png" alt="stop" />';
    }

    leftscroll.html(links);
    rightscroll.html(rechts);

    bblockPrev.hide();
    jblockPrev.hide();

    bblockAkt.hide('slide', { direction: "left" });
    jblockAkt.hide('slide', { direction: "left" });

    bblockNext.html(bElements);
    jblockNext.html(jElements);
    bblockNext.show('slide', { direction: "right" });
    jblockNext.show('slide', { direction: "right" });

    bblockAkt.html(bElements);
    jblockAkt.html(jElements);

    //$(hover).each(function(index) {
    //    $("#" + this.css).hoverbox();
    //});
}

function prevYear(start, ende) {
    var object  = items;
    var bblockAkt   = $("#bblockAkt");
    var bblockNext  = $("#bblockNext");
    var bblockPrev  = $("#bblockPrev");
    var jblockAkt   = $("#jblockAkt");
    var jblockNext  = $("#jblockNext");
    var jblockPrev  = $("#jblockPrev");

    var leftscroll  = $("#zeitlinie-links");
    var rightscroll = $("#zeitlinie-rechts");

    var bElements = "";
    var jElements = "";
    var hover   = [];

    $(object).each(function(index) {
        if (index >= start && index <= ende) {
            var obj = {};
            bElements += '<div id="b' + this.wann.substr(0, 4) + '" onclick="showYear(' + this.wann.substr(0, 4) + ')" title="' + this.imgTitle + '" style="background: url(' + this.imgSrc + ')"><span>' + this.wann + '<br />' + this.was + '</span></div>';
            jElements += '<div id="j' + this.wann.substr(0, 4) + '" onclick="showYear(' + this.wann.substr(0, 4) + ')">' + this.wann.substr(0, 4) + '</div>';
            obj.css = "b" + this.wann.substr(0, 4);
            hover[index]    = obj;
        }
    });

    var prevStart   = start - 5;
    var prevEnde    = ende - 5;

    var nextStart   = start + 5;
    var nextEnde    = ende + 5;

    var links   = '<img src="/images/zeitlinie-links.png"  alt="zurück" onclick="prevYear(' + prevStart + ',' + prevEnde + ')" style="cursor: pointer;" />';
    var rechts  = '<img src="/images/zeitlinie-rechts.png" alt="weiter" onclick="nextYear(' + nextStart + ',' + nextEnde + ')" style="cursor: pointer;" />';
    if (prevStart < 0) {
        links  = '<img src="/images/zeitlinie-stop-links.png" alt="stop" />';
    }

    leftscroll.html(links);
    rightscroll.html(rechts);

    bblockNext.hide();
    jblockNext.hide();

    bblockAkt.hide('slide', { direction: "right" });
    jblockAkt.hide('slide', { direction: "right" });

    bblockPrev.html(bElements);
    jblockPrev.html(jElements);
    bblockPrev.show('slide', { direction: "left" });
    jblockPrev.show('slide', { direction: "left" });

    bblockAkt.html(bElements);
    jblockAkt.html(jElements);

    //$(hover).each(function(index) {
    //    $("#" + this.css).hoverbox();
    //});
}

function prevWerkstattStep(start, ende) {
    var object  = items;
    var bblockAkt   = $("#bblockAkt");
    var bblockNext  = $("#bblockNext");
    var bblockPrev  = $("#bblockPrev");
    var jblockAkt   = $("#jblockAkt");
    var jblockNext  = $("#jblockNext");
    var jblockPrev  = $("#jblockPrev");

    var leftscroll  = $("#zeitlinie-links");
    var rightscroll = $("#zeitlinie-rechts");

    var bElements = "";
    var jElements = "";
    var hover   = [];

    $(object).each(function(index) {
        if (index >= start && index <= ende)
        {
            var obj = {};
            bElements += '<div id="b' + this.className + '" onclick="showWerkstattStep(\'' + this.className + '\')" title="' + this.imgTitle + '" style="background: url(' + this.imgSrc + ')"></div>';
            jElements += '<div id="j' + this.className + '" onclick="showWerkstattStep(\'' + this.className + '\')">' + this.titel + '</div>';
            obj.css = "b" + this.className;
            hover[index]    = obj;
        }
    });

    var prevStart   = start - 3;
    var prevEnde    = ende - 3;

    var nextStart   = start + 3;
    var nextEnde    = ende + 3;

    var links   = '<img src="/images/zeitlinie-links.png"  alt="zurück" onclick="prevWerkstattStep(' + prevStart + ',' + prevEnde + ')" style="cursor: pointer;" />';
    var rechts  = '<img src="/images/zeitlinie-rechts.png" alt="weiter" onclick="nextWerkstattStep(' + nextStart + ',' + nextEnde + ')" style="cursor: pointer;" />';
    if (prevStart < 0) {
        links  = '<img src="/images/zeitlinie-stop-links.png" alt="stop" />';
    }

    leftscroll.html(links);
    rightscroll.html(rechts);

    bblockNext.hide();
    jblockNext.hide();

    bblockAkt.hide('slide', { direction: "right" });
    jblockAkt.hide('slide', { direction: "right" });

    bblockPrev.html(bElements);
    jblockPrev.html(jElements);
    bblockPrev.show('slide', { direction: "left" });
    jblockPrev.show('slide', { direction: "left" });

    bblockAkt.html(bElements);
    jblockAkt.html(jElements);

    //$(hover).each(function(index) {
    //    $("#" + this.css).hoverbox();
    //});
}

function prevKollektionen(start, ende) {
    var object  = items;
    var bblockAkt   = $("#bblockAkt");
    var bblockNext  = $("#bblockNext");
    var bblockPrev  = $("#bblockPrev");
    var jblockAkt   = $("#jblockAkt");
    var jblockNext  = $("#jblockNext");
    var jblockPrev  = $("#jblockPrev");

    var leftscroll  = $("#zeitlinie-links");
    var rightscroll = $("#zeitlinie-rechts");

    var bElements = "";
    var jElements = "";
    var hover   = [];

    $(object).each(function(index) {
        if (index >= start && index <= ende)
        {
            var obj = {};
            bElements += '<div class="kollektionbox" id="b' + this.className + '" onmouseover="showKollektion(\'' + this.className + '\')" onmouseout="hideKollektion(\'' + this.className + '\')" onclick="openKollektion(\'' + this.className + '\')" title="' + this.keyword + '" style="background: url(' + this.imgSrc + ') no-repeat"><span>' + this.titel + '</span></div>';
            jElements += '<div class="navKollektion" id="j' + this.className + '" onmouseover="showKollektion(\'' + this.className + '\')" onmouseout="hideKollektion(\'' + this.className + '\')" onclick="openKollektion(\'' + this.className + '\')">' + this.titel + '</div>';
            obj.css = "b" + this.className;
            hover[index]    = obj;
        }
    });

    var prevStart   = start - 4;
    var prevEnde    = ende - 4;

    var nextStart   = start + 4;
    var nextEnde    = ende + 4;

    var links   = '<img src="/images/zeitlinie-links.png"  alt="zurück" onclick="prevKollektionen(' + prevStart + ',' + prevEnde + ')" style="cursor: pointer;" />';
    var rechts  = '<img src="/images/zeitlinie-rechts.png" alt="weiter" onclick="nextKollektionen(' + nextStart + ',' + nextEnde + ')" style="cursor: pointer;" />';
    if (prevStart < 0) {
        links  = '<img src="/images/zeitlinie-stop-links.png" alt="stop" />';
    }

    leftscroll.html(links);
    rightscroll.html(rechts);

    bblockNext.hide();
    jblockNext.hide();

    bblockAkt.hide('slide', { direction: "right" });
    jblockAkt.hide('slide', { direction: "right" });

    bblockPrev.html(bElements);
    jblockPrev.html(jElements);
    bblockPrev.show('slide', { direction: "left" });
    jblockPrev.show('slide', { direction: "left" });

    bblockAkt.html(bElements);
    jblockAkt.html(jElements);

    //$(hover).each(function(index) {
    //    $("#" + this.css).hoverbox();
    //});
}

function showYear(year) {
    var jahr            = $("#historyData .box" + year + " span.jahreszahl").html();
    var description     = $("#historyData .box" + year + " div.fulltext").html();
    $(".headlineYear").html(jahr);
    $(".descriptionYear").html(description);
}

function showWerkstattStep(name) {
    var headline    = $("#werkstattData .box" + name + " h3").html();
    var description = $("#werkstattData .box" + name + " .fulltext").html();

    $(".textbox_small .inner h3").html(headline);
    $(".textbox_small .inner .textbox").html(description);
}

function showKollektion(cssName) {
    var headline    = $(".box" + cssName + " h3").html();
    var subtext     = $(".box" + cssName + " h4").html();
    var fulltext    = $(".box" + cssName + " .fulltext").html();
    
    if (headline == null) headline  = $(".box" + cssName.substr(3, cssName.length) + " h3").html();
    if (subtext == null) subtext    = $(".box" + cssName.substr(3, cssName.length) + " h4").html();
    if (fulltext == null) fulltext  = $(".box" + cssName.substr(3, cssName.length) + " .fulltext").html();

    $(".textbox_small .inner").html("");
    $(".textbox_small .inner").append("<h3>" + headline.toUpperCase() + "</h3>");
    $(".textbox_small .inner").append('<div class="textbox"><p style="text-align: justify">' + subtext + '</p><p style="text-align: justify">' + fulltext + '</p></div>');
}

function hideKollektion() {
    //$(".textbox_small .inner").html("");
}

function openKollektion(cssName) {
    var href = "";
    $(items).each(function()
    {
        if (this.className == cssName) href = this.href;
    });
    href    = href.substr(0, href.length - 10);
    window.location = href;
}