doctype html
html(lang="en")
	head
		title Milliseconds
		meta(charset='utf-8')
		meta(name='description', content='TimelineJS Embed')
		meta(name='apple-mobile-web-app-capable', content='yes')
		meta(name='apple-touch-fullscreen', content='yes')
		meta(name='viewport', content='width=device-width, initial-scale=1.0, maximum-scale=1.0')
		// CSS
		link(rel='stylesheet', href='../css/timeline.css?v1')
		//FONT
		link(rel='stylesheet', href='../css/fonts/font.default.css?v1')
		
		// Style
		style.
			html, body {
				height:100%;
				width:100%;
				padding: 0px;
				margin: 0px;
			}
			#input {
				height: 40px;
				background-color:#CCC;
			}
			#url {
				margin:10px;
			}
			#timeline {
				height: 100%;
			}

		// HTML5 shim, for IE6-8 support of HTML elements
		//if lt IE 9
			script(src='https://html5shim.googlecode.com/svn/trunk/html5.js')

	body
		div#input
			input#url(placeholder="Enter a google spreadsheet URL", size="100", type="text")
			button#preview(type="button") Go

		div#timeline

		
		// JavaScript
		script(src='../js/timeline.js')
		script.
			var timeline = null;
			var button = document.getElementById('preview');
			button.addEventListener('click',function(){
				new_timeline(document.getElementById('url').value);
			});

			document.getElementById('url').addEventListener('keyup',function(evt) {
				if (evt.keyCode == 13) {
					new_timeline(document.getElementById('url').value);
				}
			});

			function new_timeline(url) {
				timeline = null; // TODO: actively 'destroy' an existing timeline?
				var json = TL.ConfigFactory.fromGoogle(url);

				window.factory_json = json;
				
				document.getElementById('input').style.height = "40px"
				document.getElementById('timeline').style.height = (window.innerHeight - 40 + "px");
				
				timeline = new TL.Timeline('timeline', new TL.TimelineConfig(json), {
					debug:true
				});
			  
				
				window.onresize = function(event) {
					console.log("resize")
					document.getElementById('input').style.height = "30px"
					document.getElementById('timeline').style.height = (window.innerHeight - 30 + "px");
					timeline.updateDisplay();
				}
			}
			
			function getQueryParams(qs) {
				qs = qs.split("+").join(" ");

				var params = {}, tokens,
				re = /[?&]?([^=]+)=([^&]*)/g;

				while (tokens = re.exec(qs)) {
					params[decodeURIComponent(tokens[1])]
					= decodeURIComponent(tokens[2]);
				}

				return params;
			}

			var qs = getQueryParams(window.location.search);
			if (qs.key) {
				new_timeline(qs.key);
			}