program snimation & styling

1 files changed, 59 insertions, 0 deletions

diff --git a/assets/js/lustiges-script.js b/assets/js/lustiges-script.js
index adb43f4..bd8a6e7 100644
--- a/assets/js/lustiges-script.js
+++ b/assets/js/lustiges-script.js
@@ -23,6 +23,7 @@ $(function() {
 	// adjust tabs when hash changes
 	$(window).on('hashchange', setTabToHash).trigger('hashchange');
 
+	// click-to-irc
 	$('.click-to-irc').on('click', function(e) {
 		if($(this).hasClass('activating'))
 			return;
@@ -38,4 +39,62 @@ $(function() {
 			$irc.addClass('active');
 		}).attr('src', $iframe.data('src'));
 	});
+
+	var
+		$program = $('.program'),
+		$now = $program.find('.now'),
+		$lastUpcoming,
+		manualControl = false,
+		doRewind = false,
+		rewindTimeout;
+
+	$program.on('mouseenter mouseleave touchstart touchend', function(e) {
+		manualControl = (e.type == 'mouseenter');
+
+		if(e.type == 'mouseleave' || e.type == 'touchend') {
+			rewindTimeout = setTimeout(function() {
+				doRewind = true;
+			}, 5000);
+		} else {
+			clearTimeout(rewindTimeout);
+		}
+	});
+
+	function interval() {
+		// program timing
+		var
+			offset = $('.program').data('offset'),
+			now = (Date.now() / 1000) - offset;
+
+		// find upcoming block
+		var $upcoming = $program
+			.find('.room')
+			.first()
+			.find('.block')
+			.filter(function(i, el) { 
+				return $(this).data('start') < now;
+			}).last();
+
+		var
+			start = $upcoming.data('start'),
+			end = $upcoming.data('end'),
+			normalized = Math.max(0, Math.min(1, (now - start) / (end - start))),
+			px = $upcoming.position().left + ($upcoming.outerWidth() * normalized);
+
+		//console.log($upcoming.get(0), normalized, px);
+		$now.css('width', px);
+		if(doRewind || (!$upcoming.is($lastUpcoming) && !manualControl))
+		{
+			$program.scrollTo($upcoming, {
+				axis: 'x',
+				offset: -100,
+				duration: $lastUpcoming ? 500 : 0
+			});
+			$lastUpcoming = $upcoming;
+			doRewind = false;
+		}
+	}
+
+	setInterval(interval, 500);
+	interval();
 });