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

var $a = $('.a');
var $b = $('.b');
var $c = $('.c');
var $submenu = $('.bottom_menu');
var $article =  $('.article');

var $resp = $('img.resp');

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);
            //$c.height(fullHeight);

            // Keystud submenu
            var y = $article.offset().top + $article.outerHeight();
            $submenu.height('auto');
            if($submenu.offset().top < y - 5)
            {
                $submenu.css({ position : 'relative'})
            }
            else if($submenu.offset().top + $submenu.outerHeight() < wSize.h - $footer.outerHeight())
            {
                $submenu.css({ position : 'absolute'})
            }

            // Check height of b
            if($submenu.css('position') != 'absolute')
            {
                var staticH = $article.outerHeight() + $submenu.outerHeight() + $footer.outerHeight();
                $a.height(staticH);
                $b.height(staticH);
                $c.height(staticH);
                $content.height(staticH);
            }
            else
            {
                $b.height(fullHeight);
                $c.height(fullHeight);
            }

            // Image
            $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());
            $submenu.height(aH);

            var bH = wSize.h - $header.outerHeight() - $a.outerHeight() - $footer.outerHeight();
            if(bH < aH) bH = aH;
            $b.height(bH);
            $c.height(bH);

            $submenu.css({ position : 'relative'});

            $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');
            $submenu.height('auto');
            $submenu.css({ position : 'relative'});

            var sH = Math.round($submenu.outerHeight());
            var bH = wSize.h - $header.outerHeight() - $a.outerHeight();
            if(bH < sH) bH = sH;
            $b.height(bH);
            $c.height(bH);

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

    }
    // Always
    resizeImages();
}