/*...................*/
/* TEASER Slider 	 */
/*...................*/
slideTeaserSlider_status = 0;

function initTeaserSlider()
{
    itemsPerPage = 3;
    page = 1;
    itemList = new Array();
    ulTarget = document.getElementById("displayTeaserSlider");
    ulDatabase = document.getElementById("teaserDatabase");
    ulDatabaseLength = ulDatabase.getElementsByTagName("li").length;
    numberPages = Math.ceil(ulDatabaseLength / itemsPerPage);
    amountOverflow = itemsPerPage;
    widthTeaserElement = 292;


    // Write Progress-Indicator:
    $("#teaserScreen").append("<table class='progressIndicator'><tr><td valign='middle' align='center'><img src='/assets/images/global/ajax-loader.gif'/></td></tr></table>");

    // Generate Teaser-List:

    // Handle pages, add if necessary empty spacer-li's:
    if (ulDatabaseLength - ulDatabaseLength % itemsPerPage != 0)
    {
        emptyPageFillers = itemsPerPage - (ulDatabaseLength % itemsPerPage);
        //alert("Filler: "+emptyPageFillers);
        for (j = 0; j < emptyPageFillers; j++)
        {
            var newLi = document.createElement("li");
            newLi.className = "spacer";
            var newDiv = document.createElement("div");
            newDiv.className = "spacer";
            newDiv.style.visibility = "hidden";
            newDiv.style.width = widthTeaserElement + "px";
            newDivContent = document.createTextNode("-");
            newDiv.appendChild(newDivContent);
            newLi.appendChild(newDiv);
            ulDatabase.appendChild(newLi);
        }
        //Reset:
        ulDatabaseLength = ulDatabase.getElementsByTagName("li").length;
    }
    else
    {
        emptyPageFillers = 0;
    }

    lastPageStart = ulDatabaseLength - itemsPerPage;

    $("#teaserScreen > table.progressIndicator").remove();

    if (numberPages > 2)
    {
        generateTeaserItems(numberPages, 'last', 'div');
        generateTeaserItems(page, '', 'div');
        generateTeaserItems(getPage(+1), '', 'div');
        //$(ulTarget).css("left","-859px");
        $(ulTarget).css("left", "0px");
    }
    else if (numberPages == 2)
    {
        generateTeaserItems(numberPages, 'last', 'div');
        generateTeaserItems(page, '', 'div');
        generateTeaserItems(numberPages, '', 'div');
        //$(ulTarget).css("left","-859px");
        $(ulTarget).css("left", "0px");
    }
    else if (numberPages == 1)
        {
            generateTeaserItems(page, '', 'div');
            $(ulTarget).css("left", "0px");
        }

    // Wait 1500, then slide first page, then write buttons:
    if (numberPages > 1)
    {
        $(ulTarget).animate({
            left:"0px"
        }, 1100);
        $(ulTarget).animate({
            left:"-877px"
        }, 340, 'easing', function()
        {
            $("ul#displayTeaserSlider li.last").css("visibility", "visible");
            generateSliderPageIdentificator();
            $("#containerTeaserStage").prepend("<div class='buttonLeft' onclick='slideTeaser(-1,1);'></div>");
            $("#containerTeaserStage").append("<div class='buttonRight' onclick='slideTeaser(+1,1);'></div>");
            // IE-Bug: PNG-Transp. black. $("#containerTeaserStage .buttonLeft, #containerTeaserStage .buttonRight").fadeIn("slow");
        });
        ;
    }

}
function getPage(operation)
{
    var resultPage = page;
    if (operation > 0)
    {
        for (i = 0; i < operation; i++)
        {
            if (resultPage == numberPages)
            {
                resultPage = 1;
            }
            else
            {
                resultPage++;
            }
        }
    }
    else if (operation < 0)
    {
        for (i = 0; i < operation; i++)
        {
            if (resultPage == 1)
            {
                resultPage = numberPages;
            }
            else
            {
                resultPage--;
            }
        }
    }
    else
    {
        resultPage = page;
    }
    return resultPage;
}
function generateSliderPageIdentificator()
{
    var positionIdentificator = $("div#containerTeaserStage div.sliderPageIdenticator");
    $(positionIdentificator).empty();
    for (i = 1; i <= numberPages; i++)
    {
        if (i < page)
        {
            var clickFunction = "slideTeaser(-1," + (page - i) + ")";
        }
        else if (i > page)
        {
            var clickFunction = "slideTeaser(+1," + (i - page) + ")";
        }
        if (page == i)
        {
            $(positionIdentificator).append("<span class='pageActive'>&nbsp;</span>");
        }
        else
        {
            $(positionIdentificator).append("<span class='pagePassive' onclick='" + clickFunction + "'>&nbsp;</span>");
        }
    }
}

function generateTeaserItems(page, elemPos, copyElement)
{
    //alert("Gen Page: "+page);
    for (i = 0; i < itemsPerPage; i++)
    {
        var selectItem = i + (itemsPerPage * (page - 1));
        //alert("Item: "+selectItem);
        var newParent = document.createElement("li");
        if (elemPos == 'last')
        {
            newParent.className = 'last';
        }
        newParent.style.width = widthTeaserElement + "px";
        if (ulDatabase.getElementsByTagName("li")[selectItem].className != 'spacer')
        {
            var newElement = ulDatabase.getElementsByTagName("li")[selectItem].getElementsByTagName(copyElement)[0].cloneNode(true);
        }
        else
        {
            var newElement = ulDatabase.getElementsByTagName("li")[selectItem].getElementsByTagName(copyElement)[0].cloneNode(true);
        }
        newParent.appendChild(newElement);
        ulTarget.appendChild(newParent);
    }
}

function slideTeaser(direction, slidePages)
{
    pageElements = ulTarget.getElementsByTagName("li");
    var thisValue = parseInt(ulTarget.style.marginLeft)
    var thisLeft = parseInt(ulTarget.style.left);
    //alert(thisLeft);
    // TODO: Bitte auslesen und nicht fix setzen!!!
    elemWidth = 292;
    var thisRight = parseInt(ulTarget.style.right);
    //
    // Collect the items, which have to be animated (reduced and removed OR expanded):
    var thisElement = new Array();
    if (direction == +1 && slideTeaserSlider_status == 0)
    {
        if (slideTeaserSlider_status == 0)
        {
            slideTeaserSlider_status++;
            for (i = 0; i < (itemsPerPage * slidePages); i++)
            {
                if (i == 0 || i % itemsPerPage == 0)
                {
                    j = 0;
                    if (page == numberPages)
                    {
                        page = 1;
                    }
                    else
                    {
                        page++;
                    }
                    if (page == numberPages)
                    {
                        var nextPage = 1;
                    }
                    else
                    {
                        var nextPage = page + 1;
                    }
                }
                thisElement[i] = ulTarget.getElementsByTagName("li")[i];
                var newParent = document.createElement("li");
                newParent.style.width = widthTeaserElement + "px";
                var newElement = ulDatabase.getElementsByTagName("li")[(j + (itemsPerPage * (nextPage - 1)))].getElementsByTagName("div")[0].cloneNode(true);
                newParent.appendChild(newElement);
                ulTarget.appendChild(newParent);
                j++;
            }
            var animateValue = "0px;";
        }
    }
    else if (direction == -1 && slideTeaserSlider_status == 0)
    // TODO: Calculate exactly the position of the handling page-element!!
    {
        slideTeaserSlider_status++;

        for (i = ((itemsPerPage * slidePages)); i > 0; i--)
        {
            if (i == ((itemsPerPage * slidePages)) || i % itemsPerPage == 0)
            {
                j = 2;
                if (page == 1)
                {
                    page = numberPages;
                }
                else
                {
                    page--;
                }
                if (page == 1)
                {
                    var nextPage = numberPages;
                }
                else
                {
                    var nextPage = page - 1;
                }
            }
            // Prepend new Element:
            var newParent = document.createElement("li");	// i+(itemsPerPage*(page-1))
            var newElement = ulDatabase.getElementsByTagName("li")[(j + (itemsPerPage * (nextPage - 1)))].getElementsByTagName("div")[0].cloneNode(true);
            newParent.style.width = "0px";
            newParent.appendChild(newElement);
            $(ulTarget).prepend(newParent);
            thisElement[(i - 1)] = newParent;
            j--;
        }
        var animateValue = "292px;";
    }
    else
    {
    }

    doTeaserSlide(thisElement, direction, animateValue);


}

ulTargetLength = 0;
function doTeaserSlide(thisElement, direction, animateValue)
{
    slideTeaserSlider_status = 1;
    $(thisElement).css("overflow", "hidden");
    $(thisElement).animate({
        width:animateValue
    }, 340, 'easing', function()
    {
        if (direction == -1)
        {
            ulTargetLength = ulTarget.getElementsByTagName("li").length;
            //alert("Content BEFOR do:\n"+ulTarget.innerHTML);
            //alert("Anfang: "+ulTarget.getElementsByTagName("li")[ulTarget.getElementsByTagName("li").length].innerHTML);
            //alert("Laenge: "+ ulTargetLength);
            var knoten = ulTarget.getElementsByTagName("li")[(ulTargetLength - 1)];
            ulTarget.removeChild(knoten);
            ulTargetLength--;
            //alert("Content after do:\n"+ulTarget.innerHTML);
        }
        else if (direction == +1)
        {
            var ulTargetLength = ulTarget.getElementsByTagName("li").length;
            //alert("direction +1: "+ulTarget.getElementsByTagName("li")[0].innerHTML);
            var knoten = ulTarget.getElementsByTagName("li")[0];
            ulTarget.removeChild(knoten);
        }
        else
        {
            alert("Unsupported Error.");
        }
        slideTeaserSlider_status++;
        if (slideTeaserSlider_status > itemsPerPage)
        {
            slideTeaserSlider_status = 0;
            generateSliderPageIdentificator();
        }
        slideTeaserSlider_status = 0;
        generateSliderPageIdentificator();
    });
}

/*...............................*/
/* MODEL-Overview Image-Slider 	 */
/*...............................*/
function initModelOverviewSlider()
{
    /* Set in both db-groups first element as active */
    $("ul#databaseExterior li:first").attr("class", "active");
    $("ul#databaseInterior li:first").attr("class", "active");
    $("div#mediaStageControlButtons div.control3").addClass("active");
    changeImage(0);
}

function changeDb(db)
{
    $("div#mediaStageControlButtons div").removeClass("active");
    if (db == 'interior')
    {
        $("ul#databaseExterior").removeClass("active");
        $("ul#databaseInterior").addClass("active");
        $("div#mediaStageControlButtons div.control4").addClass("active");
    }
    else
    {
        $("ul#databaseInterior").removeClass("active");
        $("ul#databaseExterior").addClass("active");
        $("div#mediaStageControlButtons div.control3").addClass("active");
    }
    changeImage(0);
}

function changeImage(direction)
{
    var activeElement = $("ul.database.active li.active:first");
    if (direction == +1)
    {
        var newActiveElement = ($(activeElement).next().length > 0) ? $(activeElement).next() : $("ul.database.active li:first");
    }
    else if (direction == -1)
    {
        var newActiveElement = ($(activeElement).prev().length > 0) ? $(activeElement).prev() : $("ul.database.active li:last");
    }
    else
    {
        var newActiveElement = activeElement;
    }

    $(newActiveElement).siblings().removeClass('active');
    $(newActiveElement).addClass('active');

    $("div#sliderScreen").append("<div class='mLoad'></div>");
    var newImg = new Image();
    $(newImg).load(function()
    {
        $("div#sliderScreen").find("img").remove();
        $("div#sliderScreen").append(newImg);
        $(this).fadeIn("slow", removeNoise);
    }).error(function()
    {
        $("div.mLoad").remove();
    }).attr("src", $(newActiveElement).text());

    function removeNoise()
    {
        $(this).css({"filter":null});
    }

    $("div.mLoad").remove();
}

/*...............................*/
/* MODEL-Overview Table-Slider 	 */
/*...............................*/

slideModelOverviewTable_status = 0;

function slideModelOverviewTable(direction)
{
    var thisElement = document.getElementById("tableScreen").getElementsByTagName("table")[0];
    var maxAmountDisplayItems = 3;
    var itemWidth = 210; //parseInt(thisElement.getElementsByTagName("tr")[0].getElementsByTagName("td")[0].offsetWidth);
    var itemAmount = parseInt(thisElement.getElementsByTagName("tr")[0].getElementsByTagName("td").length);
    // If marginLeft is not set, it is at standard-position 0:
    if (thisElement.style.marginLeft)
    {
        var actualPos = parseInt(thisElement.style.marginLeft);
    }
    else
    {
        var actualPos = 0;
    }

    if (itemAmount > maxAmountDisplayItems && slideModelOverviewTable_status == 0)
    {
        // First get max slide-positions:
        var maxItemOverhang = itemAmount - maxAmountDisplayItems;
        var maxPxLeft = 0 - (maxItemOverhang * itemWidth);
        var maxPxRight = 0;
        //

        // Check values depending direction:
        if (direction == 1 && actualPos < maxPxRight) // left
        {
            // Block this function:
            slideModelOverviewTable_status = 1;
            $(thisElement).animate({
                marginLeft: actualPos + itemWidth + 'px'
            }, 300, '', function()
            {
                slideModelOverviewTable_status = 0;
            });
            // Set sliderbuttons on active / inactive:
            if ((actualPos + itemWidth) == 0)
            {
                $(".sliderButtonLeft").addClass("inactive");
            }
            else
            {
                $(".sliderButtonLeft").removeClass("inactive");
            }
            if ((actualPos + itemWidth) > maxPxRight)
            {
                $(".sliderButtonRight").addClass("inactive");
            }
            else
            {
                $(".sliderButtonRight").removeClass("inactive");
            }
        }
        else if (direction == 0 && actualPos > maxPxLeft) // right
        {
            // Block this function:
            slideModelOverviewTable_status = 1;
            $(thisElement).animate({
                marginLeft: actualPos - itemWidth + 'px'
            }, 300, '', function()
            {
                slideModelOverviewTable_status = 0;
            });
            // Set sliderbuttons on active / inactive:
            if ((actualPos - itemWidth) == 0)
            {
                $(".sliderButtonLeft").addClass("inactive");
            }
            else
            {
                $(".sliderButtonLeft").removeClass("inactive");
            }
            if ((actualPos - itemWidth) <= maxPxLeft)
            {
                $(".sliderButtonRight").addClass("inactive");
            }
            else
            {
                $(".sliderButtonRight").removeClass("inactive");
            }
        }

    }
}

/*...............................*/
/* MODEL-Configure-Overview Table-Slider 	 */
/*...............................*/

slideModelConfigureOverviewTable_status = 0;

function slideModelConfigureOverviewTable(direction)
{
    var thisElement = document.getElementById("tableScreen").getElementsByTagName("table")[0];
    var maxAmountDisplayItems = 4;
    var itemWidth = 210; //parseInt(thisElement.getElementsByTagName("tr")[0].getElementsByTagName("td")[0].offsetWidth);
    var itemAmount = parseInt(thisElement.getElementsByTagName("tr")[0].getElementsByTagName("td").length);
    // If marginLeft is not set, it is at standard-position 0:
    if (thisElement.style.marginLeft)
    {
        var actualPos = parseInt(thisElement.style.marginLeft);
    }
    else
    {
        var actualPos = 0;
    }

    if (itemAmount > maxAmountDisplayItems && slideModelConfigureOverviewTable_status == 0)
    {
        // First get max slide-positions:
        var maxItemOverhang = itemAmount - maxAmountDisplayItems;
        var maxPxLeft = 0 - (maxItemOverhang * itemWidth);
        var maxPxRight = 0;
        //

        // Check values depending direction:
        if (direction == 1 && actualPos < maxPxRight) // left
        {
            // Block this function:
            slideModelConfigureOverviewTable_status = 1;
            $(thisElement).animate({
                marginLeft: actualPos + itemWidth + 'px'
            }, 300, '', function()
            {
                slideModelConfigureOverviewTable_status = 0;
            });
            // Set sliderbuttons on active / inactive:
            if ((actualPos + itemWidth) == 0)
            {
                $(".sliderButtonLeft").addClass("inactive");
            }
            else
            {
                $(".sliderButtonLeft").removeClass("inactive");
            }
            if ((actualPos + itemWidth) > maxPxRight)
            {
                $(".sliderButtonRight").addClass("inactive");
            }
            else
            {
                $(".sliderButtonRight").removeClass("inactive");
            }
        }
        else if (direction == 0 && actualPos > maxPxLeft) // right
        {
            // Block this function:
            slideModelConfigureOverviewTable_status = 1;
            $(thisElement).animate({
                marginLeft: actualPos - itemWidth + 'px'
            }, 300, '', function()
            {
                slideModelConfigureOverviewTable_status = 0;
            });
            // Set sliderbuttons on active / inactive:
            if ((actualPos - itemWidth) == 0)
            {
                $(".sliderButtonLeft").addClass("inactive");
            }
            else
            {
                $(".sliderButtonLeft").removeClass("inactive");
            }
            if ((actualPos - itemWidth) <= maxPxLeft)
            {
                $(".sliderButtonRight").addClass("inactive");
            }
            else
            {
                $(".sliderButtonRight").removeClass("inactive");
            }
        }

    }
}

/*...............................*/
/* View-all-models Slider    	 */
/*...............................*/

function initModelsSlider()
{
    itemsPerPage = 1;
    page = 3;
    itemList = new Array();
    ulTarget = document.getElementById("displayModelsSlider");
    ulDatabase = document.getElementById("modelsSliderDatabase");
    ulDatabaseLength = ulDatabase.getElementsByTagName("li").length;
    numberPages = Math.ceil(ulDatabaseLength / itemsPerPage);
    amountOverflow = itemsPerPage;
    widthTeaserElement = 570;

    // Generate Teaser-List:
    // Write Progress-Indicator:
    $(".containerViewAllModelsStage").append("<table class='progressIndicator'><tr><td valign='middle' align='center'><img src='/assets/images/global/ajax-loader.gif'/></td></tr></table>");

    // Generate Teaser-List:

    emptyPageFillers = 0;

    lastPageStart = ulDatabaseLength - itemsPerPage;

    //$("#teaserScreen > table.progressIndicator").remove();

    if (numberPages > 2)
    {
        generateTeaserItems((numberPages - 1), 'last', 'a');
        generateTeaserItems(numberPages, 'last', 'a');
        generateTeaserItems(page, '', 'a');
        generateTeaserItems(getPage(+1), '', 'a');
        generateTeaserItems(getPage(+2), '', 'a');
        //$(ulTarget).css("left","-859px");
        $(ulTarget).css("left", "0px");
    }
    else if (numberPages == 2)
    {
        generateTeaserItems(numberPages, 'last', 'a');
        generateTeaserItems(page, '', 'a');
        generateTeaserItems(numberPages, '', 'a');
        //$(ulTarget).css("left","-859px");
        $(ulTarget).css("left", "0px");
    }
    else if (numberPages == 1)
    {
        generateTeaserItems(page, '', 'a');
        $(ulTarget).css("left", "0px");
    }

    // Wait 1500, then slide first page, then write buttons:
    if (numberPages > 1)
    {
        $(ulTarget).animate({
            left:"0px"
        }, 1100);
        $(ulTarget).animate({
            left:"-855px"
        }, 340, 'easing', function()
        {
            $("ul#displayModelsSlider li.last").css("visibility", "visible");
            //generateSliderPageIdentificator();
            //$("#containerTeaserStage").prepend("<div class='buttonLeft' onclick='slideTeaser(-1,1);'></div>");
            //$("#containerTeaserStage").append("<div class='buttonRight' onclick='slideTeaser(+1,1);'></div>");
            writeModelPrice();
            // IE-Bug: PNG-Transp. black. $("#containerTeaserStage .buttonLeft, #containerTeaserStage .buttonRight").fadeIn("slow");
        });
        $("#boxThumbnails").append("<ul id='thumbnails'></ul>");

        hoverImage = new Array;
        for (i = 0; i < ulDatabaseLength; i++)
        {
            var imagePath = ulDatabase.getElementsByTagName("li")[i].getElementsByTagName("img")[0].src;
            var modelName = ulDatabase.getElementsByTagName("li")[i].getElementsByTagName("p")[0].innerHTML;
            var thumbnailPath = imagePath.split(".png");
            $("ul#thumbnails").append("<li onclick=''><img src='" + thumbnailPath[0] + "-thumbnail.jpg'/><span>" + modelName + "</span></li>");
        }
        $(document).ready(function()
        {
            var thumbnailSliderLength = 0;
            var thumbnailSlider = $("ul#thumbnails").children("li").children("img");
            $.each(thumbnailSlider, function()
            {
                var thisWidth = $(this).width();
                thumbnailSliderLength = thumbnailSliderLength + thisWidth;
                $(this).parent("li").css("width", thisWidth + "px");
                $(this).parent("li").children("span").css("width", thisWidth + "px");
            });
            $("ul#thumbnails").css("width", thumbnailSliderLength + "px");

            $("ul#thumbnails").ready(function ()
            {
                updateModelThumbnailSlider()
            });
        });


        ;
    }

}

function writeModelPrice()
{
    var thisElementModelname = ulDatabase.getElementsByTagName("li")[(page - 1)].getElementsByTagName("p")[0].innerHTML;
    thisElementModelname = thisElementModelname + "<span class='price'>";
    thisElementModelname = thisElementModelname + ulDatabase.getElementsByTagName("li")[(page - 1)].getElementsByTagName("span")[0].innerHTML;
    thisElementModelname = thisElementModelname + "&nbsp;";
    thisElementModelname = thisElementModelname + ulDatabase.getElementsByTagName("li")[(page - 1)].getElementsByTagName("span")[1].innerHTML;
    thisElementModelname = thisElementModelname + "</span>";
    $("#modelnameViewer").html(thisElementModelname);
}

function slideModels(direction, slidePages)
{
    pageElements = ulTarget.getElementsByTagName("li");
    var thisValue = parseInt(ulTarget.style.marginLeft)
    var thisLeft = parseInt(ulTarget.style.left);
    //alert(thisLeft);
    // TODO: Bitte auslesen und nicht fix setzen!!!
    elemWidth = 570;
    var thisRight = parseInt(ulTarget.style.right);
    //
    // Collect the items, which have to be animated (reduced and removed OR expanded):
    var thisElement = new Array();
    if (direction == +1 && slideTeaserSlider_status == 0)
    {
        if (slideTeaserSlider_status == 0)
        {
            slideTeaserSlider_status++;

            // Hier ist die Stelle: Ein Element mehr, Seite wird also falsch abgefragt.

            if (page == numberPages)
            {
                page = 1;
            }
            else
            {
                page++;
            }
            if (page == numberPages)
            {
                var nextPage = 1;
            }
            else
            {
                var nextPage = page + 1;
            }

            writeModelPrice();

            var getThisElement = page + 1;
            if (getThisElement == numberPages)
            {
                getThisElement = 0;
            }
            if (getThisElement > numberPages)
            {
                getThisElement = 1;
            }
            //console.info("RECHTS || Aktuelle Page: " + page + " Selektiere dieses LI: " + getThisElement);

            //alert("Next page= " + getThisElement);
            thisElement[0] = ulTarget.getElementsByTagName("li")[0];
            var newParent = document.createElement("li");
            newParent.style.width = widthTeaserElement + "px";
            var newElement = ulDatabase.getElementsByTagName("li")[getThisElement].getElementsByTagName("a")[0].cloneNode(true);
            newParent.appendChild(newElement);
            ulTarget.appendChild(newParent);


            var animateValue = "0px;";
        }
    }
    else if (direction == -1 && slideTeaserSlider_status == 0)
    // TODO: Calculate exactly the position of the handling page-element!! itemsPerPage*slidePages
    {
        slideTeaserSlider_status++;


        if (page == 1)
        {
            page = numberPages;
        }
        else
        {
            page--;
        }
        if (page == 1)
        {
            var nextPage = numberPages;
        }
        else
        {
            var nextPage = page - 1;
        }

        writeModelPrice();

        var getThisElement = page - 3;
        if (getThisElement == -1)
        {
            getThisElement = (numberPages - 1);
        }
        if (getThisElement == -2)
        {
            getThisElement = (numberPages - 2);
        }
        //console.info("LINKS || Aktuelle Page: " + page + " Selektiere dieses LI: " + getThisElement);

        // Prepend new Element:
        var newParent = document.createElement("li");	// i+(itemsPerPage*(page-1))
        //alert("Get element nr: " + (j+(itemsPerPage*(nextPage-1))));
        var newElement = ulDatabase.getElementsByTagName("li")[getThisElement].getElementsByTagName("a")[0].cloneNode(true);
        newParent.style.width = "0px";
        newParent.appendChild(newElement);
        $(ulTarget).prepend(newParent);
        thisElement[0] = newParent;


        var animateValue = "570px;";
    }
    else
    {
    }
    //alert("stop: " + thisElement + "\n" + direction + "\n" + animateValue);
    doModelSlide(thisElement, direction, animateValue);


}

function updateModelThumbnailSlider()
{
    // Write Active-Images in BG:
    for (i = 0; i < ulDatabaseLength; i++)
    {
        var imagePath = ulDatabase.getElementsByTagName("li")[i].getElementsByTagName("img")[0].src;
        var modelName = ulDatabase.getElementsByTagName("li")[i].getElementsByTagName("p")[0].innerHTML;
        var thumbnailPath = imagePath.split(".png");
        var thisElement = document.getElementById("thumbnails").getElementsByTagName("li")[i];
        var bgImage = thumbnailPath[0] + "-thumbnail-active.jpg";
        //alert(bgImage);
        //$(thisElement).css("backgroundImage", "url("+bgImage+")");
        thisElement.style.backgroundImage = "url(" + bgImage + ")";
    }
    $("#thumbnails").children("li").children("img").css("visibility", "visible");
    thisElement = document.getElementById("thumbnails").getElementsByTagName("li")[(page - 1)].getElementsByTagName("img")[0];
    $(thisElement).css("visibility", "hidden");

}

ulTargetLength = 0;
function doModelSlide(thisElement, direction, animateValue)
{
    slideTeaserSlider_status = 1;
    $(thisElement).css("overflow", "hidden");
    $(thisElement).animate({
        width:animateValue
    }, 340, 'easing', function()
    {
        if (direction == -1)
        {
            ulTargetLength = ulTarget.getElementsByTagName("li").length;
            //alert("Content BEFOR do:\n"+ulTarget.innerHTML);
            //alert("Anfang: "+ulTarget.getElementsByTagName("li")[ulTarget.getElementsByTagName("li").length].innerHTML);
            //alert("Laenge: "+ ulTargetLength);
            var knoten = ulTarget.getElementsByTagName("li")[(ulTargetLength - 1)];
            ulTarget.removeChild(knoten);
            ulTargetLength--;
            //alert("Content after do:\n"+ulTarget.innerHTML);
        }
        else if (direction == +1)
        {
            var ulTargetLength = ulTarget.getElementsByTagName("li").length;
            //alert("direction +1: "+ulTarget.getElementsByTagName("li")[0].innerHTML);
            var knoten = ulTarget.getElementsByTagName("li")[0];
            ulTarget.removeChild(knoten);
        }
        else
        {
            alert("Unsupported Error.");
        }
        slideTeaserSlider_status++;
        if (slideTeaserSlider_status > itemsPerPage)
        {
            slideTeaserSlider_status = 0;
            updateModelThumbnailSlider();
        }
        slideTeaserSlider_status = 0;
        updateModelThumbnailSlider();
    });
}