<!-- 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 -->

(function(d){
	'use strict';

	var toggleClass = helpers.dom.toggleClass;
	var widgetElms = d.querySelectorAll('[data-component="widget-score"]');

	[].forEach.call([].slice.call(widgetElms), function (widgetElm) {
		var headerElm = widgetElm.querySelector('[data-widget-score-overview]');
		var headerArrow = widgetElm.querySelector('[data-score-header-arrow]');
		headerElm.addEventListener('click', function() {

			var anchors = this.querySelectorAll('a');
			[].forEach.call([].slice.call(anchors), function(anchor) {
				if (anchor.getAttribute('tabindex') === '-1') {
					anchor.setAttribute('tabindex', '0');
				} else {
					anchor.setAttribute('tabindex', '-1');
				}
			});

			toggleClass(this, 'expanded');
			toggleClass(headerArrow, 'icon-arrow-down');
			toggleClass(headerArrow, 'icon-arrow-up');
		});
	});

}(document));