function banner_toggle(e) {
    var container = $('#banner_container');
    // hide glow if the banner has been clicked before the animation stops
    $('.dt-homepage #banner_glow').stop().hide();
    $('.dt-homepage #banner_box2').hide();

    if (e.target.id == 'banner_box2' || e.target.id == 'banner_box') {
        // fade out child elements
        $(container).children().fadeOut(80);

        // enlarge container
        $(container).animate({ width: EagActiveBanner.banner2_width + 'px', height: EagActiveBanner.banner2_height + 'px' }, 500, 'easeInOutCubic', function () {
            // fade in popup
            $('#banner_popup').hide().fadeIn(200);
        });
        return false;
    }

    else if (e.target.id == 'banner_popup_close') {
        // fade out popup
        $('#banner_popup').fadeOut(80);

        // shrink container, width: width of the inital banner
        $(container).animate({ width: EagActiveBanner.banner1_width + 'px', height: EagActiveBanner.banner1_height + 'px' }, 500, 'easeInOutCubic', function () {
            // fade in child elements
            $('#banner_box2').fadeIn(500);
        });
        return false;
    }
}

$(document).ready(function () {
    // remove the slogan
    $('#background-slide-slogan').remove();
    $('#slogan').remove();

    function bannerAnimation() {
        var banner_container = $('<div/>').attr('id', 'banner_container').css({ opacity: 0.9, 'width': EagActiveBanner.banner1_width + 'px', 'height': EagActiveBanner.banner1_height + 'px' });

        var banner_text = $('<div/>').attr('id', 'banner_text').hide().css({ opacity: 0.9, 'width': EagActiveBanner.banner1_width + 'px', 'height': EagActiveBanner.banner1_height + 'px', 'background-image': 'url(' + EagActiveBanner.teaserBannerImage3 + ')' });
        var banner_glow = $('<div/>').attr('id', 'banner_glow').hide().css({ 'width': EagActiveBanner.banner1_width + 'px', 'height': EagActiveBanner.banner1_height + 'px', 'background-image': 'url(' + EagActiveBanner.teaserBannerGlow + ')' });
        var banner_box = $('<div/>').attr('id', 'banner_box').hide().css({ 'width': EagActiveBanner.banner1_width + 'px', 'height': EagActiveBanner.banner1_height + 'px', 'background-image': 'url(' + EagActiveBanner.teaserBannerImage1 + ')' });
        var banner_box2 = $('<div/>').attr('id', 'banner_box2').css({ 'width': EagActiveBanner.banner1_width + 'px', 'height': EagActiveBanner.banner1_height + 'px', 'background-image': 'url(' + EagActiveBanner.teaserBannerImage2 + ')' });
        var banner_popup = $('<div/>').attr('id', 'banner_popup').css({ 'width': EagActiveBanner.banner2_width + 'px', 'height': EagActiveBanner.banner2_height + 'px', 'background-image': 'url(' + EagActiveBanner.detailBannerImage + ')' });
        var banner_popup_close = $('<div/>').attr('id', 'banner_popup_close');

        var banner_popup_link;

        if (EagActiveBanner.detailBannerLink != '') {
            banner_popup_link = $('<div/>').text(EagActiveBanner.detailBannerLink).attr('id', 'banner_popup_link').attr('title', EagActiveBanner.detailBannerLink);
            banner_popup_link.bind('click', function () { window.open(EagActiveBanner.detailBannerLink); return false; })
        }


        banner_container.append(banner_text);
        banner_container.append(banner_glow);
        banner_container.append(banner_box);
        banner_container.append(banner_box2);
        banner_container.append(banner_popup);
        banner_popup.append(banner_popup_close);

        var linkwidth;

        if (EagActiveBanner.detailBannerLink != '') {
            banner_popup.append(banner_popup_link);
        }

        $('#page').append(banner_container);

        if (EagActiveBanner.detailBannerLink != '') {
            linkwidth = banner_popup_link.width();
        }

        // hide banner now, after the width of the link has been retrieved (which doesn't work with hidden elements)
        banner_popup.hide();

        if (EagActiveBanner.detailBannerLink != '') {
            // set link width and reset the inner text
            banner_popup_link.css('width', linkwidth + 'px').text('');
        }

        $('.dt-homepage #banner_container').hide();
        $('.dt-homepage #banner_text').show();
        $('.dt-homepage #banner_box').show();
        $('.dt-homepage #banner_box2').hide();

        // bind click event
        banner_container.bind('click', banner_toggle);
        banner_popup_close.bind('click', banner_toggle);


        setTimeout(function () {
            $('.dt-homepage #banner_glow').css('left', '-' + (EagActiveBanner.banner1_width + 20).toString() + 'px').show();    // negated width of the inital banner minus 20 px
            $('.dt-homepage #banner_container').css('right', '-' + (EagActiveBanner.banner1_width + 20).toString() + 'px').show().animate({ right: '0px' }, 2000, 'easeOutCubic', function () {
                // start text glow
                $('.dt-homepage #banner_glow:visible').animate({ left: (EagActiveBanner.banner1_width + 5).toString() + 'px' }, 2500, 'easeOutSine', function () {    // left: width of the inital banner plus 5px
                    banner_box.fadeOut(2000);
                    banner_text.fadeOut(2000);
                    banner_box2.fadeIn(250);
                });
            });
        }, 1500);
    }


    var preloadImage1 = new Image();

    preloadImage1.onload = function () {
        var preloadImage2 = new Image();
        preloadImage2.onload = function () {
            var preloadImage3 = new Image();
            preloadImage3.onload = function () {
                var preloadImage4 = new Image();
                preloadImage4.onload = function () {
                    var preloadImage5 = new Image();
                    preloadImage5.onload = function () {
                        EagActiveBanner.banner2_width = preloadImage5.width;
                        EagActiveBanner.banner2_height = preloadImage5.height;
                        bannerAnimation();
                    }
                    preloadImage5.src = EagActiveBanner.detailBannerImage;
                }
                preloadImage4.src = EagActiveBanner.teaserBannerGlow;
            }
            preloadImage3.src = EagActiveBanner.teaserBannerImage3;
        }
        preloadImage2.src = EagActiveBanner.teaserBannerImage2;

        EagActiveBanner.banner1_width = preloadImage1.width;
        EagActiveBanner.banner1_height = preloadImage1.height;
    };
    preloadImage1.src = EagActiveBanner.teaserBannerImage1;


});