/**
 * @author Tim
 */
///
///Globale Variablen
///
var pause = 500;
var speed = 1000;
var boxes_count = 0;
var window_width = 0;
var box_width = 0;
var bigbox_width = 0;
var bigbox_height = 0;
var row_boxes_count = 0;
var col_boxes_count = 0;
var rest_window_space = 0;
var col_height = new Array();
var margin = 20; //Shadow
var Pos_X = new Array2D(100,100);
var Pos_Y = new Array2D(100,100);
var big_div_closed = false;
var largest_index = 0;
var bigbox_posX = 0;
var bigbox_posY = 0;
var correct_position_boxes = false;
var correct_position_outerbox = false;
var correct_position_bigbox = false;
var windowHeight = 0;
function Array2D(x,y)
{
    this.items = new Array(x);
    for(i=0;i<y;i++){this.items[i] = new Array(y);}
}
function col_height_init(){
    for (i = 0; i < row_boxes_count; i++) {
        col_height[i] = 0;
    }
}
$(document).ready(function(){    
    //boxes loader
    load_boxes();
    
    window.onresize = wait;
    window.onscroll = scrollPos;
});
function wait(){
    setTimeout(function(){init_boxes(false);},pause);
}
function hide_bluescreen(){
    $('#bluescreen').fadeOut(1000);
}
function set_bluebox_position(){
    space_calculation();
    $('#outer-wrapper').css('marginLeft', (rest_window_space/2));
}
function load_boxes(){
    //get numer of boxes
    boxes_count = $('div[id^="box"]').size();
    $('#outer-wrapper').find('img').batchImageLoad({
        loadingCompleteCallback: function(){
            init_boxes(true);
        }
    });
}
function space_calculation(){
    //get width of window
    window_width = $(window).width();
    
    //calculate the rest of window space
    calculate_rest_space(boxes_count, window_width);
}
function init_boxes(isStart){
    space_calculation();
    
    calculate_boxes_position();
    
    if (!big_div_closed) {
        calculate_bigbox_position();
    }
    
    set_boxes_position(isStart);
}
function calculate_rest_space(boxes_count, window_width){
    windowHeight = $(window).height();
    box_width = $('.boxes').width() + margin; //because of shadow
    row_boxes_count = window_width/ box_width; 
    row_boxes_count = Math.floor(row_boxes_count);
    if (row_boxes_count < 4) {
        rest_window_space = 0;
        row_boxes_count = 4;
    }
    else {
        if (row_boxes_count > boxes_count)
            row_boxes_count = boxes_count;
        rest_window_space = window_width - (box_width * row_boxes_count);
    }
    col_boxes_count = Math.ceil(boxes_count/row_boxes_count);
    $('#outer-wrapper').width(window_width - rest_window_space);
    $.cookie("marginLeft", (rest_window_space/2));
}
function calculate_boxes_position(){
    if (row_boxes_count > 3) {
        correct_position_boxes = false;
        correct_position_outerbox = false;
        correct_position_bigbox = false;
        //initial col_height
        col_height_init();
        
        //get positions of boxes
        for (row = 0; row < col_boxes_count; row++) {
            for (col = 0; col < row_boxes_count; col++) {
                var id = (row * row_boxes_count) + col + 1;
                if (id <= boxes_count) {
                    if ($('#box' + id).css('display') != "none") {
                        col_height[col] += $('#box' + id).height();
                    }
                    
                    //X-Position Div
                    Pos_X.items[col][row] = col * box_width;
                    
                    //Y-Position Div
                    if (row > 0) {
                        if ($('#box' + (id - row_boxes_count)).css('display') == "none") {
                            Pos_Y.items[col][row] = Pos_Y.items[col][row - 1];
                        }
                        else {
                            Pos_Y.items[col][row] = Pos_Y.items[col][row - 1] + $('#box' + (id - row_boxes_count)).height();
                        }
                    }
                    else {
                        if (!big_div_closed) {
                            if (col >= 1 && !(col > 3)) {
                                Pos_Y.items[col][row] = $('#bigbox').height();
                            }
                            else {
                                Pos_Y.items[col][row] = 0;
                            }
                        }
                        else {
                            if (col == 1) {
                                Pos_Y.items[col][row] = $('#bigbox').height();
                            }
                            else {
                                Pos_Y.items[col][row] = 0;
                            }
                        }
                    }
                }
            }
        }
        if (!big_div_closed) {
            //Get the largest block
            largest_index = 0;
            var largest_block = 0;
            for (i = 0; i < col_height.length; i++) {
                if (i >= 1 && !(i > 3)) {
                    col_height[i] += $('#bigbox').height();
                }
                if (largest_block < col_height[i]) {
                    largest_block = col_height[i];
                    largest_index = i;
                }
            }
        }
        else {
            //Get the largest block
            largest_index = 0;
            var largest_block = 0;
            for (i = 0; i < col_height.length; i++) {
                if (i == 1) {
                    col_height[i] += $('#bigbox').height();
                }
                if (largest_block < col_height[i]) {
                    largest_block = col_height[i];
                    largest_index = i;
                }
            }
        }
        $('#outer-wrapper').height(col_height[largest_index] + 50);
    }
}
function calculate_bigbox_position(){
    bigbox_posX = Pos_X.items[0][0] + box_width;
    bigbox_posY = 0;
    bigbox_width = $('.bigbox').width();
    bigbox_height = $('.bigbox').height();
}
function set_boxes_position(isStart){
    if (!correct_position_boxes || !correct_position_outerbox || !correct_position_bigbox) {
        for (row = 0; row < col_boxes_count; row++) {
            for (col = 0; col < row_boxes_count; col++) {
                var id = (row * row_boxes_count) + col + 1;
                if (id <= boxes_count) {
                        /*var Current_X = $('#box' + id).position().left;
                        var Current_Y = $('#box' + id).position().top;
                        var Current_Margin = $('#outer-wrapper').css('marginLeft');
                        Diferenz_X = (Pos_X.items[spalte][zeile] - Current_X);
                        Diferenz_Y = (Pos_Y.items[spalte][zeile] - Current_Y);
                        Diferenz_Margin = ((rest/2) - Current_Margin);
                        Current_X += Diferenz_X / (count);
                        Current_Y += Diferenz_Y / (count);
                        Current_Margin += Diferenz_Margin / (count);
                        document.getElementById("box" + box).style.left =  Current_X + "px"; 
                        document.getElementById("box" + box).style.top = Current_Y + "px";
                        document.getElementById("outer-wrapper").style.marginLeft = Current_Margin + "px";*/
                        
                        $('#box' + id).animate({left: Pos_X.items[col][row], top: Pos_Y.items[col][row]}, speed, function(){
                            if (id = boxes_count) {
                                correct_position_boxes = true;
                            }
                        });
                }
            }
        }
        $('#outer-wrapper').animate({marginLeft: (rest_window_space/2)}, speed, function(){correct_position_outerbox = true;});
        if (!big_div_closed) {
            /*
            Big_X = parseInt(document.getElementById("bigbox").style.left);
            Big_Y = parseInt(document.getElementById("bigbox").style.top);
            Big_Diff_X = PosX - Big_X;
            Big_Diff_Y = PosY - Big_Y;
            Big_X += Big_Diff_X / count;
            Big_Y += Big_Diff_Y / count;
            
            document.getElementById("bigbox").style.left =  Big_X + "px"; 
            document.getElementById("bigbox").style.top = Big_Y + "px";
            document.getElementById("bigbox").style.display = "block";
            */
            
            $('#bigbox').animate({left: bigbox_posX, top: bigbox_posY}, speed, function(){
                correct_position_bigbox = true;
                if (correct_position_boxes && correct_position_outerbox && correct_position_bigbox && isStart){
                    hide_bluescreen();
                }
            });
        }
    }
}
function Close_Big(){
    
    $('#bigbox div').eq(0).attr('class', 'boxes');
    $('#bigbox img').eq(0).attr('class', 'shadow_left');
    $('#bigbox img').eq(1).attr('class', 'shadow_right');
    $('#bigbox img').eq(2).attr('class', 'shadow_up');
    $('#bigbox img').eq(3).attr('class', 'shadow_down');
    $('#thetext').css('display', 'block');
    $('#close').css('display', 'none');
    big_div_closed = true;
    calculate_boxes_position();
    set_boxes_position();
    
}
function scrollPos(){
    
    var scrollPos = $(window).scrollTop();
    var scrollBottom = scrollPos + windowHeight;
    var Diff_Scroll_Bottom = (col_height[largest_index]) - windowHeight;
    var Diff_Block = new Array();
    var plus_top = new Array();
    
    for(i = 0; i < row_boxes_count; i++){
        if (i != largest_index) {
            
            Diff_Block[i] = (col_height[largest_index]) - (col_height[i]);
            if (scrollBottom < (col_height[largest_index])) {
                plus_top[i] = (scrollBottom - windowHeight) * Diff_Block[i] / Diff_Scroll_Bottom;
                for (j = 0; j < col_boxes_count; j++) {
                    id = (j * row_boxes_count) + i + 1;
                    if (id <= boxes_count) {
                            if (big_div_closed) {
                                if (id == 2) {
                                    $('#bigbox').css('top', (Pos_Y.items[i][j] + plus_top[i] - $('#bigbox').height()));
                                }
                            }
                            $('#box' + id).css('top', (Pos_Y.items[i][j] + plus_top[i]));
                    }
                }
            }
            else{
                for (j = 0; j < col_boxes_count; j++) {
                    id = (j * row_boxes_count) + i + 1;
                    if (id <= boxes_count) {
                            if (big_div_closed) {
                                if (id == 2) {
                                    $('#bigbox').css('top', (Pos_Y.items[i][j] + Diff_Block[i] - $('#bigbox').height()));
                                }
                            }
                            $('#box' + id).css('top', (Pos_Y.items[i][j] + Diff_Block[i]));
                    }
                }
            }
        }
    }
}