var $jq_noconflict = jQuery.noConflict();

var timeline = {

/* =======================================
	Settings & init
======================================= */

	config: function() {
		this.pxPerDay = 115;
		this.lineHeight = 55;
		this.monthNames = ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'];
		this.specialDates = [''];
		this.specialDatesNames = [''];
		this.firstDate = null;
		this.lastDate = null;
		this.months = null;
	},

	init: function() {
		this.config();
		$jq_noconflict('.timeline .vevent').each(function (i) {
			if (!timeline.firstDate || timeline.toDate($jq_noconflict(this).find('.dtstart').attr('title')) < timeline.firstDate) {
				timeline.firstDate = timeline.toDate($jq_noconflict(this).find('.dtstart').attr('title'));
			}
			if (!timeline.lastDate || timeline.toDate($jq_noconflict(this).find('.dtstart').attr('title')) > timeline.lastDate) {
				timeline.lastDate = timeline.toDate($jq_noconflict(this).find('.dtstart').attr('title'));
			}
		});
		if ($jq_noconflict('.timeline .vevent').length > 0) {
			$jq_noconflict('body').addClass('tl_active');
			$jq_noconflict('.timeline').after(timeline.templates.tlContainer);
			this.renderDays();
			this.renderSpecialDates();
			this.jumpTo(new Date());
		}
		$jq_noconflict('.wrapper').click(function(){
			$jq_noconflict('.tl_event_detail').remove();
		});
	},



/* =======================================
	Render
======================================= */

	renderDays: function() {
		var timespanDays = (this.lastDate - this.firstDate) / 86400000;
		$jq_noconflict('.tl_content').css({
			width: (timespanDays+1) * timeline.pxPerDay
		});
		var ts_start = this.firstDate.getTime();
		var thisDate = new Date(ts_start);
		for (var i=0; i<=timespanDays; i++) {
			var thisDateStr = this.toString(thisDate);
			var weekend = (thisDate.getDay() == 0 || thisDate.getDay() == 6) ? ' weekend' : '';
			var special = jQuery.inArray(thisDateStr, this.specialDates);
			$jq_noconflict('.tl_content').append(
				timeline.templates.tlDay(i, weekend, special, thisDate)
			);
			this.renderEvents(timeline.toString(thisDate), i);
			thisDate.setDate(thisDate.getDate()+1);
		}
		$jq_noconflict('.tl_content').css({
			height: document.getElementById('tl_container').scrollHeight + 30
		});
	},

	renderEvents: function(thisDateStr, day) {
		var n = 0;
		$jq_noconflict('.timeline .vevent').each(function (i) {
			if ($jq_noconflict(this).find('.dtstart').attr('title') == thisDateStr) {
				var self = this;
				$jq_noconflict('.tl_content').append(
					timeline.templates.tlEvent(
						day * timeline.pxPerDay,
						n * (timeline.lineHeight+15) + 45,
						timeline.pxPerDay - 10
					).append(
						timeline.templates.tlEventSummary($jq_noconflict(self).find('.summary').text()).click(function() {
							timeline.showEvent(
								$jq_noconflict(self).find('.summary').text(),
								$jq_noconflict(self).find('.data').text(),
								$jq_noconflict(self).find('.description').html(),
								this.parentNode
							);
							return false;
						})
					)
				);
				n++;
			}
		});
	},

	renderSpecialDates: function() {
		$jq_noconflict('#tl_container').after(timeline.templates.tlSpecial);
		$jq_noconflict('#tl_special').append(
			$jq_noconflict('<li/>').append(
				$jq_noconflict('<a/>').attr('href', '#').text('Vandaag').click(function() {
					timeline.jumpTo(new Date());
					return false;
				})
			)
		);
	},

	showEvent: function(evSummary, evDate, evDescription, eventLink) {
		$jq_noconflict('.tl_event_detail').remove();
		var offset = $jq_noconflict(eventLink).offset();
		$jq_noconflict('body').append(
			timeline.templates.tlEventDetail(offset.top, evSummary, evDate, evDescription).append(
				timeline.templates.closeBtn.click(function(){
					$jq_noconflict('.tl_event_detail').remove();
					return false;
				})
			).hide().fadeIn(500)
		);
		vpHeight = window.innerHeight
			|| document.documentElement && document.documentElement.clientHeight
			|| document.body.clientHeight;
		if (offset.left + this.pxPerDay/2 > document.body.clientWidth / 2) {
			$jq_noconflict('.tl_event_detail').css({ right: document.body.clientWidth - offset.left + 10 });
		} else {
			$jq_noconflict('.tl_event_detail').css({ left: offset.left + $jq_noconflict(eventLink).width() });
		}
		if (window.pageYOffset && offset.top + $jq_noconflict('.tl_event_detail').height() > vpHeight - 35) {
			$jq_noconflict('.tl_event_detail').css({ top: vpHeight - $jq_noconflict('.tl_event_detail').height() - 35 + window.pageYOffset });
		}
	},



/* =======================================
	Templates
======================================= */

	templates: {
		tlContainer: $jq_noconflict('<div/>').attr('id', 'tl_container').css({
			position: 'relative',
			overflow: 'auto',
			overflowY: 'hidden'
		}).append(
			$jq_noconflict('<div/>').addClass('tl_content').css({
				position: 'relative'
			})
		),
		tlDay: function(i, weekend, special, thisDate) {
			return $jq_noconflict('<div class="tl_day' + weekend + (special > -1 ? ' special special-'+special : '') + '"/>').css({
				position: 'relative',
				float: 'left',
				opacity: 0.8,
				width: timeline.pxPerDay,
				height: '100%'
			}).html(
				'<span class="tl_day_day">' + thisDate.getDate() + '</span> ' + 
				'<span class="tl_day_month">' + timeline.monthNames[thisDate.getMonth()] + '</span>'
			);
		},
		tlEvent: function(l, t, w) {
			return $jq_noconflict('<div/>').addClass('tl_event').css({
				position: 'absolute',
				zIndex: 1000,
				left: l,
				top: t,
				width: w
			});
		},
		tlEventSummary: function(summary) {
			return $jq_noconflict('<a/>').attr('href', '#').addClass('tl_event_summary').css({
				display: 'block'
			}).html(summary);
		},
		tlEventDetail: function(t, evSummary, evDate, evDescription) {
			return $jq_noconflict('<div/>').addClass('tl_event_detail').css({
				position: 'absolute',
				top: t,
				zIndex: 2000,
				opacity: 0.9
			}).append(
				$jq_noconflict('<div/>').addClass('content').html(
					'<h2>' + evSummary + '</h2>' +
					'<p class="data">' + evDate + '</p>' +
					evDescription
				)
			);
		},
		tlSpecial: $jq_noconflict('<ul/>').addClass('item-list').attr('id', 'tl_special').html('<h2>Direct naar&hellip;</h2>'),
		closeBtn: $jq_noconflict('<a/>').addClass('close').attr({
			href: '#',
			title: 'Sluit'
		}).css({
			display: 'block',
			position: 'absolute',
			right: '-5px',
			top: '-5px',
			width: 16,
			height: 16,
			textIndent: '-1234em',
			cursor: 'pointer',
			zIndex: 3000
		}).text('Sluit')
	},



/* =======================================
	Helpers
======================================= */

	jumpTo: function(toDate) {
		var diffDays = (toDate - this.firstDate) / 86400000;
		//document.getElementById("tl_container").scrollLeft = Math.round((diffDays-1) * this.pxPerDay);
		$jq_noconflict('#tl_container').animate({scrollLeft: Math.round((diffDays-1) * this.pxPerDay)}, 1000);
	},

	toDate: function(string) {
		if (string) {
			return new Date(
				string.substr(0,4),
				Math.abs(string.substr(5,2))-1,
				Math.abs(string.substr(8,2))
			);
		} else {
			return;
		}
	},

	toString: function(d) {
		return (
			d.getFullYear() + '-'
			+ ((d.getMonth()<9)?'0':'') + (d.getMonth()+1) + '-'
			+ ((d.getDate()<10)?'0':'') + d.getDate()
		);
	}

}



if (window.XMLHttpRequest) {
	$jq_noconflict(document).ready(function() {
		timeline.init();
	}); 
}