window.addEvent('domready', function() {
	// on-click of table-row go to game:
	var gamesQueue = $('games-queue');

	if (gamesQueue) {
		gamesQueue.getElements('tr').addEvent('click', function(evt) {
			var a = $(this).getElement('td a');
			if (a) {
				document.location.href = a.get('href');
			}
		});

		GameQueue.start();
	}
});

var GameQueue = {
	games : {},

	timeDelta : 0,

	lastEffectAt : 0,
	
	previouslyEmpty : true,

	start : function() {
		GameQueue.update();
		GameQueue.updateAllHTML.periodical(100);
	},

	update : function() {
		new Request.JSON({
			method : "get",
			asyn : true,
			url : "/current-queues",
			onComplete : function(games) {
				if (games) {
					GameQueue.timeDelta = new Date().getTime()
							- games.serverTime;
					Object.each(games.games, function(game) {
						GameQueue.games[game.id] = game;
					});
					GameQueue.update.delay(1000);
				}
			}
		}).send();
	},

	updateAllHTML : function() {
		var size = 0;
		Object.each(GameQueue.games, function(game) {
			if (GameQueue.getRemainingMs(game) > 0) {
				size++;
			}
		});
		var empty = size == 0;

		// Update class
		var now = new Date().getTime();
		if (empty != GameQueue.previouslyEmpty && now - GameQueue.lastEffectAt > 500) {
			GameQueue.previouslyEmpty = empty;
			GameQueue.lastEffectAt = now;
			var h3El = $$('#games-queue h3');
			h3El.set('morph', {
				'duration' : 300
			});
			h3El.morph({
				'background-color' : empty ? '#bdbdbd' : '#f60'
			});
			
			var h3spanEl = $$('#games-queue h3 span');
			h3spanEl.set('morph', {
				'duration' : 300
			});
			h3spanEl.morph({
				'color' : empty ? '#666' : '#fff'
			});
		}

		// Update count
		var countText = size == 1 ? '1 spel' : size + ' spellen';
		$('games-queue-count').set('text', countText);

		// Update individual game <tr>s
		Object.each(GameQueue.games, function(game) {
			GameQueue.updateGameHTML(game);
		});
	},

	getRemainingMs : function(game) {
		// Compute how many more milliseconds before the game starts.
		var now = new Date().getTime();
		var remainingMs = game.start - now + GameQueue.timeDelta;
		return remainingMs;
	},

	updateGameHTML : function(game) {
		var elId = 'game-' + game.id;
		var el = $(elId);
		var remainingMs = GameQueue.getRemainingMs(game);

		// Create element if it doesn't exist yet.
		if (!el && remainingMs > 0) {
			el = new Element('tr', {
				'id' : elId
			});
			el.appendChild(new Element('td', {
				'class' : 'img'
			}).set('html', '<a href="/game/' + game.id
					+ '" class="img-container">'
					+ '<img src="http://manbijthond.nl/' + game.video.image
					+ '"></a>'));
			el.appendChild(new Element('td', {
				'class' : 'fragment-title'
			}).set('html', '<span class="title"><a href="/game/' + game.id
					+ '" class="img-container">' + game.video.title
					+ '<span class="hide-overflow"></span></a></span>'));
			el.appendChild(new Element('td', {
				'class' : 'time-remaining'
			}));
			$$('#games-queue tr')[0].grab(el, 'after');
		}

		if (remainingMs > 0) {
			// Update remaining time
			el.getElement('.time-remaining').set('text',
					Math.ceil(remainingMs / 1000) + ' sec...');
		} else {
			if (el) {
				el.destroy();
			}
			delete GameQueue.games[game.id];
		}
	}
};