var SlideShow = false;
var Slogan = false;
var Welcome = false;
var SlideElements = false;
var SlideIndex = false;
var SlideIndexCache = false;
var AnimationIndex = 0;

var leftPxCache = 0;
var topPxCache = 0;
$(document).ready(function () {
    //search items
    SlideShow = $('#SlideShow');
    Slogan = SlideShow.find('.Slogan');
    Welcome = SlideShow.find('.Welcome');
    SlideElements = SlideShow.find('li');
    SlideIndexCache = 0;

    //set positions
    Slogan.css({
        'display': 'block',
        'left': 520
    });
    Welcome.css({
        'display': 'block',
        'left': 520
    });
    if (!$.browser.msie) {
        Slogan.css('opacity', 0);
        Welcome.css('opacity', 0);
    }

    //animate welcome
    animationWelcome();

    /*if (SlideElements.length > 0) {
    SlideShow.find('.Screen').css('display', 'none');
    startSlideshow();
    }*/
});

function animationWelcome() {
    var animation = { left: 30, opacity: 1 };

    if ($.browser.msie) {
        animation = { left: 30 };
    }
    Welcome.animate(animation, 2000).animate({ left: 20 }, 1000, function () {
        //step2
        animationSlogan();
    });
}
function animationSlogan() {
    var animation0 = { left: -500, opacity: 0 };
    var animation1 = { opacity: 1, left: 13 };

    if ($.browser.msie) {
        animation0 = { left: -500 };
        animation1 = { left: 13 };
    }
    Welcome.animate(animation0, 2000, function () {

    });
    Slogan.delay(1100).animate(animation1, 2000).animate({ left: 18 }, 100, function () {
        //step3
        SlideShow.find('.Screen').delay(200).animate({ opacity: 0 }, 2000, function () {

        });
        //start slideshow
        if (SlideElements.length > 0) {
            startSlideshow();
        }
    });

}
function startSlideshow() {
    //SlideElements.css('z-index', '1');

    goTo('next');
}
function goTo(control) {

    SlideIndex = SlideIndexCache;

    var id = SlideIndex;
    var animation;
    var animationBack;
    var leftPx = 0;
    var topPx = 0;
    var widthFront = 0;
    var heightFront = 0;
    var widthBack = 0;
    var heightBack = 0;


    if (control == 'next') {
        id++;
        AnimationIndex++;
        if (id >= SlideElements.length) {
            id = 0;
        }
        if (id < 0) {
            id = SlideElements.length - 1;
        }
        SlideIndexCache = id;

        SlideElements.css('z-index', '1');
        $(SlideElements[SlideIndex]).css('z-index', '5');
        $(SlideElements[id]).css({ 'z-index': '3', 'opacity': 1 });

        widthFront = ($(SlideElements[SlideIndex]).width() * (-1)) + 510;
        heightFront = ($(SlideElements[SlideIndex]).height() * (-1)) + 276;

        if (widthFront < (-510)) {
            widthFront = -510;
        }
        if (heightFront < (-276)) {
            heightFront = -276;
        }

        widthBack = ($(SlideElements[id]).width() * (-1)) + 510;
        heightBack = ($(SlideElements[id]).height() * (-1)) + 276;

        if (widthBack < (-510)) {
            widthBack = -510;
        }
        if (heightBack < (-276)) {
            heightBack = -276;
        }

        //$('#log').append('<div>' + AnimationIndex%2 + '</div>');
        if (AnimationIndex % 2 == 0) {
            //Front
            $(SlideElements[SlideIndex]).css({
                'left': widthFront / 2,
                'top': heightFront / 2
            });
            animation = {
                opacity: 0,
                left: widthFront,
                top: heightFront
            };
            //back
            $(SlideElements[id]).css({
                'left': widthBack,
                'top': 0
            });
            animationBack = {
                opacity: 1,
                left: widthBack / 2,
                top: heightBack / 2
            };
            //$('#log').append('<div>' + id + 1 + ' | (' + widthBack + ' / ' + heightBack / 2 + ') -> (' + 0 + ' / ' + 0 + ')</div>');
        } else {
            //Front
            $(SlideElements[SlideIndex]).css({
                'left': widthFront / 2,
                'top': heightFront / 2
            });
            animation = {
                opacity: 0,
                left: 0,
                top: heightFront
            };
            //back
            $(SlideElements[id]).css({
                'left': 0,
                'top': 0
            });
            animationBack = {
                opacity: 1,
                left: widthBack / 2,
                top: heightBack / 2
            };
            //$('#log').append('<div>' + SlideIndex + ' | (' + leftPx + ' / ' + topPx + ') -> (' + width + ' / ' + height + ')</div>');
        }




        $(SlideElements[SlideIndex]).animate(animation, 3500, function () {

            goTo('next');
        });


        $(SlideElements[id]).animate(animationBack, 3500, function () { });

        /*$(SlideElements[id]).animate({
        left: leftPx,
        top: topPx
        }, 2000);*/
        //in den 2 Sekunden nur die Hälfte der Strecke animieren

        //alert(width);
    }
}