diff --git a/node/utils/tar.json b/node/utils/tar.json
index 5fd6f6968..e1e6fb2b1 100644
--- a/node/utils/tar.json
+++ b/node/utils/tar.json
@@ -46,5 +46,6 @@
   , "broadcast.js"
   , "broadcast_slider.js"
   , "broadcast_revisions.js"
+  , "timeslider.js"
   ]
 }
diff --git a/static/js/timeslider.js b/static/js/timeslider.js
new file mode 100644
index 000000000..3b49f49ae
--- /dev/null
+++ b/static/js/timeslider.js
@@ -0,0 +1,178 @@
+/**
+ * This code is mostly from the old Etherpad. Please help us to comment this code.
+ * This helps other people to understand this code better and helps them to improve it.
+ * TL;DR COMMENTS ON THIS FILE ARE HIGHLY APPRECIATED
+ */
+
+/**
+ * Copyright 2009 Google Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+function createCookie(name,value,days)
+{
+  if (days) {
+    var date = new Date();
+    date.setTime(date.getTime()+(days*24*60*60*1000));
+    var expires = "; expires="+date.toGMTString();
+  }
+  else var expires = "";
+  document.cookie = name+"="+value+expires+"; path=/";
+}
+
+function readCookie(name)
+{
+  var nameEQ = name + "=";
+  var ca = document.cookie.split(';');
+  for(var i=0;i < ca.length;i++) {
+    var c = ca[i];
+    while (c.charAt(0)==' ') c = c.substring(1,c.length);
+    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+  }
+  return null;
+}
+
+function randomString() {
+  var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+  var string_length = 20;
+  var randomstring = '';
+  for (var i=0; i<string_length; i++) {
+    var rnum = Math.floor(Math.random() * chars.length);
+    randomstring += chars.substring(rnum,rnum+1);
+  }
+  return "t." + randomstring;
+}
+
+var socket, token, padId, export_links;
+
+function init() {
+  $(document).ready(function ()
+  {
+    //start the costum js
+    if(typeof costumStart == "function") costumStart();
+
+    //get the padId out of the url
+    var urlParts= document.location.pathname.split("/");
+    padId = decodeURIComponent(urlParts[urlParts.length-2]);
+
+    //set the title
+    document.title = document.title + " | " + padId.replace(/_+/g, ' ');
+
+    //ensure we have a token
+    token = readCookie("token");
+    if(token == null)
+    {
+      token = randomString();
+      createCookie("token", token, 60);
+    }
+
+    var loc = document.location;
+    //get the correct port
+    var port = loc.port == "" ? (loc.protocol == "https:" ? 443 : 80) : loc.port;
+    //create the url
+    var url = loc.protocol + "//" + loc.hostname + ":" + port + "/";
+    //find out in which subfolder we are
+    var resource = loc.pathname.substr(1,loc.pathname.indexOf("/p/")) + "socket.io";
+
+    //build up the socket io connection
+    socket = io.connect(url, {resource: resource});
+
+    //send the ready message once we're connected
+    socket.on('connect', function()
+    {
+      sendSocketMsg("CLIENT_READY", {});
+    });
+
+    //route the incoming messages
+    socket.on('message', function(message)
+    {
+      if(window.console) console.log(message);
+
+      if(message.type == "CLIENT_VARS")
+      {
+        handleClientVars(message);
+      }
+      else if(message.type == "CHANGESET_REQ")
+      {
+        changesetLoader.handleSocketResponse(message);
+      }
+      else if(message.accessStatus)
+      {
+        $("body").html("<h2>You have no permission to access this pad</h2>")
+      }
+    });
+
+    //get all the export links
+    export_links = $('#export > .exportlink')
+
+    if(document.referrer.length > 0 && document.referrer.substring(document.referrer.lastIndexOf("/")-1,document.referrer.lastIndexOf("/")) === "p") {
+      $("#returnbutton").attr("href", document.referrer);
+    } else {
+      $("#returnbutton").attr("href", document.location.href.substring(0,document.location.href.lastIndexOf("/")));
+    }
+  });
+}
+
+//sends a message over the socket
+function sendSocketMsg(type, data)
+{
+  var sessionID = readCookie("sessionID");
+  var password = readCookie("password");
+
+  var msg = { "component" : "timeslider",
+              "type": type,
+              "data": data,
+              "padId": padId,
+              "token": token,
+              "sessionID": sessionID,
+              "password": password,
+              "protocolVersion": 2};
+
+  socket.json.send(msg);
+}
+
+var fireWhenAllScriptsAreLoaded = [];
+  
+var BroadcastSlider, changesetLoader;
+function handleClientVars(message)
+{
+  //save the client Vars
+  clientVars = message.data;
+  
+  //load all script that doesn't work without the clientVars
+  BroadcastSlider = require('/broadcast_slider').loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded);
+  require('/broadcast_revisions').loadBroadcastRevisionsJS();
+  changesetLoader = require('/broadcast').loadBroadcastJS(socket, sendSocketMsg, fireWhenAllScriptsAreLoaded, BroadcastSlider);
+
+  //initialize export ui
+  require('/pad_impexp').padimpexp.init();
+
+  //change export urls when the slider moves
+  var export_rev_regex = /(\/\d+)?\/export/
+  BroadcastSlider.onSlider(function(revno)
+  {
+    export_links.each(function()
+    {
+      this.setAttribute('href', this.href.replace(export_rev_regex, '/' + revno + '/export'));
+    });
+  });
+
+  //fire all start functions of these scripts, formerly fired with window.load
+  for(var i=0;i < fireWhenAllScriptsAreLoaded.length;i++)
+  {
+    fireWhenAllScriptsAreLoaded[i]();
+  }
+}
+
+exports.init = init;
diff --git a/static/timeslider.html b/static/timeslider.html
index 8b66729d6..3e1cae05d 100644
--- a/static/timeslider.html
+++ b/static/timeslider.html
@@ -17,161 +17,15 @@
   <script src="../../static/custom/timeslider.js"></script>
   
   <script>
-// <![CDATA[
   var clientVars = {};
 
   /* TODO: These globals shouldn't exist. */
   padeditbar = require('/pad_editbar').padeditbar;
   padimpexp = require('/pad_impexp').padimpexp;
 
-  function createCookie(name,value,days) 
-  {
-	  if (days) {
-		  var date = new Date();
-		  date.setTime(date.getTime()+(days*24*60*60*1000));
-		  var expires = "; expires="+date.toGMTString();
-	  }
-	  else var expires = "";
-	  document.cookie = name+"="+value+expires+"; path=/";
-  }
-
-  function readCookie(name) 
-  {
-	  var nameEQ = name + "=";
-	  var ca = document.cookie.split(';');
-	  for(var i=0;i < ca.length;i++) {
-		  var c = ca[i];
-		  while (c.charAt(0)==' ') c = c.substring(1,c.length);
-		  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
-	  }
-	  return null;
-  }
-
-  function randomString() {
-	  var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
-	  var string_length = 20;
-	  var randomstring = '';
-	  for (var i=0; i<string_length; i++) {
-		  var rnum = Math.floor(Math.random() * chars.length);
-		  randomstring += chars.substring(rnum,rnum+1);
-	  }
-	  return "t." + randomstring;
-  }
-
-  var socket, token, padId, export_links;
-
-  $(document).ready(function () 
-  {
-    //start the costum js
-    if(typeof costumStart == "function") costumStart();
-    
-    //get the padId out of the url 
-    var urlParts= document.location.pathname.split("/");
-    padId = decodeURIComponent(urlParts[urlParts.length-2]);
-        
-    //set the title
-    document.title = document.title + " | " + padId.replace(/_+/g, ' ');
-        
-    //ensure we have a token
-    token = readCookie("token");
-    if(token == null)
-    {
-      token = randomString();
-      createCookie("token", token, 60);
-    }
-    
-    var loc = document.location;
-    //get the correct port
-    var port = loc.port == "" ? (loc.protocol == "https:" ? 443 : 80) : loc.port;
-    //create the url
-    var url = loc.protocol + "//" + loc.hostname + ":" + port + "/";
-    //find out in which subfolder we are
-    var resource = loc.pathname.substr(1,loc.pathname.indexOf("/p/")) + "socket.io";
-    
-    //build up the socket io connection
-    socket = io.connect(url, {resource: resource});
-    
-    //send the ready message once we're connected
-    socket.on('connect', function()
-    {
-      sendSocketMsg("CLIENT_READY", {});
-    });
-    
-    //route the incoming messages
-    socket.on('message', function(message)
-    {
-      if(window.console) console.log(message);
-      
-      if(message.type == "CLIENT_VARS")
-      {
-        handleClientVars(message);
-      }
-      else if(message.type == "CHANGESET_REQ")
-      {
-        changesetLoader.handleSocketResponse(message);
-      }
-      else if(message.accessStatus)
-      {
-        $("body").html("<h2>You have no permission to access this pad</h2>")
-      }
-    });
-
-    //get all the export links
-    export_links = $('#export > .exportlink')
-  });
-  
-  //sends a message over the socket
-  function sendSocketMsg(type, data)
-  {
-    var sessionID = readCookie("sessionID");
-    var password = readCookie("password");
-    
-    var msg = { "component" : "timeslider",
-                "type": type,
-                "data": data, 
-                "padId": padId,
-                "token": token,
-                "sessionID": sessionID,
-                "password": password,
-                "protocolVersion": 2};
-    
-    socket.json.send(msg);
-  }
-  
-  var fireWhenAllScriptsAreLoaded = [];
-  
-  var BroadcastSlider, changesetLoader;
-  function handleClientVars(message)
-  {
-    //save the client Vars
-    clientVars = message.data;
-    
-    //load all script that doesn't work without the clientVars
-    BroadcastSlider = require('/broadcast_slider').loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded);
-    require('/broadcast_revisions').loadBroadcastRevisionsJS();
-    changesetLoader = require('/broadcast').loadBroadcastJS(socket, sendSocketMsg, fireWhenAllScriptsAreLoaded, BroadcastSlider);
-
-    //initialize export ui
-    padimpexp.init();
-
-    //change export urls when the slider moves
-    var export_rev_regex = /(\/\d+)?\/export/
-    BroadcastSlider.onSlider(function(revno)
-    {
-      export_links.each(function()
-      {
-        this.setAttribute('href', this.href.replace(export_rev_regex, '/' + revno + '/export'));
-      });
-    });
-    
-    //fire all start functions of these scripts, formerly fired with window.load
-    for(var i=0;i < fireWhenAllScriptsAreLoaded.length;i++)
-    {
-      fireWhenAllScriptsAreLoaded[i]();
-    }
-  }
-
-  // ]]>
+  (function () {
+    var TimeSlider = require('/timeslider').init();
+  })();
   </script>
 </head>
 
@@ -299,13 +153,6 @@
                 </li>
               </ul>
               <a id = "returnbutton">Return to pad</a>
-              <script>
-              	if(document.referrer.length > 0 && document.referrer.substring(document.referrer.lastIndexOf("/")-1,document.referrer.lastIndexOf("/")) === "p") {
-                  $("#returnbutton").attr("href", document.referrer);
-              	} else {
-                  $("#returnbutton").attr("href", document.location.href.substring(0,document.location.href.lastIndexOf("/")));
-              	}
-              </script>
             </div>
 
             <div id="editbarinner" class="editbarinner">