var resizeBgImage = function() {
    var elem = $('#bgImage');
    var opaque = $('#opaque');
    var rate =  1024/768;


    $(elem).css({
        'width': $(window).width(),
        'height': $(window).width() * (1/rate)
    });

    $(opaque).css({
        'width': $(window).width(),
        'height': $(window).height()
    });

};

var tileAnimation = function() {
    var bodyOverflow = $('body').css('overflow');
    $("body").css({'overflow': 'hidden'});

    var r = Math.round(Math.random(999)*1);
    var sign = r ? -1 : 1;

    var tWrap = $('<div>').attr({
        'id': 'tlWrap'
    }).css({
        'width': $(window).width(),
        'height': $(window).height()-2
    }).appendTo($('body')[0]);

    var hCount = parseInt($(tWrap).width() / 250);
    var vCount = parseInt($(tWrap).width() / 254);

    for (var i = 0; i < vCount; i++) {
        for (var k = 0; k < hCount; k++) {
            var tile = $('<div>').css({'left': hCount*250, 'top': vCount*254 }).attr({'class': 'tile', 'id': 'tile-' + k + "-" + i }).appendTo($(tWrap));
        };
    };

    var animVector = Math.round(Math.random(999)*3);
    switch(animVector) {
        case 0:
            $(tWrap).css({'top': -1 * $(window).height() }).animate({'top': $(window).height()}, 2000);
            $('#content').css({opacity:1});
            break;
        case 1:
            $(tWrap).css({'top': 1 * $(window).height() }).animate({'top': -1 * $(window).height()}, 2000);
            $('#content').css({opacity:1});
            break;
        case 2:
            $(tWrap).css({'left': 1 * $(window).width() }).animate({'left': -1 * $(window).height()}, 2000);
            $('#content').css({opacity:1});
            break;
        case 3:
            $(tWrap).css({'left': -1 * $(window).width() }).animate({'left': 1 * $(window).height()}, 1500);
            $('#content').css({opacity:1});
            break;
        default:
            $('#content').css({opacity:1});
            break;
    }

    $.each($('.tile'), function(k, v) {
        $(this).stop().animate({'opacity': .8, 'width': 250, 'height': 254}, 750, 'linear', function() {
            $(this).animate({'opacity': 0, 'top': (sign * 254), 'left': (sign * 200) }, 750, 'swing', function() {
                $('#tlWrap').addClass('hidden');
                $("body").css({'overflow': bodyOverflow});
            });
        });
    });
};

var animate = function() {
    var bodyOverflow = $('body').css('overflow');
    $('#bg').css({'display': 'block', top:-2000, opacity:0 }).animate({opacity:1, top: 0 }, 500);
    $('#navigation').css({position:'absolute', opacity:0, left:-200}).animate({opacity:1, left:0}, 500);
    $('#content').css({opacity:0}).animate({opacity:1}, 1250, function() {
        $("body").css({'overflow': bodyOverflow});
    });
}

var setBackground = function(bg, color) {
    var selectedItem = $('#navigation li.active a').attr('rel');
    var loc = window.location.pathname;
    loc = loc.substring(1, loc.length-1).split("/");
    selectedItem = selectedItem ? selectedItem : (loc[0] ? loc[0] : 'home');

    var bg = bg !='' ? bg : '/static/uploads/backgrounds/bg-base_background.jpg'

    $('<div>').attr({'id': 'bg', 'class': selectedItem}).html($('<img>').attr({
            'id': 'bgImage',
            'src': bg
        })).appendTo($('body')[0]);

    $('body').addClass(selectedItem);

    if (selectedItem != 'home') {
        $('<div>').attr({
            'id': 'opaque'
        }).appendTo($('body')[0]).css({'background-color': color, 'display': 'block', top:2000, opacity:0 }).animate({top:138, opacity:.5}, 600);
    }

    loc[1] ? $('#bg').addClass(loc[1]) : void(0);

    $('#bg').css({'display': 'block', top:-2000, opacity:0 }).animate({opacity:1, top: 0 }, 500);
    $('#navigation').css({position:'absolute', opacity:0, left:-200}).animate({opacity:1, left:0}, 500);
    $('#content').css({opacity:0}).animate({opacity:1}, 1250, function() {
        $("body").css({'overflow': 'auto'});
    });

    animate();
    resizeBgImage();
};

$(document).ready(function() {
    animate();
    var rnum = Math.round(Math.random(999)*10);
    setTimeout(function() {
        tileAnimation();
    }, rnum * 1000);
});

$(window).resize(function() {
    resizeBgImage();
});