var Footer = {

	expanded:false,
	
	initialize: function() {
		
		// initialize footer varialbles & object
		var _self = this,
			timeout,
			ie = $(document.body).attr('class').indexOf('IE') > -1;
		this.body = $('body');
		this.win = $(window);
		this.doc = $(document);
		this.header = $('#headerWrapper');
		this.footer = $('#footer-holder');
		this.footerNav = $('#footer');
		this.hero = $('.dc_frontpage #heroCta');
		this.content = $('#content, #contentWrap');
		
		// home conditions - the home page uses absolute positioning
		// for the header to allow for flexibility in the animations
		this.isHome = $(document.body).hasClass('dc_frontpage');
		if(this.isHome && !ie) {
			var hidden = {'opacity': 0, 'visibility': 'visible'};
			this.hero.css({'opacity': 0, 'visibility': 'visible'});
			this.content.hide();
			this.content.fadeIn(2000);
			$('#footer-holder').css('visibility', 'visible');
		}
		
		// starting position of the hero container
		var initialPos = this.positions();
		
		// only home should have a footer animation on load
		if (this.isHome) {
			
			// // ensure the user is looking at the top of the page
			$('html, body').scrollTop(0);
			
			if(ie) {
				var show = {'opacity': 1, 'visibility': 'visible'};
				_self.hero.css({'opacity': 1, 'visibility': 'visible'});
				_self.content.css({'opacity': 1, 'visibility': 'visible'});
				_self.refresh();
				_self.footer.css('visibility', 'visible');
			} else {
				this.hero.css({'min-height': initialPos.minHeroHeight});
				timeout = setTimeout(function () {
					timeout = null;
					// fade in the content so that you can see the full image
					_self.hero.animate({'opacity': 1}, 1500);
					_self.content.animate({'opacity': 1}, 1500, function() {
						_self.footer.css('visibility', 'visible');
					});
				}, 2000);
			}
		} else {
			_self.expanded = false;
		}	
		Footer.reposition();
		
		// bind resize event to maintain sizing
		$(window).resize(function() {
			if (timeout) {
				clearTimeout(timeout);
			} else {
				Footer.reposition(true);
			}
			return false;
		});
		
		// simple toggle
		$('#showMorePhotoButton').click(function () {
			_self.expanded ? _self.contract() : _self.expand();
		});
		
		// some hover action to play nice with cufon
		$('#showMorePhotoButton').hover(function () {
			$(this).addClass('hover');
			Cufon.replace('.hero-detail-viewmore.helvetica');
		}, function () {
			$(this).removeClass('hover');
			Cufon.replace('.hero-detail-viewmore.helvetica');
		});
	},
	
	expand:function () {
		
		// push the footer, content below the fold on expand
		var _self = this;
		
		// toggle the show more / show less text
		var html = '<span>Show less photo</span>';
		$('#showMorePhotoButton').html(html);
		$('#showMorePhotoButton').addClass('expanded');
		
		// render cufon
		Footer.refresh();
		
		var pos = this.positions();
		
		// reset the scroll height
		pos.newHeroHeight += Number($(window).scrollTop());
		
		// set state
		_self.expanded = true;
		
		// position the footer
		_self.hero.animate({height:pos.newHeroHeight}, 1000, 'easeInOutExpo');
		
		// scroll the page to the top
		$('html, body').animate({scrollTop: 0}, 1000);
		
		// readjust footer
		Footer.reposition();
		
	},
	
	contract: function (instantly) {
		var _self = this;
		var html = '<span>Show more photo</span>';
		$('#showMorePhotoButton').html(html);
		$('#showMorePhotoButton').removeClass('expanded');
		Footer.refresh();
		_self.expanded = false;
		var pos = _self.positions();
		if(instantly) {
			_self.hero.height(pos.newHeroHeight);
		} else {
			_self.hero.animate({height:pos.newHeroHeight}, 1000, 'easeInOutExpo');
		}
	},
	
	refresh: function () {
		Cufon.replace('.helvetica');
	},
	
	positions: function() {
		var pos = {};

		// extra bottom margin below callouts
		pos.heroMarginBottom = 10;
		
		// height of #headerWrapper
		pos.headerHeight = this.header.outerHeight(true);
		
		// container heights
		pos.docHeight = this.doc.height();
		pos.winHeight = this.win.height();
		
		// the minimum ammount of content that can be seen on non homepage load
		var subPageMinContent = 395;
		
		// min height for hero area
		pos.minHeroHeight = this.isHome ? 290 : pos.winHeight - subPageMinContent;
		
		// home should add a margin for 
		if(this.isHome) {
			var homeHeroTopMargin = 200;
			pos.minHeroHeight += homeHeroTopMargin;
		}
		pos.minBodyHeight = 270 + pos.minHeroHeight;
		pos.minFullHeight = 590 + pos.minBodyHeight;
		
		// misc containers
		pos.footerHeight = this.footer.outerHeight(true);
		pos.heroHeight = this.hero.outerHeight(true);
		pos.contentHeight = this.content.outerHeight(true);
		pos.mainHeight = pos.minHeroHeight + pos.contentHeight + pos.headerHeight;
		
		// the homepage shouldn't use the header to calculate anything
		if(this.isHome) {
			pos.mainHeight = pos.minHeroHeight + pos.contentHeight;
		}
		
		// the total height of page contents
		pos.siteHeight = pos.mainHeight + pos.footerHeight;
		
		// the new height we are trying to figure out, defaulted to the min height
		pos.newHeroHeight = pos.minHeroHeight;
		
		// make sure the content is pinned to the bottom
		if (pos.mainHeight < pos.winHeight) {
			pos.newHeroHeight += pos.winHeight - pos.mainHeight;
		}
		
		// determine the new hero height if it is opened, below the fold
		if ( this.expanded ) {
			pos.newHeroHeight = pos.winHeight;
			if(!this.isHome) {
				pos.newHeroHeight -= pos.headerHeight;
			}
		}
		
		// remove some area so that there is a margin at the bottom of the page
		pos.newHeroHeight -= 40;
		//pos.heroMarginBottom ;
		
		var largeScreen = 850;

		if(pos.winHeight > largeScreen) {
			this.hero.css({
				height: (pos.newHeroHeight -= pos.headerHeight)
			});
			//pos.newHeroHeight -= pos.footerHeight;
		}

		return pos;
	},
	
	reposition: function(instantly) {
		var _self = this,
			pos = _self.positions();
		

		// do not reposition when a user is scrolled away from the header on the page
		if(!this.expanded && !this.isHome && $(window).scrollTop() > 400) {
			return;
		}

		this.hero.stop(true, false);
		
		if(instantly) {
			this.hero.css({height:pos.newHeroHeight});
		} else {
			this.hero.animate({height:(pos.newHeroHeight)});
		}
	}
};

$(function (){
	Footer.initialize();
});