AngularJS: Page Layout Directive

gistfile1.js

Scst.directive('pageLayout', [function(){
	var linkFn;

	// set .main height
	function mainHeight() {
		console.log('setting mainHeight');
		var padding = parseInt( $('.main').css('paddingTop'), 10) + parseInt( $('.main').css('paddingBottom'), 10);
		console.log($('.site-header') );
		console.log("heights: ", $(window).height(), $('.site-header').height(), padding );
		$('.main').height( $(window).height() - $('.site-header').height() - padding );
	}
	// set .main width
	function mainWidth() {
		console.log('setting mainWidth');
		$('.main').each(function(e) {
			var stageCount = $('.stage', this).length;

			// exit if we only have 1 element.
			if ( stageCount <= 1 && $('#_form-wrapper').length ) return this;
			// otherwise proceed.
			$('.stage', this).each(function(e) {
				$(this).css('width', 100 / stageCount + '%');
			});
			$('#_form-wrapper').css({
				'width': 100 * stageCount + '%',
				'height': '100%'
			});
		});
	}
	// set tag-collection and .tags height
	function tagsHeight() {
		if ( $('.tag-collection, .tags').length ) {
			$('.tag-collection, .tags').each(function(e) {
				var $c = $(this),
						$stage = $c.closest('.stage'),
						padding = parseInt( $stage.css('paddingTop') , 10) + parseInt( $stage.css('paddingBottom'), 10),
						headerHeight = $('header', $stage).outerHeight(true),
						offset = padding + headerHeight;

				$c.height( $stage.outerHeight() - offset );
			});
		}
	}

	return {
		restrict: "A",
		link: function(scope, elm, attrs) {
			var $w = $(window);

			console.log( 'Site Header:', $('.site-header') );

			$w.on({
				'resize': function(e) {
					$w.triggerHandler('size.layout');
				},
				'size.layout': function(e) {
					mainHeight();
					mainWidth();

					tagsHeight();
				}
			}).triggerHandler('size.layout');
			// The initial triggerHandler that should setup the page
			// returns an empty Site Header: [] log where the DOM 
			// element should be.
			
		}
	}
}]);