// Elements
var $content = $('#content');
var $header = $('#header');
var $footer = $('#footer');

var $a = $('.a');
var $b = $('.b');
var $resp = $('img.resp');
var $art = $('.article');

checkViews(); // first resize
//setTimeout(checkViews,500); // fallback for if fonts load slowly
$(window).resize(checkViews);

function checkViews()
{
    // Size variables
    var wSize = { w : window.innerWidth || document.documentElement.clientWidth, h : window.innerHeight || document.documentElement.clientHeight };
    var view = parseInt($('#view').width());

    switch(view)
    {
        // View 1
        case 1:
            // Set content height equal to the browsers height minus the height of the header
            var fullHeight = wSize.h - $header.height() - $footer.outerHeight();
            $content.height(fullHeight);
            $a.height(fullHeight);
            $b.height(fullHeight);
            $art.height(fullHeight);
            resizeBlocks();

            $resp.attr('src',$(this).attr('data-large'));
            $resp.one('load', function(){
                resizeImages();
            }).each(function() { if(this.complete) $(this).load(); });

            break;

        // View 2
        case 2:
            $content.height('auto');

            // Homepage
            $a.height('auto');
            var aH = Math.round($a.outerHeight());
            $b.height(aH);
            $art.height('auto');

            resizeBlocks();

            $resp.attr('src',$(this).attr('data-small'));
            $resp.one('load', function(){
                resizeImages();
            }).each(function() { if(this.complete) $(this).load(); });

            break;

        // View 3
        case 3:
            $content.height('auto');
            $a.height('auto');
            $b.height('50em');
            $art.height('auto');

            $resp.attr('src',$(this).attr('data-small'));
            $resp.one('load', function(){
                resizeImages();
            }).each(function() { if(this.complete) $(this).load(); });

            resizeBlocks();
    }
}

/* Let all responsive blocks center in their containers */
function resizeBlocks()
{
    $('div.respH').each(function()
    {
        var h = $(this).height();
        $(this).css({ marginTop : h / -2 +'px' })
    });
}