diff --git a/out/out.Timeline.php b/out/out.Timeline.php
index e7ce12ef0..baea15a38 100644
--- a/out/out.Timeline.php
+++ b/out/out.Timeline.php
@@ -44,12 +44,28 @@ if(isset($_GET['skip']))
 else
 	$skip = array();
 
-$data = $dms->getTimeline($from, $to);
+if(isset($_GET['documentid']) && $_GET['documentid'] && is_numeric($_GET['documentid'])) {
+	$document = $dms->getDocument($_GET["documentid"]);
+	if (!is_object($document)) {
+		$view->exitError(getMLText("document_title", array("documentname" => getMLText("invalid_doc_id"))),getMLText("invalid_doc_id"));
+	}
+} else
+	$document = null;
+
+if(isset($_GET['version']) && $_GET['version'] && is_numeric($_GET['version'])) {
+	$content = $document->getContentByVersion($_GET['version']);
+} else
+	$content = null;
 
 $tmp = explode('.', basename($_SERVER['SCRIPT_FILENAME']));
-$view = UI::factory($theme, $tmp[1], array('dms'=>$dms, 'user'=>$user, 'rootfolder'=>$rootfolder, 'from'=>$from, 'to'=>$to, 'skip'=>$_GET['skip'], 'data'=>$data));
+$view = UI::factory($theme, $tmp[1], array('dms'=>$dms, 'user'=>$user));
 if($view) {
-	$view->show();
+	$view->setParam('fromdate', isset($_GET['fromdate']) ? $_GET['fromdate'] : '');
+	$view->setParam('todate', isset($_GET['todate']) ? $_GET['todate'] : '');
+	$view->setParam('skip', $skip);
+	$view->setParam('document', $document);
+	$view->setParam('version', $content);
+	$view($_GET);
 	exit;
 }
 
diff --git a/views/bootstrap/class.Timeline.php b/views/bootstrap/class.Timeline.php
index 87a49b76c..5cde0510c 100644
--- a/views/bootstrap/class.Timeline.php
+++ b/views/bootstrap/class.Timeline.php
@@ -30,20 +30,99 @@ require_once("class.Bootstrap.php");
  * @version    Release: @package_version@
  */
 class SeedDMS_View_Timeline extends SeedDMS_Bootstrap_Style {
-		var $dms;
-		var $folder_count;
-		var $document_count;
-		var $file_count;
-		var $storage_size;
+	var $dms;
+	var $folder_count;
+	var $document_count;
+	var $file_count;
+	var $storage_size;
+
+	function iteminfo() { /* {{{ */
+		$dms = $this->params['dms'];
+		$document = $this->params['document'];
+		$this->contentHeading(getMLText("selected_item"));
+		echo $document->getName();
+	} /* }}} */
+
+	function data() { /* {{{ */
+		$dms = $this->params['dms'];
+		$skip = $this->params['skip'];
+		$fromdate = $this->params['fromdate'];
+		$todate = $this->params['todate'];
+
+		if($fromdate) {
+			$from = makeTsFromLongDate($fromdate.' 00:00:00');
+		} else {
+			$from = time()-7*86400;
+		}
+
+		if($todate) {
+			$to = makeTsFromLongDate($todate.' 00:00:00');
+		} else {
+			$to = time()-7*86400;
+		}
+
+		$data = $dms->getTimeline($from, $to);
+
+		foreach($data as &$item) {
+			switch($item['type']) {
+			case 'add_version':
+				$msg = getMLText('timeline_full_'.$item['type'], array('document'=>htmlspecialchars($item['document']->getName()), 'version'=> $item['version']));
+				break;
+			case 'add_file':
+				$msg = getMLText('timeline_full_'.$item['type'], array('document'=>htmlspecialchars($item['document']->getName())));
+				break;
+			case 'status_change':
+				$msg = getMLText('timeline_full_'.$item['type'], array('document'=>htmlspecialchars($item['document']->getName()), 'version'=> $item['version'], 'status'=> getOverallStatusText($item['status'])));
+				break;
+			default:
+				$msg = '???';
+			}
+			$item['msg'] = $msg;
+		}
+
+		$jsondata = array();
+		foreach($data as $item) {
+			if($item['type'] == 'status_change')
+				$classname = $item['type']."_".$item['status'];
+			else
+				$classname = $item['type'];
+			if(!$skip || !in_array($classname, $skip)) {
+				$d = makeTsFromLongDate($item['date']);
+				$jsondata[] = array(
+					'start'=>date('c', $d),
+					'content'=>$item['msg'],
+					'className'=>$classname,
+					'docid'=>$item['document']->getID(),
+					'version'=>isset($item['version']) ? $item['version'] : '',
+					'statusid'=>isset($item['statusid']) ? $item['statusid'] : '',
+					'statuslogid'=>isset($item['statuslogid']) ? $item['statuslogid'] : '',
+					'fileid'=>isset($item['fileid']) ? $item['fileid'] : ''
+				);
+			}
+		}
+		header('Content-Type: application/json');
+		echo json_encode($jsondata);
+	} /* }}} */
 
 	function show() { /* {{{ */
-		$this->dms = $this->params['dms'];
+		$dms = $this->params['dms'];
 		$user = $this->params['user'];
-		$data = $this->params['data'];
-		$from = $this->params['from'];
-		$to = $this->params['to'];
+		$fromdate = $this->params['fromdate'];
+		$todate = $this->params['todate'];
 		$skip = $this->params['skip'];
 
+		if($fromdate) {
+			$from = makeTsFromLongDate($fromdate.' 00:00:00');
+		} else {
+			$from = time()-7*86400;
+		}
+
+		if($todate) {
+			$to = makeTsFromLongDate($todate.' 00:00:00');
+		} else {
+			$to = time();
+		}
+
 		$this->htmlAddHeader('<link href="../styles/'.$this->theme.'/timeline/timeline.css" rel="stylesheet">'."\n", 'css');
 		$this->htmlAddHeader('<script type="text/javascript" src="../styles/'.$this->theme.'/timeline/timeline-min.js"></script>'."\n", 'js');
 		$this->htmlAddHeader('<script type="text/javascript" src="../styles/'.$this->theme.'/timeline/timeline-locales.js"></script>'."\n", 'js');
@@ -61,7 +140,7 @@ echo "<div class=\"span3\">\n";
 $this->contentHeading(getMLText("timeline"));
 echo "<div class=\"well\">\n";
 ?>
-<form action="../out/out.Timeline.php" class="form form-inline" name="form1">
+<form action="../out/out.Timeline.php" class="form form-inline" name="form1" id="form1">
 	<div class="control-group">
 		<label class="control-label" for="startdate"><?= getMLText('date') ?></label>
 		<div class="controls">
@@ -90,35 +169,39 @@ echo "<div class=\"well\">\n";
 	<div class="control-group">
 		<label class="control-label" for="enddate"></label>
 		<div class="controls">
-			<button type="submit" class="btn"><i class="icon-search"></i> <?php printMLText("action"); ?></button>
+			<button id="update" type="_submit" class="btn"><i class="icon-search"></i> <?php printMLText("update"); ?></button>
 		</div>
 	</div>
 </form>
+<?php
+ $timelineurl = 'out.Timeline.php?action=data&fromdate='.date('Y-m-d', $from).'&todate='.date('Y-m-d', $to).'&skip='.urldecode(http_build_query(array('skip'=>$skip)));
+?>
+<script type="text/javascript">
+$(document).ready(function () {
+	$('#update').click(function(ev){
+		ev.preventDefault();
+		console.log($('#form1').serialize());
+		$.getJSON(
+			'out.Timeline.php?action=data&' + $('#form1').serialize(), 
+			function(data) {
+				$.each( data, function( key, val ) {
+					val.start = new Date(val.start);
+				});
+				timeline.setData(data);
+				timeline.redraw();
+			}
+		);
+	});
+});
+</script>
 <?php
 echo "</div>\n";
+echo "<div class=\"ajax\" data-view=\"Timeline\" data-action=\"iteminfo\" ></div>";
 echo "</div>\n";
 
 echo "<div class=\"span9\">\n";
 $this->contentHeading(getMLText("timeline"));
-if($data) {
-	foreach($data as &$item) {
-		switch($item['type']) {
-		case 'add_version':
-			$msg = getMLText('timeline_full_'.$item['type'], array('document'=>htmlspecialchars($item['document']->getName()), 'version'=> $item['version']));
-			break;
-		case 'add_file':
-			$msg = getMLText('timeline_full_'.$item['type'], array('document'=>htmlspecialchars($item['document']->getName())));
-			break;
-		case 'status_change':
-			$msg = getMLText('timeline_full_'.$item['type'], array('document'=>htmlspecialchars($item['document']->getName()), 'version'=> $item['version'], 'status'=> getOverallStatusText($item['status'])));
-			break;
-		default:
-			$msg = '???';
-		}
-		$item['msg'] = $msg;
-	}
-	$this->printTimeline($data, 550, date('Y-m-d', $from), date('Y-m-d', $to+1), $skip);
-}
+$this->printTimeline($timelineurl, 550, date('Y-m-d', $from), date('Y-m-d', $to+1), $skip);
 echo "</div>\n";
 echo "</div>\n";