(function($){
	$(document).ready(function() {
							   
		// define the container
		var fc = $('#fallen_container');
		// get height
		fc.parent().height(fc.height());
		// define the footer for keeping an overlap at the bottom
		var footer = $('#footer');
		// when the window scrolls, execute a function.
		var offset;
		$(window).scroll(function () {
			if (!fc.hasClass('fixed')) {
				// define the offset of the container.
				offset = fc.offset();
			}
			// set a variable with the position of the top of the aperture.
			var scrollTop = $(window).scrollTop();
			// footer position
			var footerTop = footer.offset().top;
			// container pos + height
			var containerBottom = fc.height() + scrollTop;
			// if the window hits the footer, stop it...
			/*if (containerBottom >= footerTop) {
				fc.css({
					position: 'absolute',
					top: footerTop - fc.height()
				});
			// if the window aperture passes the top of the div containing the faces ...
			} else*/ if (offset.top < scrollTop) {
				// ... add the class 'fixed' to the div.
				fc.addClass('fixed');
			} else {
				// ... otherwise, get rid of the class.
				fc.removeClass('fixed');
			}
		});  
		
		$('.bar_chart a').hover(function(){
            var thisClass = $(this).attr('class');
            thisClass = '#fallen_container a.'+thisClass;
            $(thisClass).addClass('hover')
        },function(){
            var thisClass = $(this).attr('class');
            thisClass = '#fallen_container a.'+thisClass;
            $(thisClass).removeClass('hover')
        });

	});
})(jQuery);