var HeroDetailPanel = {
	
	speed:720,
	
	initialize: function () {
		var _self = this;
		$(window).resize(function () {
			_self.truncate();
		});
	},
	
	update: function (id) {
		if ( !id || !typeof HeroModel ) { return; }
		var hero = HeroModel.getHeroContent(id);
		var t = hero.title;
		var details = hero.details;
		if ( details ) {
			var d = details.description;
			var tags = details.tags;
			var i = 0;
			var l = tags.length;
			var html = '';
			for ( i; i<l; i++ ) {
				var sep = ( i > 0 ) ? " / " : "";
				html += sep + '<a href="'+ tags[i].link +'">'+ tags[i].text +'</a>';
			}
			
			$('#hero-detail-title').html(t);
			$('#hero-detail-body').html(d);
			$('#hero-detail-tags').html(html);
			
			this.description = d;
			this.tags = tags;
			this.title = t;
			
		}
		
		this.truncate();
	},
	
	openDetails: function () {
		$('body').trigger('resize');
		$(window).trigger('resize');
		$('#hero-details, #faux-background, #hotspots').stop(true, true);
		$('#hero-details').animate({left:0}, this.speed, 'easeInOutExpo');
		$('#hotspots, #faux-background').animate({left:360}, this.speed, 'easeInOutExpo');
		$('.ctaContainer .cta').fadeOut();
		this.open = true;
		this.truncate();
	},
	
	closeDetails: function () {
		//$('#hero-details, #faux-background, #hotspots').stop(true, true);
		$('#hero-details').animate({left:-360}, this.speed, 'easeInOutExpo');
		$('#faux-background, #hotspots').animate({left:0}, this.speed, 'easeInOutExpo');
		$('.ctaContainer .cta').fadeIn();
		this.open = false;
	},
	
	truncate: function () {
		if ( this.open ) {
			
			// bottom margin of detail panel
			var MARGIN = 80;
			
			// top should be take into account headerWrapper on homepage
			var top = Footer.isHome
					 ? $('#headerWrapper').outerHeight(true) + $('#hero-detail-title').offset().top
					 : $('#hero-detail-title').offset().top;
			
			var titleHeight = $('#hero-detail-title').outerHeight(true);
			var linkHeight = $('#hero-detail-tags').outerHeight(true);
			var exploreHeight = $('#hero-details h4').outerHeight(true);
			var wh = $(window).height();
			var totalHeight = $('#heroCta').outerHeight(true);
			var th = totalHeight - top;
			var availBodyHeight = th - titleHeight - linkHeight - exploreHeight - $('#heroControls').outerHeight(true) + MARGIN;

			var obj = $('#hero-detail-body');
			obj.text(this.description);
			
			if (obj.outerHeight() > availBodyHeight) {

				while (obj.outerHeight() > availBodyHeight) {
					str = obj.text();
					var lastspace = str.lastIndexOf(' ');
					str = str.substr(0, lastspace);
					obj.text(str + "...");
				}

			}

			$('#hero-details').css({height:wh});
			
		}
	}
};

/*

<div id="hero-details">
	<h3 id="hero-detail-title"></h3>
	<p id="hero-detail-body"></p>
	<h4></h4>
	<div id="hero-detail-tags">
		<a href="#"></a> /
		<a href="#"></a> /
		<a href="#"></a>
	</div>
</div>

*/