jQuery(document).ready(function () {
    setup_frame();

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

function setup_frame() {
    var viewport_width = jQuery(window).width() - 48;
    var viewport_height = jQuery(window).height() - 55;

    var width = 960;
    var height = 600;
    var max_width = 1376;
    var max_height = 732;

    t = true;
    while(t) {
        if(width <= viewport_width && height <= viewport_height && width <= max_width && height <= max_height) {
            width += 8;
            height += 5;
        } else {
            t = false;
        }
    }

    var border_width = width;
    var border_height = height;
    var main_width = border_width - 114;
    var main_height = Math.floor(main_width / 2);
    var header_height = Math.floor((border_height - 25 - main_height) / 2);
    var header_width = border_width;
    var footer_height = border_height - 25 - header_height - main_height;
    var footer_width = border_width;
    var content_width = main_width;
    var content_height = Math.floor(content_width / 2.4);
    var navigation_height = main_height - content_height;
    var navigation_width = content_width;
    var image_height = content_height;
    var image_width = Math.ceil(image_height * 0.8);

    var container = jQuery("#container");
    var header = container.find("#header");
    var main = container.find("#main");
    var content = main.find('#content');
    var navigation = main.find('#navigation');

    container.css({'width' : border_width, 'height' : border_height})
    header.css({'height' : header_height, 'width' : header_width});
    main.css({'height' : main_height, 'width' : main_width});
    container.find("#footer").css({'height' : footer_height, 'width' : footer_width});
    content.css({'width' : content_width, 'height' : content_height});
    content.find("ul.thumbs li, ul.thumbs li img").css({'width' : Math.ceil((image_width-2)), 'height' : (image_height)});
    navigation.css({'height' : navigation_height, 'width' : navigation_width});
    navigation.find("li").css({'line-height' : navigation_height + 'px'});
    navigation.find("#center-menu").css({'height' : navigation_height + 'px'});
    navigation.find('.pagination').css({'padding-top' : ((navigation_height - 8) / 2)});
    container.show();
}