jQuery(function ($) {

    var top = $('.top');
    var bottom = $('#footer');
    var stickyTop = $('.sticky.to-top');
    var stickyBottom = $('.sticky.to-bottom');
    var statue = stickyBottom.find('img');
    var sideNav = $('.side .navigation');

    // make sure there is enough room for image. Webkit browsers set height after
    // load so must bind on event
    statue.load(function () {
        $('.page').css({
          'min-height': statue.height() + sideNav.height()
        });
    }).load(); // trigger in honour of firefox (and maybe others)

    function distanceToBottom(e) {
        var t = e.offset().top - $(window).scrollTop();
        return $(window).height() - e.height() - t;
    }

	    $(window).scroll(function () {
	        if ($.abovethetop(top, { threshold: 0 })) {
	            stickyTop.css({
	                position: 'fixed'
	            });
	        } else {
	            stickyTop.css({
	                position: 'absolute'
	            });
	        }
	        /*
	        if ($.belowthefold(bottom, { threshold: 0 }) && distanceToBottom(sideNav) > statue.height()) {
	            stickyBottom.css({
	                position: 'fixed'
	            });
	        } else {
	            stickyBottom.css({
	                position: 'absolute'
	            });
	        }
	        */
	    }).scroll(); // can't really figure out if this is necessary, but it's hardly costly...
});