From 735734e58fcc788ee8115b61fef10adcfc7839ab Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Wed, 30 Apr 2014 14:29:33 +0200
Subject: [PATCH] Added background and axis frame per group

---
 src/timeline/component/Group.js | 42 ++++++++++++++++++++++++---------
 1 file changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/timeline/component/Group.js b/src/timeline/component/Group.js
index acdd9028..defd8d80 100644
--- a/src/timeline/component/Group.js
+++ b/src/timeline/component/Group.js
@@ -28,10 +28,14 @@ Group.prototype._create = function() {
   label.appendChild(inner);
   this.dom.inner = inner;
 
-  var group = document.createElement('div');
-  group.className = 'group';
-  group['timeline-group'] = this;
-  this.dom.group = group;
+  var foreground = document.createElement('div');
+  foreground.className = 'group';
+  foreground['timeline-group'] = this;
+  this.dom.foreground = foreground;
+
+  this.dom.background = document.createElement('div');
+
+  this.dom.axis = document.createElement('div');
 };
 
 /**
@@ -39,7 +43,7 @@ Group.prototype._create = function() {
  * @return {HTMLElement} foreground
  */
 Group.prototype.getForeground = function getForeground() {
-  return this.dom.group;
+  return this.dom.foreground;
 };
 
 /**
@@ -47,7 +51,7 @@ Group.prototype.getForeground = function getForeground() {
  * @return {HTMLElement} background
  */
 Group.prototype.getBackground = function getBackground() {
-  return this.itemSet.getBackground();
+  return this.dom.background;
 };
 
 /**
@@ -55,7 +59,7 @@ Group.prototype.getBackground = function getBackground() {
  * @return {HTMLElement} axis
  */
 Group.prototype.getAxis = function getAxis() {
-  return this.itemSet.getAxis();
+  return this.dom.axis;
 };
 
 /**
@@ -81,8 +85,16 @@ Group.prototype.show = function show() {
     this.itemSet.getLabelSet().appendChild(this.dom.label);
   }
 
-  if (!this.dom.group.parentNode) {
-    this.itemSet.getForeground().appendChild(this.dom.group);
+  if (!this.dom.foreground.parentNode) {
+    this.itemSet.getForeground().appendChild(this.dom.foreground);
+  }
+
+  if (!this.dom.background.parentNode) {
+    this.itemSet.getBackground().appendChild(this.dom.background);
+  }
+
+  if (!this.dom.axis.parentNode) {
+    this.itemSet.getAxis().appendChild(this.dom.axis);
   }
 };
 
@@ -94,8 +106,16 @@ Group.prototype.hide = function hide() {
     this.dom.label.parentNode.removeChild(this.dom.label);
   }
 
-  if (this.dom.group.parentNode) {
-    this.dom.group.parentNode.removeChild(this.dom.group);
+  if (this.dom.foreground.parentNode) {
+    this.dom.foreground.parentNode.removeChild(this.dom.foreground);
+  }
+
+  if (this.dom.background.parentNode) {
+    this.dom.background.parentNode.removeChild(this.dom.background);
+  }
+
+  if (this.dom.axis.parentNode) {
+    this.dom.axis.parentNode.removeChild(this.dom.axis);
   }
 };