function startMission()
{
    // Runs over each column in the first row and sets the width for the columns below
    var n = 0;
    $('.cards-container .cards-row:first .cards-col').each(function(){
        var w = $(this).width();

        // Change the width for every column in each row
        n = n + 1;
        $('.cards-container .cards-row .cards-col.col'+n).each(function(){
            $(this).width(w);
        });
    });

    // Adjust height for cards-pack
    $('.cards-col .cards-pack').each(function(){
        var c = $(this).find('.card').length;

        var w = 150 + (c * 30);
        $(this).height(w);

        var t = 0;
        var z = 10;
        $(this).find('.card').each(function(){
            $(this).css('z-index', z);
            $(this).css('top', t+'px');
            t = t + 30;
            z = z - 1;
        });
    });

    $(document).on('mouseover', '.card img', function(e) {
            var src = $(this).attr('src');
            $('#popup-card').html('<img src="' + src + '" />').center().show();
        }).on('mouseover', '.card, #popup-card', function(e) {
            e.stopPropagation();
        }).on('mouseover', 'body', function(e) {
            $('#popup-card').hide();
        });

    // Shows mission page
    $('#history-text').fadeOut(function(){
        $('.cards-container').hide().css('height', 'auto'). fadeIn("slow", function(){
            $('#victory-button'). fadeIn("slow");
            $('#defeat-button'). fadeIn("slow");
        });
    });
}

$(document).ready(function(){
    jQuery.fn.center = function () {
        this.css("position","absolute");
        this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
        this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
        return this;
    }

    $('#history-title').hide();
    $('#history-text').hide();
    $('#history-container').show();

    $('#history-title'). fadeIn("slow", function(){
        $('#history-text'). fadeIn("slow", function(){
            $('#startbattle-button'). fadeIn("slow");
        });
    });

    $(document).on('click', '#startbattle-button', function(){
        startMission();
    });
});

$(window).on("load",function(){
    roller.start();
});

var roller = {
    cont: 1,
    start: function(){
        $('.banner-roller > div').each(function(){
            console.log("roller div " + roller.cont);

            $(this).hide();
            $(this).data('roller', roller.cont);

            roller.cont++;
        });
        roller.cont = 1;

        roller.interval();

        //setInterval(roller.zoom, 5);
        var audio = $('.banner-roller').data('audio');
        $(audio).get(0).play();

    },
    interval: function(){
        var timeout = 0;
        $('.banner-roller > div').each(function(){
            if ($(this).data('roller') == roller.cont)
            {
                //console.log("processing " + roller.cont);
                $('.banner-roller > div').hide();

                $(this).css("position","absolute");
                $(this).css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
                $(this).css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
                //console.log("height " + $(this).outerHeight());
                //console.log("width " + $(this).outerWidth());

                $(this).fadeIn('slow', function(){
                    $(this).css('transform', 'scale(1.3)');
/*                        .css('-moz-transform', 'scale(1.3)')
                        .css('-webkit-transform', 'scale(1.3)')
                        .css('-o-transform', 'scale(1.3)')
                        .css('-ms-transform', 'scale(1.3)');*/
                });

                if ($(this).data('timeout'))
                    timeout = $(this).data('timeout');
            }
        });
        roller.cont++;

        if (timeout != 0)
        {
            console.log("timeout " + timeout);
            setTimeout(roller.interval, timeout);
        }
    }
    /*zoom: function(){
        $('.active-banner').each(function(){
            var currentzoom = $(this).data('zoom');
            if (!currentzoom)
                currentzoom = 1;

            if (currentzoom < 1.5)
                currentzoom = currentzoom + 0.00001;

            $(this).data('zoom', currentzoom).css('zoom', currentzoom);
            $(this).center();
        });
    }*/
};