diff --git a/SeedDMS_Core/Core/inc.ClassDocument.php b/SeedDMS_Core/Core/inc.ClassDocument.php
index 254de4b96..ac72c1196 100644
--- a/SeedDMS_Core/Core/inc.ClassDocument.php
+++ b/SeedDMS_Core/Core/inc.ClassDocument.php
@@ -2144,11 +2144,11 @@ class SeedDMS_Core_Document extends SeedDMS_Core_Object { /* {{{ */
 
 		foreach ($resArr as $row) {
 			$date = date('Y-m-d H:i:s', $row['date']);
-			$timeline[] = array('date'=>$date, 'msg'=>'Added attachment "'.$row['name'].'"', 'document'=>$this, 'type'=>'add_file');
+			$timeline[] = array('date'=>$date, 'msg'=>'Added attachment "'.$row['name'].'"', 'document'=>$this, 'type'=>'add_file', 'fileid'=>$row['id']);
 		}
 
 		$queryStr=
-			"SELECT `tblDocumentStatus`.*, `tblDocumentStatusLog`.`status`, ".
+			"SELECT `tblDocumentStatus`.*, `tblDocumentStatusLog`.`statusLogID`,`tblDocumentStatusLog`.`status`, ".
 			"`tblDocumentStatusLog`.`comment`, `tblDocumentStatusLog`.`date`, ".
 			"`tblDocumentStatusLog`.`userID` ".
 			"FROM `tblDocumentStatus` ".
@@ -2166,7 +2166,7 @@ class SeedDMS_Core_Document extends SeedDMS_Core_Object { /* {{{ */
 		foreach ($resArr as $row) {
 			if($row['date']) {
 				$date = $row['date'];
-				$timeline[] = array('date'=>$date, 'msg'=>'Version '.$row['version'].': Status change to '.$row['status'], 'type'=>'status_change', 'version'=>$row['version'], 'document'=>$this, 'status'=>$row['status'], 'params'=>array($row['version'], $row['status']));
+				$timeline[] = array('date'=>$date, 'msg'=>'Version '.$row['version'].': Status change to '.$row['status'], 'type'=>'status_change', 'version'=>$row['version'], 'document'=>$this, 'status'=>$row['status'], 'statusid'=>$row['statusID'], 'statuslogid'=>$row['statusLogID']);
 			}
 		}
 		return $timeline;
diff --git a/out/out.Timeline.php b/out/out.Timeline.php
index 75d178bbc..bbe9cf586 100644
--- a/out/out.Timeline.php
+++ b/out/out.Timeline.php
@@ -46,12 +46,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/out/out.ViewDocument.php b/out/out.ViewDocument.php
index 29e62eae8..f60d6898f 100644
--- a/out/out.ViewDocument.php
+++ b/out/out.ViewDocument.php
@@ -78,7 +78,7 @@ if($view) {
 	$view->setParam('previewWidthList', $settings->_previewWidthList);
 	$view->setParam('previewWidthDetail', $settings->_previewWidthDetail);
 	$view->setParam('currenttab', isset($_GET['currenttab']) ? $_GET['currenttab'] : "");
-	$view->show();
+	$view($_GET);
 	exit;
 }
 
diff --git a/styles/bootstrap/application.css b/styles/bootstrap/application.css
index 532511902..e424e0dc4 100644
--- a/styles/bootstrap/application.css
+++ b/styles/bootstrap/application.css
@@ -152,6 +152,12 @@ div.status_change_-1 {
 	border-color: #F89797;
 }
 
+div.timeline-event-selected {
+	background-color: #fff785;
+	border-color: #ffc200;
+	z-index: 999;
+}
+
 @media (max-width: 480px) { 
     .nav-tabs > li {
         float:none;
diff --git a/styles/bootstrap/application.js b/styles/bootstrap/application.js
index 3cc2f69bb..231201d0e 100644
--- a/styles/bootstrap/application.js
+++ b/styles/bootstrap/application.js
@@ -688,6 +688,7 @@ function onAddClipboard(ev) {
 					fd.append('folderid', target);
 					fd.append('formtoken', obj.data('formtoken'));
 					fd.append('userfile', files[i]);
+//					fd.append('path', files[i].webkitRelativePath);
 
 					var status = new createStatusbar(obj);
 					status.setFileNameSize(files[i].name,files[i].size);
diff --git a/views/bootstrap/class.Bootstrap.php b/views/bootstrap/class.Bootstrap.php
index e5ac76ebc..bd4950843 100644
--- a/views/bootstrap/class.Bootstrap.php
+++ b/views/bootstrap/class.Bootstrap.php
@@ -2111,35 +2111,14 @@ mayscript>
 	 *
 	 * @param object $document document
 	 */
-	protected function printTimeline($timeline, $height=300, $start='', $end='', $skip=array()) { /* {{{ */
-		if(!$timeline)
+	protected function printTimeline($timelineurl, $height=300, $start='', $end='', $skip=array()) { /* {{{ */
+		if(!$timelineurl)
 			return;
 ?>
 	<script type="text/javascript">
 		var timeline;
 		var data;
 
-		data = [
-<?php 
-		foreach($timeline as $item) {
-			if($item['type'] == 'status_change')
-				$classname = $item['type']."_".$item['status'];
-			else
-				$classname = $item['type'];
-			if(!$skip || !in_array($classname, $skip)) {
-				$s = explode(' ', $item['date']);
-				$d = explode('-', $s[0]);
-				$t = explode(':', $s[1]);
-				echo "{'start': new Date(".$d[0].",".($d[1]-1).",".$d[2].",".$t[0].",".$t[1].",".$t[2]."), 'content': '".$item['msg']."', 'className': '".$classname."'},\n";
-			}
-		}
-?>
-			/* {
-				'start': new Date(),
-				'content': 'Today'
-	} */
-		];
-
 		// specify options
 		var options = {
 			'width':  '100%',
@@ -2154,17 +2133,36 @@ mayscript>
 			echo "'\t\t\tmax': new Date(".$tmp[0].", ".($tmp[1]-1).", ".$tmp[2]."),\n";
 		}
 ?>
-			'_editable': false,
-			'selectable': false,
+			'editable': false,
+			'selectable': true,
 			'style': 'box',
 			'locale': 'de_DE'
 		};
 
+		function onselect() {
+			var sel = timeline.getSelection();
+			if (sel.length) {
+				if (sel[0].row != undefined) {
+					var row = sel[0].row;
+					console.log(timeline.getItem(sel[0].row));
+					item = timeline.getItem(sel[0].row);
+					$('div.ajax').trigger('update', {documentid: item.docid, version: item.version, statusid: item.statusid, statuslogid: item.statuslogid, fileid: item.fileid});
+				}
+			}
+		}
 		$(document).ready(function () {
 		// Instantiate our timeline object.
 		timeline = new links.Timeline(document.getElementById('timeline'), options);
-
-		timeline.draw(data);
+		links.events.addListener(timeline, 'select', onselect);
+		$.getJSON(
+			'<?= $timelineurl ?>', 
+			function(data) {
+				$.each( data, function( key, val ) {
+					val.start = new Date(val.start);
+				});
+				timeline.draw(data);
+			}
+		);
 		});
 
 	</script>
diff --git a/views/bootstrap/class.Timeline.php b/views/bootstrap/class.Timeline.php
index 87a49b76c..0845edacf 100644
--- a/views/bootstrap/class.Timeline.php
+++ b/views/bootstrap/class.Timeline.php
@@ -30,20 +30,101 @@ 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'];
+		if($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 +142,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 +171,40 @@ 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();
+//				timeline.setVisibleChartRange(0,0);
+			}
+		);
+	});
+});
+</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";
 
diff --git a/views/bootstrap/class.ViewDocument.php b/views/bootstrap/class.ViewDocument.php
index 699c61c25..74243e72d 100644
--- a/views/bootstrap/class.ViewDocument.php
+++ b/views/bootstrap/class.ViewDocument.php
@@ -109,6 +109,45 @@ class SeedDMS_View_ViewDocument extends SeedDMS_Bootstrap_Style {
 <?php
 	} /* }}} */
 
+	function timelinedata() { /* {{{ */
+		$dms = $this->params['dms'];
+		$user = $this->params['user'];
+		$document = $this->params['document'];
+
+		$jsondata = array();
+		if($user->isAdmin()) {
+			$data = $document->getTimeline();
+
+			foreach($data as &$item) {
+				switch($item['type']) {
+				case 'add_version':
+					$msg = getMLText('timeline_'.$item['type'], array('document'=>htmlspecialchars($item['document']->getName()), 'version'=> $item['version']));
+					break;
+				case 'add_file':
+					$msg = getMLText('timeline_'.$item['type'], array('document'=>htmlspecialchars($item['document']->getName())));
+					break;
+				case 'status_change':
+					$msg = getMLText('timeline_'.$item['type'], array('document'=>htmlspecialchars($item['document']->getName()), 'version'=> $item['version'], 'status'=> getOverallStatusText($item['status'])));
+					break;
+				default:
+					$msg = '???';
+				}
+				$item['msg'] = $msg;
+			}
+
+			foreach($data as $item) {
+				if($item['type'] == 'status_change')
+					$classname = $item['type']."_".$item['status'];
+				else
+					$classname = $item['type'];
+				$d = makeTsFromLongDate($item['date']);
+				$jsondata[] = array('start'=>date('c', $d)/*$item['date']*/, 'content'=>$item['msg'], 'className'=>$classname);
+			}
+		}
+		header('Content-Type: application/json');
+		echo json_encode($jsondata);
+	} /* }}} */
+
 	function show() { /* {{{ */
 		parent::show();
 		$dms = $this->params['dms'];
@@ -1202,7 +1241,7 @@ class SeedDMS_View_ViewDocument extends SeedDMS_Bootstrap_Style {
 					}
 					$item['msg'] = $msg;
 				}
-				$this->printTimeline($timeline, 300, '', date('Y-m-d'));
+				$this->printTimeline('out.ViewDocument.php?action=timelinedata&documentid='.$document->getID(), 300, '', date('Y-m-d'));
 			}
 		}
 ?>