<!-- intro -->
<div class="detail-intro" data-component="detail-intro">
	<img itemprop="image" class="intro-background" src="/assets/images/bmw-i3/bmw-i3-dashboard.png" alt="BMW i3 dashboard" />
	<section class="intro-content max-width-centered" data-intro-section>
		<article class="intro-text" data-intro-text>
			<header>
				<img class="intro-title-image" src="/assets/images/bmw-i3/bmw-i3-small.png" alt="BMW i3 small" />
				<h1 itemprop="name">
					BMW i3
					<span class="subtitle">Business model 1.5 TDI</span>
				</h1>
			</header>
			<p itemprop="description">
				Introtekst over de nieuwe BMW i3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequa orem psum dolor sit.
			</p>
		</article>
		<!--
		-->
		<div class="widget-score-block">

			<!-- widget-score -->
			<div class="widget-score" data-component="widget-score">
				<div class="score-overview" data-widget-score-overview>
					<header>
						<span class="icon icon-gauge1"></span>
						<span class="score">8,5</span>
						<span class="icon icon-arrow-down" data-score-header-arrow></span>
					</header>
					<ul>

						<li>
							<a href="#uitstraling" tabindex="-1">
								<span class="label">Uitstraling</span>
								<span class="value">4</span>
							</a>
						</li>

						<li>
							<a href="#contrast" tabindex="-1">
								<span class="label">Contrast</span>
								<span class="value">5</span>
							</a>
						</li>

						<li>
							<a href="#focus" tabindex="-1">
								<span class="label">Focus</span>
								<span class="value">4</span>
							</a>
						</li>

						<li>
							<a href="#usability" tabindex="-1">
								<span class="label">Usability</span>
								<span class="value">4</span>
							</a>
						</li>

						<li>
							<a href="#features" tabindex="-1">
								<span class="label">Features</span>
								<span class="value">3</span>
							</a>
						</li>

					</ul>
				</div>
				<div class="score-summary">
					<ul>

						<li><span class="icon icon-plus"></span>De UI is contrastrijk</li>

						<li><span class="icon icon-plus"></span>Hardware knop</li>

					</ul>
					<ul>

						<li><span class="icon icon-min-red"></span>De inputmethode</li>

						<li><span class="icon icon-min-red"></span>Navigatie viel tegen</li>

					</ul>
				</div>
			</div>
			<!-- /widget-score -->

		</div>
		<!--
		-->
		<aside class="social-buttons" data-social-buttons>
			<p>Deze test delen via</p>
			<a target="_blank" href="http://www.facebook.com/sharer.php?s=100&p[url]=http%3A%2F%2Fwww.car-ux.com%2Fbmw-i3-nl%2Fbmw-i3-nl.html&p[title]=Car%20UX%20-%20BMW i3%20Business model 1.5 TDI&p[summary]=Facebook%20-%20share%20text" class="social-button icon-facebook"
			onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=368,width=600');return false;">Facebook</a>
			<a target="_blank" href="http://twitter.com/share?text=Twitter%20-%20share%20text&url=http%3A%2F%2Fwww.car-ux.com%2Fbmw-i3-nl%2Fbmw-i3-nl.html" class="social-button icon-twitter" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=438,width=600');return false;">Twitter</a>
			<a target="_blank" class="social-button icon-gplus" href="https://plus.google.com/share?url=http://www.car-ux.com/bmw-i3-nl/bmw-i3-nl.html" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">Google Plus</a>
		</aside>
	</section>
</div>
<!-- /intro -->

(function(d, w){
	'use strict';

	var introComponentElm = d.querySelector('[data-component="detail-intro"]');
	if (!introComponentElm) {
		return;
	}
	var introTextElm = introComponentElm.querySelector('[data-intro-text]');
	var widgetScoreElm = introComponentElm.querySelector('[data-component="widget-score"]');
	var introSectionElm = introComponentElm.querySelector('[data-intro-section]');
	var socialButtonsElm = introComponentElm.querySelector('[data-social-buttons]');

	// Make the widget height equal to the height of introTextElm
	function equalizeHeight() {
		if (helpers.breakSize !== 'extra-small') {
			introSectionElm.style.height = widgetScoreElm.style.height = (introTextElm.offsetHeight + socialButtonsElm.offsetHeight) + 'px';
			socialButtonsElm.style.marginTop = -(socialButtonsElm.offsetHeight) + 'px';
		} else {
			socialButtonsElm.style.marginTop = introSectionElm.style.height = widgetScoreElm.style.height = '';
		}
	}

	// Fire equalizeHeight debounced on the resize event
	w.addEventListener('resize', debounce(equalizeHeight, 250), false);

	// Make sure all images inside introTextElm are loaded
	w.addEventListener('load', equalizeHeight, false);
}(document, window));