var minScreenSize = { width: 950, height: 600 };
var layoutMode = "box";
var zmax = 0;

function centerBoxes() {
    $("#boxes").verticalCenter({
        minH: 400,
        maxH: 400,
        offsetTop:70,
        offsetBot:0     
    });         
}

var boxGrid = [
    {
        start: { x: 1267, y: -78 },
        end: { x: 400, y: -78 },
        direction: cardinals.south
    },
    {
        start: { x: 448, y: -1004 },
        end: { x: 248, y: 200 },
        direction: cardinals.north
    },
    {
        start:{x:725,y:1177},
        end:{x:625,y:177},
        direction: cardinals.east
    },
    {
        start:{x:-1000,y:60},
        end:{x:-15,y:30},
        direction: cardinals.west
    }
];

$(window).resize(centerBoxes);

// wait for background image to load
$(document).bind('backgroundLoaded', function(){
    
    // initialize the page
    $('div.landing-container').fadeIn(500);
    $('div.loading-container').fadeOut(500);
    
    $(".movebox").draggable({
        stack: { group: '.movebox', min: 1003 },
        handle: '.movebox-title'
    });
    
    // setup the dynamic arrange on the boxes, init the slide show at the end of each element's animation
    $('#boxes').dynamicArrange(boxGrid,'box-','div.movebox-content *', minScreenSize);            
    
    $('div.movebox').click(function() {
        $(this).siblings('div.movebox').each(function() {
            zmax = Math.max(zmax, $(this).css('zIndex'));
        });
        $(this).css('zIndex', zmax+1);                
    });
    
    centerBoxes();
    
})