WS.Event.addEvent(window, 'load', function() {
	// Service navigation toggler // Voor SEO??
	var serviceNav = new Toggler();
	serviceNav.initialize();

	// YouTube player
	// In IE this triggers some errors
	ytfr = new YTFeedReader('ytplayer', {
		videoId: 'V_x56-wSouU',
		autoplay: false,
		width: 208,
		height: 158,
		playStart: function(p) {
			interval = setInterval(function() {
				$('elapsed-bar').style.width = Math.round((100 * p.getCurrentTime()) / p.getDuration()) + '%';
				WS.setText('current-time', WS.Util.secondsToMinutes(Math.round(p.getCurrentTime())));
			}, 1000);
		},
		stateChangeCallback: function(s) {
			if(s === 0) {
				WS.addClass($('player-wrap'), 'paused');
				$('elapsed-bar').style.width = '100%';
				clearInterval(interval);
			}
			if(s === 1) {
				WS.removeClass($('player-wrap'), 'paused');
			}
			else {
				WS.addClass($('player-wrap'), 'paused')
			}
		}
	});
	WS.Event.addEvent($('toggle-play'), 'click', function(e) {
		WS.Event.stopEvent(e);
		ytfr.togglePlay();
	});

	// tabs / visual / timeline / animations
	
	document.body.className = 'js-enabled';
	var ts = $('milestones');
	var w  = $('timeline');

	// Tabs, Link-steppers, Scroll-views
	var tabs   = new TabbedPanel(ts);
	var ls     = new LinkStepper(ts);
	var visual = new HScrollView(w, $('visual'));
	var timeln = new HScrollView(w, ts);
	var slider = new Slider($('timeline-scrollbar'), 0, 0, 1);

	// bind buttons to link-stepper
	$('visual-next').onclick = function(){ls.next();};
	$('visual-prev').onclick = function(){ls.prev();};
	$('tabs-next').onclick = function(){ls.next();};
	$('tabs-prev').onclick = function(){ls.prev();};

	// Scrollbar events
	slider.onchange = function(evt){
		timeln.scrollToPosition(evt.value);
	}
	slider.onchanged = function(evt){
		var l = ls.anchors.length-1;
		var p = Math.round(evt.value*l)
		var a = ls.anchors[p];
		a.onclick();
	}

	// Tabbed panel events
	var visual_anim = new uAnim();
	var slider_anim = new uAnim();
	var timeln_anim = new uAnim();
	
	$('company-select').onchange = function() {
		var index = this.selectedIndex;
		$('milestones').getElementsByTagName('a')[index].onclick();
	};

	tabs.onselect = function(evt){
		if(evt.index != ls._getPosition()) {
			ytfr.cueVideoById(evt.anchor.rel.substring(7));
		}
		
		ls._setPosition(evt.index);
		var l = ls.anchors.length-1;
		var goal = evt.index/l;
		
		visual_anim.start(visual.position, goal, 900, function(p){visual.scrollToPosition(p)});
		slider_anim.start(slider.value   , goal, 300, function(p){slider.setValue(p)});
		timeln_anim.start(timeln.position, goal, 140, function(p){timeln.scrollToPosition(p)});
		
		$('company-select').selectedIndex = evt.index;
	}

	/*
	// Disabled for now.. Using a fragment identifier in the url scrolls to the fragment.
	Scrolling back before animating the timeline looks bad.
	window.scrollTo(0,0);
	if(tabs.selected) window.setTimeout(tabs.selected.onclick, 200);
	*/
});