$(document).ready(function () {

	$('.timelineEvents').css('width','1477px');
	
	// check if events exist
	if(!$('#timelineHolder').hasClass('noEventsPlanned')) {
		$('<ul class="toggle clearFix"><li><a href="#" class="left">&larr; Previous</a></li><li><a href="#" class="right">Next &rarr;</a></li>').insertBefore('div#timeline');
	}
	
	/*
	.mousedown(function (event) {
		$(this)
		.data('down', true)
		.data('x', event.clientX)
		.data('scrollLeft', this.scrollLeft);
		return false;
	}).mouseup(function (event) {
		$(this).data('down', false);
	}).mousemove(function (event) {
		if ($(this).data('down') == true) {
			scrollTimeline(this, $(this).data('scrollLeft') + $(this).data('x') - event.clientX);
		}
	})
	*/
	
	$('div#timeline').mousewheel(function (event, delta) {
		scrollTimeline(this, delta * 30);
		return false;
	}).css({
		'overflow' : 'hidden'
	});
	
	$('div.scrollButtons').mouseover( function() {
		$(this).addClass('selected');
	}).mouseout( function() {
		$(this).removeClass('selected');
	});
	
	$('.left').click( function(){
		left = $('#timeline').scrollLeft();
		$('#timeline').scrollLeft(left-633);
		return false;
	});
	$('.right').click( function(){
		left = $('#timeline').scrollLeft();
		scrollTimeline(this, false);
		$('#timeline').scrollLeft(left+633);
		return false;
	});
	
});

var timelineLoading = false;

function scrollTimeline(el, delta, left) {
	var $el = $(el);
	el.scrollLeft -= delta;
	
	//if (el.scrollLeft <= 0) {
	//	return false;
	//}
	
	// if the last position is the same as the current, then we've not moved.
	// time for some Ajaxy magic
	if (!timelineLoading && $el.data('last') == el.scrollLeft) {
		timelineLoading = true;
		
		day = $('ul.timelineEvents li.day:last').attr('rel')
		game = $('input.game').val()
		url = window.location.pathname
		
		// add loading indicator
		$.ajax({
			url : url,
			data: 'days=' + day,
			dataType : 'json',
			method : 'get',
			success : function (days) {
				var html = [];
				var existingWidth = $('ul.timelineEvents').width()
				var newWidth = 0;
				
				for (var i = 0, day; day = days[i]; i++) {
				
					// use datejs to format date in rel
					date = Date.parse(day.date).toString("yyyy-MM-d");
					humanDate = Date.parse(day.date).toString("dddd d MMMM");
					
					if (day.count >= 1) { 
						eventClass = ' hasEvents'
					} else {
						eventClass = ''
					}
					
					html.push('<li class="day' + eventClass + '" rel="' + date + '"><h4>' + humanDate + '</h4><ul class="column">');
					
					if (day.count >= 1) {
					
						// go through events
						for (var j = 0, dayEvents; dayEvents = day.dayEvents[j]; j++) {

							// format time
							time = dayEvents.date.substring(0,19); // remove timezone offset and DateJS cannot parse it
							time = Date.parse(time).toString("htt");
							
							// get location
							if (dayEvents.location == 1) {
								dayEvents.location = 'Online';
							} else if (dayEvents.location == 2) {
								dayEvents.location = 'At home';	
							} else if (dayEvents.location == 3) {
								dayEvents.location = 'At work';	
							}
						
							if (dayEvents.invite_i) {
								if (dayEvents.invite_only) {
									html.push('<li class="invite"><a href="/events/' + dayEvents.id + '/invite/"><strong>' + dayEvents.game + '</strong><em>You\'ve been invited to play :)</em></a></li>');
								}
							} else {
								html.push('<li class="status' + dayEvents.status + '"><a href="/events/' + dayEvents.id + '/"><strong>' + dayEvents.game + '</strong> <em>' + time + '</em></a></li>');
							}
							
						}
					
					}
					
					if (dayInvites) {
					
						for (var j = 0, dayInvites; dayInvites = day.dayInvites[j]; j++) {
	
							// format time
							time = Date.parse(dayInvites.date).toString("htt");
							
							html.push('<li class="invite"><a href="/events/' + dayInvites.id + '/invite/"><strong>' + dayInvites.game + '</strong><em>You\'ve been invited to play :)</em></a></li>');
	
						}
					
					}
					
					html.push('</ul></li>');
					
					newWidth = newWidth + 170;
				}
				
				$('ul.timelineEvents').append(html.join('')).css('width', existingWidth + newWidth);
				
			},
			error : function(days) {
				//console.log(days)
			},
			complete : function () {
				timelineLoading = false;
				// remove loading indicator
			}
		});
	}
	
	$el.data('last', el.scrollLeft);
}
	
$(window).mouseout(function (event) {
	if ($('#timeline').data('down')) {
		try {
			if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
				$('#timeline').data('down', false);
			}                
		} catch (e) {}
	}
});