Policy 1707 commit to LF

Change-Id: Ibe6f01d92f9a434c040abb05d5386e89d675ae65
Signed-off-by: ITSERVICES\rb7147 <rb7147@att.com>

80 files changed, 6130 insertions, 0 deletions

diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/css/att_angular_gridster/sandbox-gridster.css b/ECOMP-SDK-APP/src/main/webapp/static/fusion/css/att_angular_gridster/sandbox-gridster.css
new file mode 100644
index 000000000..a9edba8ff
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/css/att_angular_gridster/sandbox-gridster.css
@@ -0,0 +1,173 @@
+.gridster {
+    position: relative;
+    margin: auto;
+    /* height: 0
+ */}
+
+.gridster>ul {
+    margin: 0;
+    list-style: none;
+    padding: 0
+}
+
+.gridster-item {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    list-style: none;
+    z-index: 2;
+    position: absolute;
+    display: none
+}
+
+.gridster-loaded {
+    -webkit-transition: height .3s;
+    -moz-transition: height .3s;
+    -o-transition: height .3s;
+    transition: height .3s
+}
+
+.gridster-loaded .gridster-item {
+    display: block;
+    position: absolute;
+    -webkit-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
+    -moz-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
+    -o-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
+    transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
+    -webkit-transition-delay: 50ms;
+    -moz-transition-delay: 50ms;
+    -o-transition-delay: 50ms;
+    transition-delay: 50ms
+}
+
+.gridster-loaded .gridster-preview-holder {
+    display: none;
+    z-index: 1;
+    position: absolute;
+    background-color: #067ab4;
+    /*
+    background-color: rgb(6, 122, 180);
+    -ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#067ab4', endColorstr='#067ab4');  IE 
+    opacity: 0.2;
+    */
+    border-color: #fff;
+    -webkit-transition: width .2s, height .3s;
+    -moz-transition: width .2s, height .3s;
+    -o-transition: width .2s, height .3s;
+    transition: width .2s, height .3s;
+    -webkit-transition-delay: 50ms;
+    -moz-transition-delay: 50ms;
+    -o-transition-delay: 50ms;
+    transition-delay: 50ms
+}
+
+.gridster-loaded .gridster-item.gridster-item-moving {
+    -webkit-transition: none;
+    -moz-transition: none;
+    -o-transition: none;
+    transition: none;
+    opacity: 0.9;
+}
+
+.gridster-mobile {
+    height: auto !important
+}
+
+.gridster-mobile .gridster-item {
+    height: auto;
+    position: static;
+    float: none
+}
+
+.gridster-item.ng-leave.ng-leave-active {
+    opacity: 0
+}
+
+.gridster-item.ng-enter {
+    opacity: 1
+}
+
+.gridster-item-moving {
+    z-index: 3
+}
+
+.gridster-item-resizable-handler {
+    position: absolute;
+    font-size: 1px;
+    display: block
+}
+
+.handle-se {
+    cursor: se-resize;
+    width: 0;
+    height: 0;
+    right: 1px;
+    bottom: 1px;
+    border-style: solid;
+    border-width: 0 0 12px 12px;
+    border-color: transparent
+}
+
+.handle-ne {
+    cursor: ne-resize;
+    width: 12px;
+    height: 12px;
+    right: 1px;
+    top: 1px
+}
+
+.handle-nw {
+    cursor: nw-resize;
+    width: 12px;
+    height: 12px;
+    left: 1px;
+    top: 1px
+}
+
+.handle-sw {
+    cursor: sw-resize;
+    width: 12px;
+    height: 12px;
+    left: 1px;
+    bottom: 1px
+}
+
+.handle-e {
+    cursor: e-resize;
+    width: 12px;
+    bottom: 0;
+    right: 1px;
+    top: 0
+}
+
+.handle-s {
+    cursor: s-resize;
+    height: 12px;
+    right: 0;
+    bottom: 1px;
+    left: 0
+}
+
+.handle-n {
+    cursor: n-resize;
+    height: 12px;
+    right: 0;
+    top: 1px;
+    left: 0
+}
+
+.handle-w {
+    cursor: w-resize;
+    width: 12px;
+    left: 1px;
+    top: 0;
+    bottom: 0
+}
+
+.gridster .gridster-item:hover .gridster-box {
+    border: 1.5px solid #B3B2B3
+}
+
+.gridster .gridster-item:hover .handle-se {
+    border-color: transparent transparent #ccc
+}
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/css/att_angular_gridster/ui-gridster.css b/ECOMP-SDK-APP/src/main/webapp/static/fusion/css/att_angular_gridster/ui-gridster.css
new file mode 100644
index 000000000..4bf19bfaf
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/css/att_angular_gridster/ui-gridster.css
@@ -0,0 +1,116 @@
+/* ui-gridster.css */
+.gridster-container {
+  background-color: #EFEFEF;
+  color: #fff;
+  border: 1px dashed;
+  overflow-y: auto;
+  overflow-x: hidden; }
+
+/* app css for attGridtser */
+.gridster-item-container {
+  background-color: #FFFFFF;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  min-height: 79px;
+  height: 100%; }
+  .gridster-item-container .gridster-item-header {
+    /* gridster-item Header */
+    position: relative;
+    height: 50px !important;
+    border: 1px solid #d3d3d3;
+    border-bottom: 0;
+    background-color: #E5E5E5;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    z-index: 1;
+    -webkit-border-radius: 2px 2px 0 0;
+    -moz-border-radius: 2px 2px 0 0;
+    -ms-border-radius: 2px 2px 0 0;
+    -o-border-radius: 2px 2px 0 0;
+    border-radius: 2px 2px 0 0;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    overflow: hidden;
+    /* IE6-8 */ }
+    .gridster-item-container .gridster-item-header .gridster-item-handle {
+      cursor: move;
+      margin: 12px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      border: 0;
+      vertical-align: middle;
+      -ms-interpolation-mode: bicubic;
+      display: block; }
+    .gridster-item-container .gridster-item-header .gridster-item-header-content {
+      line-height: 44px;
+      margin-left: 26px;
+      font-family: "Omnes-ECOMP-W02", Arial;
+      font-size: 18px;
+      color: #444444;
+      float: left; }
+    .gridster-item-container .gridster-item-header .gridster-item-sub-header-content {
+      position: absolute;
+      top: 29.5px;
+      left: 26px;
+      font-family: "Omnes-ECOMP-W02", Arial;
+      font-size: 12px;
+      color: #444444; }
+    .gridster-item-container .gridster-item-header .gridster-item-header-buttons-container {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+      overflow: hidden;
+      text-align: right;
+      height: 30px;
+      color: #444444; }
+  .gridster-item-container .gridster-item-body {
+    /* gridster-item Body */
+    position: absolute;
+    width: 100%;
+    top: 50px;
+    left: 0;
+    right: 0;
+    bottom: 29px;
+    border: 1px solid #d3d3d3;
+    box-sizing: border-box;
+    overflow: auto;
+    color: #444444;
+    /* text-align: center; */ }
+  .gridster-item-container .gridster-item-footer {
+    /* gridster-item Footer */
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 29px !important;
+    text-align: left;
+    cursor: pointer;
+    border: 1px solid #d3d3d3;
+    border-top: 0;
+    background-color: #F2F2F2;
+    -webkit-border-radius: 0 0 2px 2px;
+    -moz-border-radius: 0 0 2px 2px;
+    -ms-border-radius: 0 0 2px 2px;
+    -o-border-radius: 0 0 2px 2px;
+    border-radius: 0 0 2px 2px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    text-decoration: none;
+    /* IE6-8 */ }
+    .gridster-item-container .gridster-item-footer:hover {
+      background-color: #E5E5E5;
+      color: #565656;
+      text-decoration: underline; }
+    .gridster-item-container .gridster-item-footer .gridster-item-footer-content {
+      line-height: 30px;
+      font-family: "Omnes-ECOMP-W02", Arial;
+      font-size: 12px;
+      color: #565656;
+      margin: 20px;
+      text-decoration: none; }
+      .gridster-item-container .gridster-item-footer .gridster-item-footer-content:hover {
+        color: #199ddf;
+        text-decoration: underline; }
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/css/fusion-sunny.css b/ECOMP-SDK-APP/src/main/webapp/static/fusion/css/fusion-sunny.css
new file mode 100644
index 000000000..f9154a1ca
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/css/fusion-sunny.css
@@ -0,0 +1,362 @@
+  input, textarea, select, div {
+    font-family: Arial;
+    font-size: 11px;
+    font-weight: normal;
+  }
+  
+  form {
+    margin-top: 5px;  
+  }
+  
+
+  .applicationWindow { border-width:  0px 0px 1px 0px;
+                       border-style:  solid;
+                       border-color:  #959595;
+                       box-shadow:    inset 0 0 10px #000000;
+                       margin-top:    10px;
+                       margin-bottom: 10px;
+                       margin-left:   10px;
+                       margin-right:  10px;
+  }  
+
+  .feedbackMessage  { width: 99%;
+  					  font-family: Arial;
+    				  font-size: 11px;
+					  color: #1f1f1f;
+                      padding: 3px;
+                      border: 1px #eeb420 solid;
+                      margin: 3px;
+                      background: #fff9e5;
+                    }                      
+
+  .menubar {
+    border-width: 0px 0px 0px 1px; border-style: solid; border-color: #959595;
+  }
+
+  .footer {
+    /*clear: both;*/
+    border-width: 0px 1px 0px 1px; border-style: solid; border-color: #959595;
+  	font-family: Verdana,Arial,Helvetica, sans-serif;
+    font-size: 9px;    
+    padding:   10px 10px 30px 10px;
+    background: white;
+  }
+
+  .pageTitle {
+    font-family: Arial;
+    font-size: 18px;
+    font-weight: bold;
+    margin-top: 5px;    
+  }
+
+  .content {
+	border-width:  0px 1px 0px 1px;
+    border-style:  solid;
+    border-color:  #959595;
+  	font-family: Arial;
+    font-size: 11px;
+    padding: 5px;
+    background:   white;
+    /*height: 600px;*/
+  }
+
+  .popupContent {
+    font-family: Arial;
+    font-size: 11px;
+    padding: 3px;
+  }
+
+  .logo {
+	border-width:  0px 1px 0px 1px;
+    border-style:  solid;
+    border-color:  #959595;
+  	text-align: right;
+  }
+
+  .sep {
+    border: 1px solid black
+  }
+
+  .logo		{  /*position: relative;*/
+                   float:left;
+                   padding-top: 25px;
+                   padding-left: 25px;   
+                }
+
+  .applicationLogo		{ float:right; 
+                          padding-top: 25px;
+                          padding-right: 25px;                          
+                        }
+
+  .applinkWhite		{ font-family: Arial;
+                          font-size: 13px;
+                          font-weight: 900;
+                          color: #FFFFFF;
+                          text-decoration: none; }
+
+  .terms                { font-family: Verdana, Arial, Helvetica, sans-serif;
+                          font-size: 9px;
+                        }
+
+  .broadcastMessage     { color: red; }
+  .broadcastMessageList { color: red; }
+
+  .button               {  
+					      margin: 5px 1px 5px 1px;
+                          padding: 3px; }
+
+  .toolbarbutton:hover {
+    color:#005491;
+  }
+
+  .headerText		{ font-family: Arial;
+                      font-size: 15px;
+			          font-weight: 700;
+                      color: #000000; }
+
+  .headerBackground	{ background: #336699; }
+
+  .errorMessageText { font-family: Arial;
+                      font-size: 11px;
+                      font-weight: bold; 
+                      color: red;   }
+   
+
+  .normalText		{ font-family: Arial;
+                      font-size: 11px;
+                      color: #000000; }
+
+  .normalTextRed	{ font-family: Arial;
+                      font-size: 11px;
+                      color: red; }
+
+
+  .smallNormalText	{ font-family: Arial;
+                      font-size: 9px;
+                      color: #000000; }
+
+  .tableBorder          { border:1px outset teal }
+
+  .validationError      { background: #b9eaff; }
+
+  .templatebody         {  
+  						  background: url(../images/body_graphic.jpg) repeat-x;
+                          /*margin: 40px 80px 40px 80px;*/  						   
+  						}
+
+  /*--------------------- General Content ------------------------------------*/	  
+
+  .relative {
+    position:relative;
+  }
+  
+  .clear{
+    clear:both;
+  } 
+
+  .left {
+    float:      left;
+  } 
+
+  .leftCentered{
+    float:      left;
+    text-align: center;
+  } 
+
+  .right {
+    float:      right;
+  } 
+
+  .rightAligned{
+    text-align: right;
+  } 
+
+  .centered {
+    text-align: center;
+    align:      center;
+  } 
+
+
+  .noWrap{
+  	white-space:nowrap;
+  }
+
+  .disabled {
+	color:gray;
+	cursor:hand;
+  }
+
+  /*--------------------- Tab styles -------------------------------------*/
+  
+  .current {
+	font-weight: bold;
+  	border-width: 1px 1px 1px 1px; 
+  	border-color: silver;
+  	border-style: solid;
+  }
+ 
+  .subTab {
+	font-weight:bold;
+	font-family: Arial;
+	font-size:   11px;
+	color:     #0F3B82;
+  }
+  
+
+  /*--------------------- Grid styles ------------------------------------*/	  
+
+  /* Grid navigation and header styles */
+	.gridFilterLabel {font-size:   7pt;
+	                  font-align:  justify;
+	                  font-weight: bold;
+	                  display:     block;}
+
+    .gridFilterText  {height:     17px;
+	                  font-size:  8pt;
+	                  width:      60%;
+	                  font-align: justify;}
+
+    .gridNavigationBar { font-family:Arial,Verdana;
+		                  font-size:11px;
+		                  font-weight:normal;
+		                  color:#000;
+                          margin: 0px;
+                          width: 100%;
+                          vertical-align: middle;
+    }
+    
+    .gridNavigationBar .navLinks { float: left;
+                                   margin-right:15px;
+                                   padding-top: 2px;
+                                   height:      19px;
+                                   line-height: 19px;                                   
+                                 }
+
+    .gridNavigationBar .pageControls  { float:        left;
+                                        margin-right: 15px;
+                                        height:       19px;  
+                                        line-height:  19px;                                        
+                                      }
+
+    .gridNavigationBar .pageControls input { font-size:      8pt;
+									         height:         17px;
+									         vertical-align: middle;                                    
+                                           }
+
+    .gridNavigationBar .pageInfo {  float:          right; 
+                                    vertical-align: middle;
+                                    height:         19px;
+                                    line-height:    19px;
+                                 }
+
+    .gridNavigationBar .pageInfo input { font-size:      8pt;
+								         height:         17px;
+								         vertical-align: middle;                                    
+                                       }
+
+
+    .gridNavigationBar span { padding: 3px; }
+
+    .gridNavigationBar a {
+	  text-decoration:underline;
+	  color:#000;
+	  font-weight:normal;
+	}
+
+    .gridNavigationBar img { vertical-align: middle; }
+  
+    .gridBulkUpdateRow {
+      height: 35px; 
+      line-height: 35px;
+    } 
+
+    .gridBulkUpdateRow input {
+      vertical-align: middle;
+    } 
+
+
+    /* dummy class used to lock the form elements of a grid - ex. bulk transaction processing */
+    .alwaysEnabled {}
+
+    .hidden {
+	  display: none;
+    }
+  
+    .selectedPage {
+		background-color:#C4DFFB;
+		color:          white;
+        border-style:   solid;
+        border-width:   1px;
+        border-color:  gray;
+        padding-left:   3px;
+        padding-right:  3px;
+		vertical-align: middle;
+	}
+
+    .selectedRow{
+	  /*background-color:#C4DFFB;*/
+	}
+	
+	/* Action Item styles */
+	.actionList {
+	  margin-left:  -20px;
+	  margin-right: -10px;
+	  padding-left:   5px;
+	}
+
+    .actionList li {
+	  float:left;
+	  padding-left:  3px;
+	  padding-right: 3px;
+	}
+	
+	.actionList li a {
+	  text-decoration:none;
+	  color:#000;
+	}
+
+	/* Filter Operator List styles */
+	
+	.filterList {
+	  margin: 0px;
+	}
+
+    .filterList li {
+      list-style-type: none;
+      padding:3px 3px 3px 2px;
+	  cursor:hand;
+	  font-size:11px;
+	}
+
+    .filterList li:hover {
+      background: #404040;      
+    }
+
+    .filterList li a {
+      color: #000;
+	  text-decoration: none;
+    }
+
+    .filterList li:hover a {
+	  color: white;
+    }
+
+    .filterList li a:hover {
+	  text-decoration: none;
+	  color: white;
+    }
+
+	.filterListItem a {
+	  text-decoration:none;
+	  padding:3px 2px 3px 2px;
+	}
+
+
+  /*---------------------- Customized ZK Styles ------------------------------*/
+  
+  .z-datebox input, .z-timebox input {
+    font-family: Arial;
+    font-size: 11px;
+    height: 15px;
+    margin-top:1px;  	
+  }
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/images/att_angular_gridster/grips.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/images/att_angular_gridster/grips.png
new file mode 100644
index 000000000..29b92cc57
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/images/att_angular_gridster/grips.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/images/ecomp-login-550x360.jpg b/ECOMP-SDK-APP/src/main/webapp/static/fusion/images/ecomp-login-550x360.jpg
new file mode 100644
index 000000000..618b1a924
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/images/ecomp-login-550x360.jpg
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/images/ecomp-login.jpg b/ECOMP-SDK-APP/src/main/webapp/static/fusion/images/ecomp-login.jpg
new file mode 100644
index 000000000..618b20e91
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/images/ecomp-login.jpg
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/images/ecomp.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/images/ecomp.png
new file mode 100644
index 000000000..b355f109f
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/images/ecomp.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/images/ecomp_trans.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/images/ecomp_trans.png
new file mode 100644
index 000000000..4e8381c1a
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/images/ecomp_trans.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/js/att_angular_gridster/angular-gridster.js b/ECOMP-SDK-APP/src/main/webapp/static/fusion/js/att_angular_gridster/angular-gridster.js
new file mode 100644
index 000000000..985fa4341
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/js/att_angular_gridster/angular-gridster.js
@@ -0,0 +1,2244 @@
+/*global define:true*/
+(function(root, factory) {
+
+	'use strict';
+
+	if (typeof define === 'function' && define.amd) {
+		// AMD
+		define(['angular'], factory);
+	} else if (typeof exports === 'object') {
+		// CommonJS
+		module.exports = factory(require('angular'));
+	} else {
+		// Browser, nothing "exported". Only registered as a module with angular.
+		factory(root.angular);
+	}
+}(this, function(angular) {
+
+   'use strict';
+
+    var ie8 = false;
+
+    var getInternetExplorerVersion = function ()
+        // Returns the version of Internet Explorer >4 or
+        // undefined(indicating the use of another browser).
+        {
+            var isIE10 = (eval("/*@cc_on!@*/false") && document.documentMode === 10);
+            if (isIE10) {
+                return 10;
+            }
+            var v = 3,
+                div = document.createElement('div'),
+                all = div.getElementsByTagName('i');
+            do {
+                div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->';
+            } while (all[0]);
+            return v > 4 ? v : undefined;
+        };
+
+    var browserVersion = getInternetExplorerVersion();
+
+    if (browserVersion && browserVersion < 9) {
+        ie8 = true;
+    }
+        
+	// This returned angular module 'gridster' is what is exported.
+	return angular.module('attGridsterLib', [])
+
+	.constant('gridsterConfig', {
+		columns: 6, // number of columns in the grid
+		pushing: true, // whether to push other items out of the way
+		floating: true, // whether to automatically float items up so they stack
+		swapping: true, // whether or not to have items switch places instead of push down if they are the same size
+		width: 'auto', // width of the grid. "auto" will expand the grid to its parent container
+		colWidth: 'auto', // width of grid columns. "auto" will divide the width of the grid evenly among the columns
+		rowHeight: 'match', // height of grid rows. 'match' will make it the same as the column width, a numeric value will be interpreted as pixels, '/2' is half the column width, '*5' is five times the column width, etc.
+		margins: [10, 10], // margins in between grid items
+		outerMargin: false,
+		isMobile: false, // toggle mobile view
+		mobileBreakPoint: 100, // width threshold to toggle mobile mode
+		mobileModeEnabled: true, // whether or not to toggle mobile mode when screen width is less than mobileBreakPoint
+		minColumns: 1, // minimum amount of columns the grid can scale down to
+		minRows: 1, // minimum amount of rows to show if the grid is empty
+		maxRows: 100, // maximum amount of rows in the grid
+		defaultSizeX: 1, // default width of an item in columns
+		defaultSizeY: 1, // default height of an item in rows
+		minSizeX: 1, // minimum column width of an item
+		maxSizeX: null, // maximum column width of an item
+		minSizeY: 1, // minumum row height of an item
+		maxSizeY: null, // maximum row height of an item
+		saveGridItemCalculatedHeightInMobile: false, // grid item height in mobile display. true- to use the calculated height by sizeY given
+		resizable: { // options to pass to resizable handler
+			enabled: false,
+			handles: ['s', 'e', 'n', 'w', 'se', 'ne', 'sw', 'nw']
+		},
+		draggable: { // options to pass to draggable handler
+			enabled: true,
+			scrollSensitivity: 20, // Distance in pixels from the edge of the viewport after which the viewport should scroll, relative to pointer
+			scrollSpeed: 15 // Speed at which the window should scroll once the mouse pointer gets within scrollSensitivity distance
+		}
+	})
+
+	.controller('GridsterCtrl', ['gridsterConfig', '$timeout',
+		function(gridsterConfig, $timeout) {
+
+			var gridster = this;
+
+			/**
+			 * Create options from gridsterConfig constant
+			 */
+			angular.extend(this, gridsterConfig);
+
+			this.resizable = angular.extend({}, gridsterConfig.resizable || {});
+			this.draggable = angular.extend({}, gridsterConfig.draggable || {});
+
+			var flag = false;
+			this.layoutChanged = function() {
+				if (flag) {
+					return;
+				}
+				flag = true;
+				$timeout(function() {
+					flag = false;
+					if (gridster.loaded) {
+						gridster.floatItemsUp();
+					}
+					gridster.updateHeight(gridster.movingItem ? gridster.movingItem.sizeY : 0);
+				}, 30);
+			};
+
+			/**
+			 * A positional array of the items in the grid
+			 */
+			this.grid = [];
+
+			/**
+			 * Clean up after yourself
+			 */
+			this.destroy = function() {
+				// empty the grid to cut back on the possibility
+				// of circular references
+				if (this.grid) {
+					this.grid = [];
+				}
+				this.$element = null;
+			};
+
+			/**
+			 * Overrides default options
+			 *
+			 * @param {Object} options The options to override
+			 */
+			this.setOptions = function(options) {
+				if (!options) {
+					return;
+				}
+
+				options = angular.extend({}, options);
+
+				// all this to avoid using jQuery...
+				if (options.draggable) {
+					angular.extend(this.draggable, options.draggable);
+					delete(options.draggable);
+				}
+				if (options.resizable) {
+					angular.extend(this.resizable, options.resizable);
+					delete(options.resizable);
+				}
+
+				angular.extend(this, options);
+
+				if (!this.margins || this.margins.length !== 2) {
+					this.margins = [0, 0];
+				} else {
+					for (var x = 0, l = this.margins.length; x < l; ++x) {
+						this.margins[x] = parseInt(this.margins[x], 10);
+						if (isNaN(this.margins[x])) {
+							this.margins[x] = 0;
+						}
+					}
+				}
+			};
+
+			/**
+			 * Check if item can occupy a specified position in the grid
+			 *
+			 * @param {Object} item The item in question
+			 * @param {Number} row The row index
+			 * @param {Number} column The column index
+			 * @returns {Boolean} True if if item fits
+			 */
+			this.canItemOccupy = function(item, row, column) {
+				return row > -1 && column > -1 && item.sizeX + column <= this.columns && item.sizeY + row <= this.maxRows;
+			};
+
+			/**
+			 * Set the item in the first suitable position
+			 *
+			 * @param {Object} item The item to insert
+			 */
+			this.autoSetItemPosition = function(item) {
+				// walk through each row and column looking for a place it will fit
+				for (var rowIndex = 0; rowIndex < this.maxRows; ++rowIndex) {
+					for (var colIndex = 0; colIndex < this.columns; ++colIndex) {
+						// only insert if position is not already taken and it can fit
+						var items = this.getItems(rowIndex, colIndex, item.sizeX, item.sizeY, item);
+						if (items.length === 0 && this.canItemOccupy(item, rowIndex, colIndex)) {
+							this.putItem(item, rowIndex, colIndex);
+							return;
+						}
+					}
+				}
+				throw new Error('Unable to place item!');
+			};
+
+			/**
+			 * Gets items at a specific coordinate
+			 *
+			 * @param {Number} row
+			 * @param {Number} column
+			 * @param {Number} sizeX
+			 * @param {Number} sizeY
+			 * @param {Array} excludeItems An array of items to exclude from selection
+			 * @returns {Array} Items that match the criteria
+			 */
+			this.getItems = function(row, column, sizeX, sizeY, excludeItems) {
+				var items = [];
+				if (!sizeX || !sizeY) {
+					sizeX = sizeY = 1;
+				}
+				if (excludeItems && !(excludeItems instanceof Array)) {
+					excludeItems = [excludeItems];
+				}
+				for (var h = 0; h < sizeY; ++h) {
+					for (var w = 0; w < sizeX; ++w) {
+						var item = this.getItem(row + h, column + w, excludeItems);
+						if (item && (!excludeItems || excludeItems.indexOf(item) === -1) && items.indexOf(item) === -1) {
+							items.push(item);
+						}
+					}
+				}
+				return items;
+			};
+
+			/**
+			 * @param {Array} items
+			 * @returns {Object} An item that represents the bounding box of the items
+			 */
+			this.getBoundingBox = function(items) {
+
+				if (items.length === 0) {
+					return null;
+				}
+				if (items.length === 1) {
+					return {
+						row: items[0].row,
+						col: items[0].col,
+						sizeY: items[0].sizeY,
+						sizeX: items[0].sizeX
+					};
+				}
+
+				var maxRow = 0;
+				var maxCol = 0;
+				var minRow = 9999;
+				var minCol = 9999;
+
+				for (var i = 0, l = items.length; i < l; ++i) {
+					var item = items[i];
+					minRow = Math.min(item.row, minRow);
+					minCol = Math.min(item.col, minCol);
+					maxRow = Math.max(item.row + item.sizeY, maxRow);
+					maxCol = Math.max(item.col + item.sizeX, maxCol);
+				}
+
+				return {
+					row: minRow,
+					col: minCol,
+					sizeY: maxRow - minRow,
+					sizeX: maxCol - minCol
+				};
+			};
+
+
+			/**
+			 * Removes an item from the grid
+			 *
+			 * @param {Object} item
+			 */
+			this.removeItem = function(item) {
+				for (var rowIndex = 0, l = this.grid.length; rowIndex < l; ++rowIndex) {
+					var columns = this.grid[rowIndex];
+					if (!columns) {
+						continue;
+					}
+					var index = columns.indexOf(item);
+					if (index !== -1) {
+						columns[index] = null;
+						break;
+					}
+				}
+				this.layoutChanged();
+			};
+
+			/**
+			 * Returns the item at a specified coordinate
+			 *
+			 * @param {Number} row
+			 * @param {Number} column
+			 * @param {Array} excludeItems Items to exclude from selection
+			 * @returns {Object} The matched item or null
+			 */
+			this.getItem = function(row, column, excludeItems) {
+				if (excludeItems && !(excludeItems instanceof Array)) {
+					excludeItems = [excludeItems];
+				}
+				var sizeY = 1;
+				while (row > -1) {
+					var sizeX = 1,
+						col = column;
+					while (col > -1) {
+						var items = this.grid[row];
+						if (items) {
+							var item = items[col];
+							if (item && (!excludeItems || excludeItems.indexOf(item) === -1) && item.sizeX >= sizeX && item.sizeY >= sizeY) {
+								return item;
+							}
+						}
+						++sizeX;
+						--col;
+					}
+					--row;
+					++sizeY;
+				}
+				return null;
+			};
+
+			/**
+			 * Insert an array of items into the grid
+			 *
+			 * @param {Array} items An array of items to insert
+			 */
+			this.putItems = function(items) {
+				for (var i = 0, l = items.length; i < l; ++i) {
+					this.putItem(items[i]);
+				}
+			};
+
+			/**
+			 * Insert a single item into the grid
+			 *
+			 * @param {Object} item The item to insert
+			 * @param {Number} row (Optional) Specifies the items row index
+			 * @param {Number} column (Optional) Specifies the items column index
+			 * @param {Array} ignoreItems
+			 */
+			this.putItem = function(item, row, column, ignoreItems) {
+				// auto place item if no row specified
+				if (typeof row === 'undefined' || row === null) {
+					row = item.row;
+					column = item.col;
+					if (typeof row === 'undefined' || row === null) {
+						this.autoSetItemPosition(item);
+						return;
+					}
+				}
+
+				// keep item within allowed bounds
+				if (!this.canItemOccupy(item, row, column)) {
+					column = Math.min(this.columns - item.sizeX, Math.max(0, column));
+					row = Math.min(this.maxRows - item.sizeY, Math.max(0, row));
+				}
+
+				// check if item is already in grid
+				if (item.oldRow !== null && typeof item.oldRow !== 'undefined') {
+					var samePosition = item.oldRow === row && item.oldColumn === column;
+					var inGrid = this.grid[row] && this.grid[row][column] === item;
+					if (samePosition && inGrid) {
+						item.row = row;
+						item.col = column;
+						return;
+					} else {
+						// remove from old position
+						var oldRow = this.grid[item.oldRow];
+						if (oldRow && oldRow[item.oldColumn] === item) {
+							delete oldRow[item.oldColumn];
+						}
+					}
+				}
+
+				item.oldRow = item.row = row;
+				item.oldColumn = item.col = column;
+
+				this.moveOverlappingItems(item, ignoreItems);
+
+				if (!this.grid[row]) {
+					this.grid[row] = [];
+				}
+				this.grid[row][column] = item;
+
+				if (this.movingItem === item) {
+					this.floatItemUp(item);
+				}
+				this.layoutChanged();
+			};
+
+			/**
+			 * Trade row and column if item1 with item2
+			 *
+			 * @param {Object} item1
+			 * @param {Object} item2
+			 */
+			this.swapItems = function(item1, item2) {
+				this.grid[item1.row][item1.col] = item2;
+				this.grid[item2.row][item2.col] = item1;
+
+				var item1Row = item1.row;
+				var item1Col = item1.col;
+				item1.row = item2.row;
+				item1.col = item2.col;
+				item2.row = item1Row;
+				item2.col = item1Col;
+			};
+
+			/**
+			 * Prevents items from being overlapped
+			 *
+			 * @param {Object} item The item that should remain
+			 * @param {Array} ignoreItems
+			 */
+			this.moveOverlappingItems = function(item, ignoreItems) {
+				// don't move item, so ignore it
+				if (!ignoreItems) {
+					ignoreItems = [item];
+				} else if (ignoreItems.indexOf(item) === -1) {
+					ignoreItems = ignoreItems.slice(0);
+					ignoreItems.push(item);
+				}
+
+				// get the items in the space occupied by the item's coordinates
+				var overlappingItems = this.getItems(
+					item.row,
+					item.col,
+					item.sizeX,
+					item.sizeY,
+					ignoreItems
+				);
+				this.moveItemsDown(overlappingItems, item.row + item.sizeY, ignoreItems);
+			};
+
+			/**
+			 * Moves an array of items to a specified row
+			 *
+			 * @param {Array} items The items to move
+			 * @param {Number} newRow The target row
+			 * @param {Array} ignoreItems
+			 */
+			this.moveItemsDown = function(items, newRow, ignoreItems) {
+				if (!items || items.length === 0) {
+					return;
+				}
+				items.sort(function(a, b) {
+					return a.row - b.row;
+				});
+
+				ignoreItems = ignoreItems ? ignoreItems.slice(0) : [];
+				var topRows = {},
+					item, i, l;
+
+				// calculate the top rows in each column
+				for (i = 0, l = items.length; i < l; ++i) {
+					item = items[i];
+					var topRow = topRows[item.col];
+					if (typeof topRow === 'undefined' || item.row < topRow) {
+						topRows[item.col] = item.row;
+					}
+				}
+
+				// move each item down from the top row in its column to the row
+				for (i = 0, l = items.length; i < l; ++i) {
+					item = items[i];
+					var rowsToMove = newRow - topRows[item.col];
+					this.moveItemDown(item, item.row + rowsToMove, ignoreItems);
+					ignoreItems.push(item);
+				}
+			};
+
+			/**
+			 * Moves an item down to a specified row
+			 *
+			 * @param {Object} item The item to move
+			 * @param {Number} newRow The target row
+			 * @param {Array} ignoreItems
+			 */
+			this.moveItemDown = function(item, newRow, ignoreItems) {
+				if (item.row >= newRow) {
+					return;
+				}
+				while (item.row < newRow) {
+					++item.row;
+					this.moveOverlappingItems(item, ignoreItems);
+				}
+				this.putItem(item, item.row, item.col, ignoreItems);
+			};
+
+			/**
+			 * Moves all items up as much as possible
+			 */
+			this.floatItemsUp = function() {
+				if (this.floating === false) {
+					return;
+				}
+				for (var rowIndex = 0, l = this.grid.length; rowIndex < l; ++rowIndex) {
+					var columns = this.grid[rowIndex];
+					if (!columns) {
+						continue;
+					}
+					for (var colIndex = 0, len = columns.length; colIndex < len; ++colIndex) {
+						var item = columns[colIndex];
+						if (item) {
+							this.floatItemUp(item);
+						}
+					}
+				}
+			};
+
+			/**
+			 * Float an item up to the most suitable row
+			 *
+			 * @param {Object} item The item to move
+			 */
+			this.floatItemUp = function(item) {
+				if (this.floating === false) {
+					return;
+				}
+				var colIndex = item.col,
+					sizeY = item.sizeY,
+					sizeX = item.sizeX,
+					bestRow = null,
+					bestColumn = null,
+					rowIndex = item.row - 1;
+
+				while (rowIndex > -1) {
+					var items = this.getItems(rowIndex, colIndex, sizeX, sizeY, item);
+					if (items.length !== 0) {
+						break;
+					}
+					bestRow = rowIndex;
+					bestColumn = colIndex;
+					--rowIndex;
+				}
+				if (bestRow !== null) {
+					this.putItem(item, bestRow, bestColumn);
+				}
+			};
+
+			/**
+			 * Update gridsters height
+			 *
+			 * @param {Number} plus (Optional) Additional height to add
+			 */
+			this.updateHeight = function(plus) {
+				var maxHeight = this.minRows;
+				plus = plus || 0;
+				for (var rowIndex = this.grid.length; rowIndex >= 0; --rowIndex) {
+					var columns = this.grid[rowIndex];
+					if (!columns) {
+						continue;
+					}
+					for (var colIndex = 0, len = columns.length; colIndex < len; ++colIndex) {
+						if (columns[colIndex]) {
+							maxHeight = Math.max(maxHeight, rowIndex + plus + columns[colIndex].sizeY);
+						}
+					}
+				}
+				this.gridHeight = this.maxRows - maxHeight > 0 ? Math.min(this.maxRows, maxHeight) : Math.max(this.maxRows, maxHeight);
+			};
+
+			/**
+			 * Returns the number of rows that will fit in given amount of pixels
+			 *
+			 * @param {Number} pixels
+			 * @param {Boolean} ceilOrFloor (Optional) Determines rounding method
+			 */
+			this.pixelsToRows = function(pixels, ceilOrFloor) {
+				if (ceilOrFloor === true) {
+					return Math.ceil(pixels / this.curRowHeight);
+				} else if (ceilOrFloor === false) {
+					return Math.floor(pixels / this.curRowHeight);
+				}
+
+				return Math.round(pixels / this.curRowHeight);
+			};
+
+			/**
+			 * Returns the number of columns that will fit in a given amount of pixels
+			 *
+			 * @param {Number} pixels
+			 * @param {Boolean} ceilOrFloor (Optional) Determines rounding method
+			 * @returns {Number} The number of columns
+			 */
+			this.pixelsToColumns = function(pixels, ceilOrFloor) {
+				if (ceilOrFloor === true) {
+					return Math.ceil(pixels / this.curColWidth);
+				} else if (ceilOrFloor === false) {
+					return Math.floor(pixels / this.curColWidth);
+				}
+
+				return Math.round(pixels / this.curColWidth);
+			};
+		}
+	])
+
+	.directive('gridsterPreview', function() {
+		return {
+			replace: true,
+			scope: true,
+			require: '^gridster',
+			template: '<div ng-style="previewStyle()" class="gridster-item gridster-preview-holder"></div>',
+			link: function(scope, $el, attrs, gridster) {
+
+				/**
+				 * @returns {Object} style object for preview element
+				 */
+				scope.previewStyle = function() {
+                                    
+					if (!gridster.movingItem) {
+						return {
+							display: 'none'
+						};
+					}
+
+					return {
+						display: 'block',
+						height: (gridster.movingItem.sizeY * gridster.curRowHeight - gridster.margins[0]) + 'px',
+						width: (gridster.movingItem.sizeX * gridster.curColWidth - gridster.margins[1]) + 'px',
+						top: (gridster.movingItem.row * gridster.curRowHeight + (gridster.outerMargin ? gridster.margins[0] : 0)) + 'px',
+						left: (gridster.movingItem.col * gridster.curColWidth + (gridster.outerMargin ? gridster.margins[1] : 0)) + 'px'
+					};
+				};
+			}
+		};
+	})
+
+	/**
+	 * The gridster directive
+	 *
+	 * @param {Function} $timeout
+	 * @param {Object} $window
+	 * @param {Object} $rootScope
+	 * @param {Function} gridsterDebounce
+	 */
+	.directive('gridster', ['$timeout', '$window', '$rootScope', 'gridsterDebounce',
+		function($timeout, $window, $rootScope, gridsterDebounce) {
+			return {
+				scope: true,
+				restrict: 'EAC',
+				controller: 'GridsterCtrl',
+				controllerAs: 'gridster',
+				compile: function($tplElem) {
+                                        
+                                        $tplElem.prepend('<div ng-if="gridster.movingItem" gridster-preview></div>');
+                                        
+                                        return function(scope, $elem, attrs, gridster) {
+						gridster.loaded = false;
+
+						gridster.$element = $elem;
+
+						scope.gridster = gridster;
+
+						$elem.addClass('gridster');
+
+						var isVisible = function(ele) {
+							return ele.style.visibility !== 'hidden' && ele.style.display !== 'none';
+						};
+
+						function refresh(config) {
+							gridster.setOptions(config);
+
+							if (!isVisible($elem[0])) {
+								return;
+							}
+
+							// resolve "auto" & "match" values
+							if (gridster.width === 'auto') {
+								gridster.curWidth = $elem[0].offsetWidth || parseInt($elem.css('width'), 10);
+							} else {
+								gridster.curWidth = gridster.width;
+							}
+
+							if (gridster.colWidth === 'auto') {
+								gridster.curColWidth = (gridster.curWidth + (gridster.outerMargin ? -gridster.margins[1] : gridster.margins[1])) / gridster.columns;
+							} else {
+								gridster.curColWidth = gridster.colWidth;
+							}
+
+							gridster.curRowHeight = gridster.rowHeight;
+							if (typeof gridster.rowHeight === 'string') {
+								if (gridster.rowHeight === 'match') {
+									gridster.curRowHeight = Math.round(gridster.curColWidth);
+								} else if (gridster.rowHeight.indexOf('*') !== -1) {
+									gridster.curRowHeight = Math.round(gridster.curColWidth * gridster.rowHeight.replace('*', '').replace(' ', ''));
+								} else if (gridster.rowHeight.indexOf('/') !== -1) {
+									gridster.curRowHeight = Math.round(gridster.curColWidth / gridster.rowHeight.replace('/', '').replace(' ', ''));
+								}
+							}
+
+							gridster.isMobile = gridster.mobileModeEnabled && gridster.curWidth <= gridster.mobileBreakPoint;
+
+							// loop through all items and reset their CSS
+							for (var rowIndex = 0, l = gridster.grid.length; rowIndex < l; ++rowIndex) {
+								var columns = gridster.grid[rowIndex];
+								if (!columns) {
+									continue;
+								}
+
+								for (var colIndex = 0, len = columns.length; colIndex < len; ++colIndex) {
+									if (columns[colIndex]) {
+										var item = columns[colIndex];
+										item.setElementPosition();
+										item.setElementSizeY();
+										item.setElementSizeX();
+									}
+								}
+							}
+
+							updateHeight();
+						}
+
+						var optionsKey = attrs.gridster;
+						if (optionsKey) {
+							scope.$parent.$watch(optionsKey, function(newConfig) {
+								refresh(newConfig);
+							}, true);
+						} else {
+							refresh({});
+						}
+
+						scope.$watch(function() {
+							return gridster.loaded;
+						}, function() {
+							if (gridster.loaded) {
+								$elem.addClass('gridster-loaded');
+							} else {
+								$elem.removeClass('gridster-loaded');
+							}
+						});
+
+						scope.$watch(function() {
+							return gridster.isMobile;
+						}, function() {
+							if (gridster.isMobile) {
+								$elem.addClass('gridster-mobile').removeClass('gridster-desktop');
+							} else {
+								$elem.removeClass('gridster-mobile').addClass('gridster-desktop');
+							}
+							$rootScope.$broadcast('gridster-mobile-changed', gridster);
+						});
+
+						scope.$watch(function() {
+							return gridster.draggable;
+						}, function() {
+							$rootScope.$broadcast('gridster-draggable-changed', gridster);
+						}, true);
+
+						scope.$watch(function() {
+							return gridster.resizable;
+						}, function() {
+							$rootScope.$broadcast('gridster-resizable-changed', gridster);
+						}, true);
+
+						function updateHeight() {
+                                                    if(gridster.gridHeight){ //need to put this check, otherwise fail in IE8
+							$elem.css('height', (gridster.gridHeight * gridster.curRowHeight) + (gridster.outerMargin ? gridster.margins[0] : -gridster.margins[0]) + 'px');
+                                                    }
+						}
+
+						scope.$watch(function() {
+							return gridster.gridHeight;
+						}, updateHeight);
+
+						scope.$watch(function() {
+							return gridster.movingItem;
+						}, function() {
+							gridster.updateHeight(gridster.movingItem ? gridster.movingItem.sizeY : 0);
+						});
+
+						var prevWidth = $elem[0].offsetWidth || parseInt($elem.css('width'), 10);
+
+						var resize = function() {
+							var width = $elem[0].offsetWidth || parseInt($elem.css('width'), 10);
+
+							if (!width || width === prevWidth || gridster.movingItem) {
+								return;
+							}
+							prevWidth = width;
+
+							if (gridster.loaded) {
+								$elem.removeClass('gridster-loaded');
+							}
+
+							refresh();
+
+							if (gridster.loaded) {
+								$elem.addClass('gridster-loaded');
+							}
+
+							$rootScope.$broadcast('gridster-resized', [width, $elem[0].offsetHeight], gridster);
+						};
+
+						// track element width changes any way we can
+						var onResize = gridsterDebounce(function onResize() {
+							resize();
+							$timeout(function() {
+								scope.$apply();
+							});
+						}, 100);
+
+						scope.$watch(function() {
+							return isVisible($elem[0]);
+						}, onResize);
+
+						// see https://github.com/sdecima/javascript-detect-element-resize
+						if (typeof window.addResizeListener === 'function') {
+							window.addResizeListener($elem[0], onResize);
+						} else {
+							scope.$watch(function() {
+								return $elem[0].offsetWidth || parseInt($elem.css('width'), 10);
+							}, resize);
+						}
+						var $win = angular.element($window);
+						$win.on('resize', onResize);
+
+						// be sure to cleanup
+						scope.$on('$destroy', function() {
+							gridster.destroy();
+							$win.off('resize', onResize);
+							if (typeof window.removeResizeListener === 'function') {
+								window.removeResizeListener($elem[0], onResize);
+							}
+						});
+
+						// allow a little time to place items before floating up
+						$timeout(function() {
+							scope.$watch('gridster.floating', function() {
+								gridster.floatItemsUp();
+							});
+							gridster.loaded = true;
+						}, 100);
+					};
+				}
+			};
+		}
+	])
+
+	.controller('GridsterItemCtrl', function() {
+		this.$element = null;
+		this.gridster = null;
+		this.row = null;
+		this.col = null;
+		this.sizeX = null;
+		this.sizeY = null;
+		this.minSizeX = 0;
+		this.minSizeY = 0;
+		this.maxSizeX = null;
+		this.maxSizeY = null;
+
+		this.init = function($element, gridster) {
+			this.$element = $element;
+			this.gridster = gridster;
+			this.sizeX = gridster.defaultSizeX;
+			this.sizeY = gridster.defaultSizeY;
+		};
+
+		this.destroy = function() {
+			// set these to null to avoid the possibility of circular references
+			this.gridster = null;
+			this.$element = null;
+		};
+
+		/**
+		 * Returns the items most important attributes
+		 */
+		this.toJSON = function() {
+			return {
+				row: this.row,
+				col: this.col,
+				sizeY: this.sizeY,
+				sizeX: this.sizeX
+			};
+		};
+
+		this.isMoving = function() {
+			return this.gridster.movingItem === this;
+		};
+
+		/**
+		 * Set the items position
+		 *
+		 * @param {Number} row
+		 * @param {Number} column
+		 */
+		this.setPosition = function(row, column) {
+			this.gridster.putItem(this, row, column);
+
+			if (!this.isMoving()) {
+				this.setElementPosition();
+			}
+		};
+
+		/**
+		 * Sets a specified size property
+		 *
+		 * @param {String} key Can be either "x" or "y"
+		 * @param {Number} value The size amount
+		 * @param {Boolean} preventMove
+		 */
+		this.setSize = function(key, value, preventMove) {
+			key = key.toUpperCase();
+			var camelCase = 'size' + key,
+				titleCase = 'Size' + key;
+			if (value === '') {
+				return;
+			}
+			value = parseInt(value, 10);
+			if (isNaN(value) || value === 0) {
+				value = this.gridster['default' + titleCase];
+			}
+			var max = key === 'X' ? this.gridster.columns : this.gridster.maxRows;
+			if (this['max' + titleCase]) {
+				max = Math.min(this['max' + titleCase], max);
+			}
+			if (this.gridster['max' + titleCase]) {
+				max = Math.min(this.gridster['max' + titleCase], max);
+			}
+			if (key === 'X' && this.cols) {
+				max -= this.cols;
+			} else if (key === 'Y' && this.rows) {
+				max -= this.rows;
+			}
+
+			var min = 0;
+			if (this['min' + titleCase]) {
+				min = Math.max(this['min' + titleCase], min);
+			}
+			if (this.gridster['min' + titleCase]) {
+				min = Math.max(this.gridster['min' + titleCase], min);
+			}
+
+			value = Math.max(Math.min(value, max), min);
+
+			var changed = (this[camelCase] !== value || (this['old' + titleCase] && this['old' + titleCase] !== value));
+			this['old' + titleCase] = this[camelCase] = value;
+
+			if (!this.isMoving()) {
+				this['setElement' + titleCase]();
+			}
+			if (!preventMove && changed) {
+				this.gridster.moveOverlappingItems(this);
+				this.gridster.layoutChanged();
+			}
+
+			return changed;
+		};
+
+		/**
+		 * Sets the items sizeY property
+		 *
+		 * @param {Number} rows
+		 * @param {Boolean} preventMove
+		 */
+		this.setSizeY = function(rows, preventMove) {
+			return this.setSize('Y', rows, preventMove);
+		};
+
+		/**
+		 * Sets the items sizeX property
+		 *
+		 * @param {Number} columns
+		 * @param {Boolean} preventMove
+		 */
+		this.setSizeX = function(columns, preventMove) {
+			return this.setSize('X', columns, preventMove);
+		};
+
+		/**
+		 * Sets an elements position on the page
+		 */
+		this.setElementPosition = function() {
+			if (this.gridster.isMobile) {
+				this.$element.css({
+					marginLeft: this.gridster.margins[0] + 'px',
+					marginRight: this.gridster.margins[0] + 'px',
+					marginTop: this.gridster.margins[1] + 'px',
+					marginBottom: this.gridster.margins[1] + 'px',
+					top: '',
+					left: ''
+				});
+			} else {
+				this.$element.css({
+					margin: 0,
+					top: (this.row * this.gridster.curRowHeight + (this.gridster.outerMargin ? this.gridster.margins[0] : 0)) + 'px',
+					left: (this.col * this.gridster.curColWidth + (this.gridster.outerMargin ? this.gridster.margins[1] : 0)) + 'px'
+				});
+			}
+		};
+
+		/**
+		 * Sets an elements height
+		 */
+		this.setElementSizeY = function() {
+			if (this.gridster.isMobile && !this.gridster.saveGridItemCalculatedHeightInMobile) {
+				this.$element.css('height', '');
+			} else {
+				var computedHeight = (this.sizeY * this.gridster.curRowHeight - this.gridster.margins[0]) + 'px';
+				//this.$element.css('height', computedHeight);
+                this.$element.attr('style', this.$element.attr('style') + '; ' + 'height: '+computedHeight+' !important;');
+			}
+		};
+
+		/**
+		 * Sets an elements width
+		 */
+		this.setElementSizeX = function() {
+			if (this.gridster.isMobile) {
+				this.$element.css('width', '');
+			} else {
+				this.$element.css('width', (this.sizeX * this.gridster.curColWidth - this.gridster.margins[1]) + 'px');
+			}
+		};
+
+		/**
+		 * Gets an element's width
+		 */
+		this.getElementSizeX = function() {
+			return (this.sizeX * this.gridster.curColWidth - this.gridster.margins[1]);
+		};
+
+		/**
+		 * Gets an element's height
+		 */
+		this.getElementSizeY = function() {
+			return (this.sizeY * this.gridster.curRowHeight - this.gridster.margins[0]);
+		};
+
+	})
+
+	.factory('GridsterTouch', [function() {
+		return function GridsterTouch(target, startEvent, moveEvent, endEvent) {
+			var lastXYById = {};
+
+			//  Opera doesn't have Object.keys so we use this wrapper
+			var numberOfKeys = function(theObject) {
+				if (Object.keys) {
+					return Object.keys(theObject).length;
+				}
+
+				var n = 0,
+					key;
+				for (key in theObject) {
+					++n;
+				}
+
+				return n;
+			};
+
+			//  this calculates the delta needed to convert pageX/Y to offsetX/Y because offsetX/Y don't exist in the TouchEvent object or in Firefox's MouseEvent object
+			var computeDocumentToElementDelta = function(theElement) {
+				var elementLeft = 0;
+				var elementTop = 0;
+				var oldIEUserAgent = navigator.userAgent.match(/\bMSIE\b/);
+
+				for (var offsetElement = theElement; offsetElement != null; offsetElement = offsetElement.offsetParent) {
+					//  the following is a major hack for versions of IE less than 8 to avoid an apparent problem on the IEBlog with double-counting the offsets
+					//  this may not be a general solution to IE7's problem with offsetLeft/offsetParent
+					if (oldIEUserAgent &&
+						(!document.documentMode || document.documentMode < 8) &&
+						offsetElement.currentStyle.position === 'relative' && offsetElement.offsetParent && offsetElement.offsetParent.currentStyle.position === 'relative' && offsetElement.offsetLeft === offsetElement.offsetParent.offsetLeft) {
+						// add only the top
+						elementTop += offsetElement.offsetTop;
+					} else {
+						elementLeft += offsetElement.offsetLeft;
+						elementTop += offsetElement.offsetTop;
+					}
+				}
+
+				return {
+					x: elementLeft,
+					y: elementTop
+				};
+			};
+
+			//  cache the delta from the document to our event target (reinitialized each mousedown/MSPointerDown/touchstart)
+			var documentToTargetDelta = computeDocumentToElementDelta(target);
+
+			//  common event handler for the mouse/pointer/touch models and their down/start, move, up/end, and cancel events
+			var doEvent = function(theEvtObj) {
+
+				if (theEvtObj.type === 'mousemove' && numberOfKeys(lastXYById) === 0) {
+					return;
+				}
+
+				var prevent = true;
+
+				var pointerList = theEvtObj.changedTouches ? theEvtObj.changedTouches : [theEvtObj];
+                                
+				for (var i = 0; i < pointerList.length; ++i) {
+					var pointerObj = pointerList[i];
+					var pointerId = (typeof pointerObj.identifier !== 'undefined') ? pointerObj.identifier : (typeof pointerObj.pointerId !== 'undefined') ? pointerObj.pointerId : 1;
+                                        
+                                        //  use the pageX/Y coordinates to compute target-relative coordinates when we have them (in ie < 9, we need to do a little work to put them there)
+					if (typeof pointerObj.pageX === 'undefined') {
+                                                
+                                                //  initialize assuming our source element is our target
+						if(!ie8){
+                                                    pointerObj.pageX = pointerObj.offsetX + documentToTargetDelta.x;
+                                                    pointerObj.pageY = pointerObj.offsetY + documentToTargetDelta.y;
+                                                }
+                                                else{
+                                                    pointerObj.pageX = pointerObj.clientX;
+                                                    pointerObj.pageY = pointerObj.clientY;
+                                                }
+
+						if (pointerObj.srcElement.offsetParent === target && document.documentMode && document.documentMode === 8 && pointerObj.type === 'mousedown') {
+							//  source element is a child piece of VML, we're in IE8, and we've not called setCapture yet - add the origin of the source element
+							pointerObj.pageX += pointerObj.srcElement.offsetLeft;
+							pointerObj.pageY += pointerObj.srcElement.offsetTop;
+						} else if (pointerObj.srcElement !== target && !document.documentMode || document.documentMode < 8) {
+							//  source element isn't the target (most likely it's a child piece of VML) and we're in a version of IE before IE8 -
+							//  the offsetX/Y values are unpredictable so use the clientX/Y values and adjust by the scroll offsets of its parents
+							//  to get the document-relative coordinates (the same as pageX/Y)
+							var sx = -2,
+								sy = -2; // adjust for old IE's 2-pixel border
+							for (var scrollElement = pointerObj.srcElement; scrollElement !== null; scrollElement = scrollElement.parentNode) {
+								sx += scrollElement.scrollLeft ? scrollElement.scrollLeft : 0;
+								sy += scrollElement.scrollTop ? scrollElement.scrollTop : 0;
+							}
+
+							pointerObj.pageX = pointerObj.clientX + sx;
+							pointerObj.pageY = pointerObj.clientY + sy;
+						}
+					}
+
+
+					var pageX = pointerObj.pageX;
+					var pageY = pointerObj.pageY;
+
+					if (theEvtObj.type.match(/(start|down)$/i)) {
+						//  clause for processing MSPointerDown, touchstart, and mousedown
+
+						//  refresh the document-to-target delta on start in case the target has moved relative to document
+						documentToTargetDelta = computeDocumentToElementDelta(target);
+
+						//  protect against failing to get an up or end on this pointerId
+						if (lastXYById[pointerId]) {
+							if (endEvent) {
+								endEvent({
+									target: theEvtObj.target,
+									which: theEvtObj.which,
+									pointerId: pointerId,
+									pageX: pageX,
+									pageY: pageY
+								});
+							}
+
+							delete lastXYById[pointerId];
+						}
+
+						if (startEvent) {
+							if (prevent) {
+								prevent = startEvent({
+									target: theEvtObj.target,
+									which: theEvtObj.which,
+									pointerId: pointerId,
+									pageX: pageX,
+									pageY: pageY
+								});
+							}
+						}
+
+						//  init last page positions for this pointer
+						lastXYById[pointerId] = {
+							x: pageX,
+							y: pageY
+						};
+
+						// IE pointer model
+						if (target.msSetPointerCapture) {
+							target.msSetPointerCapture(pointerId);
+						} else if (theEvtObj.type === 'mousedown' && numberOfKeys(lastXYById) === 1) {
+							if (useSetReleaseCapture) {
+								target.setCapture(true);
+							} else {
+								document.addEventListener('mousemove', doEvent, false);
+								document.addEventListener('mouseup', doEvent, false);
+							}
+						}
+					} else if (theEvtObj.type.match(/move$/i)) {
+						//  clause handles mousemove, MSPointerMove, and touchmove
+
+						if (lastXYById[pointerId] && !(lastXYById[pointerId].x === pageX && lastXYById[pointerId].y === pageY)) {
+							//  only extend if the pointer is down and it's not the same as the last point
+
+							if (moveEvent && prevent) {
+								prevent = moveEvent({
+									target: theEvtObj.target,
+									which: theEvtObj.which,
+									pointerId: pointerId,
+									pageX: pageX,
+									pageY: pageY
+								});
+							}
+
+							//  update last page positions for this pointer
+							lastXYById[pointerId].x = pageX;
+							lastXYById[pointerId].y = pageY;
+						}
+					} else if (lastXYById[pointerId] && theEvtObj.type.match(/(up|end|cancel)$/i)) {
+						//  clause handles up/end/cancel
+
+						if (endEvent && prevent) {
+							prevent = endEvent({
+								target: theEvtObj.target,
+								which: theEvtObj.which,
+								pointerId: pointerId,
+								pageX: pageX,
+								pageY: pageY
+							});
+						}
+
+						//  delete last page positions for this pointer
+						delete lastXYById[pointerId];
+
+						//  in the Microsoft pointer model, release the capture for this pointer
+						//  in the mouse model, release the capture or remove document-level event handlers if there are no down points
+						//  nothing is required for the iOS touch model because capture is implied on touchstart
+						if (target.msReleasePointerCapture) {
+							target.msReleasePointerCapture(pointerId);
+						} else if (theEvtObj.type === 'mouseup' && numberOfKeys(lastXYById) === 0) {
+							if (useSetReleaseCapture) {
+								target.releaseCapture();
+							} else {
+								document.removeEventListener('mousemove', doEvent, false);
+								document.removeEventListener('mouseup', doEvent, false);
+							}
+						}
+					}
+				}
+
+				if (prevent) {
+					if (theEvtObj.preventDefault) {
+						theEvtObj.preventDefault();
+					}
+
+					if (theEvtObj.preventManipulation) {
+						theEvtObj.preventManipulation();
+					}
+
+					if (theEvtObj.preventMouseEvent) {
+						theEvtObj.preventMouseEvent();
+					}
+				}
+			};
+
+			var useSetReleaseCapture = false;
+			// saving the settings for contentZooming and touchaction before activation
+			var contentZooming, msTouchAction;
+
+			this.enable = function() {
+
+				if (window.navigator.msPointerEnabled) {
+					//  Microsoft pointer model
+					target.addEventListener('MSPointerDown', doEvent, false);
+					target.addEventListener('MSPointerMove', doEvent, false);
+					target.addEventListener('MSPointerUp', doEvent, false);
+					target.addEventListener('MSPointerCancel', doEvent, false);
+
+					//  css way to prevent panning in our target area
+					if (typeof target.style.msContentZooming !== 'undefined') {
+						contentZooming = target.style.msContentZooming;
+						target.style.msContentZooming = 'none';
+					}
+
+					//  new in Windows Consumer Preview: css way to prevent all built-in touch actions on our target
+					//  without this, you cannot touch draw on the element because IE will intercept the touch events
+					if (typeof target.style.msTouchAction !== 'undefined') {
+						msTouchAction = target.style.msTouchAction;
+						target.style.msTouchAction = 'none';
+					}
+				} else if (target.addEventListener) {
+					//  iOS touch model
+					target.addEventListener('touchstart', doEvent, false);
+					target.addEventListener('touchmove', doEvent, false);
+					target.addEventListener('touchend', doEvent, false);
+					target.addEventListener('touchcancel', doEvent, false);
+
+					//  mouse model
+					target.addEventListener('mousedown', doEvent, false);
+
+					//  mouse model with capture
+					//  rejecting gecko because, unlike ie, firefox does not send events to target when the mouse is outside target
+					if (target.setCapture && !window.navigator.userAgent.match(/\bGecko\b/)) {
+						useSetReleaseCapture = true;
+
+						target.addEventListener('mousemove', doEvent, false);
+						target.addEventListener('mouseup', doEvent, false);
+					}
+				} else if (target.attachEvent && target.setCapture) {
+					//  legacy IE mode - mouse with capture
+					useSetReleaseCapture = true;
+					target.attachEvent('onmousedown', function() {
+						doEvent(window.event);
+						window.event.returnValue = false;
+						return false;
+					});
+					target.attachEvent('onmousemove', function() {
+						doEvent(window.event);
+						window.event.returnValue = false;
+						return false;
+					});
+					target.attachEvent('onmouseup', function() {
+						doEvent(window.event);
+						window.event.returnValue = false;
+						return false;
+					});
+				}
+			};
+
+			this.disable = function() {
+				if (window.navigator.msPointerEnabled) {
+					//  Microsoft pointer model
+					target.removeEventListener('MSPointerDown', doEvent, false);
+					target.removeEventListener('MSPointerMove', doEvent, false);
+					target.removeEventListener('MSPointerUp', doEvent, false);
+					target.removeEventListener('MSPointerCancel', doEvent, false);
+
+					//  reset zooming to saved value
+					if (contentZooming) {
+						target.style.msContentZooming = contentZooming;
+					}
+
+					// reset touch action setting
+					if (msTouchAction) {
+						target.style.msTouchAction = msTouchAction;
+					}
+				} else if (target.removeEventListener) {
+					//  iOS touch model
+					target.removeEventListener('touchstart', doEvent, false);
+					target.removeEventListener('touchmove', doEvent, false);
+					target.removeEventListener('touchend', doEvent, false);
+					target.removeEventListener('touchcancel', doEvent, false);
+
+					//  mouse model
+					target.removeEventListener('mousedown', doEvent, false);
+
+					//  mouse model with capture
+					//  rejecting gecko because, unlike ie, firefox does not send events to target when the mouse is outside target
+					if (target.setCapture && !window.navigator.userAgent.match(/\bGecko\b/)) {
+						useSetReleaseCapture = true;
+
+						target.removeEventListener('mousemove', doEvent, false);
+						target.removeEventListener('mouseup', doEvent, false);
+					}
+				} else if (target.detachEvent && target.setCapture) {
+					//  legacy IE mode - mouse with capture
+					useSetReleaseCapture = true;
+					target.detachEvent('onmousedown');
+					target.detachEvent('onmousemove');
+					target.detachEvent('onmouseup');
+				}
+			};
+
+			return this;
+		};
+	}])
+
+	.factory('GridsterDraggable', ['$document', '$timeout', '$window', 'GridsterTouch',
+		function($document, $timeout, $window, GridsterTouch) {
+			function GridsterDraggable($el, scope, gridster, item, itemOptions) {
+
+				var elmX, elmY, elmW, elmH,
+
+					mouseX = 0,
+					mouseY = 0,
+					lastMouseX = 0,
+					lastMouseY = 0,
+					mOffX = 0,
+					mOffY = 0,
+
+					minTop = 0,
+					maxTop = 9999,
+					minLeft = 0,
+					realdocument = $document[0];
+
+				var originalCol, originalRow;
+				var inputTags = ['select', 'input', 'textarea', 'button'];
+                                
+                                var gridsterItemDragElement = $el[0].querySelector('[gridster-item-drag]');
+                                //console.log(gridsterItemDragElement);
+                                var isDraggableAreaDefined = gridsterItemDragElement?true:false;
+                               //console.log(isDraggableAreaDefined);
+                                
+				function mouseDown(e) {
+                                    
+                                    if(ie8){
+                                        e.target = window.event.srcElement;
+                                        e.which = window.event.button;
+                                    }
+                                    
+                                    if(isDraggableAreaDefined && (!gridsterItemDragElement.contains(e.target))){
+                                        return false;
+                                    }
+                                    
+                                        if (inputTags.indexOf(e.target.nodeName.toLowerCase()) !== -1) {
+                                            return false;
+                                        }
+
+					var $target = angular.element(e.target);
+
+					// exit, if a resize handle was hit
+					if ($target.hasClass('gridster-item-resizable-handler')) {
+						return false;
+					}
+
+					// exit, if the target has it's own click event
+					if ($target.attr('onclick') || $target.attr('ng-click')) {
+						return false;
+					}
+
+					// only works if you have jQuery
+					if ($target.closest && $target.closest('.gridster-no-drag').length) {
+						return false;
+					}
+                                        
+					switch (e.which) {
+						case 1:
+							// left mouse button
+							break;
+						case 2:
+						case 3:
+							// right or middle mouse button
+							return;
+					}
+
+					lastMouseX = e.pageX;
+					lastMouseY = e.pageY;
+
+					elmX = parseInt($el.css('left'), 10);
+					elmY = parseInt($el.css('top'), 10);
+					elmW = $el[0].offsetWidth;
+					elmH = $el[0].offsetHeight;
+
+					originalCol = item.col;
+					originalRow = item.row;
+
+					dragStart(e);
+
+					return true;
+				}
+
+				function mouseMove(e) {
+					if (!$el.hasClass('gridster-item-moving') || $el.hasClass('gridster-item-resizing')) {
+						return false;
+					}
+
+					var maxLeft = gridster.curWidth - 1;
+
+					// Get the current mouse position.
+					mouseX = e.pageX;
+					mouseY = e.pageY;
+
+					// Get the deltas
+					var diffX = mouseX - lastMouseX + mOffX;
+					var diffY = mouseY - lastMouseY + mOffY;
+					mOffX = mOffY = 0;
+
+					// Update last processed mouse positions.
+					lastMouseX = mouseX;
+					lastMouseY = mouseY;
+
+					var dX = diffX,
+						dY = diffY;
+					if (elmX + dX < minLeft) {
+						diffX = minLeft - elmX;
+						mOffX = dX - diffX;
+					} else if (elmX + elmW + dX > maxLeft) {
+						diffX = maxLeft - elmX - elmW;
+						mOffX = dX - diffX;
+					}
+
+					if (elmY + dY < minTop) {
+						diffY = minTop - elmY;
+						mOffY = dY - diffY;
+					} else if (elmY + elmH + dY > maxTop) {
+						diffY = maxTop - elmY - elmH;
+						mOffY = dY - diffY;
+					}
+					elmX += diffX;
+					elmY += diffY;
+
+					// set new position
+					$el.css({
+						'top': elmY + 'px',
+						'left': elmX + 'px'
+					});
+
+					drag(e);
+
+					return true;
+				}
+
+				function mouseUp(e) {
+					if (!$el.hasClass('gridster-item-moving') || $el.hasClass('gridster-item-resizing')) {
+						return false;
+					}
+
+					mOffX = mOffY = 0;
+
+					dragStop(e);
+
+					return true;
+				}
+
+				function dragStart(event) {
+					$el.addClass('gridster-item-moving');
+					gridster.movingItem = item;
+
+					gridster.updateHeight(item.sizeY);
+					scope.$apply(function() {
+						if (gridster.draggable && gridster.draggable.start) {
+							gridster.draggable.start(event, $el, itemOptions);
+						}
+					});
+				}
+
+				function drag(event) {
+					var oldRow = item.row,
+						oldCol = item.col,
+						hasCallback = gridster.draggable && gridster.draggable.drag,
+						scrollSensitivity = gridster.draggable.scrollSensitivity,
+						scrollSpeed = gridster.draggable.scrollSpeed;
+                                        
+					var row = gridster.pixelsToRows(elmY);
+					var col = gridster.pixelsToColumns(elmX);
+
+					var itemsInTheWay = gridster.getItems(row, col, item.sizeX, item.sizeY, item);
+					var hasItemsInTheWay = itemsInTheWay.length !== 0;
+                                        
+					if (gridster.swapping === true && hasItemsInTheWay) {
+						var boundingBoxItem = gridster.getBoundingBox(itemsInTheWay),
+							sameSize = boundingBoxItem.sizeX === item.sizeX && boundingBoxItem.sizeY === item.sizeY,
+							sameRow = boundingBoxItem.row === oldRow,
+							sameCol = boundingBoxItem.col === oldCol,
+							samePosition = boundingBoxItem.row === row && boundingBoxItem.col === col,
+							inline = sameRow || sameCol;
+
+						if (sameSize && itemsInTheWay.length === 1) {
+							if (samePosition) {
+								gridster.swapItems(item, itemsInTheWay[0]);
+							} else if (inline) {
+								return;
+							}
+						} else if (boundingBoxItem.sizeX <= item.sizeX && boundingBoxItem.sizeY <= item.sizeY && inline) {
+							var emptyRow = item.row <= row ? item.row : row + item.sizeY,
+								emptyCol = item.col <= col ? item.col : col + item.sizeX,
+								rowOffset = emptyRow - boundingBoxItem.row,
+								colOffset = emptyCol - boundingBoxItem.col;
+
+							for (var i = 0, l = itemsInTheWay.length; i < l; ++i) {
+								var itemInTheWay = itemsInTheWay[i];
+
+								var itemsInFreeSpace = gridster.getItems(
+									itemInTheWay.row + rowOffset,
+									itemInTheWay.col + colOffset,
+									itemInTheWay.sizeX,
+									itemInTheWay.sizeY,
+									item
+								);
+
+								if (itemsInFreeSpace.length === 0) {
+									gridster.putItem(itemInTheWay, itemInTheWay.row + rowOffset, itemInTheWay.col + colOffset);
+								}
+							}
+						}
+					}
+
+					if (gridster.pushing !== false || !hasItemsInTheWay) {
+						item.row = row;
+						item.col = col;
+					}
+                                        
+                                        if(($window.navigator.appName === 'Microsoft Internet Explorer' && !ie8) || $window.navigator.userAgent.indexOf("Firefox")!==-1){
+                                            if (event.pageY - realdocument.documentElement.scrollTop < scrollSensitivity) {
+                                                    realdocument.documentElement.scrollTop = realdocument.documentElement.scrollTop - scrollSpeed;
+                                            } else if ($window.innerHeight - (event.pageY - realdocument.documentElement.scrollTop) < scrollSensitivity) {
+                                                    realdocument.documentElement.scrollTop = realdocument.documentElement.scrollTop + scrollSpeed;
+                                            }
+                                        }
+                                        else{
+                                            if (event.pageY - realdocument.body.scrollTop < scrollSensitivity) {
+                                                    realdocument.body.scrollTop = realdocument.body.scrollTop - scrollSpeed;
+                                            } else if ($window.innerHeight - (event.pageY - realdocument.body.scrollTop) < scrollSensitivity) {
+                                                    realdocument.body.scrollTop = realdocument.body.scrollTop + scrollSpeed;
+                                            }
+                                        }
+                                        
+                                        
+
+					if (event.pageX - realdocument.body.scrollLeft < scrollSensitivity) {
+						realdocument.body.scrollLeft = realdocument.body.scrollLeft - scrollSpeed;
+					} else if ($window.innerWidth - (event.pageX - realdocument.body.scrollLeft) < scrollSensitivity) {
+						realdocument.body.scrollLeft = realdocument.body.scrollLeft + scrollSpeed;
+					}
+
+					if (hasCallback || oldRow !== item.row || oldCol !== item.col) {
+						scope.$apply(function() {
+							if (hasCallback) {
+								gridster.draggable.drag(event, $el, itemOptions);
+							}
+						});
+					}
+				}
+
+				function dragStop(event) {
+					$el.removeClass('gridster-item-moving');
+					var row = gridster.pixelsToRows(elmY);
+					var col = gridster.pixelsToColumns(elmX);
+					if (gridster.pushing !== false || gridster.getItems(row, col, item.sizeX, item.sizeY, item).length === 0) {
+						item.row = row;
+						item.col = col;
+					}
+					gridster.movingItem = null;
+					item.setPosition(item.row, item.col);
+
+					scope.$apply(function() {
+						if (gridster.draggable && gridster.draggable.stop) {
+							gridster.draggable.stop(event, $el, itemOptions);
+						}
+					});
+				}
+
+				var enabled = null;
+				var $dragHandles = null;
+				var unifiedInputs = [];
+
+				this.enable = function() {
+					if (enabled === true) {
+						return;
+					}
+
+					// disable and timeout required for some template rendering
+					$timeout(function() {
+						// disable any existing draghandles
+						for (var u = 0, ul = unifiedInputs.length; u < ul; ++u) {
+							unifiedInputs[u].disable();
+						}
+						unifiedInputs = [];
+
+						if (gridster.draggable && gridster.draggable.handle) {
+							$dragHandles = angular.element($el[0].querySelectorAll(gridster.draggable.handle));
+							if ($dragHandles.length === 0) {
+								// fall back to element if handle not found...
+								$dragHandles = $el;
+							}
+						} else {
+							$dragHandles = $el;
+						}
+
+						for (var h = 0, hl = $dragHandles.length; h < hl; ++h) {
+							unifiedInputs[h] = new GridsterTouch($dragHandles[h], mouseDown, mouseMove, mouseUp);
+							unifiedInputs[h].enable();
+						}
+
+						enabled = true;
+					});
+				};
+
+				this.disable = function() {
+					if (enabled === false) {
+						return;
+					}
+
+					// timeout to avoid race contition with the enable timeout
+					$timeout(function() {
+
+						for (var u = 0, ul = unifiedInputs.length; u < ul; ++u) {
+							unifiedInputs[u].disable();
+						}
+
+						unifiedInputs = [];
+						enabled = false;
+					});
+				};
+
+				this.toggle = function(enabled) {
+					if (enabled) {
+						this.enable();
+					} else {
+						this.disable();
+					}
+				};
+
+				this.destroy = function() {
+					this.disable();
+				};
+			}
+
+			return GridsterDraggable;
+		}
+	])
+
+	.factory('GridsterResizable', ['GridsterTouch', function(GridsterTouch) {
+		function GridsterResizable($el, scope, gridster, item, itemOptions) {
+
+			function ResizeHandle(handleClass) {
+
+				var hClass = handleClass;
+
+				var elmX, elmY, elmW, elmH,
+
+					mouseX = 0,
+					mouseY = 0,
+					lastMouseX = 0,
+					lastMouseY = 0,
+					mOffX = 0,
+					mOffY = 0,
+
+					minTop = 0,
+					maxTop = 9999,
+					minLeft = 0;
+
+				var getMinHeight = function() {
+					return (item.minSizeY ? item.minSizeY : 1) * gridster.curRowHeight - gridster.margins[0];
+				};
+				var getMinWidth = function() {
+					return (item.minSizeX ? item.minSizeX : 1) * gridster.curColWidth - gridster.margins[1];
+				};
+
+				var originalWidth, originalHeight;
+				var savedDraggable;
+
+				function mouseDown(e) {
+					switch (e.which) {
+						case 1:
+							// left mouse button
+							break;
+						case 2:
+						case 3:
+							// right or middle mouse button
+							return;
+					}
+
+					// save the draggable setting to restore after resize
+					savedDraggable = gridster.draggable.enabled;
+					if (savedDraggable) {
+						gridster.draggable.enabled = false;
+						scope.$broadcast('gridster-draggable-changed', gridster);
+					}
+
+					// Get the current mouse position.
+					lastMouseX = e.pageX;
+					lastMouseY = e.pageY;
+
+					// Record current widget dimensions
+					elmX = parseInt($el.css('left'), 10);
+					elmY = parseInt($el.css('top'), 10);
+					elmW = $el[0].offsetWidth;
+					elmH = $el[0].offsetHeight;
+
+					originalWidth = item.sizeX;
+					originalHeight = item.sizeY;
+
+					resizeStart(e);
+
+					return true;
+				}
+
+				function resizeStart(e) {
+					$el.addClass('gridster-item-moving');
+					$el.addClass('gridster-item-resizing');
+
+					gridster.movingItem = item;
+
+					item.setElementSizeX();
+					item.setElementSizeY();
+					item.setElementPosition();
+					gridster.updateHeight(1);
+
+					scope.$apply(function() {
+						// callback
+						if (gridster.resizable && gridster.resizable.start) {
+							gridster.resizable.start(e, $el, itemOptions); // options is the item model
+						}
+					});
+				}
+
+				function mouseMove(e) {
+					var maxLeft = gridster.curWidth - 1;
+
+					// Get the current mouse position.
+					mouseX = e.pageX;
+					mouseY = e.pageY;
+
+					// Get the deltas
+					var diffX = mouseX - lastMouseX + mOffX;
+					var diffY = mouseY - lastMouseY + mOffY;
+					mOffX = mOffY = 0;
+
+					// Update last processed mouse positions.
+					lastMouseX = mouseX;
+					lastMouseY = mouseY;
+
+					var dY = diffY,
+						dX = diffX;
+
+					if (hClass.indexOf('n') >= 0) {
+						if (elmH - dY < getMinHeight()) {
+							diffY = elmH - getMinHeight();
+							mOffY = dY - diffY;
+						} else if (elmY + dY < minTop) {
+							diffY = minTop - elmY;
+							mOffY = dY - diffY;
+						}
+						elmY += diffY;
+						elmH -= diffY;
+					}
+					if (hClass.indexOf('s') >= 0) {
+						if (elmH + dY < getMinHeight()) {
+							diffY = getMinHeight() - elmH;
+							mOffY = dY - diffY;
+						} else if (elmY + elmH + dY > maxTop) {
+							diffY = maxTop - elmY - elmH;
+							mOffY = dY - diffY;
+						}
+						elmH += diffY;
+					}
+					if (hClass.indexOf('w') >= 0) {
+						if (elmW - dX < getMinWidth()) {
+							diffX = elmW - getMinWidth();
+							mOffX = dX - diffX;
+						} else if (elmX + dX < minLeft) {
+							diffX = minLeft - elmX;
+							mOffX = dX - diffX;
+						}
+						elmX += diffX;
+						elmW -= diffX;
+					}
+					if (hClass.indexOf('e') >= 0) {
+						if (elmW + dX < getMinWidth()) {
+							diffX = getMinWidth() - elmW;
+							mOffX = dX - diffX;
+						} else if (elmX + elmW + dX > maxLeft) {
+							diffX = maxLeft - elmX - elmW;
+							mOffX = dX - diffX;
+						}
+						elmW += diffX;
+					}
+
+					// set new position
+					$el.css({
+						'top': elmY + 'px',
+						'left': elmX + 'px',
+						'width': elmW + 'px',
+						'height': elmH + 'px'
+					});
+
+					resize(e);
+
+					return true;
+				}
+
+				function mouseUp(e) {
+					// restore draggable setting to its original state
+					if (gridster.draggable.enabled !== savedDraggable) {
+						gridster.draggable.enabled = savedDraggable;
+						scope.$broadcast('gridster-draggable-changed', gridster);
+					}
+
+					mOffX = mOffY = 0;
+
+					resizeStop(e);
+
+					return true;
+				}
+
+				function resize(e) {
+					var oldRow = item.row,
+						oldCol = item.col,
+						oldSizeX = item.sizeX,
+						oldSizeY = item.sizeY,
+						hasCallback = gridster.resizable && gridster.resizable.resize;
+
+					var col = item.col;
+					// only change column if grabbing left edge
+					if (['w', 'nw', 'sw'].indexOf(handleClass) !== -1) {
+						col = gridster.pixelsToColumns(elmX, false);
+					}
+
+					var row = item.row;
+					// only change row if grabbing top edge
+					if (['n', 'ne', 'nw'].indexOf(handleClass) !== -1) {
+						row = gridster.pixelsToRows(elmY, false);
+					}
+
+					var sizeX = item.sizeX;
+					// only change row if grabbing left or right edge
+					if (['n', 's'].indexOf(handleClass) === -1) {
+						sizeX = gridster.pixelsToColumns(elmW, true);
+					}
+
+					var sizeY = item.sizeY;
+					// only change row if grabbing top or bottom edge
+					if (['e', 'w'].indexOf(handleClass) === -1) {
+						sizeY = gridster.pixelsToRows(elmH, true);
+					}
+
+					if (gridster.pushing !== false || gridster.getItems(row, col, sizeX, sizeY, item).length === 0) {
+						item.row = row;
+						item.col = col;
+						item.sizeX = sizeX;
+						item.sizeY = sizeY;
+					}
+					var isChanged = item.row !== oldRow || item.col !== oldCol || item.sizeX !== oldSizeX || item.sizeY !== oldSizeY;
+
+					if (hasCallback || isChanged) {
+						scope.$apply(function() {
+							if (hasCallback) {
+								gridster.resizable.resize(e, $el, itemOptions); // options is the item model
+							}
+						});
+					}
+				}
+
+				function resizeStop(e) {
+					$el.removeClass('gridster-item-moving');
+					$el.removeClass('gridster-item-resizing');
+
+					gridster.movingItem = null;
+
+					item.setPosition(item.row, item.col);
+					item.setSizeY(item.sizeY);
+					item.setSizeX(item.sizeX);
+
+					scope.$apply(function() {
+						if (gridster.resizable && gridster.resizable.stop) {
+							gridster.resizable.stop(e, $el, itemOptions); // options is the item model
+						}
+					});
+				}
+
+				var $dragHandle = null;
+				var unifiedInput;
+
+				this.enable = function() {
+					if (!$dragHandle) {
+						$dragHandle = angular.element('<div class="gridster-item-resizable-handler handle-' + hClass + '"></div>');
+						$el.append($dragHandle);
+					}
+
+					unifiedInput = new GridsterTouch($dragHandle[0], mouseDown, mouseMove, mouseUp);
+					unifiedInput.enable();
+				};
+
+				this.disable = function() {
+					if ($dragHandle) {
+						$dragHandle.remove();
+						$dragHandle = null;
+					}
+
+					unifiedInput.disable();
+					unifiedInput = undefined;
+				};
+
+				this.destroy = function() {
+					this.disable();
+				};
+			}
+
+			var handles = [];
+			var handlesOpts = gridster.resizable.handles;
+			if (typeof handlesOpts === 'string') {
+				handlesOpts = gridster.resizable.handles.split(',');
+			}
+			var enabled = false;
+
+			for (var c = 0, l = handlesOpts.length; c < l; c++) {
+				handles.push(new ResizeHandle(handlesOpts[c]));
+			}
+
+			this.enable = function() {
+				if (enabled) {
+					return;
+				}
+				for (var c = 0, l = handles.length; c < l; c++) {
+					handles[c].enable();
+				}
+				enabled = true;
+			};
+
+			this.disable = function() {
+				if (!enabled) {
+					return;
+				}
+				for (var c = 0, l = handles.length; c < l; c++) {
+					handles[c].disable();
+				}
+				enabled = false;
+			};
+
+			this.toggle = function(enabled) {
+				if (enabled) {
+					this.enable();
+				} else {
+					this.disable();
+				}
+			};
+
+			this.destroy = function() {
+				for (var c = 0, l = handles.length; c < l; c++) {
+					handles[c].destroy();
+				}
+			};
+		}
+		return GridsterResizable;
+	}])
+
+	.factory('gridsterDebounce', function() {
+		return function gridsterDebounce(func, wait, immediate) {
+			var timeout;
+			return function() {
+				var context = this,
+					args = arguments;
+				var later = function() {
+					timeout = null;
+					if (!immediate) {
+						func.apply(context, args);
+					}
+				};
+				var callNow = immediate && !timeout;
+				clearTimeout(timeout);
+				timeout = setTimeout(later, wait);
+				if (callNow) {
+					func.apply(context, args);
+				}
+			};
+		};
+	})
+
+	/**
+	 * GridsterItem directive
+	 * @param $parse
+	 * @param GridsterDraggable
+	 * @param GridsterResizable
+	 * @param gridsterDebounce
+	 */
+	.directive('gridsterItem', ['$parse', 'GridsterDraggable', 'GridsterResizable', 'gridsterDebounce',
+		function($parse, GridsterDraggable, GridsterResizable, gridsterDebounce) {
+			return {
+				scope: true,
+				restrict: 'EA',
+				controller: 'GridsterItemCtrl',
+				controllerAs: 'gridsterItem',
+				require: ['^gridster', 'gridsterItem'],
+				link: function(scope, $el, attrs, controllers) {
+					var optionsKey = attrs.gridsterItem,
+						options;
+                                        
+                                        var gridster = controllers[0],
+						item = controllers[1];
+
+					scope.gridster = gridster;
+                                        
+
+					// bind the item's position properties
+					// options can be an object specified by gridster-item="object"
+					// or the options can be the element html attributes object
+					if (optionsKey) {
+						var $optionsGetter = $parse(optionsKey);
+						options = $optionsGetter(scope) || {};
+						if (!options && $optionsGetter.assign) {
+							options = {
+								row: item.row,
+								col: item.col,
+								sizeX: item.sizeX,
+								sizeY: item.sizeY,
+								minSizeX: 0,
+								minSizeY: 0,
+								maxSizeX: null,
+								maxSizeY: null
+							};
+							$optionsGetter.assign(scope, options);
+						}
+					} else {
+						options = attrs;
+					}
+                                        
+					item.init($el, gridster);
+
+					$el.addClass('gridster-item');
+
+					var aspects = ['minSizeX', 'maxSizeX', 'minSizeY', 'maxSizeY', 'sizeX', 'sizeY', 'row', 'col'],
+						$getters = {};
+
+					var expressions = [];
+					var aspectFn = function(aspect) {
+						var expression;
+						if (typeof options[aspect] === 'string') {
+							// watch the expression in the scope
+							expression = options[aspect];
+						} else if (typeof options[aspect.toLowerCase()] === 'string') {
+							// watch the expression in the scope
+							expression = options[aspect.toLowerCase()];
+						} else if (optionsKey) {
+							// watch the expression on the options object in the scope
+							expression = optionsKey + '.' + aspect;
+						} else {
+							return;
+						}
+						expressions.push('"' + aspect + '":' + expression);
+						$getters[aspect] = $parse(expression);
+
+						// initial set
+						var val = $getters[aspect](scope);
+						if (typeof val === 'number') {
+							item[aspect] = val;
+						}
+					};
+
+					for (var i = 0, l = aspects.length; i < l; ++i) {
+						aspectFn(aspects[i]);
+					}
+
+					var watchExpressions = '{' + expressions.join(',') + '}';
+                                        
+					// when the value changes externally, update the internal item object
+					scope.$watchCollection(watchExpressions, function(newVals, oldVals) {
+						for (var aspect in newVals) {
+							var newVal = newVals[aspect];
+							var oldVal = oldVals[aspect];
+							if (oldVal === newVal) {
+								continue;
+							}
+							newVal = parseInt(newVal, 10);
+							if (!isNaN(newVal)) {
+								item[aspect] = newVal;
+							}
+						}
+					});
+
+					function positionChanged() {
+						// call setPosition so the element and gridster controller are updated
+						item.setPosition(item.row, item.col);
+
+						// when internal item position changes, update externally bound values
+						if ($getters.row && $getters.row.assign) {
+							$getters.row.assign(scope, item.row);
+						}
+						if ($getters.col && $getters.col.assign) {
+							$getters.col.assign(scope, item.col);
+						}
+					}
+					scope.$watch(function() {
+						return item.row + ',' + item.col;
+					}, positionChanged);
+
+					function sizeChanged() {
+						var changedX = item.setSizeX(item.sizeX, true);
+						if (changedX && $getters.sizeX && $getters.sizeX.assign) {
+							$getters.sizeX.assign(scope, item.sizeX);
+						}
+						var changedY = item.setSizeY(item.sizeY, true);
+						if (changedY && $getters.sizeY && $getters.sizeY.assign) {
+							$getters.sizeY.assign(scope, item.sizeY);
+						}
+
+						if (changedX || changedY) {
+							item.gridster.moveOverlappingItems(item);
+							gridster.layoutChanged();
+							scope.$broadcast('gridster-item-resized', item);
+						}
+					}
+
+					scope.$watch(function() {
+						return item.sizeY + ',' + item.sizeX + ',' + item.minSizeX + ',' + item.maxSizeX + ',' + item.minSizeY + ',' + item.maxSizeY;
+					}, sizeChanged);
+
+					var draggable = new GridsterDraggable($el, scope, gridster, item, options);
+					var resizable = new GridsterResizable($el, scope, gridster, item, options);
+
+					var updateResizable = function() {
+						resizable.toggle(!gridster.isMobile && gridster.resizable && gridster.resizable.enabled);
+					};
+					updateResizable();
+
+					var updateDraggable = function() {
+						draggable.toggle(!gridster.isMobile && gridster.draggable && gridster.draggable.enabled);
+					};
+					updateDraggable();
+
+					scope.$on('gridster-draggable-changed', updateDraggable);
+					scope.$on('gridster-resizable-changed', updateResizable);
+					scope.$on('gridster-resized', updateResizable);
+					scope.$on('gridster-mobile-changed', function() {
+						updateResizable();
+						updateDraggable();
+					});
+
+					function whichTransitionEvent() {
+						var el = document.createElement('div');
+						var transitions = {
+							'transition': 'transitionend',
+							'OTransition': 'oTransitionEnd',
+							'MozTransition': 'transitionend',
+							'WebkitTransition': 'webkitTransitionEnd'
+						};
+						for (var t in transitions) {
+                                                        if (el.style[t] !== undefined) {
+								return transitions[t];
+							}
+						}
+					}
+
+					var debouncedTransitionEndPublisher = gridsterDebounce(function() {
+						scope.$apply(function() {
+							scope.$broadcast('gridster-item-transition-end', item);
+						});
+					}, 50);
+
+					if(whichTransitionEvent()){ //check for IE8, as it evaluates to null
+                                            $el.on(whichTransitionEvent(), debouncedTransitionEndPublisher);
+                                        }
+
+					scope.$broadcast('gridster-item-initialized', item);
+
+					return scope.$on('$destroy', function() {
+						try {
+							resizable.destroy();
+							draggable.destroy();
+						} catch (e) {}
+
+						try {
+							gridster.removeItem(item);
+						} catch (e) {}
+
+						try {
+							item.destroy();
+						} catch (e) {}
+					});
+				}
+			};
+		}
+	])
+
+	.directive('gridsterNoDrag', function() {
+		return {
+			restrict: 'A',
+			link: function(scope, $element) {
+				$element.addClass('gridster-no-drag');
+			}
+		};
+	})
+
+	;
+
+}));
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/js/att_angular_gridster/ui-gridster-tpls.js b/ECOMP-SDK-APP/src/main/webapp/static/fusion/js/att_angular_gridster/ui-gridster-tpls.js
new file mode 100644
index 000000000..3ca3db7d8
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/js/att_angular_gridster/ui-gridster-tpls.js
@@ -0,0 +1,168 @@
+/**
+* FileName ui-gridster
+* Version 0.0.1
+* Build number ad58c6f4f8f8fd7f04ac457f95d76f09
+* Date 08/17/2015
+*/
+
+
+(function(angular, window){
+angular.module("att.gridster", ["att.gridster.tpls", "att.gridster.utilities","att.gridster.gridster"]);
+angular.module("att.gridster.tpls", ["template/gridster/gridster.html","template/gridster/gridsterItem.html","template/gridster/gridsterItemBody.html","template/gridster/gridsterItemFooter.html","template/gridster/gridsterItemHeader.html"]);
+angular.module('att.gridster.utilities', [])
+        .factory('$extendObj', [function() {
+                var _extendDeep = function(dst) {
+                    angular.forEach(arguments, function(obj) {
+                        if (obj !== dst) {
+                            angular.forEach(obj, function(value, key) {
+                                if (dst[key] && dst[key].constructor && dst[key].constructor === Object) {
+                                    _extendDeep(dst[key], value);
+                                } else {
+                                    dst[key] = value;
+                                }
+                            });
+                        }
+                    });
+                    return dst;
+                };
+                return {
+                    extendDeep: _extendDeep
+                };
+            }]);
+
+angular.module('att.gridster.gridster', ['attGridsterLib', 'att.gridster.utilities'])
+        .config(['$compileProvider', function($compileProvider) {
+                $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|javascript):/);
+            }])
+        .constant('attGridsterConfig',
+                {
+                    columns: 3,
+                    margins: [10, 10],
+                    outerMargin: true,
+                    pushing: true,
+                    floating: true,
+                    swapping: true,
+                    draggable: {
+                        enabled: true
+                    }
+                })
+        .directive('attGridster', ['attGridsterConfig', '$extendObj', function(attGridsterConfig, $extendObj) {
+                return {
+                    restrict: 'EA',
+                    scope: {
+                        attGridsterOptions: '=?'
+                    },
+                    templateUrl: 'template/gridster/gridster.html',
+                    replace: false,
+                    transclude: true,
+                    controller: [function() {}],
+                    link: function(scope) {
+                        if (angular.isDefined(scope.attGridsterOptions)) {
+                            attGridsterConfig = $extendObj.extendDeep(attGridsterConfig, scope.attGridsterOptions);
+                        }
+                        scope.attGridsterConfig = attGridsterConfig;
+                    }
+                };
+            }])
+        .directive('attGridsterItem', ['$timeout', function($timeout) {
+                return {
+                    restrict: 'EA',
+                    require: ['^attGridster'],
+                    scope: {
+                        attGridsterItem: '='
+                    },
+                    templateUrl: 'template/gridster/gridsterItem.html',
+                    replace: false,
+                    transclude: true,
+                    controller: [function() {}]
+                };
+            }])
+        .directive('attGridsterItemHeader', [function() {
+                return {
+                    restrict: 'EA',
+                    require: ['^attGridsterItem'],
+                    scope: {
+                        headerText: '@',
+                        subHeaderText: '@?'
+                    },
+                    templateUrl: 'template/gridster/gridsterItemHeader.html',
+                    replace: true,
+                    transclude: true,
+                    link: function(scope, element) {
+                        if (angular.isDefined(scope.subHeaderText) && scope.subHeaderText) {
+                            angular.element(element[0].querySelector('span.gridster-item-sub-header-content')).attr("tabindex", "0");
+                            angular.element(element[0].querySelector('span.gridster-item-sub-header-content')).attr("aria-label", scope.subHeaderText);
+                        }
+                    }
+                };
+            }])
+        .directive('attGridsterItemBody', [function() {
+                return {
+                    restrict: 'EA',
+                    require: ['^attGridsterItem'],
+                    scope: {},
+                    templateUrl: 'template/gridster/gridsterItemBody.html',
+                    replace: true,
+                    transclude: true
+                };
+            }])
+        .directive('attGridsterItemFooter', ['$location', function($location) {
+                return {
+                    restrict: 'EA',
+                    require: ['^attGridsterItem'],
+                    scope: {
+                        attGridsterItemFooterLink: '@?'
+                    },
+                    templateUrl: 'template/gridster/gridsterItemFooter.html',
+                    replace: true,
+                    transclude: true,
+                    controller: ['$scope', function($scope) {
+                            $scope.clickOnFooterLink = function(evt) {
+                                evt.preventDefault();
+                                evt.stopPropagation();
+                                if ($scope.attGridsterItemFooterLink) {
+                                    $location.url($scope.attGridsterItemFooterLink);
+                                }
+                            };
+                        }],
+                    link: function(scope, element) {
+                        if (angular.isDefined(scope.attGridsterItemFooterLink) && scope.attGridsterItemFooterLink) {
+                            element.attr("role", "link");
+                        }
+                    }
+                };
+            }]);
+angular.module("template/gridster/gridster.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("template/gridster/gridster.html",
+    "<div gridster='attGridsterConfig'><div ng-transclude></div></div>");
+}]);
+
+angular.module("template/gridster/gridsterItem.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("template/gridster/gridsterItem.html",
+    "<div gridster-item='attGridsterItem' class=\"gridster-item-container\" ng-transclude></div>");
+}]);
+
+angular.module("template/gridster/gridsterItemBody.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("template/gridster/gridsterItemBody.html",
+    "<div class=\"gridster-item-body\" ng-transclude></div>");
+}]);
+
+angular.module("template/gridster/gridsterItemFooter.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("template/gridster/gridsterItemFooter.html",
+    "<div class=\"gridster-item-footer\" ng-click=\"clickOnFooterLink($event)\" tabindex=\"0\" ng-keydown=\"(($event.keyCode && $event.keyCode === 13) || ($event.which && $event.which === 13)) && clickOnFooterLink($event)\" >\n" +
+    "    <span class=\"gridster-item-footer-content\" ng-transclude></span>\n" +
+    "</div>");
+}]);
+
+angular.module("template/gridster/gridsterItemHeader.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("template/gridster/gridsterItemHeader.html",
+    "<div class=\"gridster-item-header\">\n" +
+    "    <img gridster-item-drag src=\"static/fusion/images/att_angular_gridster/grips.png\" alt=\"||\" aria-label=\"Tap/Click to move\" class=\"gridster-item-handle\" />\n" +
+    "    <span class=\"gridster-item-header-content\" tabindex=\"0\" role=\"presentation\" aria-label=\"{{headerText}}\">{{headerText}}</span>\n" +
+    "    <span class=\"gridster-item-sub-header-content\" role=\"presentation\">{{subHeaderText}}</span>\n" +
+    "    <div class=\"gridster-item-header-buttons-container\" ng-transclude></div>\n" +
+    "</div>");
+}]);
+
+return {}
+})(angular, window);
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/flexslider.css b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/flexslider.css
new file mode 100644
index 000000000..c459ef440
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/flexslider.css
@@ -0,0 +1,275 @@
+/*
+ * jQuery FlexSlider v2.6.0
+ * http://www.woothemes.com/flexslider/
+ *
+ * Copyright 2012 WooThemes
+ * Free to use under the GPLv2 and later license.
+ * http://www.gnu.org/licenses/gpl-2.0.html
+ *
+ * Contributing author: Tyler Smith (@mbmufffin)
+ *
+ */
+/* ====================================================================================================================
+ * FONT-FACE
+ * ====================================================================================================================*/
+@font-face {
+  font-family: 'flexslider-icon';
+  src: url('fonts/flexslider-icon.eot');
+  src: url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('fonts/flexslider-icon.woff') format('woff'), url('fonts/flexslider-icon.ttf') format('truetype'), url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/* ====================================================================================================================
+ * RESETS
+ * ====================================================================================================================*/
+.flex-container a:hover,
+.flex-slider a:hover {
+  outline: none;
+}
+.slides,
+.slides > li,
+.flex-control-nav,
+.flex-direction-nav {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.flex-pauseplay span {
+  text-transform: capitalize;
+}
+/* ====================================================================================================================
+ * BASE STYLES
+ * ====================================================================================================================*/
+.flexslider {
+  margin: 0;
+  padding: 0;
+}
+.flexslider .slides > li {
+  display: none;
+  -webkit-backface-visibility: hidden;
+}
+.flexslider .slides img {
+  width: 100%;
+  display: block;
+}
+.flexslider .slides:after {
+  content: "\0020";
+  display: block;
+  clear: both;
+  visibility: hidden;
+  line-height: 0;
+  height: 0;
+}
+html[xmlns] .flexslider .slides {
+  display: block;
+}
+* html .flexslider .slides {
+  height: 1%;
+}
+.no-js .flexslider .slides > li:first-child {
+  display: block;
+}
+/* ====================================================================================================================
+ * DEFAULT THEME
+ * ====================================================================================================================*/
+.flexslider {
+  margin: 0 0 60px;
+  background: #ffffff;
+  border: 4px solid #ffffff;
+  position: relative;
+  zoom: 1;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
+  -o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
+  box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
+}
+.flexslider .slides {
+  zoom: 1;
+}
+.flexslider .slides img {
+  height: auto;
+  -moz-user-select: none;
+}
+.flex-viewport {
+  max-height: 2000px;
+  -webkit-transition: all 1s ease;
+  -moz-transition: all 1s ease;
+  -ms-transition: all 1s ease;
+  -o-transition: all 1s ease;
+  transition: all 1s ease;
+}
+.loading .flex-viewport {
+  max-height: 300px;
+}
+.carousel li {
+  margin-right: 5px;
+}
+.flex-direction-nav {
+  *height: 0;
+}
+.flex-direction-nav a {
+  text-decoration: none;
+  display: block;
+  width: 40px;
+  height: 40px;
+  margin: -20px 0 0;
+  position: absolute;
+  top: 50%;
+  z-index: 10;
+  overflow: hidden;
+  opacity: 0;
+  cursor: pointer;
+  color: rgba(0, 0, 0, 0.8);
+  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
+  -webkit-transition: all 0.3s ease-in-out;
+  -moz-transition: all 0.3s ease-in-out;
+  -ms-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+.flex-direction-nav a:before {
+  font-family: "flexslider-icon";
+  font-size: 40px;
+  display: inline-block;
+  content: '\f001';
+  color: rgba(0, 0, 0, 0.8);
+  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
+}
+.flex-direction-nav a.flex-next:before {
+  content: '\f002';
+}
+.flex-direction-nav .flex-prev {
+  left: -50px;
+}
+.flex-direction-nav .flex-next {
+  right: -50px;
+  text-align: right;
+}
+.flexslider:hover .flex-direction-nav .flex-prev {
+  opacity: 0.7;
+  left: 10px;
+}
+.flexslider:hover .flex-direction-nav .flex-prev:hover {
+  opacity: 1;
+}
+.flexslider:hover .flex-direction-nav .flex-next {
+  opacity: 0.7;
+  right: 10px;
+}
+.flexslider:hover .flex-direction-nav .flex-next:hover {
+  opacity: 1;
+}
+.flex-direction-nav .flex-disabled {
+  opacity: 0!important;
+  filter: alpha(opacity=0);
+  cursor: default;
+  z-index: -1;
+}
+.flex-pauseplay a {
+  display: block;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  bottom: 5px;
+  left: 10px;
+  opacity: 0.8;
+  z-index: 10;
+  overflow: hidden;
+  cursor: pointer;
+  color: #000;
+}
+.flex-pauseplay a:before {
+  font-family: "flexslider-icon";
+  font-size: 20px;
+  display: inline-block;
+  content: '\f004';
+}
+.flex-pauseplay a:hover {
+  opacity: 1;
+}
+.flex-pauseplay a.flex-play:before {
+  content: '\f003';
+}
+.flex-control-nav {
+  width: 100%;
+  position: absolute;
+  bottom: -40px;
+  text-align: center;
+}
+.flex-control-nav li {
+  margin: 0 6px;
+  display: inline-block;
+  zoom: 1;
+  *display: inline;
+}
+.flex-control-paging li a {
+  width: 11px;
+  height: 11px;
+  display: block;
+  background: #666;
+  background: rgba(0, 0, 0, 0.5);
+  cursor: pointer;
+  text-indent: -9999px;
+  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
+  -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  border-radius: 20px;
+}
+.flex-control-paging li a:hover {
+  background: #333;
+  background: rgba(0, 0, 0, 0.7);
+}
+.flex-control-paging li a.flex-active {
+  background: #000;
+  background: rgba(0, 0, 0, 0.9);
+  cursor: default;
+}
+.flex-control-thumbs {
+  margin: 5px 0 0;
+  position: static;
+  overflow: hidden;
+}
+.flex-control-thumbs li {
+  width: 25%;
+  float: left;
+  margin: 0;
+}
+.flex-control-thumbs img {
+  width: 100%;
+  height: auto;
+  display: block;
+  opacity: .7;
+  cursor: pointer;
+  -moz-user-select: none;
+  -webkit-transition: all 1s ease;
+  -moz-transition: all 1s ease;
+  -ms-transition: all 1s ease;
+  -o-transition: all 1s ease;
+  transition: all 1s ease;
+}
+.flex-control-thumbs img:hover {
+  opacity: 1;
+}
+.flex-control-thumbs .flex-active {
+  opacity: 1;
+  cursor: default;
+}
+/* ====================================================================================================================
+ * RESPONSIVE
+ * ====================================================================================================================*/
+@media screen and (max-width: 860px) {
+  .flex-direction-nav .flex-prev {
+    opacity: 1;
+    left: 10px;
+  }
+  .flex-direction-nav .flex-next {
+    opacity: 1;
+    right: 10px;
+  }
+}
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/fonts/flexslider-icon.eot b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/fonts/flexslider-icon.eot
new file mode 100644
index 000000000..97c4196f5
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/fonts/flexslider-icon.eot
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/fonts/flexslider-icon.svg b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/fonts/flexslider-icon.svg
new file mode 100644
index 000000000..89fd1ab86
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/fonts/flexslider-icon.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>
+This is a custom SVG font generated by IcoMoon.
+<iconset grid="14"></iconset>
+</metadata>
+<defs>
+<font id="flexslider-icon" horiz-adv-x="448" >
+<font-face units-per-em="448" ascent="384" descent="-64" />
+<missing-glyph horiz-adv-x="448" />
+<glyph unicode="&#xf001;" d="M 185.50-9.25l-163.00,162.75q-9.25,9.25 -9.25,22.625t 9.25,22.625l 163.00,162.75q 9.25,9.25 22.625,9.25t 22.625-9.25l 18.75-18.75q 9.25-9.25 9.25-22.625t-9.25-22.625l-121.50-121.50l 121.50-121.25q 9.25-9.50 9.25-22.75t-9.25-22.50l-18.75-18.75q-9.25-9.25 -22.625-9.25t-22.625,9.25z" horiz-adv-x="288"  />
+<glyph unicode="&#xf002;" d="M 274.75,176.00q0.00-13.00 -9.25-22.75l-163.00-162.75q-9.25-9.25 -22.50-9.25t-22.50,9.25l-19.00,18.75q-9.25,9.75 -9.25,22.75q0.00,13.25 9.25,22.50l 121.50,121.50l-121.50,121.25q-9.25,9.75 -9.25,22.75q0.00,13.25 9.25,22.50l 19.00,18.75q 9.00,9.50 22.50,9.50t 22.50-9.50l 163.00-162.75q 9.25-9.25 9.25-22.50z" horiz-adv-x="288"  />
+<glyph unicode="&#xf003;" d="M 346.00,152.25l-332.00-184.50q-5.75-3.25 -9.875-0.75t-4.125,9.00l0.00,368.00 q0.00,6.50 4.125,9.00t 9.875-0.75l 332.00-184.50q 5.75-3.25 5.75-7.75t-5.75-7.75z" horiz-adv-x="352"  />
+<glyph unicode="&#xf004;" d="M 384.00,336.00l0.00-352.00 q0.00-6.50 -4.75-11.25t-11.25-4.75l-128.00,0.00 q-6.50,0.00 -11.25,4.75t-4.75,11.25l0.00,352.00 q0.00,6.50 4.75,11.25t 11.25,4.75l 128.00,0.00 q 6.50,0.00 11.25-4.75t 4.75-11.25zM 160.00,336.00l0.00-352.00 q0.00-6.50 -4.75-11.25t-11.25-4.75l-128.00,0.00 q-6.50,0.00 -11.25,4.75t-4.75,11.25l0.00,352.00 q0.00,6.50 4.75,11.25t 11.25,4.75l 128.00,0.00 q 6.50,0.00 11.25-4.75t 4.75-11.25z" horiz-adv-x="384"  />
+<glyph unicode="&#xf005;" d="M 402.75,208.00q0.00-13.25 -9.25-22.50l-162.75-162.75q-9.50-9.50 -22.75-9.50q-13.50,0.00 -22.50,9.50l-162.75,162.75q-9.50,9.00 -9.50,22.50q0.00,13.25 9.50,22.75l 18.50,18.75q 9.75,9.25 22.75,9.25q 13.25,0.00 22.50-9.25l 121.50-121.50l 121.50,121.50q 9.25,9.25 22.50,9.25q 13.00,0.00 22.75-9.25l 18.75-18.75q 9.25-9.75 9.25-22.75z" horiz-adv-x="416"  />
+<glyph unicode="&#x20;" horiz-adv-x="224" />
+<glyph class="hidden" unicode="&#xf000;" d="M0,384L 448 -64L0 -64 z" horiz-adv-x="0" />
+</font></defs></svg>
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/fonts/flexslider-icon.ttf b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/fonts/flexslider-icon.ttf
new file mode 100644
index 000000000..05432986a
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/fonts/flexslider-icon.ttf
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/fonts/flexslider-icon.woff b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/fonts/flexslider-icon.woff
new file mode 100644
index 000000000..10c4eeb83
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/fonts/flexslider-icon.woff
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/images/blank.gif b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/images/blank.gif
new file mode 100644
index 000000000..75b945d25
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/images/blank.gif
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/scribble.css b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/scribble.css
new file mode 100644
index 000000000..9986f2acc
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/scribble.css
@@ -0,0 +1,40 @@
+#scribble-pad {
+/* 	margin-left:auto;
+	margin-right:auto;  
+	height: 475px;
+	width: 475px;*/
+	background:url(https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/stickynote.jpg) no-repeat center center;
+	background-size: 110% 110%;
+}  
+
+
+
+#scribble {
+      white-space: pre-wrap;       /* css-3 */
+      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+      white-space: -pre-wrap;      /* Opera 4-6 */
+      white-space: -o-pre-wrap;    /* Opera 7 */
+      word-wrap: break-word;       /* Internet Explorer 5.5+ */
+      max-width: 300px;
+      padding: 120px 100px 100px 75px;
+      color: #486891;
+      border-color: #ff0000 #0000ff;
+      border-color: transparent;
+      background-color:rgba(0, 0, 0, 0);
+      font-family:  Arial,sans-serif;
+      font-size: 120%;
+      font-style: italic; 
+      font-weight:bold; 
+      line-height: 1.5em;       
+}
+
+#scribble:focus {
+outline-width: 0;
+}
+.c-link {
+      color: #486891;
+      font-family:  Arial,sans-serif;
+      font-size: 95%;
+      font-weight:bold; 
+      text-decoration: none;         
+}
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/slider.css b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/slider.css
new file mode 100644
index 000000000..f609403c2
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/slider.css
@@ -0,0 +1,142 @@
+div,span,p { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
+
+
+#container {
+	width:580px;
+	padding:10px;
+	margin:0 auto;
+	position:relative;
+	z-index:0;
+}
+
+#example {
+	width:600px;
+	height:350px;
+	position:relative;
+}
+
+#ribbon {
+	position:absolute;
+	top:-3px;
+	left:-15px;
+	z-index:500;
+}
+
+#frame {
+	position:absolute;
+	z-index:0;
+	width:739px;
+	height:341px;
+	top:-3px;
+	left:-80px;
+}
+
+/*
+	Slideshow
+*/
+
+#slides {
+	position:absolute;
+	top:15px;
+	left:4px;
+	z-index:100;
+}
+
+/*
+	Slides container
+	Important:
+	Set the width of your slides container
+	Set to display none, prevents content flash
+*/
+
+.slides_container {
+	width:570px;
+	overflow:hidden;
+	position:relative;
+	display:none;
+}
+
+/*
+	Each slide
+	Important:
+	Set the width of your slides
+	If height not specified height will be set by the slide content
+	Set to display block
+*/
+
+.slides_container div.slide {
+	width:570px;
+	height:270px;
+	display:block;
+}
+
+
+/*
+	Next/prev buttons
+*/
+
+#slides .next,#slides .prev {
+	position:absolute;
+	top:107px;
+	left:-39px;
+	width:24px;
+	height:43px;
+	display:block;
+	z-index:101;
+}
+
+#slides .next {
+	left:585px;
+}
+
+/*
+	Pagination
+*/
+
+.pagination {
+	margin:26px auto 0;
+	width:100px;
+}
+
+.pagination li {
+	float:left;
+	margin:0 1px;
+	list-style:none;
+}
+
+.pagination li a {
+	display:block;
+	width:12px;
+	height:0;
+	padding-top:12px;
+	background-image:url(../images/pagination.png);
+	background-position:0 0;
+	float:left;
+	overflow:hidden;
+}
+
+.pagination li.current a {
+	background-position:0 -12px;
+}
+
+/*
+	Caption
+*/
+
+.caption {
+	z-index:500;
+	position:absolute;
+	bottom:-35px;
+	left:0;
+	height:30px;
+	padding:5px 20px 0 20px;
+	background:#000;
+	background:rgba(0,0,0,.5);
+	width:540px;
+	font-size:1.3em;
+	line-height:1.33;
+	color:#fff;
+	border-top:1px solid #000;
+	text-shadow:none;
+}
+
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/spacegallery.css b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/spacegallery.css
new file mode 100644
index 000000000..ce4fd57c4
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/spacegallery.css
@@ -0,0 +1,18 @@
+.spacegallery {
+	position: relative;
+	overflow: hidden;
+}
+.spacegallery img {
+	position: absolute;
+	left: 50%;
+}
+.spacegallery a {
+	position: absolute;
+	z-index: 1000;
+	display: block;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: url(images/blank.gif);
+}
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/welcome.css b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/welcome.css
new file mode 100644
index 000000000..ea1af26e5
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/welcome.css
@@ -0,0 +1,173 @@
+/* Area Chart */
+
+#areaChart {
+	overflow: hidden;}
+
+#lineChart {
+	overflow: hidden;
+}
+
+#areaChart svg {
+	height: 200px;
+	width: 380px;
+	min-width: 100px;
+	min-height: 100px;
+}
+
+#lineChart svg {
+	height: 200px;
+	width: 380px;
+	min-width: 100px;
+	min-height: 100px;
+}
+
+#areaChart tr.z-row-over>td.z-row-inner, tr.z-row-over>.z-cell {
+	background-color: rgb(255, 255, 255);
+}
+
+#lineChart tr.z-row-over>td.z-row-inner, tr.z-row-over>.z-cell {
+	background-color: rgb(255, 255, 255);
+}
+
+#areaChart .nodatadiv {
+	display: table-cell;
+	width: 700px;
+	height: 370px;
+	text-align: center;
+	vertical-align: middle;
+}
+
+#lineChart .nodatadiv {
+	display: table-cell;
+	width: 700px;
+	height: 370px;
+	text-align: center;
+	vertical-align: middle;
+}
+
+#areaChart .nodatainner {
+	padding: 10px;
+}
+
+#lineChart .nodatainner {
+	padding: 10px;
+}
+
+/* Area Chart END  */
+
+.button--small, [class*=bg-] .button--small {
+    font-size: 14px;
+ };
+
+/* Gridster (EBIZ) */
+
+.gridster-item-container .gridster-item-body{
+bottom:0px;
+}
+.gridster-item-container{
+min-height:50px;
+}
+.att-accordion {
+    border-width: 0px;
+}
+
+/* End Gridster */
+
+#myGallery {
+	width: 100%;
+	height: 400px;
+}
+  
+#myGallery img {
+	border: 2px solid #52697E;
+}
+  
+a.loading {
+	background: #fff url(../images/ajax_small.gif) no-repeat center;
+}
+  
+.center {
+    margin-left: auto;
+   	margin-right: auto;
+}
+
+		
+#selectedTrafficDay ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+#selectedTrafficDay li {
+    float: left;
+    border: 1px solid #000;
+    border-bottom-width: 0;
+    margin: 3px 3px 3px 3px;
+    padding: 5px 5px 5px 5px;
+    background-color: #F2F2F2;
+    color: #696969;
+}
+
+#SelectedTrafficeDayView {
+	padding: 0 1em;
+}
+
+#selectedTrafficDay .active1 {
+    background-color: #FFF;
+    color: #000;
+}
+
+#BusyHourTraffic ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+#BusyHourTraffic li {
+    float: left;
+    border: 1px solid #000;
+    border-bottom-width: 0;
+    margin: 3px 3px 3px 3px;
+    padding: 5px 5px 5px 5px;
+    background-color: #F2F2F2;
+    color: #696969;
+}
+
+#BusyHourTrafficView {
+	padding: 0 1em;
+}
+
+#BusyHourTraffic .active2 {
+    background-color: #FFF;
+    color: #000;
+}
+
+#slider {
+	width: 600px;
+	margin: 0 auto;
+	clear: left;
+}
+
+@media only screen and (device-width: 768px) {
+	#slider {
+		width: 400px;
+	}
+}
+
+#container {
+	
+}
+
+#title {
+	float:left; 
+	width:100%; 
+	height:30px; 
+	margin:;
+	color:#222222;
+	text-shadow: 1px 1px 2px #A0A0A0;
+}
+
+.content{
+	margin-right:-230px; 
+	top:50px;
+}
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/area_chart.html b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/area_chart.html
new file mode 100644
index 000000000..30ef20110
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/area_chart.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<meta http-equiv="content-type" content="text/html; charset=UTF8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<link href="../../d3/css/nv.d3.css" rel="stylesheet" type="text/css">
+<style>
+	 body { 
+	overflow-y:scroll; 
+	} 
+ text { 
+	font: 12px sans-serif; 
+ } 
+ svg { 
+  display: block;
+ } 
+ #chart461 svg { 
+ height: 175px; 
+ width:  300px; 
+ min-width: 100px; 
+ min-height: 100px; 
+ } 
+ tr.z-row-over > td.z-row-inner, tr.z-row-over > .z-cell { background-color: rgb(255, 255, 255); }
+.nodatadiv {
+	display: table-cell;
+	width: 700px;
+	height:370px;
+	text-align:center;
+	vertical-align: middle;
+}
+.nodatainner {
+	padding: 10px;
+}
+ </style> 
+<body> 
+<div align="center"><H3></H3></div><div id="chart461"> <svg></svg> </div> 
+<script src="../../d3/js/d3.v3.min.js"></script>
+<script src="../../d3/js/nv.d3.min.js"></script> 
+<script src="../../d3/js/models/axis.min.js"></script> 
+<script> 
+historicalBarChart = [ 
+ { "type":"line", "key": "AP_CPU", "yAxis": "1","values": [{ "x":1388552400000 , "y":2.13}, { "x":1388552400000 , "y":5.0}, { "x":1388552400000 , "y":2.36}, { "x":1388552400000 , "y":10.0}, { "x":1391230800000 , "y":3.15}, { "x":1391230800000 , "y":2.88}, { "x":1391230800000 , "y":3.0}, { "x":1391230800000 , "y":4.0}, { "x":1393650000000 , "y":8.0}, { "x":1393650000000 , "y":3.93}, { "x":1393650000000 , "y":4.27}, { "x":1393650000000 , "y":4.0}, { "x":1396324800000 , "y":4.25}, { "x":1396324800000 , "y":5.35}, { "x":1396324800000 , "y":5.92}, { "x":1396324800000 , "y":12.0}, { "x":1398916800000 , "y":5.55}, { "x":1398916800000 , "y":4.89}, { "x":1398916800000 , "y":5.01}, { "x":1398916800000 , "y":3.27}, { "x":1401595200000 , "y":6.27}, { "x":1401595200000 , "y":9.17}, { "x":1401595200000 , "y":9.31}, { "x":1401595200000 , "y":6.07}, { "x":1404187200000 , "y":8.37}, { "x":1404187200000 , "y":8.11}, { "x":1404187200000 , "y":8.84}, { "x":1404187200000 , "y":8.93}, { "x":1406865600000 , "y":11.79}, { "x":1406865600000 , "y":12.22}, { "x":1406865600000 , "y":12.6}, { "x":1406865600000 , "y":11.61}, { "x":1409544000000 , "y":15.27}, { "x":1409544000000 , "y":19.09}, { "x":1409544000000 , "y":16.09}, { "x":1409544000000 , "y":18.66}, { "x":1412136000000 , "y":18.4}, { "x":1412136000000 , "y":22.05}, { "x":1412136000000 , "y":21.66}, { "x":1412136000000 , "y":19.04}, { "x":1414814400000 , "y":19.13}, { "x":1414814400000 , "y":19.61}, { "x":1414814400000 , "y":17.61}, { "x":1414814400000 , "y":17.5}, { "x":1417410000000 , "y":19.0}, { "x":1417410000000 , "y":15.73}, { "x":1420088400000 , "y":9.67}, { "x":1420088400000 , "y":15.19}, { "x":1420088400000 , "y":15.02}, { "x":1420088400000 , "y":9.62333333333333}, { "x":1422766800000 , "y":16.95}, { "x":1422766800000 , "y":14.29}, { "x":1425186000000 , "y":12.9}, { "x":1425186000000 , "y":16.1166666666667} ] } , 
+ { "type":"line", "key": "ROUTER_CPU", "yAxis": "1","values": [{ "x":1388552400000 , "y":3.0}, { "x":1388552400000 , "y":4.0}, { "x":1388552400000 , "y":4.89}, { "x":1388552400000 , "y":7.0}, { "x":1391230800000 , "y":4.57}, { "x":1391230800000 , "y":4.0}, { "x":1391230800000 , "y":4.0}, { "x":1391230800000 , "y":7.0}, { "x":1393650000000 , "y":7.0}, { "x":1393650000000 , "y":4.18}, { "x":1393650000000 , "y":5.0}, { "x":1393650000000 , "y":5.0}, { "x":1396324800000 , "y":5.0}, { "x":1396324800000 , "y":5.0}, { "x":1396324800000 , "y":5.06}, { "x":1396324800000 , "y":6.0}, { "x":1398916800000 , "y":5.0}, { "x":1398916800000 , "y":5.0}, { "x":1398916800000 , "y":5.0}, { "x":1398916800000 , "y":5.0}, { "x":1401595200000 , "y":6.0}, { "x":1401595200000 , "y":6.09}, { "x":1401595200000 , "y":6.0}, { "x":1401595200000 , "y":6.0}, { "x":1404187200000 , "y":6.36}, { "x":1404187200000 , "y":7.0}, { "x":1404187200000 , "y":7.0}, { "x":1404187200000 , "y":7.0}, { "x":1406865600000 , "y":7.0}, { "x":1406865600000 , "y":7.02}, { "x":1406865600000 , "y":7.24}, { "x":1406865600000 , "y":7.0}, { "x":1409544000000 , "y":8.23}, { "x":1409544000000 , "y":8.11}, { "x":1409544000000 , "y":8.12}, { "x":1409544000000 , "y":8.03}, { "x":1412136000000 , "y":9.0}, { "x":1412136000000 , "y":8.93}, { "x":1412136000000 , "y":8.57}, { "x":1412136000000 , "y":9.0}, { "x":1414814400000 , "y":5.97}, { "x":1414814400000 , "y":6.0}, { "x":1414814400000 , "y":9.0}, { "x":1414814400000 , "y":9.0}, { "x":1417410000000 , "y":9.0}, { "x":1417410000000 , "y":8.78}, { "x":1420088400000 , "y":3.0}, { "x":1420088400000 , "y":2.01}, { "x":1420088400000 , "y":3.0}, { "x":1420088400000 , "y":3.01}, { "x":1422766800000 , "y":2.67}, { "x":1422766800000 , "y":2.0}, { "x":1425186000000 , "y":2.8}, { "x":1425186000000 , "y":3.63333333333333} ] } , 
+ { "type":"line", "key": "SCTP_CPU", "yAxis": "1","values": [{ "x":1388552400000 , "y":7.0}, { "x":1388552400000 , "y":10.0}, { "x":1388552400000 , "y":8.27}, { "x":1388552400000 , "y":8.0}, { "x":1391230800000 , "y":10.02}, { "x":1391230800000 , "y":8.04}, { "x":1391230800000 , "y":9.0}, { "x":1391230800000 , "y":10.0}, { "x":1393650000000 , "y":12.0}, { "x":1393650000000 , "y":10.04}, { "x":1393650000000 , "y":11.16}, { "x":1393650000000 , "y":10.0}, { "x":1396324800000 , "y":10.7}, { "x":1396324800000 , "y":13.31}, { "x":1396324800000 , "y":12.73}, { "x":1396324800000 , "y":9.0}, { "x":1398916800000 , "y":12.41}, { "x":1398916800000 , "y":11.95}, { "x":1398916800000 , "y":12.82}, { "x":1398916800000 , "y":9.58}, { "x":1401595200000 , "y":11.28}, { "x":1401595200000 , "y":14.01}, { "x":1401595200000 , "y":14.63}, { "x":1401595200000 , "y":11.83}, { "x":1404187200000 , "y":14.06}, { "x":1404187200000 , "y":13.96}, { "x":1404187200000 , "y":14.66}, { "x":1404187200000 , "y":14.36}, { "x":1406865600000 , "y":16.6}, { "x":1406865600000 , "y":16.95}, { "x":1406865600000 , "y":17.11}, { "x":1406865600000 , "y":15.94}, { "x":1409544000000 , "y":19.86}, { "x":1409544000000 , "y":22.97}, { "x":1409544000000 , "y":21.56}, { "x":1409544000000 , "y":24.55}, { "x":1412136000000 , "y":22.66}, { "x":1412136000000 , "y":26.79}, { "x":1412136000000 , "y":26.54}, { "x":1412136000000 , "y":25.35}, { "x":1414814400000 , "y":21.0}, { "x":1414814400000 , "y":20.35}, { "x":1414814400000 , "y":21.93}, { "x":1414814400000 , "y":23.63}, { "x":1417410000000 , "y":24.0}, { "x":1417410000000 , "y":21.43}, { "x":1420088400000 , "y":12.63}, { "x":1420088400000 , "y":25.14}, { "x":1420088400000 , "y":21.85}, { "x":1420088400000 , "y":12.5766666666667}, { "x":1422766800000 , "y":26.3}, { "x":1422766800000 , "y":24.4}, { "x":1425186000000 , "y":23.3833333333333}, { "x":1425186000000 , "y":24.5833333333333} ] } , 
+ { "type":"line", "key": "DP_CPU", "yAxis": "1","values": [{ "x":1388552400000 , "y":2.0}, { "x":1388552400000 , "y":5.0}, { "x":1388552400000 , "y":2.17}, { "x":1388552400000 , "y":2.0}, { "x":1391230800000 , "y":3.01}, { "x":1391230800000 , "y":2.56}, { "x":1391230800000 , "y":3.0}, { "x":1391230800000 , "y":9.0}, { "x":1393650000000 , "y":10.0}, { "x":1393650000000 , "y":3.64}, { "x":1393650000000 , "y":4.06}, { "x":1393650000000 , "y":4.0}, { "x":1396324800000 , "y":4.04}, { "x":1396324800000 , "y":5.11}, { "x":1396324800000 , "y":5.9}, { "x":1396324800000 , "y":8.0}, { "x":1398916800000 , "y":5.08}, { "x":1398916800000 , "y":4.65}, { "x":1398916800000 , "y":4.74}, { "x":1398916800000 , "y":2.98}, { "x":1401595200000 , "y":6.13}, { "x":1401595200000 , "y":8.98}, { "x":1401595200000 , "y":9.22}, { "x":1401595200000 , "y":5.84}, { "x":1404187200000 , "y":8.12}, { "x":1404187200000 , "y":7.89}, { "x":1404187200000 , "y":8.41}, { "x":1404187200000 , "y":8.47}, { "x":1406865600000 , "y":11.06}, { "x":1406865600000 , "y":11.84}, { "x":1406865600000 , "y":11.92}, { "x":1406865600000 , "y":10.8}, { "x":1409544000000 , "y":14.58}, { "x":1409544000000 , "y":18.39}, { "x":1409544000000 , "y":15.5}, { "x":1409544000000 , "y":18.33}, { "x":1412136000000 , "y":18.01}, { "x":1412136000000 , "y":21.3}, { "x":1412136000000 , "y":21.11}, { "x":1412136000000 , "y":18.37}, { "x":1414814400000 , "y":18.59}, { "x":1414814400000 , "y":18.81}, { "x":1414814400000 , "y":17.13}, { "x":1414814400000 , "y":16.92}, { "x":1417410000000 , "y":18.0}, { "x":1417410000000 , "y":15.18}, { "x":1420088400000 , "y":9.16}, { "x":1420088400000 , "y":12.13}, { "x":1420088400000 , "y":11.76}, { "x":1420088400000 , "y":9.31}, { "x":1422766800000 , "y":13.47}, { "x":1422766800000 , "y":13.41}, { "x":1425186000000 , "y":12.2333333333333}, { "x":1425186000000 , "y":12.4} ] } 
+];
+
+</script> 
+<script src="js/area_chart.min.js"></script> 
+</body> </html> 
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/bar_chart.html b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/bar_chart.html
new file mode 100644
index 000000000..0be16ec11
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/bar_chart.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<meta http-equiv="content-type" content="text/html; charset=UTF8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<link href="../../d3/css/nv.d3.css" rel="stylesheet" type="text/css">
+<style>
+	 body { 
+	overflow-y:scroll; 
+	} 
+ text { 
+	font: 12px sans-serif; 
+ } 
+ svg { 
+  display: block;
+ } 
+ #chart461 svg { 
+ height: 420px; 
+ width:  700px; 
+ min-width: 100px; 
+ min-height: 100px; 
+ } 
+ tr.z-row-over > td.z-row-inner, tr.z-row-over > .z-cell { background-color: rgb(255, 255, 255); } 
+.nodatadiv {
+	display: table-cell;
+	width: 700px;
+	height:370px;
+	text-align:center;
+	vertical-align: middle;
+}
+.nodatainner {
+	padding: 10px;
+}
+ </style> 
+<body> 
+<div align="center"><H3></H3></div><div id="chart461"> <svg></svg> </div> 
+<script src="../../d3/js/d3.v3.min.js"></script>
+<script src="../../d3/js/nv.d3.min.js"></script> 
+<script src="../../d3/js/tooltip.js"></script> 
+<script src="../../d3/js/utils.js"></script> 
+<script src="../../d3/js/models/axis.min.js"></script> 
+<script src="../../d3/js/models/multiChart.js"></script> 
+<script> 
+historicalBarChart = [ 
+ { "type":"bar", "key": "AP_CPU", "yAxis": "1", "values": [{ "x":1388552400000 , "y":10}, { "x":1391230800000 , "y":4}, { "x":1393650000000 , "y":4}, { "x":1396324800000 , "y":12}, { "x":1398916800000 , "y":3.27}, { "x":1401595200000 , "y":6.07}, { "x":1404187200000 , "y":8.93}, { "x":1406865600000 , "y":11.61}, { "x":1409544000000 , "y":18.66}, { "x":1412136000000 , "y":19.04}, { "x":1414814400000 , "y":17.5}, { "x":1417410000000 , "y":15.73}, { "x":1420088400000 , "y":9.62333333333333}, { "x":1422766800000 , "y":14.29}, { "x":1425186000000 , "y":16.1166666666667} ] } , 
+ { "type":"bar", "key": "ROUTER_CPU", "yAxis": "1", "values": [{ "x":1388552400000 , "y":7}, { "x":1391230800000 , "y":7}, { "x":1393650000000 , "y":5}, { "x":1396324800000 , "y":6}, { "x":1398916800000 , "y":5}, { "x":1401595200000 , "y":6}, { "x":1404187200000 , "y":7}, { "x":1406865600000 , "y":7}, { "x":1409544000000 , "y":8.03}, { "x":1412136000000 , "y":9}, { "x":1414814400000 , "y":9}, { "x":1417410000000 , "y":8.78}, { "x":1420088400000 , "y":3.01}, { "x":1422766800000 , "y":2}, { "x":1425186000000 , "y":3.63333333333333} ] } , 
+ { "type":"bar", "key": "SCTP_CPU", "yAxis": "1", "values": [{ "x":1388552400000 , "y":8}, { "x":1391230800000 , "y":10}, { "x":1393650000000 , "y":10}, { "x":1396324800000 , "y":9}, { "x":1398916800000 , "y":9.58}, { "x":1401595200000 , "y":11.83}, { "x":1404187200000 , "y":14.36}, { "x":1406865600000 , "y":15.94}, { "x":1409544000000 , "y":24.55}, { "x":1412136000000 , "y":25.35}, { "x":1414814400000 , "y":23.63}, { "x":1417410000000 , "y":21.43}, { "x":1420088400000 , "y":12.5766666666667}, { "x":1422766800000 , "y":24.4}, { "x":1425186000000 , "y":24.5833333333333} ] } , 
+ { "type":"bar", "key": "DP_CPU", "yAxis": "1", "values": [{ "x":1388552400000 , "y":2}, { "x":1391230800000 , "y":9}, { "x":1393650000000 , "y":4}, { "x":1396324800000 , "y":8}, { "x":1398916800000 , "y":2.98}, { "x":1401595200000 , "y":5.84}, { "x":1404187200000 , "y":8.47}, { "x":1406865600000 , "y":10.8}, { "x":1409544000000 , "y":18.33}, { "x":1412136000000 , "y":18.37}, { "x":1414814400000 , "y":16.92}, { "x":1417410000000 , "y":15.18}, { "x":1420088400000 , "y":9.31}, { "x":1422766800000 , "y":13.41}, { "x":1425186000000 , "y":12.4} ] } 
+]; 
+var chart; 
+nv.addGraph(function() { 
+ chart = nv.models.multiBarChart() 
+           .margin({top: 30, right: 60, bottom: 50, left: 100}) 
+			.showLegend(true) 
+            .reduceXTicks(false) 
+           .forceY([0, 34.0])
+			.showControls(true) 
+  			.stacked(false)
+  			.logScale(false)
+  				.legendPos('top')
+           .color(d3.scale.category10().range()); 
+  chart.xAxis
+	.tickValues([1388552400000,1391230800000,1393650000000,1396324800000,1398916800000,1401595200000,1404187200000,1406865600000,1409544000000,1412136000000,1414814400000,1417410000000,1420088400000,1422766800000])
+             .staggerLabels(false) 
+			.showMaxMin(false) 
+  			.rotateLabels(90) 
+               .axisLabel('Timestamp')
+        .tickFormat(function(d) { 
+         return d3.time.format('%b %y')(new Date(d)) }); 
+  chart.yAxis
+			.logScale(false)
+               .axisLabel('') 
+        .tickFormat(d3.format(',.1f')); 
+ d3.select('#chart461 svg') 
+  .datum(historicalBarChart) 
+  .transition().duration(1000) 
+  .call(chart); 
+nv.utils.windowResize(chart.update); 
+return chart; 
+}); 
+function redraw() { 
+	d3.select('#chart461 svg') 
+		.datum(historicalBarChart) 
+		.transition().duration(500) 
+		.call(chart); 
+} 
+
+ setInterval(function () { 
+ redraw(); 
+ }, 1500) 
+if(historicalBarChart.length <= 0 ) {
+	document.getElementById("chart461").innerHTML = "<div id='noData'><b>No Data Available</b></div>";
+	document.getElementById("chart461").className="nodatadiv";
+	document.getElementById("nodata").className="nodatainner";
+}
+</script> </body></html>
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/d3_gauges_demo.html b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/d3_gauges_demo.html
new file mode 100644
index 000000000..94596e73c
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/d3_gauges_demo.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+    <head>
+      <meta http-equiv="content-type" content="text/html;charset=utf-8">
+      <title>d3.js gauges</title>
+    
+    <style>
+    
+      body
+      {
+          font: 10px arial;
+      }
+      
+    </style>
+    
+    <script src="../../d3/js/d3.v3.min.js" charset="utf-8"></script>
+    
+
+    <script>
+            
+      var dataURL = "data/speedometer2.csv"; 
+      var gauges = [];
+      var recordLength = 0;
+      var dataset ;
+
+    </script>
+    <script type="text/javascript" src="js/gauges.min.js"></script>
+    
+  </head>
+  
+  <body onload="initialize()">
+    <span id="Bedminster"></span>
+    <span id="Piscataway"></span>
+    <br/>
+    <span id="Middletown"></span>
+    <span id="Paramus"></span>
+  </body>
+  
+</html>
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/data/speedometer2.csv b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/data/speedometer2.csv
new file mode 100644
index 000000000..406143ea2
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/data/speedometer2.csv
@@ -0,0 +1,16 @@
+"YEARMONTH","Bedminster","Piscataway","Middletown","Paramus"
+"201401",8.27,4.89,2.36,2.17
+"201402",10.02,4.57,3.15,3.01
+"201403",11.16,5.00,4.27,4.06
+"201404",13.31,5.00,5.35,5.11
+"201405",12.82,5.00,5.01,4.74
+"201406",14.01,6.09,9.17,8.98
+"201407",14.66,7.00,8.84,8.41
+"201408",16.95,7.02,12.22,11.84
+"201409",21.56,8.12,16.09,15.50
+"201410",25.35,9.00,19.04,18.37
+"201411",21.93,9.00,17.61,17.13
+"201412",24.00,9.00,19.00,18.00
+"201501",25.14,2.01,15.19,12.13
+"201502",26.30,2.67,16.95,13.47
+"201503",26.5833333333333,45.63333333333333,16.1166666666667,12.40
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/data/speedometer3.csv b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/data/speedometer3.csv
new file mode 100644
index 000000000..046383e40
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/data/speedometer3.csv
@@ -0,0 +1,2 @@
+"YEARMONTH","Bedminster","Piscataway","Middletown","Paramus"
+"201401",8.27,4.89,2.36,2.17
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/data/worddata.csv b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/data/worddata.csv
new file mode 100644
index 000000000..762cb4237
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/data/worddata.csv
@@ -0,0 +1 @@
+text,frequency
service,98
portal,70
management,70
virtual,56
design,56
VNF,56
studio,42
operations,42
inventory,42
POLO,42
D2.0,42
ASDC,42
router,28
restart,28
process,28
platform,28
manage,28
loop,28
licensing,28
license,28
integrated,28
flow-through,28
enable,28
data,28
controller,28
control,28
configure,28
component,28
common,28
asset,28
application,28
ECOMP,28
workflow,14
waterfall,14
visual,14
view,14
vCTS,14
utilization,14
user,14
usage,14
troubleshoot,14
transformation,14
track,14
topolgies,14
topics,14
time,14
tickets,14
thresholds,14
templates,14
structures,14
standards-based,14
software,14
reuse,14
repository,14
reports,14
release,14
recipes,14
real-time,14
provisioning,14
properties,14
project-based,14
processes,14
physical,14
oversight,14
openl-loop,14
network,14
monitor,14
modeling,14
model-driven,14
model,14
message,14
maximize,14
manually,14
machine,14
layer,14
interact,14
instances,14
initiate,14
increase,14
imported,14
impacts,14
host,14
function,14
feeds,14
features,14
faults,14
extended,14
engines,14
engine,14
dynamic,14
document-driven,14
determine,14
dashboard,14
current,14
creation,14
created,14
create,14
configuration,14
composer,14
components,14
collective,14
certification,14
bus,14
basis,14
available,14
automation,14
automated,14
associated,14
assignment,14
appropriate,14
against,14
aervice,14
adminstrators,14
activation,14
action,14
VMs,14
VM,14
VLAN,14
SDN,14
SDK,14
SBG,14
SAM,14
RUBY,14
Policy,14
PODS,14
Ops,14
GFP,14
F5FW,14
DMaaP,14
DCAE,14
DBC,14
CPADS,14
AT&T,14
APP-C,14
AOTS-TM,14
ALTS,14
A&AI,14
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/donut_d3.html b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/donut_d3.html
new file mode 100644
index 000000000..afcac3598
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/donut_d3.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+body {
+  font: 10px sans-serif;
+}
+
+svg {
+  padding: 10px 0 0 10px;
+}
+
+.arc {
+  stroke: #fff;
+}
+
+        .slice text {
+            font-size: 16pt;
+            font-family: Arial;
+        }   
+</style>
+<body>
+<script src="../../d3/js/d3.js"></script>
+
+<script>
+
+var radius = 74,
+    padding = 10;
+
+var width = 200,
+    height = 200;
+
+var outerRadius = height / 2 - 20,
+    innerRadius = outerRadius / 3,
+    cornerRadius = 10;
+//var color = d3.scale.ordinal()
+  //  .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
+  var color = d3.scale.category10();
+  var dataURL = "data/speedometer3.csv";
+
+
+</script>
+<script src="js/donut.min.js"></script>
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/js/area_chart.min.js b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/js/area_chart.min.js
new file mode 100644
index 000000000..9b3decb90
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/js/area_chart.min.js
@@ -0,0 +1 @@
+function redrawAreaChart(){d3.select("#areaChart svg").datum(historicalBarChart).call(area_chart)}var area_chart;nv.addGraph(function(){return area_chart=nv.models.stackedAreaChart().showControls(!1).margin({top:30,right:60,bottom:50,left:100}).showLegend(!1).yAxisTooltipFormat(d3.format(",.1f")).x(function(a){return a.x}).y(function(a){return a.y}).color(d3.scale.category10().range()),area_chart.xAxis.axisLabel("").staggerLabels(!1).showMaxMin(!1).rotateLabels(90).tickFormat(function(a){return d3.time.format("%b %y")(new Date(a))}),area_chart.yAxis.axisLabel("").tickFormat(d3.format(",.1f")),d3.select("#areaChart svg").datum(historicalBarChart).call(area_chart),nv.utils.windowResize(area_chart.update),area_chart}),redrawAreaChart(),historicalBarChart.length<=0&&(document.getElementById("areaChart").innerHTML="<div id='noData'><b>No Data Available</b></div>",document.getElementById("areaChart").className="nodatadiv",document.getElementById("nodata").className="nodatainner");
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/js/donut.min.js b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/js/donut.min.js
new file mode 100644
index 000000000..60c4fd4bd
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/js/donut.min.js
@@ -0,0 +1 @@
+function angle(t){var e=90*(t.startAngle+t.endAngle)/Math.PI-90;return e>90?e-180:e}function arcTween(t,e){return function(){d3.select(this).transition().delay(e).attrTween("d",function(e){var r=d3.interpolate(e.outerRadius,t);return function(t){return e.outerRadius=r(t),arc(e)}})}}var arc=d3.svg.arc().padRadius(outerRadius).innerRadius(innerRadius),pie=d3.layout.pie().sort(null).padAngle(.02).value(function(t){return t.performance});d3.csv(dataURL,function(t,e){color.domain(d3.keys(e[0]).filter(function(t){return"YEARMONTH"!==t})),e.forEach(function(t){t.performance=color.domain().map(function(e){return{name:e,performance:+t[e]}})});var r=d3.select("body").append("svg").attr("class","legend").attr("width",radius).attr("height",2*radius).selectAll("g").data(color.domain().slice().reverse()).enter().append("g").attr("transform",function(t,e){return"translate(0,"+20*e+")"});r.append("rect").attr("width",18).attr("height",18).style("fill",color),r.append("text").attr("x",24).attr("y",9).attr("dy",".35em").text(function(t){return t});var a=d3.select("body").append("svg").attr("width",width).attr("height",height).data(e).append("g").attr("transform","translate("+radius+","+height/2+")"),n=a.selectAll("g.slice").data(function(t){return pie(t.performance)}).enter().append("g").attr("class","slice");n.append("path").each(function(t){t.outerRadius=outerRadius-10}).attr("class","arc").attr("d",arc).style("fill",function(t){return color(t.data.name)}).on("mouseover",arcTween(outerRadius,0)).on("mouseout",arcTween(outerRadius-10,150)),n.append("text").attr("dy",".35em").attr("transform",function(t){return t.outerRadius=outerRadius,t.innerRadius=outerRadius/2,"translate("+arc.centroid(t)+")rotate("+angle(t)+")"}).attr("text-anchor","middle").style("fill","white").style("font","bold 12px Arial").text(function(t){return t.value}),a.append("text").attr("dy",".35em").style("text-anchor","middle").text(function(t){return t.YEARMONTH})});
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/js/gauges.min.js b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/js/gauges.min.js
new file mode 100644
index 000000000..c0fd74849
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/js/gauges.min.js
@@ -0,0 +1 @@
+function Gauge(t,i){this.placeholderName=t;var n=this;this.configure=function(t){this.config=t,this.config.size=.9*this.config.size,this.config.raduis=.97*this.config.size/2,this.config.cx=this.config.size/2,this.config.cy=this.config.size/2,this.config.min=void 0!=t.min?t.min:0,this.config.max=void 0!=t.max?t.max:100,this.config.range=this.config.max-this.config.min,this.config.majorTicks=t.majorTicks||5,this.config.minorTicks=t.minorTicks||2,this.config.greenColor=t.greenColor||"#109618",this.config.yellowColor=t.yellowColor||"#FF9900",this.config.redColor=t.redColor||"#DC3912",this.config.transitionDuration=t.transitionDuration||500},this.render=function(){this.body=d3.select("#"+this.placeholderName).append("svg:svg").attr("class","gauge").attr("width",this.config.size).attr("height",this.config.size),this.body.append("svg:circle").attr("cx",this.config.cx).attr("cy",this.config.cy).attr("r",this.config.raduis).style("fill","#ccc").style("stroke","#000").style("stroke-width","0.5px"),this.body.append("svg:circle").attr("cx",this.config.cx).attr("cy",this.config.cy).attr("r",.9*this.config.raduis).style("fill","#fff").style("stroke","#e0e0e0").style("stroke-width","2px");for(var t in this.config.greenZones)this.drawBand(this.config.greenZones[t].from,this.config.greenZones[t].to,n.config.greenColor);for(var t in this.config.yellowZones)this.drawBand(this.config.yellowZones[t].from,this.config.yellowZones[t].to,n.config.yellowColor);for(var t in this.config.redZones)this.drawBand(this.config.redZones[t].from,this.config.redZones[t].to,n.config.redColor);if(void 0!=this.config.label){var i=Math.round(this.config.size/12);this.body.append("svg:text").attr("x",this.config.cx).attr("y",this.config.cy/2+i/2).attr("dy",i/2).attr("text-anchor","middle").text(this.config.label).style("font-size",i+"px").style("fill","#333").style("stroke-width","0px")}for(var i=Math.round(this.config.size/16),e=this.config.range/(this.config.majorTicks-1),o=this.config.min;o<=this.config.max;o+=e){for(var a=e/this.config.minorTicks,r=o+a;r<Math.min(o+e,this.config.max);r+=a){var s=this.valueToPoint(r,.75),c=this.valueToPoint(r,.85);this.body.append("svg:line").attr("x1",s.x).attr("y1",s.y).attr("x2",c.x).attr("y2",c.y).style("stroke","#666").style("stroke-width","1px")}var s=this.valueToPoint(o,.7),c=this.valueToPoint(o,.85);if(this.body.append("svg:line").attr("x1",s.x).attr("y1",s.y).attr("x2",c.x).attr("y2",c.y).style("stroke","#333").style("stroke-width","2px"),o==this.config.min||o==this.config.max){var g=this.valueToPoint(o,.63);this.body.append("svg:text").attr("x",g.x).attr("y",g.y).attr("dy",i/3).attr("text-anchor",o==this.config.min?"start":"end").text(o).style("font-size",i+"px").style("fill","#333").style("stroke-width","0px")}}var f=this.body.append("svg:g").attr("class","pointerContainer"),h=(this.config.min+this.config.max)/2,l=this.buildPointerPath(h),d=d3.svg.line().x(function(t){return t.x}).y(function(t){return t.y}).interpolate("basis");f.selectAll("path").data([l]).enter().append("svg:path").attr("d",d).style("fill","#dc3912").style("stroke","#c63310").style("fill-opacity",.7),f.append("svg:circle").attr("cx",this.config.cx).attr("cy",this.config.cy).attr("r",.12*this.config.raduis).style("fill","#4684EE").style("stroke","#666").style("opacity",1);var i=Math.round(this.config.size/10);f.selectAll("text").data([h]).enter().append("svg:text").attr("x",this.config.cx).attr("y",this.config.size-this.config.cy/4-i).attr("dy",i/2).attr("text-anchor","middle").style("font-size",i+"px").style("fill","#000").style("stroke-width","0px"),this.redraw(this.config.min,0)},this.buildPointerPath=function(t){function i(t,i){var e=n.valueToPoint(t,i);return e.x-=n.config.cx,e.y-=n.config.cy,e}var e=this.config.range/13,o=i(t,.85),a=i(t-e,.12),r=i(t+e,.12),s=t-this.config.range*(1/.75)/2,c=i(s,.28),g=i(s-e,.12),f=i(s+e,.12);return[o,a,f,c,g,r,o]},this.drawBand=function(t,i,e){0>=i-t||this.body.append("svg:path").style("fill",e).attr("d",d3.svg.arc().startAngle(this.valueToRadians(t)).endAngle(this.valueToRadians(i)).innerRadius(.65*this.config.raduis).outerRadius(.85*this.config.raduis)).attr("transform",function(){return"translate("+n.config.cx+", "+n.config.cy+") rotate(270)"})},this.redraw=function(t,i,e){var o=this.body.select(".pointerContainer"),a=o.selectAll("text");y=a.attr("y"),dy=parseFloat(a.attr("dy")),a.selectAll("tspan").remove(),a.append("tspan").attr("x",45).attr("dy",0).text(Math.round(t)),a.append("tspan").attr("x",45).attr("dy",10).text(i),o.selectAll("text").style("fill",function(){var i=n.config.max-n.config.min;return Math.round(t)>.9*i?"#DC3912":Math.round(t)>.5*i&&Math.round(t)<.9*i?"#FF9900":"#000000"});var r=o.selectAll("path");r.transition().duration(void 0!=e?e:this.config.transitionDuration).attrTween("transform",function(){var i=t;t>n.config.max?i=n.config.max+.02*n.config.range:t<n.config.min&&(i=n.config.min-.02*n.config.range);var e=n.valueToDegrees(i)-90,o=n._currentRotation||e;return n._currentRotation=e,function(t){var i=o+(e-o)*t;return"translate("+n.config.cx+", "+n.config.cy+") rotate("+i+")"}})},this.valueToDegrees=function(t){return t/this.config.range*270-(this.config.min/this.config.range*270+45)},this.valueToRadians=function(t){return this.valueToDegrees(t)*Math.PI/180},this.valueToPoint=function(t,i){return{x:this.config.cx-this.config.raduis*i*Math.cos(this.valueToRadians(t)),y:this.config.cy-this.config.raduis*i*Math.sin(this.valueToRadians(t))}},this.configure(i)}function createGauge(t,i,n,e){var o={size:100,label:i,min:void 0!=n?n:0,max:void 0!=e?e:100,minorTicks:5},a=o.max-o.min;o.yellowZones=[{from:o.min+.5*a,to:o.min+.9*a}],o.redZones=[{from:o.min+.9*a,to:o.max}],gauges[t]=new Gauge(t,o),gauges[t].render()}function createGauges(){createGauge("Bedminster","Bedminster",0,50),createGauge("Piscataway","Piscataway",0,50),createGauge("Middletown","Middletown",0,50),createGauge("Paramus","Paramus",0,50)}function updateGauges(t){for(var i in gauges){var n=getValue(i,t),e=getDate1(i,t);n&&gauges[i].redraw(n,e,100)}}function getValue(gauge_id,index){var d=dataset[index];return eval("d."+gauge_id)}function getDate1(t,i){var n=dataset[i];return n.YEARMONTH}function getROUTER_CPU_Value(t){d3.csv(dataURL,function(i){i.forEach(function(i,n){return n==t?i.ROUTER_CPU:void 0})})}function getAP_CPU_Value(t){d3.csv(dataURL,function(i){i.forEach(function(i,n){return n==t?i.AP_CPU:void 0})})}function updateData(){for(var t=0;t<recordLength;t++);}function initialize(){createGauges(),d3.csv(dataURL,function(t){dataset=t,recordLength=t.length,dataset.some(function(t,i){return 1==i?(updateGauges(i),1==i):void 0});var i=1e3,n=2,e=function(){return function(){return updateGauges(n++),n<recordLength?(d3.timer(e(),i),!0):(n=0,d3.timer(e(),i),!0)}};d3.timer(e(),i)})}
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/js/line_chart.min.js b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/js/line_chart.min.js
new file mode 100644
index 000000000..e501260bc
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/js/line_chart.min.js
@@ -0,0 +1 @@
+function redrawLineChart(){d3.select("#lineChart svg").datum(historicalBarChart).call(line_chart)}var line_chart;nv.addGraph(function(){return line_chart=nv.models.multiChart().dualaxis(!1).legendPos("top").margin({top:30,right:60,bottom:50,left:100}).showLegend(!1).color(d3.scale.category10().range()),line_chart.lines1.forceY([0,34]),line_chart.lines2.forceY([0,1]),line_chart.xAxis.axisLabel("").staggerLabels(!1).showMaxMin(!1).rotateLabels(90).tickFormat(function(a){return d3.time.format("%b %y")(new Date(a))}),line_chart.yAxis1.axisLabel("").tickFormat(d3.format(",.1f")),d3.select("#lineChart svg").datum(historicalBarChart).call(line_chart),nv.utils.windowResize(line_chart.update),line_chart}),redrawLineChart(),historicalBarChart.length<=0&&(document.getElementById("lineChart").innerHTML="<div id='noData2'><b>No Data Available</b></div>",document.getElementById("lineChart").className="nodatadiv",document.getElementById("nodata2").className="nodatainner");
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/js/pie_chart.min.js b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/js/pie_chart.min.js
new file mode 100644
index 000000000..f78eec708
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/js/pie_chart.min.js
@@ -0,0 +1 @@
+function redraw(){d3.select("#chart423 svg").datum(historicalBarChart).transition().duration(500).call(chart)}var chart;nv.addGraph(function(){return chart=nv.models.pieChart().margin({top:30,right:60,bottom:50,left:100}).x(function(t){return t.key}).y(function(t){return t.y}),chart.showLegend(!1),d3.select("#chart423 svg").datum(historicalBarChart).transition().duration(1200).call(chart),nv.utils.windowResize(chart.update),chart}),setInterval(function(){redraw()},1500),historicalBarChart.length<=0&&(document.getElementById("chart423").innerHTML="<div id='noData'><b>No Data Available</b></div>",document.getElementById("chart423").className="nodatadiv",document.getElementById("nodata").className="nodatainner");
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/js/worddata.min.js b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/js/worddata.min.js
new file mode 100644
index 000000000..6b8274605
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/js/worddata.min.js
@@ -0,0 +1 @@
+function dataViz(t){function e(t){var e=d3.select("svg").append("g").attr("id","wordCloudG").attr("transform","translate(210,175)");e.selectAll("text").data(t).enter().append("text").style("font-size",function(t){return 1*t.size+"px"}).style("fill",function(t){return keywords.indexOf(t.text)>-1?"red":"black"}).style("opacity",.75).attr("text-anchor","middle").attr("transform",function(t){return"translate("+[t.x,t.y]+")rotate("+t.rotate+")"}).text(function(t){return t.text})}d3.layout.cloud().size([420,350]).words(t).rotate(function(t){return t.text.length>5?0:90}).fontSize(function(t){return wordScale(t.frequency)}).on("end",e).start()}d3.csv(dataURL,function(t){dataViz(t)}),wordScale=d3.scale.linear().domain([0,100]).range([0,70]).clamp(!0);
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/line_chart.html b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/line_chart.html
new file mode 100644
index 000000000..d4ba57a46
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/line_chart.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<meta http-equiv="content-type" content="text/html; charset=UTF8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<link href="../../d3/css/nv.d3.css" rel="stylesheet" type="text/css">
+<style>
+	 body { 
+	overflow-y:scroll; 
+	} 
+ text { 
+	font: 12px sans-serif; 
+ } 
+ svg { 
+  display: block;
+ } 
+ #chart461 svg { 
+ height: 175px; 
+ width:  300px; 
+ min-width: 100px; 
+ min-height: 100px; 
+ } 
+ tr.z-row-over > td.z-row-inner, tr.z-row-over > .z-cell { background-color: rgb(255, 255, 255); }
+.nodatadiv {
+	display: table-cell;
+	width: 700px;
+	height:370px;
+	text-align:center;
+	vertical-align: middle;
+}
+.nodatainner {
+	padding: 10px;
+}
+ </style> 
+<body> 
+<div align="center"><H3></H3></div><div id="chart461"> <svg></svg> </div> 
+<script src="../../d3/js/d3.v3.min.js"></script>
+<script src="../../d3/js/nv.d3.min.js"></script> 
+<script src="../../d3/js/models/axis.min.js"></script> 
+<script> 
+historicalBarChart = [ 
+ { "type":"line", "key": "AP_CPU", "yAxis": "1","values": [{ "x":1388552400000 , "y":2.13}, { "x":1388552400000 , "y":5.0}, { "x":1388552400000 , "y":2.36}, { "x":1388552400000 , "y":10.0}, { "x":1391230800000 , "y":3.15}, { "x":1391230800000 , "y":2.88}, { "x":1391230800000 , "y":3.0}, { "x":1391230800000 , "y":4.0}, { "x":1393650000000 , "y":8.0}, { "x":1393650000000 , "y":3.93}, { "x":1393650000000 , "y":4.27}, { "x":1393650000000 , "y":4.0}, { "x":1396324800000 , "y":4.25}, { "x":1396324800000 , "y":5.35}, { "x":1396324800000 , "y":5.92}, { "x":1396324800000 , "y":12.0}, { "x":1398916800000 , "y":5.55}, { "x":1398916800000 , "y":4.89}, { "x":1398916800000 , "y":5.01}, { "x":1398916800000 , "y":3.27}, { "x":1401595200000 , "y":6.27}, { "x":1401595200000 , "y":9.17}, { "x":1401595200000 , "y":9.31}, { "x":1401595200000 , "y":6.07}, { "x":1404187200000 , "y":8.37}, { "x":1404187200000 , "y":8.11}, { "x":1404187200000 , "y":8.84}, { "x":1404187200000 , "y":8.93}, { "x":1406865600000 , "y":11.79}, { "x":1406865600000 , "y":12.22}, { "x":1406865600000 , "y":12.6}, { "x":1406865600000 , "y":11.61}, { "x":1409544000000 , "y":15.27}, { "x":1409544000000 , "y":19.09}, { "x":1409544000000 , "y":16.09}, { "x":1409544000000 , "y":18.66}, { "x":1412136000000 , "y":18.4}, { "x":1412136000000 , "y":22.05}, { "x":1412136000000 , "y":21.66}, { "x":1412136000000 , "y":19.04}, { "x":1414814400000 , "y":19.13}, { "x":1414814400000 , "y":19.61}, { "x":1414814400000 , "y":17.61}, { "x":1414814400000 , "y":17.5}, { "x":1417410000000 , "y":19.0}, { "x":1417410000000 , "y":15.73}, { "x":1420088400000 , "y":9.67}, { "x":1420088400000 , "y":15.19}, { "x":1420088400000 , "y":15.02}, { "x":1420088400000 , "y":9.62333333333333}, { "x":1422766800000 , "y":16.95}, { "x":1422766800000 , "y":14.29}, { "x":1425186000000 , "y":12.9}, { "x":1425186000000 , "y":16.1166666666667} ] } , 
+ { "type":"line", "key": "ROUTER_CPU", "yAxis": "1","values": [{ "x":1388552400000 , "y":3.0}, { "x":1388552400000 , "y":4.0}, { "x":1388552400000 , "y":4.89}, { "x":1388552400000 , "y":7.0}, { "x":1391230800000 , "y":4.57}, { "x":1391230800000 , "y":4.0}, { "x":1391230800000 , "y":4.0}, { "x":1391230800000 , "y":7.0}, { "x":1393650000000 , "y":7.0}, { "x":1393650000000 , "y":4.18}, { "x":1393650000000 , "y":5.0}, { "x":1393650000000 , "y":5.0}, { "x":1396324800000 , "y":5.0}, { "x":1396324800000 , "y":5.0}, { "x":1396324800000 , "y":5.06}, { "x":1396324800000 , "y":6.0}, { "x":1398916800000 , "y":5.0}, { "x":1398916800000 , "y":5.0}, { "x":1398916800000 , "y":5.0}, { "x":1398916800000 , "y":5.0}, { "x":1401595200000 , "y":6.0}, { "x":1401595200000 , "y":6.09}, { "x":1401595200000 , "y":6.0}, { "x":1401595200000 , "y":6.0}, { "x":1404187200000 , "y":6.36}, { "x":1404187200000 , "y":7.0}, { "x":1404187200000 , "y":7.0}, { "x":1404187200000 , "y":7.0}, { "x":1406865600000 , "y":7.0}, { "x":1406865600000 , "y":7.02}, { "x":1406865600000 , "y":7.24}, { "x":1406865600000 , "y":7.0}, { "x":1409544000000 , "y":8.23}, { "x":1409544000000 , "y":8.11}, { "x":1409544000000 , "y":8.12}, { "x":1409544000000 , "y":8.03}, { "x":1412136000000 , "y":9.0}, { "x":1412136000000 , "y":8.93}, { "x":1412136000000 , "y":8.57}, { "x":1412136000000 , "y":9.0}, { "x":1414814400000 , "y":5.97}, { "x":1414814400000 , "y":6.0}, { "x":1414814400000 , "y":9.0}, { "x":1414814400000 , "y":9.0}, { "x":1417410000000 , "y":9.0}, { "x":1417410000000 , "y":8.78}, { "x":1420088400000 , "y":3.0}, { "x":1420088400000 , "y":2.01}, { "x":1420088400000 , "y":3.0}, { "x":1420088400000 , "y":3.01}, { "x":1422766800000 , "y":2.67}, { "x":1422766800000 , "y":2.0}, { "x":1425186000000 , "y":2.8}, { "x":1425186000000 , "y":3.63333333333333} ] } , 
+ { "type":"line", "key": "SCTP_CPU", "yAxis": "1","values": [{ "x":1388552400000 , "y":7.0}, { "x":1388552400000 , "y":10.0}, { "x":1388552400000 , "y":8.27}, { "x":1388552400000 , "y":8.0}, { "x":1391230800000 , "y":10.02}, { "x":1391230800000 , "y":8.04}, { "x":1391230800000 , "y":9.0}, { "x":1391230800000 , "y":10.0}, { "x":1393650000000 , "y":12.0}, { "x":1393650000000 , "y":10.04}, { "x":1393650000000 , "y":11.16}, { "x":1393650000000 , "y":10.0}, { "x":1396324800000 , "y":10.7}, { "x":1396324800000 , "y":13.31}, { "x":1396324800000 , "y":12.73}, { "x":1396324800000 , "y":9.0}, { "x":1398916800000 , "y":12.41}, { "x":1398916800000 , "y":11.95}, { "x":1398916800000 , "y":12.82}, { "x":1398916800000 , "y":9.58}, { "x":1401595200000 , "y":11.28}, { "x":1401595200000 , "y":14.01}, { "x":1401595200000 , "y":14.63}, { "x":1401595200000 , "y":11.83}, { "x":1404187200000 , "y":14.06}, { "x":1404187200000 , "y":13.96}, { "x":1404187200000 , "y":14.66}, { "x":1404187200000 , "y":14.36}, { "x":1406865600000 , "y":16.6}, { "x":1406865600000 , "y":16.95}, { "x":1406865600000 , "y":17.11}, { "x":1406865600000 , "y":15.94}, { "x":1409544000000 , "y":19.86}, { "x":1409544000000 , "y":22.97}, { "x":1409544000000 , "y":21.56}, { "x":1409544000000 , "y":24.55}, { "x":1412136000000 , "y":22.66}, { "x":1412136000000 , "y":26.79}, { "x":1412136000000 , "y":26.54}, { "x":1412136000000 , "y":25.35}, { "x":1414814400000 , "y":21.0}, { "x":1414814400000 , "y":20.35}, { "x":1414814400000 , "y":21.93}, { "x":1414814400000 , "y":23.63}, { "x":1417410000000 , "y":24.0}, { "x":1417410000000 , "y":21.43}, { "x":1420088400000 , "y":12.63}, { "x":1420088400000 , "y":25.14}, { "x":1420088400000 , "y":21.85}, { "x":1420088400000 , "y":12.5766666666667}, { "x":1422766800000 , "y":26.3}, { "x":1422766800000 , "y":24.4}, { "x":1425186000000 , "y":23.3833333333333}, { "x":1425186000000 , "y":24.5833333333333} ] } , 
+ { "type":"line", "key": "DP_CPU", "yAxis": "1","values": [{ "x":1388552400000 , "y":2.0}, { "x":1388552400000 , "y":5.0}, { "x":1388552400000 , "y":2.17}, { "x":1388552400000 , "y":2.0}, { "x":1391230800000 , "y":3.01}, { "x":1391230800000 , "y":2.56}, { "x":1391230800000 , "y":3.0}, { "x":1391230800000 , "y":9.0}, { "x":1393650000000 , "y":10.0}, { "x":1393650000000 , "y":3.64}, { "x":1393650000000 , "y":4.06}, { "x":1393650000000 , "y":4.0}, { "x":1396324800000 , "y":4.04}, { "x":1396324800000 , "y":5.11}, { "x":1396324800000 , "y":5.9}, { "x":1396324800000 , "y":8.0}, { "x":1398916800000 , "y":5.08}, { "x":1398916800000 , "y":4.65}, { "x":1398916800000 , "y":4.74}, { "x":1398916800000 , "y":2.98}, { "x":1401595200000 , "y":6.13}, { "x":1401595200000 , "y":8.98}, { "x":1401595200000 , "y":9.22}, { "x":1401595200000 , "y":5.84}, { "x":1404187200000 , "y":8.12}, { "x":1404187200000 , "y":7.89}, { "x":1404187200000 , "y":8.41}, { "x":1404187200000 , "y":8.47}, { "x":1406865600000 , "y":11.06}, { "x":1406865600000 , "y":11.84}, { "x":1406865600000 , "y":11.92}, { "x":1406865600000 , "y":10.8}, { "x":1409544000000 , "y":14.58}, { "x":1409544000000 , "y":18.39}, { "x":1409544000000 , "y":15.5}, { "x":1409544000000 , "y":18.33}, { "x":1412136000000 , "y":18.01}, { "x":1412136000000 , "y":21.3}, { "x":1412136000000 , "y":21.11}, { "x":1412136000000 , "y":18.37}, { "x":1414814400000 , "y":18.59}, { "x":1414814400000 , "y":18.81}, { "x":1414814400000 , "y":17.13}, { "x":1414814400000 , "y":16.92}, { "x":1417410000000 , "y":18.0}, { "x":1417410000000 , "y":15.18}, { "x":1420088400000 , "y":9.16}, { "x":1420088400000 , "y":12.13}, { "x":1420088400000 , "y":11.76}, { "x":1420088400000 , "y":9.31}, { "x":1422766800000 , "y":13.47}, { "x":1422766800000 , "y":13.41}, { "x":1425186000000 , "y":12.2333333333333}, { "x":1425186000000 , "y":12.4} ] } 
+];
+
+</script> 
+<script src="js/line_chart.min.js"></script> 
+</body> </html> 
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/pie_chart.html b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/pie_chart.html
new file mode 100644
index 000000000..ebbdd9c00
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/pie_chart.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<meta http-equiv="content-type" content="text/html; charset=UTF8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<link href="../../d3/css/nv.d3.css" rel="stylesheet" type="text/css">
+<style>
+	 body { 
+	overflow-y:scroll; 
+	} 
+ text { 
+	font: 12px sans-serif; 
+ } 
+ tr.z-row-over > td.z-row-inner, tr.z-row-over > .z-cell { background-color: rgb(255, 255, 255); }  svg {	  display: block; }  #chart423 svg { 
+ height: 275px; 
+ width:  300px; 
+ min-width: 100px; 
+ min-height: 100px; 
+ } 
+ </style> 
+<body> 
+<div id="chart423"><svg></svg></div>
+<script src="../../d3/js/d3.v3.min.js"></script>
+<script src="../../d3/js/nv.d3.min.js"></script> 
+<script src="../../d3/js/models/legend.js"></script> 
+<script src="../../d3/js/models/pie.js"></script> 
+<script src="../../d3/js/models/pieChart.js"></script> 
+<script src="../../d3/js/utils.js"></script> 
+<script> 
+historicalBarChart = [ 
+{ "key":"Bedminster", "y":8.27}, 
+{ "key":"Middletown", "y":2.36}, 
+{ "key":"Paramus", "y":2.17}, 
+{ "key":"Piscataway", "y":4.89} 
+];
+
+</script> 
+<script src="js/pie_chart.min.js"></script>
+</body> </html> 
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/wordcloud.html b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/wordcloud.html
new file mode 100644
index 000000000..6cf000795
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/html/wordcloud.html
@@ -0,0 +1,36 @@
+<html>
+<head>
+  <title>Word Cloud Example</title>
+  <meta charset="utf-8" />
+<script src="../../d3/js/d3.v3.min.js" type="text/JavaScript"></script>
+<script src="../../d3/js/colorbrewer.js" type="text/JavaScript"></script>
+<script src="../../d3/js/d3.layout.cloud.js" type="text/JavaScript"></script>
+
+</head>
+<style>
+  svg {
+    height: 350px;
+    width: 420px;
+    border: 1px solid gray;
+  }
+
+</style>
+<body>
+
+<div id="viz">
+  <svg>
+  </svg>
+</div>
+<div id="controls" />
+</body>
+  <footer>
+    
+<script>
+var cloudSize = 200;
+var dataURL = "data/worddata.csv";
+var keywords = ["VNF", "portal", "D2.0", "service", "management", "ECOMP"];
+</script>
+<script src="js/worddata.min.js" type="text/JavaScript"></script>
+  </footer>
+
+</html>
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/Calendar-16x16.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/Calendar-16x16.png
new file mode 100644
index 000000000..ac970bda5
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/Calendar-16x16.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/arrow-next.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/arrow-next.png
new file mode 100644
index 000000000..1a4f72c68
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/arrow-next.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/arrow-prev.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/arrow-prev.png
new file mode 100644
index 000000000..8211eba1d
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/arrow-prev.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/carousel/slide_b_drive_test_map.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/carousel/slide_b_drive_test_map.png
new file mode 100644
index 000000000..78a8873bb
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/carousel/slide_b_drive_test_map.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/carousel/slide_b_eppt_county.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/carousel/slide_b_eppt_county.png
new file mode 100644
index 000000000..df471d7d8
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/carousel/slide_b_eppt_county.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/carousel/slide_b_eppt_regression.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/carousel/slide_b_eppt_regression.png
new file mode 100644
index 000000000..e59fc189c
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/carousel/slide_b_eppt_regression.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/carousel/slide_b_ios_throughput.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/carousel/slide_b_ios_throughput.png
new file mode 100644
index 000000000..76a2d2b7a
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/carousel/slide_b_ios_throughput.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/carousel/slide_b_lata_map.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/carousel/slide_b_lata_map.png
new file mode 100644
index 000000000..174ef9b8e
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/carousel/slide_b_lata_map.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/carousel/slide_b_lata_map_legend.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/carousel/slide_b_lata_map_legend.png
new file mode 100644
index 000000000..f7f2719ae
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/carousel/slide_b_lata_map_legend.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/carousel/slide_b_nova_sdn_map.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/carousel/slide_b_nova_sdn_map.png
new file mode 100644
index 000000000..ee0ddef91
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/carousel/slide_b_nova_sdn_map.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/copyicon.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/copyicon.png
new file mode 100644
index 000000000..6c1c3c155
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/copyicon.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/deleteicon.gif b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/deleteicon.gif
new file mode 100644
index 000000000..4b07af826
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/deleteicon.gif
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/example-frame.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/example-frame.png
new file mode 100644
index 000000000..31f2fe1cc
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/example-frame.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/loading.gif b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/loading.gif
new file mode 100644
index 000000000..cccb0fc9f
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/loading.gif
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/1_mon.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/1_mon.png
new file mode 100644
index 000000000..d46eee505
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/1_mon.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/2_tue.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/2_tue.png
new file mode 100644
index 000000000..ed82aad3a
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/2_tue.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/3_wed.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/3_wed.png
new file mode 100644
index 000000000..8f8c03287
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/3_wed.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/4_thu.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/4_thu.png
new file mode 100644
index 000000000..750dca5d6
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/4_thu.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/5_fri.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/5_fri.png
new file mode 100644
index 000000000..599e51f1e
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/5_fri.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/6_sat.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/6_sat.png
new file mode 100644
index 000000000..70323ea04
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/6_sat.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/7_sun.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/7_sun.png
new file mode 100644
index 000000000..9d579d680
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/7_sun.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/BH_DLSTX_IN.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/BH_DLSTX_IN.png
new file mode 100644
index 000000000..af1ac0a72
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/BH_DLSTX_IN.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/BH_DLSTX_OUT.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/BH_DLSTX_OUT.png
new file mode 100644
index 000000000..935b53862
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/BH_DLSTX_OUT.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/BH_Nat.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/BH_Nat.png
new file mode 100644
index 000000000..916a655ff
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/BH_Nat.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/BH_Nat_Def.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/BH_Nat_Def.png
new file mode 100644
index 000000000..a8b516d9f
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/BH_Nat_Def.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/BH_Nat_Priority.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/BH_Nat_Priority.png
new file mode 100644
index 000000000..2cf814113
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/images/tunnels/BH_Nat_Priority.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/FusionCharts.js b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/FusionCharts.js
new file mode 100644
index 000000000..4c174dfae
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/FusionCharts.js
@@ -0,0 +1,361 @@
+/**
+ * FusionCharts: Flash Player detection and Chart embedding.
+ * Version 1.2.3F ( 22 November 2008) - Specialized for FusionChartsFREE 
+ * 					Checking Flash Version >=6 and added updateChartXML() for FREE Charts.
+ * Version: 1.2.3 (1st September, 2008) - Added Fix for % and & characters, scaled dimensions, fixes in to properly handling of double quotes and single quotes in setDataXML() function.
+ * Version: 1.2.2 (10th July, 2008) - Added Fix for % scaled dimensions, fixes in setDataXML() and setDataURL() functions
+ * Version: 1.2.1 (21st December, 2007) - Added setting up Transparent/opaque mode: setTransparent() function 
+ * Version: 1.2 (1st November, 2007) - Added FORM fixes for IE 
+ * Version: 1.1 (29th June, 2007) - Added Player detection, New conditional fixes for IE
+ *
+ * Morphed from SWFObject (http://blog.deconcept.com/swfobject/) under MIT License:
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ */
+if(typeof infosoftglobal == "undefined") var infosoftglobal = new Object();
+if(typeof infosoftglobal.FusionChartsUtil == "undefined") infosoftglobal.FusionChartsUtil = new Object();
+infosoftglobal.FusionCharts = function(swf, id, w, h, debugMode, registerWithJS, c, scaleMode, lang, detectFlashVersion, autoInstallRedirect){
+	if (!document.getElementById) { return; }
+	
+	//Flag to see whether data has been set initially
+	this.initialDataSet = false;
+	
+	//Create container objects
+	this.params = new Object();
+	this.variables = new Object();
+	this.attributes = new Array();
+	
+	//Set attributes for the SWF
+	if(swf) { this.setAttribute('swf', swf); }
+	if(id) { this.setAttribute('id', id); }
+
+	w=w.toString().replace(/\%$/,"%25");
+	if(w) { this.setAttribute('width', w); }
+	h=h.toString().replace(/\%$/,"%25");
+	if(h) { this.setAttribute('height', h); }
+
+	
+	//Set background color
+	if(c) { this.addParam('bgcolor', c); }
+	
+	//Set Quality	
+	this.addParam('quality', 'high');
+	
+	//Add scripting access parameter
+	this.addParam('allowScriptAccess', 'always');
+	
+	//Pass width and height to be appended as chartWidth and chartHeight
+	this.addVariable('chartWidth', w);
+	this.addVariable('chartHeight', h);
+
+	//Whether in debug mode
+	debugMode = debugMode ? debugMode : 0;
+	this.addVariable('debugMode', debugMode);
+	//Pass DOM ID to Chart
+	this.addVariable('DOMId', id);
+	//Whether to registed with JavaScript
+	registerWithJS = registerWithJS ? registerWithJS : 0;
+	this.addVariable('registerWithJS', registerWithJS);
+	
+	//Scale Mode of chart
+	scaleMode = scaleMode ? scaleMode : 'noScale';
+	this.addVariable('scaleMode', scaleMode);
+	
+	//Application Message Language
+	lang = lang ? lang : 'EN';
+	this.addVariable('lang', lang);
+	
+	//Whether to auto detect and re-direct to Flash Player installation
+	this.detectFlashVersion = detectFlashVersion?detectFlashVersion:1;
+	this.autoInstallRedirect = autoInstallRedirect?autoInstallRedirect:1;
+	
+	//Ger Flash Player version 
+	this.installedVer = infosoftglobal.FusionChartsUtil.getPlayerVersion();
+	
+	if (!window.opera && document.all && this.installedVer.major > 7) {
+		// Only add the onunload cleanup if the Flash Player version supports External Interface and we are in IE
+		infosoftglobal.FusionCharts.doPrepUnload = true;
+	}
+}
+
+infosoftglobal.FusionCharts.prototype = {
+	setAttribute: function(name, value){
+		this.attributes[name] = value;
+	},
+	getAttribute: function(name){
+		return this.attributes[name];
+	},
+	addParam: function(name, value){
+		this.params[name] = value;
+	},
+	getParams: function(){
+		return this.params;
+	},
+	addVariable: function(name, value){
+		this.variables[name] = value;
+	},
+	getVariable: function(name){
+		return this.variables[name];
+	},
+	getVariables: function(){
+		return this.variables;
+	},
+	getVariablePairs: function(){
+		var variablePairs = new Array();
+		var key;
+		var variables = this.getVariables();
+		for(key in variables){
+			variablePairs.push(key +"="+ variables[key]);
+		}
+		return variablePairs;
+	},
+	getSWFHTML: function() {
+		var swfNode = "";
+		if (navigator.plugins && navigator.mimeTypes && navigator.mimeTypes.length) { 
+			// netscape plugin architecture			
+			swfNode = '<embed type="application/x-shockwave-flash" src="'+ this.getAttribute('swf') +'" width="'+ this.getAttribute('width') +'" height="'+ this.getAttribute('height') +'"  ';
+			swfNode += ' id="'+ this.getAttribute('id') +'" name="'+ this.getAttribute('id') +'" ';
+			var params = this.getParams();
+			 for(var key in params){ swfNode += [key] +'="'+ params[key] +'" '; }
+			var pairs = this.getVariablePairs().join("&");
+			 if (pairs.length > 0){ swfNode += 'flashvars="'+ pairs +'"'; }
+			swfNode += '/>';
+		} else { // PC IE			
+			swfNode = '<object id="'+ this.getAttribute('id') +'" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+ this.getAttribute('width') +'" height="'+ this.getAttribute('height') +'">';
+			swfNode += '<param name="movie" value="'+ this.getAttribute('swf') +'" />';
+			var params = this.getParams();
+			for(var key in params) {
+			 swfNode += '<param name="'+ key +'" value="'+ params[key] +'" />';
+			}
+			var pairs = this.getVariablePairs().join("&");			
+			if(pairs.length > 0) {swfNode += '<param name="flashvars" value="'+ pairs +'" />';}
+			swfNode += "</object>";
+		}
+		return swfNode;
+	},
+	setDataURL: function(strDataURL){
+		//This method sets the data URL for the chart.
+		//If being set initially
+		if (this.initialDataSet==false){
+			this.addVariable('dataURL',strDataURL);
+			//Update flag
+			this.initialDataSet = true;
+		}else{
+			//Else, we update the chart data using External Interface
+			//Get reference to chart object
+			var chartObj = infosoftglobal.FusionChartsUtil.getChartObject(this.getAttribute('id'));
+			
+			if (!chartObj.setDataURL)
+			{
+				__flash__addCallback(chartObj, "setDataURL");
+			}
+			
+			chartObj.setDataURL(strDataURL);
+		}
+	},
+	//This function :
+	//fixes the double quoted attributes to single quotes
+	//Encodes all quotes inside attribute values
+	//Encodes % to %25 and & to %26;
+	encodeDataXML: function(strDataXML){
+		
+			var regExpReservedCharacters=["\\$","\\+"];
+			var arrDQAtt=strDataXML.match(/=\s*\".*?\"/g);
+			if (arrDQAtt){
+				for(var i=0;i<arrDQAtt.length;i++){
+					var repStr=arrDQAtt[i].replace(/^=\s*\"|\"$/g,"");
+					repStr=repStr.replace(/\'/g,"%26apos;");
+					var strTo=strDataXML.indexOf(arrDQAtt[i]);
+					var repStrr="='"+repStr+"'";
+					var strStart=strDataXML.substring(0,strTo);
+					var strEnd=strDataXML.substring(strTo+arrDQAtt[i].length);
+					var strDataXML=strStart+repStrr+strEnd;
+				}
+			}
+			
+			strDataXML=strDataXML.replace(/\"/g,"%26quot;");
+			strDataXML=strDataXML.replace(/%(?![\da-f]{2}|[\da-f]{4})/ig,"%25");
+			strDataXML=strDataXML.replace(/\&/g,"%26");
+
+			return strDataXML;
+
+	},
+	setDataXML: function(strDataXML){
+		//If being set initially
+		if (this.initialDataSet==false){
+			//This method sets the data XML for the chart INITIALLY.
+			this.addVariable('dataXML',this.encodeDataXML(strDataXML));
+			//Update flag
+			this.initialDataSet = true;
+		}else{
+			//Else, we update the chart data using External Interface
+			//Get reference to chart object
+			var chartObj = infosoftglobal.FusionChartsUtil.getChartObject(this.getAttribute('id'));
+			chartObj.setDataXML(strDataXML);
+		}
+	},
+	setTransparent: function(isTransparent){
+		//Sets chart to transparent mode when isTransparent is true (default)
+		//When no parameter is passed, we assume transparent to be true.
+		if(typeof isTransparent=="undefined") {
+			isTransparent=true;
+		}			
+		//Set the property
+		if(isTransparent)
+			this.addParam('WMode', 'transparent');
+		else
+			this.addParam('WMode', 'Opaque');
+	},
+	
+	render: function(elementId){
+		//First check for installed version of Flash Player - we need a minimum of 6
+		if((this.detectFlashVersion==1) && (this.installedVer.major < 6)){
+			if (this.autoInstallRedirect==1){
+				//If we can auto redirect to install the player?
+				var installationConfirm = window.confirm("You need Adobe Flash Player 6 (or above) to view the charts. It is a free and lightweight installation from Adobe.com. Please click on Ok to install the same.");
+				if (installationConfirm){
+					window.location = "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
+				}else{
+					return false;
+				}
+			}else{
+				//Else, do not take an action. It means the developer has specified a message in the DIV (and probably a link).
+				//So, expect the developers to provide a course of way to their end users.
+				//window.alert("You need Adobe Flash Player 8 (or above) to view the charts. It is a free and lightweight installation from Adobe.com. ");
+				return false;
+			}			
+		}else{
+			//Render the chart
+			var n = (typeof elementId == 'string') ? document.getElementById(elementId) : elementId;
+			n.innerHTML = this.getSWFHTML();
+			
+			//Added <FORM> compatibility
+			//Check if it's added in Mozilla embed array or if already exits 
+			if(!document.embeds[this.getAttribute('id')] && !window[this.getAttribute('id')])
+		      	window[this.getAttribute('id')]=document.getElementById(this.getAttribute('id')); 
+				//or else document.forms[formName/formIndex][chartId]			
+			return true;		
+		}
+	}
+}
+
+/* ---- detection functions ---- */
+infosoftglobal.FusionChartsUtil.getPlayerVersion = function(){
+	var PlayerVersion = new infosoftglobal.PlayerVersion([0,0,0]);
+	if(navigator.plugins && navigator.mimeTypes.length){
+		var x = navigator.plugins["Shockwave Flash"];
+		if(x && x.description) {
+			PlayerVersion = new infosoftglobal.PlayerVersion(x.description.replace(/([a-zA-Z]|\s)+/, "").replace(/(\s+r|\s+b[0-9]+)/, ".").split("."));
+		}
+	}else if (navigator.userAgent && navigator.userAgent.indexOf("Windows CE") >= 0){ 
+		//If Windows CE
+		var axo = 1;
+		var counter = 3;
+		while(axo) {
+			try {
+				counter++;
+				axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash."+ counter);
+				PlayerVersion = new infosoftglobal.PlayerVersion([counter,0,0]);
+			} catch (e) {
+				axo = null;
+			}
+		}
+	} else { 
+		// Win IE (non mobile)
+		// Do minor version lookup in IE, but avoid Flash Player 6 crashing issues
+		try{
+			var axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");
+		}catch(e){
+			try {
+				var axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");
+				PlayerVersion = new infosoftglobal.PlayerVersion([6,0,21]);
+				axo.AllowScriptAccess = "always"; // error if player version < 6.0.47 (thanks to Michael Williams @ Adobe for this code)
+			} catch(e) {
+				if (PlayerVersion.major == 6) {
+					return PlayerVersion;
+				}
+			}
+			try {
+				axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
+			} catch(e) {}
+		}
+		if (axo != null) {
+			PlayerVersion = new infosoftglobal.PlayerVersion(axo.GetVariable("$version").split(" ")[1].split(","));
+		}
+	}
+	return PlayerVersion;
+}
+infosoftglobal.PlayerVersion = function(arrVersion){
+	this.major = arrVersion[0] != null ? parseInt(arrVersion[0]) : 0;
+	this.minor = arrVersion[1] != null ? parseInt(arrVersion[1]) : 0;
+	this.rev = arrVersion[2] != null ? parseInt(arrVersion[2]) : 0;
+}
+// ------------ Fix for Out of Memory Bug in IE in FP9 ---------------//
+/* Fix for video streaming bug */
+infosoftglobal.FusionChartsUtil.cleanupSWFs = function() {
+	var objects = document.getElementsByTagName("OBJECT");
+	for (var i = objects.length - 1; i >= 0; i--) {
+		objects[i].style.display = 'none';
+		for (var x in objects[i]) {
+			if (typeof objects[i][x] == 'function') {
+				objects[i][x] = function(){};
+			}
+		}
+	}
+}
+// Fixes bug in fp9
+if (infosoftglobal.FusionCharts.doPrepUnload) {
+	if (!infosoftglobal.unloadSet) {
+		infosoftglobal.FusionChartsUtil.prepUnload = function() {
+			__flash_unloadHandler = function(){};
+			__flash_savedUnloadHandler = function(){};
+			window.attachEvent("onunload", infosoftglobal.FusionChartsUtil.cleanupSWFs);
+		}
+		window.attachEvent("onbeforeunload", infosoftglobal.FusionChartsUtil.prepUnload);
+		infosoftglobal.unloadSet = true;
+	}
+}
+/* Add document.getElementById if needed (mobile IE < 5) */
+if (!document.getElementById && document.all) { document.getElementById = function(id) { return document.all[id]; }}
+/* Add Array.push if needed (ie5) */
+if (Array.prototype.push == null) { Array.prototype.push = function(item) { this[this.length] = item; return this.length; }}
+
+/* Function to return Flash Object from ID */
+infosoftglobal.FusionChartsUtil.getChartObject = function(id)
+{
+  var chartRef=null;
+  if (navigator.appName.indexOf("Microsoft Internet")==-1) {
+    if (document.embeds && document.embeds[id])
+      chartRef = document.embeds[id]; 
+	else
+	chartRef  = window.document[id];
+  }
+  else {
+    chartRef = window[id];
+  }
+  if (!chartRef)
+	chartRef  = document.getElementById(id);
+  
+  return chartRef;
+}
+/*
+ Function to update chart's data at client side (FOR FusionCharts vFREE and 2.x
+*/
+infosoftglobal.FusionChartsUtil.updateChartXML = function(chartId, strXML){
+	//Get reference to chart object				
+	var chartObj = infosoftglobal.FusionChartsUtil.getChartObject(chartId);		
+	//Set dataURL to null
+	chartObj.SetVariable("_root.dataURL","");
+	//Set the flag
+	chartObj.SetVariable("_root.isNewData","1");
+	//Set the actual data
+	chartObj.SetVariable("_root.newData",strXML);
+	//Go to the required frame
+	chartObj.TGotoLabel("/", "JavaScriptHandler"); 
+}
+
+
+/* Aliases for easy usage */
+var getChartFromId = infosoftglobal.FusionChartsUtil.getChartObject;
+var updateChartXML = infosoftglobal.FusionChartsUtil.updateChartXML;
+var FusionCharts = infosoftglobal.FusionCharts;
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/charts.js b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/charts.js
new file mode 100644
index 000000000..4bebbd365
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/charts.js
@@ -0,0 +1,132 @@
+ 
+function drawSingleSeriesChart(tabId, chartId, chartWidth, chartHeight, chartType, chartData,mme,yyyyMo) {
+    // define, set the data for each chart, and render them (if indicated)
+    var myChart = new FusionCharts("static/fusion/inc/fusionchart/" + chartType, "myChartId" + chartId, chartWidth, chartHeight);    
+
+    var mmeLabel = "";//mme + "";   
+    
+    var chartCaptionId = tabId + "-chartdiv" + chartId + "-label";
+    
+    document.getElementById(chartCaptionId).innerHTML =  "Hosted Voice Usage in "+ yyyyMo; 
+    
+    myChart.setDataXML("<graph caption='"+mmeLabel + "' xAxisName='' yAxisName='# of Inbound/Outbound calls' showNames='1' decimalPrecision='0' formatNumberScale='0'>" + chartData + "</graph>");
+    myChart.setTransparent(true);    
+    myChart.render(tabId + "-"+ "chartdiv" + chartId);
+    
+    
+  }
+
+  
+  // gauge charts
+  function drawGaugeChart(chartId, gaugeIndex, value) {	 
+	var   myChart = new FusionCharts("static/fusion/inc/fusionchart/AngularGauge.swf", "myChartId" + chartId, "300", "300", "0", "0");
+	//CPU for NYCMNYBWLT1 on 201301 : 12.63//
+	var chartData =  
+    "<Chart showBorder='0' editMode='1' bgColor='FFFFFF' upperLimit='100' lowerLimit='0' label='CPU' baseFontColor='FFFFFF' majorTMNumber='11' majorTMColor='FFFFFF'  majorTMHeight='8' minorTMNumber='5' minorTMColor='FFFFFF' minorTMHeight='3' toolTipBorderColor='FFFFFF' toolTipBgColor='333333' gaugeOuterRadius='100' gaugeOriginX='150' gaugeOriginY='150' gaugeScaleAngle='270' placeValuesInside='1' gaugeInnerRadius='80%25' annRenderDelay='0' gaugeFillMix='' pivotRadius='10' showPivotBorder='0' pivotFillMix='{CCCCCC},{333333}' pivotFillRatio='50,50' showShadow='0' >" +
+		"<colorRange>" +	
+		"<color minValue='0' maxValue='50'   code='C1E1C1' alpha='60'/>" + 	
+		"<color minValue='50' maxValue='85'  code='F6F164' alpha='60'/>" +
+		"<color minValue='85' maxValue='120' code='F70118' alpha='60'/>" +
+	"</colorRange>" + 
+	"<dials>" + 	
+		"<dial value='" + value + "' borderColor='FFFFFF' bgColor='000000,CCCCCC,000000' borderAlpha='0' baseWidth='10'/>" +
+	"</dials>" +	
+	"<annotations>" +
+		"<annotationGroup xPos='150' yPos='150' showBelow='1'>" +		
+			"<annotation type='circle' xPos='0' yPos='0' radius='120' startAngle='0' endAngle='360' fillColor='CCCCCC,111111'  fillPattern='linear' fillAlpha='100,100'  fillRatio='50,50' fillAngle='-45'/>" +
+			"<annotation type='circle' xPos='0' yPos='0' radius='110' startAngle='0' endAngle='360' fillColor='111111,cccccc'  fillPattern='linear' fillAlpha='100,100'  fillRatio='50,50' fillAngle='-45'/>" +
+			"<annotation type='text' label='CPU'/>" +
+		"</annotationGroup>" +
+	"</annotations>" +
+   "</Chart>";
+    
+	myChart.setDataXML(chartData);
+	myChart.render("chartdiv" + chartId);
+  }
+
+
+  function updateGaugeChart(chartId, gaugeIndex, refreshCount) {	 
+    var myChart = getChartFromId("myChartId" + chartId);
+    var val = 0;
+    if (gaugeIndex == "10") val = 12;
+    else if (gaugeIndex == "20") val = 15;
+    else if (gaugeIndex == "30") val = 52;
+    else if (gaugeIndex == "40") val = 42;
+    myChart.setData(1, val);
+    myChart.setData(2, val+20);
+  } 
+  
+  function updateGaugeChartWithMMEData(chartId, value) {	  
+	  var myChart = getChartFromId("myChartId" + chartId);
+	  myChart.setData(1, value);
+  }
+  
+ 
+  function updateGaugeChartWithMMEData(chartId, value, yyyyMo, mme) {	  
+	  var myChart = getChartFromId("myChartId" + chartId);
+	  myChart.setData(1, value);	  
+	  document.getElementById("cpuYyyyMm").innerHTML =  "Hosted Voice Utilization in "+ yyyyMo; 
+	  
+  } 
+  
+  function drawMultiSeriesChart(tabId,chartId, chartWidth, chartHeight, chartType) {
+    var     myChart = new FusionCharts("static/fusion/inc/fusionchart/" + chartType, "myChartId" + chartId, chartWidth, chartHeight, "0", "0");
+
+	myChart.setTransparent(true);	
+
+  	var chartData =  
+	  "<graph caption='Hosted Voice v Audited Communication' xAxisName='Month' yAxisName='Bandwidth Usage'" +
+		  " showValues='0' decimalPrecision='0' bgcolor='ffffff' bgAlpha='70'" +
+		  " showColumnShadow='1' divlinecolor='c5c5c5' divLineAlpha='60' showAlternateHGridColor='1'" +
+		  " alternateHGridColor='f8f8f8' alternateHGridAlpha='60' >" +
+		  "<categories>" +
+		    "<category name='Jan' />" +
+		    "<category name='Feb' />" +
+		    "<category name='Mar' />" +
+		    "<category name='Apr' />" +
+		    "<category name='May' />" +
+		    "<category name='Jun' />" +
+		    "<category name='Jul' />" +
+		    "<category name='Aug' />" +
+		    "<category name='Sep' />" +
+		    "<category name='Oct' />" +
+		    "<category name='Nov' />" +
+		    "<category name='Dec' />" +
+		  "</categories>" +
+		  "<dataset seriesName='Hosted Voice' color='c4e3f7' >" +
+		    "<set value='7' />" +
+		    "<set value='8.04' />" +
+		    "<set value='10.04' />" +
+		    "<set value='12.73' />" +
+		    "<set value='12.41' />" +
+		    "<set value='11.83' />" +
+		    "<set value='14.06' />" +
+		    "<set value='15.94' />" +
+		    "<set value='22.97' />" +
+		    "<set value='26.79' />" +
+		    "<set value='20.35' />" +
+		    "<set value='12.63' />" +
+		  "</dataset>" +
+		  "<dataset seriesName='Audited Communication' color='Fad35e' >" +
+		    "<set value='5.49'/>" +
+		    "<set value='8.05'/>" +
+		    "<set value='15.36'/>" +
+		    "<set value='21.23'/>" +
+		    "<set value='23.48' />" +
+		    "<set value='15.49' />" +
+		    "<set value='26.8' />" +
+		    "<set value='30.54' />" +
+		    "<set value='64' />" +
+		    "<set value='75' />" +
+		    "<set value='63' />" +
+		    "<set value='34' />" +
+		  "</dataset>" +
+		  "<trendlines>" +
+		    "<line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/>" +
+		  "</trendlines>" +
+		"</graph>";	  
+	    
+	myChart.setDataXML(chartData);
+	myChart.render(tabId + "-" + "chartdiv" + chartId);
+  }
+ 
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/eye.js b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/eye.js
new file mode 100644
index 000000000..8a281dc3b
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/eye.js
@@ -0,0 +1,34 @@
+/**
+ *
+ * Zoomimage
+ * Author: Stefan Petre www.eyecon.ro
+ * 
+ */
+(function($){
+	var EYE = window.EYE = function() {
+		var _registered = {
+			init: []
+		};
+		return {
+			init: function() {
+				$.each(_registered.init, function(nr, fn){
+					fn.call();
+				});
+			},
+			extend: function(prop) {
+				for (var i in prop) {
+					if (prop[i] != undefined) {
+						this[i] = prop[i];
+					}
+				}
+			},
+			register: function(fn, type) {
+				if (!_registered[type]) {
+					_registered[type] = [];
+				}
+				_registered[type].push(fn);
+			}
+		};
+	}();
+	$(EYE.init);
+})(jQuery);
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/jquery.flexslider-min.js b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/jquery.flexslider-min.js
new file mode 100644
index 000000000..5ad6c3775
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/jquery.flexslider-min.js
@@ -0,0 +1,5 @@
+/*
+ * jQuery FlexSlider v2.6.0
+ * Copyright 2012 WooThemes
+ * Contributing Author: Tyler Smith
+ */!function($){var e=!0;$.flexslider=function(t,a){var n=$(t);n.vars=$.extend({},$.flexslider.defaults,a);var i=n.vars.namespace,s=window.navigator&&window.navigator.msPointerEnabled&&window.MSGesture,r=("ontouchstart"in window||s||window.DocumentTouch&&document instanceof DocumentTouch)&&n.vars.touch,o="click touchend MSPointerUp keyup",l="",c,d="vertical"===n.vars.direction,u=n.vars.reverse,v=n.vars.itemWidth>0,p="fade"===n.vars.animation,m=""!==n.vars.asNavFor,f={};$.data(t,"flexslider",n),f={init:function(){n.animating=!1,n.currentSlide=parseInt(n.vars.startAt?n.vars.startAt:0,10),isNaN(n.currentSlide)&&(n.currentSlide=0),n.animatingTo=n.currentSlide,n.atEnd=0===n.currentSlide||n.currentSlide===n.last,n.containerSelector=n.vars.selector.substr(0,n.vars.selector.search(" ")),n.slides=$(n.vars.selector,n),n.container=$(n.containerSelector,n),n.count=n.slides.length,n.syncExists=$(n.vars.sync).length>0,"slide"===n.vars.animation&&(n.vars.animation="swing"),n.prop=d?"top":"marginLeft",n.args={},n.manualPause=!1,n.stopped=!1,n.started=!1,n.startTimeout=null,n.transitions=!n.vars.video&&!p&&n.vars.useCSS&&function(){var e=document.createElement("div"),t=["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"];for(var a in t)if(void 0!==e.style[t[a]])return n.pfx=t[a].replace("Perspective","").toLowerCase(),n.prop="-"+n.pfx+"-transform",!0;return!1}(),n.ensureAnimationEnd="",""!==n.vars.controlsContainer&&(n.controlsContainer=$(n.vars.controlsContainer).length>0&&$(n.vars.controlsContainer)),""!==n.vars.manualControls&&(n.manualControls=$(n.vars.manualControls).length>0&&$(n.vars.manualControls)),""!==n.vars.customDirectionNav&&(n.customDirectionNav=2===$(n.vars.customDirectionNav).length&&$(n.vars.customDirectionNav)),n.vars.randomize&&(n.slides.sort(function(){return Math.round(Math.random())-.5}),n.container.empty().append(n.slides)),n.doMath(),n.setup("init"),n.vars.controlNav&&f.controlNav.setup(),n.vars.directionNav&&f.directionNav.setup(),n.vars.keyboard&&(1===$(n.containerSelector).length||n.vars.multipleKeyboard)&&$(document).bind("keyup",function(e){var t=e.keyCode;if(!n.animating&&(39===t||37===t)){var a=39===t?n.getTarget("next"):37===t?n.getTarget("prev"):!1;n.flexAnimate(a,n.vars.pauseOnAction)}}),n.vars.mousewheel&&n.bind("mousewheel",function(e,t,a,i){e.preventDefault();var s=0>t?n.getTarget("next"):n.getTarget("prev");n.flexAnimate(s,n.vars.pauseOnAction)}),n.vars.pausePlay&&f.pausePlay.setup(),n.vars.slideshow&&n.vars.pauseInvisible&&f.pauseInvisible.init(),n.vars.slideshow&&(n.vars.pauseOnHover&&n.hover(function(){n.manualPlay||n.manualPause||n.pause()},function(){n.manualPause||n.manualPlay||n.stopped||n.play()}),n.vars.pauseInvisible&&f.pauseInvisible.isHidden()||(n.vars.initDelay>0?n.startTimeout=setTimeout(n.play,n.vars.initDelay):n.play())),m&&f.asNav.setup(),r&&n.vars.touch&&f.touch(),(!p||p&&n.vars.smoothHeight)&&$(window).bind("resize orientationchange focus",f.resize),n.find("img").attr("draggable","false"),setTimeout(function(){n.vars.start(n)},200)},asNav:{setup:function(){n.asNav=!0,n.animatingTo=Math.floor(n.currentSlide/n.move),n.currentItem=n.currentSlide,n.slides.removeClass(i+"active-slide").eq(n.currentItem).addClass(i+"active-slide"),s?(t._slider=n,n.slides.each(function(){var e=this;e._gesture=new MSGesture,e._gesture.target=e,e.addEventListener("MSPointerDown",function(e){e.preventDefault(),e.currentTarget._gesture&&e.currentTarget._gesture.addPointer(e.pointerId)},!1),e.addEventListener("MSGestureTap",function(e){e.preventDefault();var t=$(this),a=t.index();$(n.vars.asNavFor).data("flexslider").animating||t.hasClass("active")||(n.direction=n.currentItem<a?"next":"prev",n.flexAnimate(a,n.vars.pauseOnAction,!1,!0,!0))})})):n.slides.on(o,function(e){e.preventDefault();var t=$(this),a=t.index(),s=t.offset().left-$(n).scrollLeft();0>=s&&t.hasClass(i+"active-slide")?n.flexAnimate(n.getTarget("prev"),!0):$(n.vars.asNavFor).data("flexslider").animating||t.hasClass(i+"active-slide")||(n.direction=n.currentItem<a?"next":"prev",n.flexAnimate(a,n.vars.pauseOnAction,!1,!0,!0))})}},controlNav:{setup:function(){n.manualControls?f.controlNav.setupManual():f.controlNav.setupPaging()},setupPaging:function(){var e="thumbnails"===n.vars.controlNav?"control-thumbs":"control-paging",t=1,a,s;if(n.controlNavScaffold=$('<ol class="'+i+"control-nav "+i+e+'"></ol>'),n.pagingCount>1)for(var r=0;r<n.pagingCount;r++){if(s=n.slides.eq(r),void 0===s.attr("data-thumb-alt")&&s.attr("data-thumb-alt",""),altText=""!==s.attr("data-thumb-alt")?altText=' alt="'+s.attr("data-thumb-alt")+'"':"",a="thumbnails"===n.vars.controlNav?'<img src="'+s.attr("data-thumb")+'"'+altText+"/>":'<a href="#">'+t+"</a>","thumbnails"===n.vars.controlNav&&!0===n.vars.thumbCaptions){var c=s.attr("data-thumbcaption");""!==c&&void 0!==c&&(a+='<span class="'+i+'caption">'+c+"</span>")}n.controlNavScaffold.append("<li>"+a+"</li>"),t++}n.controlsContainer?$(n.controlsContainer).append(n.controlNavScaffold):n.append(n.controlNavScaffold),f.controlNav.set(),f.controlNav.active(),n.controlNavScaffold.delegate("a, img",o,function(e){if(e.preventDefault(),""===l||l===e.type){var t=$(this),a=n.controlNav.index(t);t.hasClass(i+"active")||(n.direction=a>n.currentSlide?"next":"prev",n.flexAnimate(a,n.vars.pauseOnAction))}""===l&&(l=e.type),f.setToClearWatchedEvent()})},setupManual:function(){n.controlNav=n.manualControls,f.controlNav.active(),n.controlNav.bind(o,function(e){if(e.preventDefault(),""===l||l===e.type){var t=$(this),a=n.controlNav.index(t);t.hasClass(i+"active")||(a>n.currentSlide?n.direction="next":n.direction="prev",n.flexAnimate(a,n.vars.pauseOnAction))}""===l&&(l=e.type),f.setToClearWatchedEvent()})},set:function(){var e="thumbnails"===n.vars.controlNav?"img":"a";n.controlNav=$("."+i+"control-nav li "+e,n.controlsContainer?n.controlsContainer:n)},active:function(){n.controlNav.removeClass(i+"active").eq(n.animatingTo).addClass(i+"active")},update:function(e,t){n.pagingCount>1&&"add"===e?n.controlNavScaffold.append($('<li><a href="#">'+n.count+"</a></li>")):1===n.pagingCount?n.controlNavScaffold.find("li").remove():n.controlNav.eq(t).closest("li").remove(),f.controlNav.set(),n.pagingCount>1&&n.pagingCount!==n.controlNav.length?n.update(t,e):f.controlNav.active()}},directionNav:{setup:function(){var e=$('<ul class="'+i+'direction-nav"><li class="'+i+'nav-prev"><a class="'+i+'prev" href="#">'+n.vars.prevText+'</a></li><li class="'+i+'nav-next"><a class="'+i+'next" href="#">'+n.vars.nextText+"</a></li></ul>");n.customDirectionNav?n.directionNav=n.customDirectionNav:n.controlsContainer?($(n.controlsContainer).append(e),n.directionNav=$("."+i+"direction-nav li a",n.controlsContainer)):(n.append(e),n.directionNav=$("."+i+"direction-nav li a",n)),f.directionNav.update(),n.directionNav.bind(o,function(e){e.preventDefault();var t;(""===l||l===e.type)&&(t=$(this).hasClass(i+"next")?n.getTarget("next"):n.getTarget("prev"),n.flexAnimate(t,n.vars.pauseOnAction)),""===l&&(l=e.type),f.setToClearWatchedEvent()})},update:function(){var e=i+"disabled";1===n.pagingCount?n.directionNav.addClass(e).attr("tabindex","-1"):n.vars.animationLoop?n.directionNav.removeClass(e).removeAttr("tabindex"):0===n.animatingTo?n.directionNav.removeClass(e).filter("."+i+"prev").addClass(e).attr("tabindex","-1"):n.animatingTo===n.last?n.directionNav.removeClass(e).filter("."+i+"next").addClass(e).attr("tabindex","-1"):n.directionNav.removeClass(e).removeAttr("tabindex")}},pausePlay:{setup:function(){var e=$('<div class="'+i+'pauseplay"><a href="#"></a></div>');n.controlsContainer?(n.controlsContainer.append(e),n.pausePlay=$("."+i+"pauseplay a",n.controlsContainer)):(n.append(e),n.pausePlay=$("."+i+"pauseplay a",n)),f.pausePlay.update(n.vars.slideshow?i+"pause":i+"play"),n.pausePlay.bind(o,function(e){e.preventDefault(),(""===l||l===e.type)&&($(this).hasClass(i+"pause")?(n.manualPause=!0,n.manualPlay=!1,n.pause()):(n.manualPause=!1,n.manualPlay=!0,n.play())),""===l&&(l=e.type),f.setToClearWatchedEvent()})},update:function(e){"play"===e?n.pausePlay.removeClass(i+"pause").addClass(i+"play").html(n.vars.playText):n.pausePlay.removeClass(i+"play").addClass(i+"pause").html(n.vars.pauseText)}},touch:function(){function e(e){e.stopPropagation(),n.animating?e.preventDefault():(n.pause(),t._gesture.addPointer(e.pointerId),T=0,c=d?n.h:n.w,f=Number(new Date),l=v&&u&&n.animatingTo===n.last?0:v&&u?n.limit-(n.itemW+n.vars.itemMargin)*n.move*n.animatingTo:v&&n.currentSlide===n.last?n.limit:v?(n.itemW+n.vars.itemMargin)*n.move*n.currentSlide:u?(n.last-n.currentSlide+n.cloneOffset)*c:(n.currentSlide+n.cloneOffset)*c)}function a(e){e.stopPropagation();var a=e.target._slider;if(a){var n=-e.translationX,i=-e.translationY;return T+=d?i:n,m=T,x=d?Math.abs(T)<Math.abs(-n):Math.abs(T)<Math.abs(-i),e.detail===e.MSGESTURE_FLAG_INERTIA?void setImmediate(function(){t._gesture.stop()}):void((!x||Number(new Date)-f>500)&&(e.preventDefault(),!p&&a.transitions&&(a.vars.animationLoop||(m=T/(0===a.currentSlide&&0>T||a.currentSlide===a.last&&T>0?Math.abs(T)/c+2:1)),a.setProps(l+m,"setTouch"))))}}function i(e){e.stopPropagation();var t=e.target._slider;if(t){if(t.animatingTo===t.currentSlide&&!x&&null!==m){var a=u?-m:m,n=a>0?t.getTarget("next"):t.getTarget("prev");t.canAdvance(n)&&(Number(new Date)-f<550&&Math.abs(a)>50||Math.abs(a)>c/2)?t.flexAnimate(n,t.vars.pauseOnAction):p||t.flexAnimate(t.currentSlide,t.vars.pauseOnAction,!0)}r=null,o=null,m=null,l=null,T=0}}var r,o,l,c,m,f,g,h,S,x=!1,y=0,b=0,T=0;s?(t.style.msTouchAction="none",t._gesture=new MSGesture,t._gesture.target=t,t.addEventListener("MSPointerDown",e,!1),t._slider=n,t.addEventListener("MSGestureChange",a,!1),t.addEventListener("MSGestureEnd",i,!1)):(g=function(e){n.animating?e.preventDefault():(window.navigator.msPointerEnabled||1===e.touches.length)&&(n.pause(),c=d?n.h:n.w,f=Number(new Date),y=e.touches[0].pageX,b=e.touches[0].pageY,l=v&&u&&n.animatingTo===n.last?0:v&&u?n.limit-(n.itemW+n.vars.itemMargin)*n.move*n.animatingTo:v&&n.currentSlide===n.last?n.limit:v?(n.itemW+n.vars.itemMargin)*n.move*n.currentSlide:u?(n.last-n.currentSlide+n.cloneOffset)*c:(n.currentSlide+n.cloneOffset)*c,r=d?b:y,o=d?y:b,t.addEventListener("touchmove",h,!1),t.addEventListener("touchend",S,!1))},h=function(e){y=e.touches[0].pageX,b=e.touches[0].pageY,m=d?r-b:r-y,x=d?Math.abs(m)<Math.abs(y-o):Math.abs(m)<Math.abs(b-o);var t=500;(!x||Number(new Date)-f>t)&&(e.preventDefault(),!p&&n.transitions&&(n.vars.animationLoop||(m/=0===n.currentSlide&&0>m||n.currentSlide===n.last&&m>0?Math.abs(m)/c+2:1),n.setProps(l+m,"setTouch")))},S=function(e){if(t.removeEventListener("touchmove",h,!1),n.animatingTo===n.currentSlide&&!x&&null!==m){var a=u?-m:m,i=a>0?n.getTarget("next"):n.getTarget("prev");n.canAdvance(i)&&(Number(new Date)-f<550&&Math.abs(a)>50||Math.abs(a)>c/2)?n.flexAnimate(i,n.vars.pauseOnAction):p||n.flexAnimate(n.currentSlide,n.vars.pauseOnAction,!0)}t.removeEventListener("touchend",S,!1),r=null,o=null,m=null,l=null},t.addEventListener("touchstart",g,!1))},resize:function(){!n.animating&&n.is(":visible")&&(v||n.doMath(),p?f.smoothHeight():v?(n.slides.width(n.computedW),n.update(n.pagingCount),n.setProps()):d?(n.viewport.height(n.h),n.setProps(n.h,"setTotal")):(n.vars.smoothHeight&&f.smoothHeight(),n.newSlides.width(n.computedW),n.setProps(n.computedW,"setTotal")))},smoothHeight:function(e){if(!d||p){var t=p?n:n.viewport;e?t.animate({height:n.slides.eq(n.animatingTo).height()},e):t.height(n.slides.eq(n.animatingTo).height())}},sync:function(e){var t=$(n.vars.sync).data("flexslider"),a=n.animatingTo;switch(e){case"animate":t.flexAnimate(a,n.vars.pauseOnAction,!1,!0);break;case"play":t.playing||t.asNav||t.play();break;case"pause":t.pause()}},uniqueID:function(e){return e.filter("[id]").add(e.find("[id]")).each(function(){var e=$(this);e.attr("id",e.attr("id")+"_clone")}),e},pauseInvisible:{visProp:null,init:function(){var e=f.pauseInvisible.getHiddenProp();if(e){var t=e.replace(/[H|h]idden/,"")+"visibilitychange";document.addEventListener(t,function(){f.pauseInvisible.isHidden()?n.startTimeout?clearTimeout(n.startTimeout):n.pause():n.started?n.play():n.vars.initDelay>0?setTimeout(n.play,n.vars.initDelay):n.play()})}},isHidden:function(){var e=f.pauseInvisible.getHiddenProp();return e?document[e]:!1},getHiddenProp:function(){var e=["webkit","moz","ms","o"];if("hidden"in document)return"hidden";for(var t=0;t<e.length;t++)if(e[t]+"Hidden"in document)return e[t]+"Hidden";return null}},setToClearWatchedEvent:function(){clearTimeout(c),c=setTimeout(function(){l=""},3e3)}},n.flexAnimate=function(e,t,a,s,o){if(n.vars.animationLoop||e===n.currentSlide||(n.direction=e>n.currentSlide?"next":"prev"),m&&1===n.pagingCount&&(n.direction=n.currentItem<e?"next":"prev"),!n.animating&&(n.canAdvance(e,o)||a)&&n.is(":visible")){if(m&&s){var l=$(n.vars.asNavFor).data("flexslider");if(n.atEnd=0===e||e===n.count-1,l.flexAnimate(e,!0,!1,!0,o),n.direction=n.currentItem<e?"next":"prev",l.direction=n.direction,Math.ceil((e+1)/n.visible)-1===n.currentSlide||0===e)return n.currentItem=e,n.slides.removeClass(i+"active-slide").eq(e).addClass(i+"active-slide"),!1;n.currentItem=e,n.slides.removeClass(i+"active-slide").eq(e).addClass(i+"active-slide"),e=Math.floor(e/n.visible)}if(n.animating=!0,n.animatingTo=e,t&&n.pause(),n.vars.before(n),n.syncExists&&!o&&f.sync("animate"),n.vars.controlNav&&f.controlNav.active(),v||n.slides.removeClass(i+"active-slide").eq(e).addClass(i+"active-slide"),n.atEnd=0===e||e===n.last,n.vars.directionNav&&f.directionNav.update(),e===n.last&&(n.vars.end(n),n.vars.animationLoop||n.pause()),p)r?(n.slides.eq(n.currentSlide).css({opacity:0,zIndex:1}),n.slides.eq(e).css({opacity:1,zIndex:2}),n.wrapup(c)):(n.slides.eq(n.currentSlide).css({zIndex:1}).animate({opacity:0},n.vars.animationSpeed,n.vars.easing),n.slides.eq(e).css({zIndex:2}).animate({opacity:1},n.vars.animationSpeed,n.vars.easing,n.wrapup));else{var c=d?n.slides.filter(":first").height():n.computedW,g,h,S;v?(g=n.vars.itemMargin,S=(n.itemW+g)*n.move*n.animatingTo,h=S>n.limit&&1!==n.visible?n.limit:S):h=0===n.currentSlide&&e===n.count-1&&n.vars.animationLoop&&"next"!==n.direction?u?(n.count+n.cloneOffset)*c:0:n.currentSlide===n.last&&0===e&&n.vars.animationLoop&&"prev"!==n.direction?u?0:(n.count+1)*c:u?(n.count-1-e+n.cloneOffset)*c:(e+n.cloneOffset)*c,n.setProps(h,"",n.vars.animationSpeed),n.transitions?(n.vars.animationLoop&&n.atEnd||(n.animating=!1,n.currentSlide=n.animatingTo),n.container.unbind("webkitTransitionEnd transitionend"),n.container.bind("webkitTransitionEnd transitionend",function(){clearTimeout(n.ensureAnimationEnd),n.wrapup(c)}),clearTimeout(n.ensureAnimationEnd),n.ensureAnimationEnd=setTimeout(function(){n.wrapup(c)},n.vars.animationSpeed+100)):n.container.animate(n.args,n.vars.animationSpeed,n.vars.easing,function(){n.wrapup(c)})}n.vars.smoothHeight&&f.smoothHeight(n.vars.animationSpeed)}},n.wrapup=function(e){p||v||(0===n.currentSlide&&n.animatingTo===n.last&&n.vars.animationLoop?n.setProps(e,"jumpEnd"):n.currentSlide===n.last&&0===n.animatingTo&&n.vars.animationLoop&&n.setProps(e,"jumpStart")),n.animating=!1,n.currentSlide=n.animatingTo,n.vars.after(n)},n.animateSlides=function(){!n.animating&&e&&n.flexAnimate(n.getTarget("next"))},n.pause=function(){clearInterval(n.animatedSlides),n.animatedSlides=null,n.playing=!1,n.vars.pausePlay&&f.pausePlay.update("play"),n.syncExists&&f.sync("pause")},n.play=function(){n.playing&&clearInterval(n.animatedSlides),n.animatedSlides=n.animatedSlides||setInterval(n.animateSlides,n.vars.slideshowSpeed),n.started=n.playing=!0,n.vars.pausePlay&&f.pausePlay.update("pause"),n.syncExists&&f.sync("play")},n.stop=function(){n.pause(),n.stopped=!0},n.canAdvance=function(e,t){var a=m?n.pagingCount-1:n.last;return t?!0:m&&n.currentItem===n.count-1&&0===e&&"prev"===n.direction?!0:m&&0===n.currentItem&&e===n.pagingCount-1&&"next"!==n.direction?!1:e!==n.currentSlide||m?n.vars.animationLoop?!0:n.atEnd&&0===n.currentSlide&&e===a&&"next"!==n.direction?!1:n.atEnd&&n.currentSlide===a&&0===e&&"next"===n.direction?!1:!0:!1},n.getTarget=function(e){return n.direction=e,"next"===e?n.currentSlide===n.last?0:n.currentSlide+1:0===n.currentSlide?n.last:n.currentSlide-1},n.setProps=function(e,t,a){var i=function(){var a=e?e:(n.itemW+n.vars.itemMargin)*n.move*n.animatingTo,i=function(){if(v)return"setTouch"===t?e:u&&n.animatingTo===n.last?0:u?n.limit-(n.itemW+n.vars.itemMargin)*n.move*n.animatingTo:n.animatingTo===n.last?n.limit:a;switch(t){case"setTotal":return u?(n.count-1-n.currentSlide+n.cloneOffset)*e:(n.currentSlide+n.cloneOffset)*e;case"setTouch":return u?e:e;case"jumpEnd":return u?e:n.count*e;case"jumpStart":return u?n.count*e:e;default:return e}}();return-1*i+"px"}();n.transitions&&(i=d?"translate3d(0,"+i+",0)":"translate3d("+i+",0,0)",a=void 0!==a?a/1e3+"s":"0s",n.container.css("-"+n.pfx+"-transition-duration",a),n.container.css("transition-duration",a)),n.args[n.prop]=i,(n.transitions||void 0===a)&&n.container.css(n.args),n.container.css("transform",i)},n.setup=function(e){if(p)n.slides.css({width:"100%","float":"left",marginRight:"-100%",position:"relative"}),"init"===e&&(r?n.slides.css({opacity:0,display:"block",webkitTransition:"opacity "+n.vars.animationSpeed/1e3+"s ease",zIndex:1}).eq(n.currentSlide).css({opacity:1,zIndex:2}):0==n.vars.fadeFirstSlide?n.slides.css({opacity:0,display:"block",zIndex:1}).eq(n.currentSlide).css({zIndex:2}).css({opacity:1}):n.slides.css({opacity:0,display:"block",zIndex:1}).eq(n.currentSlide).css({zIndex:2}).animate({opacity:1},n.vars.animationSpeed,n.vars.easing)),n.vars.smoothHeight&&f.smoothHeight();else{var t,a;"init"===e&&(n.viewport=$('<div class="'+i+'viewport"></div>').css({overflow:"hidden",position:"relative"}).appendTo(n).append(n.container),n.cloneCount=0,n.cloneOffset=0,u&&(a=$.makeArray(n.slides).reverse(),n.slides=$(a),n.container.empty().append(n.slides))),n.vars.animationLoop&&!v&&(n.cloneCount=2,n.cloneOffset=1,"init"!==e&&n.container.find(".clone").remove(),n.container.append(f.uniqueID(n.slides.first().clone().addClass("clone")).attr("aria-hidden","true")).prepend(f.uniqueID(n.slides.last().clone().addClass("clone")).attr("aria-hidden","true"))),n.newSlides=$(n.vars.selector,n),t=u?n.count-1-n.currentSlide+n.cloneOffset:n.currentSlide+n.cloneOffset,d&&!v?(n.container.height(200*(n.count+n.cloneCount)+"%").css("position","absolute").width("100%"),setTimeout(function(){n.newSlides.css({display:"block"}),n.doMath(),n.viewport.height(n.h),n.setProps(t*n.h,"init")},"init"===e?100:0)):(n.container.width(200*(n.count+n.cloneCount)+"%"),n.setProps(t*n.computedW,"init"),setTimeout(function(){n.doMath(),n.newSlides.css({width:n.computedW,marginRight:n.computedM,"float":"left",display:"block"}),n.vars.smoothHeight&&f.smoothHeight()},"init"===e?100:0))}v||n.slides.removeClass(i+"active-slide").eq(n.currentSlide).addClass(i+"active-slide"),n.vars.init(n)},n.doMath=function(){var e=n.slides.first(),t=n.vars.itemMargin,a=n.vars.minItems,i=n.vars.maxItems;n.w=void 0===n.viewport?n.width():n.viewport.width(),n.h=e.height(),n.boxPadding=e.outerWidth()-e.width(),v?(n.itemT=n.vars.itemWidth+t,n.itemM=t,n.minW=a?a*n.itemT:n.w,n.maxW=i?i*n.itemT-t:n.w,n.itemW=n.minW>n.w?(n.w-t*(a-1))/a:n.maxW<n.w?(n.w-t*(i-1))/i:n.vars.itemWidth>n.w?n.w:n.vars.itemWidth,n.visible=Math.floor(n.w/n.itemW),n.move=n.vars.move>0&&n.vars.move<n.visible?n.vars.move:n.visible,n.pagingCount=Math.ceil((n.count-n.visible)/n.move+1),n.last=n.pagingCount-1,n.limit=1===n.pagingCount?0:n.vars.itemWidth>n.w?n.itemW*(n.count-1)+t*(n.count-1):(n.itemW+t)*n.count-n.w-t):(n.itemW=n.w,n.itemM=t,n.pagingCount=n.count,n.last=n.count-1),n.computedW=n.itemW-n.boxPadding,n.computedM=n.itemM},n.update=function(e,t){n.doMath(),v||(e<n.currentSlide?n.currentSlide+=1:e<=n.currentSlide&&0!==e&&(n.currentSlide-=1),n.animatingTo=n.currentSlide),n.vars.controlNav&&!n.manualControls&&("add"===t&&!v||n.pagingCount>n.controlNav.length?f.controlNav.update("add"):("remove"===t&&!v||n.pagingCount<n.controlNav.length)&&(v&&n.currentSlide>n.last&&(n.currentSlide-=1,n.animatingTo-=1),f.controlNav.update("remove",n.last))),n.vars.directionNav&&f.directionNav.update()},n.addSlide=function(e,t){var a=$(e);n.count+=1,n.last=n.count-1,d&&u?void 0!==t?n.slides.eq(n.count-t).after(a):n.container.prepend(a):void 0!==t?n.slides.eq(t).before(a):n.container.append(a),n.update(t,"add"),n.slides=$(n.vars.selector+":not(.clone)",n),n.setup(),n.vars.added(n)},n.removeSlide=function(e){var t=isNaN(e)?n.slides.index($(e)):e;n.count-=1,n.last=n.count-1,isNaN(e)?$(e,n.slides).remove():d&&u?n.slides.eq(n.last).remove():n.slides.eq(e).remove(),n.doMath(),n.update(t,"remove"),n.slides=$(n.vars.selector+":not(.clone)",n),n.setup(),n.vars.removed(n)},f.init()},$(window).blur(function(t){e=!1}).focus(function(t){e=!0}),$.flexslider.defaults={namespace:"flex-",selector:".slides > li",animation:"fade",easing:"swing",direction:"horizontal",reverse:!1,animationLoop:!0,smoothHeight:!1,startAt:0,slideshow:!0,slideshowSpeed:7e3,animationSpeed:600,initDelay:0,randomize:!1,fadeFirstSlide:!0,thumbCaptions:!1,pauseOnAction:!0,pauseOnHover:!1,pauseInvisible:!0,useCSS:!0,touch:!0,video:!1,controlNav:!0,directionNav:!0,prevText:"Previous",nextText:"Next",keyboard:!0,multipleKeyboard:!1,mousewheel:!1,pausePlay:!1,pauseText:"Pause",playText:"Play",controlsContainer:"",manualControls:"",customDirectionNav:"",sync:"",asNavFor:"",itemWidth:0,itemMargin:0,minItems:1,maxItems:0,move:0,allowOneSlide:!0,start:function(){},before:function(){},after:function(){},end:function(){},added:function(){},removed:function(){},init:function(){}},$.fn.flexslider=function(e){if(void 0===e&&(e={}),"object"==typeof e)return this.each(function(){var t=$(this),a=e.selector?e.selector:".slides > li",n=t.find(a);1===n.length&&e.allowOneSlide===!0||0===n.length?(n.fadeIn(400),e.start&&e.start(t)):void 0===t.data("flexslider")&&new $.flexslider(this,e)});var t=$(this).data("flexslider");switch(e){case"play":t.play();break;case"pause":t.pause();break;case"stop":t.stop();break;case"next":t.flexAnimate(t.getTarget("next"),!0);break;case"prev":case"previous":t.flexAnimate(t.getTarget("prev"),!0);break;default:"number"==typeof e&&t.flexAnimate(e,!0)}}}(jQuery);
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/scribble.js b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/scribble.js
new file mode 100644
index 000000000..5384b3049
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/scribble.js
@@ -0,0 +1,19 @@
+    function storeUserScribble(id) {
+      var scribble = document.getElementById('scribble').innerHTML;
+      localStorage.setItem('userScribble',scribble);
+    }
+
+    function getUserScribble() {
+      if ( localStorage.getItem('userScribble')) {
+        var scribble = localStorage.getItem('userScribble');
+      }
+      else {
+        var scribble = 'You can scribble directly on this sticky... and I will also remember your message the next time you visit my blog!';
+      }
+      document.getElementById('scribble').innerHTML = scribble;
+    }
+
+    function clearLocal() {
+      clear: localStorage.clear(); 
+      return false;
+    }
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/slides.min.jquery.js b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/slides.min.jquery.js
new file mode 100644
index 000000000..1a1fcdd8d
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/slides.min.jquery.js
@@ -0,0 +1,20 @@
+/*
+* Slides, A Slideshow Plugin for jQuery
+* Intructions: http://slidesjs.com
+* By: Nathan Searles, http://nathansearles.com
+* Version: 1.1.9
+* Updated: September 5th, 2011
+*
+* 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(a){a.fn.slides=function(b){return b=a.extend({},a.fn.slides.option,b),this.each(function(){function w(g,h,i){if(!p&&o){p=!0,b.animationStart(n+1);switch(g){case"next":l=n,k=n+1,k=e===k?0:k,r=f*2,g=-f*2,n=k;break;case"prev":l=n,k=n-1,k=k===-1?e-1:k,r=0,g=0,n=k;break;case"pagination":k=parseInt(i,10),l=a("."+b.paginationClass+" li."+b.currentClass+" a",c).attr("href").match("[^#/]+$"),k>l?(r=f*2,g=-f*2):(r=0,g=0),n=k}h==="fade"?b.crossfade?d.children(":eq("+k+")",c).css({zIndex:10}).fadeIn(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1)}):d.children(":eq("+l+")",c).fadeOut(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing)}):d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing,function(){a.browser.msie&&a(this).get(0).style.removeAttribute("filter")}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+k+")").css({left:r,display:"block"}),b.autoHeight?d.animate({left:g,height:d.children(":eq("+k+")").outerHeight()},b.slideSpeed,b.slideEasing,function(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0}),b.animationComplete(k+1),p=!1}):d.animate({left:g},b.slideSpeed,b.slideEasing,function(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0}),b.animationComplete(k+1),p=!1})),b.pagination&&(a("."+b.paginationClass+" li."+b.currentClass,c).removeClass(b.currentClass),a("."+b.paginationClass+" li:eq("+k+")",c).addClass(b.currentClass))}}function x(){clearInterval(c.data("interval"))}function y(){b.pause?(clearTimeout(c.data("pause")),clearInterval(c.data("interval")),u=setTimeout(function(){clearTimeout(c.data("pause")),v=setInterval(function(){w("next",i)},b.play),c.data("interval",v)},b.pause),c.data("pause",u)):x()}a("."+b.container,a(this)).children().wrapAll('<div class="slides_control"/>');var c=a(this),d=a(".slides_control",c),e=d.children().size(),f=d.children().outerWidth(),g=d.children().outerHeight(),h=b.start-1,i=b.effect.indexOf(",")<0?b.effect:b.effect.replace(" ","").split(",")[0],j=b.effect.indexOf(",")<0?i:b.effect.replace(" ","").split(",")[1],k=0,l=0,m=0,n=0,o,p,q,r,s,t,u,v;if(e<2)return a("."+b.container,a(this)).fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()}),a("."+b.next+", ."+b.prev).fadeOut(0),!1;if(e<2)return;h<0&&(h=0),h>e&&(h=e-1),b.start&&(n=h),b.randomize&&d.randomize(),a("."+b.container,c).css({overflow:"hidden",position:"relative"}),d.children().css({position:"absolute",top:0,left:d.children().outerWidth(),zIndex:0,display:"none"}),d.css({position:"relative",width:f*3,height:g,left:-f}),a("."+b.container,c).css({display:"block"}),b.autoHeight&&(d.children().css({height:"auto"}),d.animate({height:d.children(":eq("+h+")").outerHeight()},b.autoHeightSpeed));if(b.preload&&d.find("img:eq("+h+")").length){a("."+b.container,c).css({background:"url("+b.preloadImage+") no-repeat 50% 50%"});var z=d.find("img:eq("+h+")").attr("src")+"?"+(new Date).getTime();a("img",c).parent().attr("class")!="slides_control"?t=d.children(":eq(0)")[0].tagName.toLowerCase():t=d.find("img:eq("+h+")"),d.find("img:eq("+h+")").attr("src",z).load(function(){d.find(t+":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){a(this).css({zIndex:5}),a("."+b.container,c).css({background:""}),o=!0,b.slidesLoaded()})})}else d.children(":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()});b.bigTarget&&(d.children().css({cursor:"pointer"}),d.children().click(function(){return w("next",i),!1})),b.hoverPause&&b.play&&(d.bind("mouseover",function(){x()}),d.bind("mouseleave",function(){y()})),b.generateNextPrev&&(a("."+b.container,c).after('<a href="#" class="'+b.prev+'">Prev</a>'),a("."+b.prev,c).after('<a href="#" class="'+b.next+'">Next</a>')),a("."+b.next,c).click(function(a){a.preventDefault(),b.play&&y(),w("next",i)}),a("."+b.prev,c).click(function(a){a.preventDefault(),b.play&&y(),w("prev",i)}),b.generatePagination?(b.prependPagination?c.prepend("<ul class="+b.paginationClass+"></ul>"):c.append("<ul class="+b.paginationClass+"></ul>"),d.children().each(function(){a("."+b.paginationClass,c).append('<li><a href="#'+m+'">'+(m+1)+"</a></li>"),m++})):a("."+b.paginationClass+" li a",c).each(function(){a(this).attr("href","#"+m),m++}),a("."+b.paginationClass+" li:eq("+h+")",c).addClass(b.currentClass),a("."+b.paginationClass+" li a",c).click(function(){return b.play&&y(),q=a(this).attr("href").match("[^#/]+$"),n!=q&&w("pagination",j,q),!1}),a("a.link",c).click(function(){return b.play&&y(),q=a(this).attr("href").match("[^#/]+$")-1,n!=q&&w("pagination",j,q),!1}),b.play&&(v=setInterval(function(){w("next",i)},b.play),c.data("interval",v))})},a.fn.slides.option={preload:!1,preloadImage:"/img/loading.gif",container:"slides_container",generateNextPrev:!1,next:"next",prev:"prev",pagination:!0,generatePagination:!0,prependPagination:!1,paginationClass:"pagination",currentClass:"current",fadeSpeed:350,fadeEasing:"",slideSpeed:350,slideEasing:"",start:1,effect:"slide",crossfade:!1,randomize:!1,play:0,pause:0,hoverPause:!1,autoHeight:!1,autoHeightSpeed:350,bigTarget:!1,animationStart:function(){},animationComplete:function(){},slidesLoaded:function(){}},a.fn.randomize=function(b){function c(){return Math.round(Math.random())-.5}return a(this).each(function(){var d=a(this),e=d.children(),f=e.length;if(f>1){e.hide();var g=[];for(i=0;i<f;i++)g[g.length]=i;g=g.sort(c),a.each(g,function(a,c){var f=e.eq(c),g=f.clone(!0);g.show().appendTo(d),b!==undefined&&b(f,g),f.remove()})}})}})(jQuery)
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/spacegallery.js b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/spacegallery.js
new file mode 100644
index 000000000..69ab2cccb
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/spacegallery.js
@@ -0,0 +1,235 @@
+/**
+ *
+ * Spacegallery
+ * Author: Stefan Petre www.eyecon.ro
+ * 
+ */
+
+(function($){
+	EYE.extend({
+		
+		spacegallery: {
+			
+			//default options (many options are controled via CSS)
+			defaults: {
+				border: 6, // border arround the image
+				perspective: 140, // perpective height
+				minScale: 0.2, // minimum scale for the image in the back
+				duration: 800, // aimation duration
+				loadingClass: null, // CSS class applied to the element while looading images
+				before: function(){return false},
+				after: function(){return false}
+			},
+			
+			animated: false,
+			
+			//position images
+			positionImages: function(el) {
+				var top = 0;
+				EYE.spacegallery.animated = false;
+				$(el)
+					.find('a')
+						.removeClass(el.spacegalleryCfg.loadingClass)
+						.end()
+					.find('img')
+						.removeAttr('height')
+						.each(function(nr){
+							var newWidth = this.spacegallery.origWidth - (this.spacegallery.origWidth - this.spacegallery.origWidth * el.spacegalleryCfg.minScale) * el.spacegalleryCfg.asins[nr];
+							$(this)
+								.css({
+									top: el.spacegalleryCfg.tops[nr] + 'px',
+									marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px',
+									opacity: 1 - el.spacegalleryCfg.asins[nr]
+								})
+								.attr('width', parseInt(newWidth));
+							this.spacegallery.next = el.spacegalleryCfg.asins[nr+1];
+							this.spacegallery.nextTop = el.spacegalleryCfg.tops[nr+1] - el.spacegalleryCfg.tops[nr];
+							this.spacegallery.origTop = el.spacegalleryCfg.tops[nr];
+							this.spacegallery.opacity = 1 - el.spacegalleryCfg.asins[nr];
+							this.spacegallery.increment = el.spacegalleryCfg.asins[nr] - this.spacegallery.next;
+							this.spacegallery.current = el.spacegalleryCfg.asins[nr];
+							this.spacegallery.width = newWidth;
+						})
+			},
+			
+			//animate to nex image
+			next: function(e) {
+				if (EYE.spacegallery.animated === false) {
+					EYE.spacegallery.animated = true;
+					var el = this.parentNode;
+					el.spacegalleryCfg.before.apply(el);
+					$(el)
+						.css('spacegallery', 0)
+						.animate({
+							spacegallery: 100
+						},{
+							easing: 'easeOut',
+							duration: el.spacegalleryCfg.duration,
+							complete: function() {
+								$(el)
+									.find('img:last')
+									.prependTo(el);
+								EYE.spacegallery.positionImages(el);
+								el.spacegalleryCfg.after.apply(el);
+							},
+							step: function(now) {
+								$('img', this)
+									.each(function(nr){
+										var newWidth, top, next;
+										if (nr + 1 == el.spacegalleryCfg.images) {
+											top = this.spacegallery.origTop + this.spacegallery.nextTop * 4 * now /100;
+											newWidth = this.spacegallery.width * top / this.spacegallery.origTop;
+											$(this)
+												.css({
+													top: top + 'px',
+													opacity: 0.7 - now/100,
+													marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px'
+												})
+												.attr('width', newWidth);
+										} else {
+											next = this.spacegallery.current - this.spacegallery.increment * now /100;
+											newWidth = this.spacegallery.origWidth - (this.spacegallery.origWidth - this.spacegallery.origWidth * el.spacegalleryCfg.minScale) * next;
+											$(this).css({
+												top: this.spacegallery.origTop + this.spacegallery.nextTop * now /100 + 'px',
+												opacity: 1 - next,
+												marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px'
+											})
+											.attr('width', newWidth);
+										}
+									});
+							}
+						});
+				}
+					
+				this.blur();
+				return false;
+			},
+			
+			autoNext: function(el) {
+				
+				if (EYE.spacegallery.animated === false) {
+					EYE.spacegallery.animated = true;
+					el.spacegalleryCfg.before.apply(el); // run the "before" function
+					$(el)
+						.css('spacegallery', 0)
+						.animate({
+							spacegallery: 100
+						},{
+							easing: 'easeOut',
+							duration: el.spacegalleryCfg.duration,
+							complete: function() { // after animation is complete, move the front image to the back
+								$(el)
+									.find('img:last') // find the last image in this div
+									.prependTo(el); // and stick it at the beginning
+								EYE.spacegallery.positionImages(el); // run "position images"
+								el.spacegalleryCfg.after.apply(el); //run the "after" function
+							},
+							step: function(now) {
+								$('img', this)
+									.each(function(nr){
+										var newWidth, top, next;
+										if (nr + 1 == el.spacegalleryCfg.images) {
+											top = this.spacegallery.origTop + this.spacegallery.nextTop * 4 * now /100;
+											newWidth = this.spacegallery.width * top / this.spacegallery.origTop;
+											$(this)
+												.css({
+													top: top + 'px',
+													opacity: 0.7 - now/100,
+													marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px'
+												})
+												.attr('width', newWidth);
+										} else {
+											next = this.spacegallery.current - this.spacegallery.increment * now /100;
+											newWidth = this.spacegallery.origWidth - (this.spacegallery.origWidth - this.spacegallery.origWidth * el.spacegalleryCfg.minScale) * next;
+											$(this).css({
+												top: this.spacegallery.origTop + this.spacegallery.nextTop * now /100 + 'px',
+												opacity: 1 - next,
+												marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px'
+											})
+											.attr('width', newWidth);
+										}
+									});
+							}
+						});
+				}
+					
+				return false;
+			},
+			
+			//constructor
+			init: function(opt) {
+				opt = $.extend({}, EYE.spacegallery.defaults, opt||{});
+				return this.each(function(){
+					var el = this;
+					if ($(el).is('.spacegallery')) {
+						$('<a href="#"></a>')
+							.appendTo(this)
+							.addClass(opt.loadingClass)
+							.bind('click', EYE.spacegallery.next);
+						el.spacegalleryCfg = opt;
+						el.spacegalleryCfg.images = el.getElementsByTagName('img').length;
+						el.spacegalleryCfg.loaded = 0;
+						el.spacegalleryCfg.asin = Math.asin(1);
+						el.spacegalleryCfg.asins = {};
+						el.spacegalleryCfg.tops = {};
+						el.spacegalleryCfg.increment = parseInt(el.spacegalleryCfg.perspective/el.spacegalleryCfg.images, 10);
+						var top = 0;
+						$('img', el)
+							.each(function(nr){
+								var imgEl = new Image();
+								var elImg = this;
+								el.spacegalleryCfg.asins[nr] = 1 - Math.asin((nr+1)/el.spacegalleryCfg.images)/el.spacegalleryCfg.asin;
+								top += el.spacegalleryCfg.increment - el.spacegalleryCfg.increment * el.spacegalleryCfg.asins[nr];
+								el.spacegalleryCfg.tops[nr] = top;
+								elImg.spacegallery = {};
+								imgEl.src = this.src;
+								if (imgEl.complete) {
+									el.spacegalleryCfg.loaded ++;
+									elImg.spacegallery.origWidth = imgEl.width;
+									elImg.spacegallery.origHeight = imgEl.height
+								} else {
+									imgEl.onload = function() {
+										el.spacegalleryCfg.loaded ++;
+										elImg.spacegallery.origWidth = imgEl.width;
+										elImg.spacegallery.origHeight = imgEl.height
+										if (el.spacegalleryCfg.loaded == el.spacegalleryCfg.images) {
+										
+											EYE.spacegallery.positionImages(el);
+										}
+									};
+								}
+							});
+						el.spacegalleryCfg.asins[el.spacegalleryCfg.images] = el.spacegalleryCfg.asins[el.spacegalleryCfg.images - 1] * 1.3;
+						el.spacegalleryCfg.tops[el.spacegalleryCfg.images] = el.spacegalleryCfg.tops[el.spacegalleryCfg.images - 1] * 1.3;
+						if (el.spacegalleryCfg.loaded == el.spacegalleryCfg.images) {
+							EYE.spacegallery.positionImages(el);
+							setInterval(function() { EYE.spacegallery.autoNext(el); }, 4000);
+						}
+					}
+				});
+			}
+		}
+	});
+	
+	$.fn.extend({
+	
+		/**
+		 * Create a space gallery
+		 * @name spacegallery
+		 * @description create a space gallery
+		 * @option	int			border			Images' border. Default: 6
+		 * @option	int			perspective		Perpective height. Default: 140
+		 * @option	float		minScale		Minimum scale for the image in the back. Default: 0.2
+		 * @option	int			duration		Animation duration. Default: 800
+		 * @option	string		loadingClass	CSS class applied to the element while looading images. Default: null
+		 * @option	function	before			Callback function triggered before going to the next image
+		 * @option	function	after			Callback function triggered after going to the next image
+		 */
+		spacegallery: EYE.spacegallery.init
+	});
+	$.extend($.easing,{
+		easeOut:function (x, t, b, c, d) {
+			return -c *(t/=d)*(t-2) + b;
+		}
+	});
+})(jQuery);
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/utils.js b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/utils.js
new file mode 100644
index 000000000..d9be85326
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/js/utils.js
@@ -0,0 +1,252 @@
+/**
+ *
+ * Utilities
+ * Author: Stefan Petre www.eyecon.ro
+ * 
+ */
+(function($) {
+EYE.extend({
+	getPosition : function(e, forceIt)
+	{
+		var x = 0;
+		var y = 0;
+		var es = e.style;
+		var restoreStyles = false;
+		if (forceIt && jQuery.curCSS(e,'display') == 'none') {
+			var oldVisibility = es.visibility;
+			var oldPosition = es.position;
+			restoreStyles = true;
+			es.visibility = 'hidden';
+			es.display = 'block';
+			es.position = 'absolute';
+		}
+		var el = e;
+		if (el.getBoundingClientRect) { // IE
+			var box = el.getBoundingClientRect();
+			x = box.left + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) - 2;
+			y = box.top + Math.max(document.documentElement.scrollTop, document.body.scrollTop) - 2;
+		} else {
+			x = el.offsetLeft;
+			y = el.offsetTop;
+			el = el.offsetParent;
+			if (e != el) {
+				while (el) {
+					x += el.offsetLeft;
+					y += el.offsetTop;
+					el = el.offsetParent;
+				}
+			}
+			if (jQuery.browser.safari && jQuery.curCSS(e, 'position') == 'absolute' ) {
+				x -= document.body.offsetLeft;
+				y -= document.body.offsetTop;
+			}
+			el = e.parentNode;
+			while (el && el.tagName.toUpperCase() != 'BODY' && el.tagName.toUpperCase() != 'HTML') 
+			{
+				if (jQuery.curCSS(el, 'display') != 'inline') {
+					x -= el.scrollLeft;
+					y -= el.scrollTop;
+				}
+				el = el.parentNode;
+			}
+		}
+		if (restoreStyles == true) {
+			es.display = 'none';
+			es.position = oldPosition;
+			es.visibility = oldVisibility;
+		}
+		return {x:x, y:y};
+	},
+	getSize : function(e)
+	{
+		var w = parseInt(jQuery.curCSS(e,'width'), 10);
+		var h = parseInt(jQuery.curCSS(e,'height'), 10);
+		var wb = 0;
+		var hb = 0;
+		if (jQuery.curCSS(e, 'display') != 'none') {
+			wb = e.offsetWidth;
+			hb = e.offsetHeight;
+		} else {
+			var es = e.style;
+			var oldVisibility = es.visibility;
+			var oldPosition = es.position;
+			es.visibility = 'hidden';
+			es.display = 'block';
+			es.position = 'absolute';
+			wb = e.offsetWidth;
+			hb = e.offsetHeight;
+			es.display = 'none';
+			es.position = oldPosition;
+			es.visibility = oldVisibility;
+		}
+		return {w:w, h:h, wb:wb, hb:hb};
+	},
+	getClient : function(e)
+	{
+		var h, w;
+		if (e) {
+			w = e.clientWidth;
+			h = e.clientHeight;
+		} else {
+			var de = document.documentElement;
+			w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
+			h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
+		}
+		return {w:w,h:h};
+	},
+	getScroll : function (e)
+	{
+		var t=0, l=0, w=0, h=0, iw=0, ih=0;
+		if (e && e.nodeName.toLowerCase() != 'body') {
+			t = e.scrollTop;
+			l = e.scrollLeft;
+			w = e.scrollWidth;
+			h = e.scrollHeight;
+		} else  {
+			if (document.documentElement) {
+				t = document.documentElement.scrollTop;
+				l = document.documentElement.scrollLeft;
+				w = document.documentElement.scrollWidth;
+				h = document.documentElement.scrollHeight;
+			} else if (document.body) {
+				t = document.body.scrollTop;
+				l = document.body.scrollLeft;
+				w = document.body.scrollWidth;
+				h = document.body.scrollHeight;
+			}
+			if (typeof pageYOffset != 'undefined') {
+				t = pageYOffset;
+				l = pageXOffset;
+			}
+			iw = self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0;
+			ih = self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0;
+		}
+		return { t: t, l: l, w: w, h: h, iw: iw, ih: ih };
+	},
+	getMargins : function(e, toInteger)
+	{
+		var t = jQuery.curCSS(e,'marginTop') || '';
+		var r = jQuery.curCSS(e,'marginRight') || '';
+		var b = jQuery.curCSS(e,'marginBottom') || '';
+		var l = jQuery.curCSS(e,'marginLeft') || '';
+		if (toInteger)
+			return {
+				t: parseInt(t, 10)||0,
+				r: parseInt(r, 10)||0,
+				b: parseInt(b, 10)||0,
+				l: parseInt(l, 10)
+			};
+		else
+			return {t: t, r: r,	b: b, l: l};
+	},
+	getPadding : function(e, toInteger)
+	{
+		var t = jQuery.curCSS(e,'paddingTop') || '';
+		var r = jQuery.curCSS(e,'paddingRight') || '';
+		var b = jQuery.curCSS(e,'paddingBottom') || '';
+		var l = jQuery.curCSS(e,'paddingLeft') || '';
+		if (toInteger)
+			return {
+				t: parseInt(t, 10)||0,
+				r: parseInt(r, 10)||0,
+				b: parseInt(b, 10)||0,
+				l: parseInt(l, 10)
+			};
+		else
+			return {t: t, r: r,	b: b, l: l};
+	},
+	getBorder : function(e, toInteger)
+	{
+		var t = jQuery.curCSS(e,'borderTopWidth') || '';
+		var r = jQuery.curCSS(e,'borderRightWidth') || '';
+		var b = jQuery.curCSS(e,'borderBottomWidth') || '';
+		var l = jQuery.curCSS(e,'borderLeftWidth') || '';
+		if (toInteger)
+			return {
+				t: parseInt(t, 10)||0,
+				r: parseInt(r, 10)||0,
+				b: parseInt(b, 10)||0,
+				l: parseInt(l, 10)||0
+			};
+		else
+			return {t: t, r: r,	b: b, l: l};
+	},
+	traverseDOM : function(nodeEl, func)
+	{
+		func(nodeEl);
+		nodeEl = nodeEl.firstChild;
+		while(nodeEl){
+			EYE.traverseDOM(nodeEl, func);
+			nodeEl = nodeEl.nextSibling;
+		}
+	},
+	getInnerWidth :  function(el, scroll) {
+		var offsetW = el.offsetWidth;
+		return scroll ? Math.max(el.scrollWidth,offsetW) - offsetW + el.clientWidth:el.clientWidth;
+	},
+	getInnerHeight : function(el, scroll) {
+		var offsetH = el.offsetHeight;
+		return scroll ? Math.max(el.scrollHeight,offsetH) - offsetH + el.clientHeight:el.clientHeight;
+	},
+	getExtraWidth : function(el) {
+		if($.boxModel)
+			return (parseInt($.curCSS(el, 'paddingLeft'))||0)
+				+ (parseInt($.curCSS(el, 'paddingRight'))||0)
+				+ (parseInt($.curCSS(el, 'borderLeftWidth'))||0)
+				+ (parseInt($.curCSS(el, 'borderRightWidth'))||0);
+		return 0;
+	},
+	getExtraHeight : function(el) {
+		if($.boxModel)
+			return (parseInt($.curCSS(el, 'paddingTop'))||0)
+				+ (parseInt($.curCSS(el, 'paddingBottom'))||0)
+				+ (parseInt($.curCSS(el, 'borderTopWidth'))||0)
+				+ (parseInt($.curCSS(el, 'borderBottomWidth'))||0);
+		return 0;
+	},
+	isChildOf: function(parentEl, el, container) {
+		if (parentEl == el) {
+			return true;
+		}
+		if (!el || !el.nodeType || el.nodeType != 1) {
+			return false;
+		}
+		if (parentEl.contains && !$.browser.safari) {
+			return parentEl.contains(el);
+		}
+		if ( parentEl.compareDocumentPosition ) {
+			return !!(parentEl.compareDocumentPosition(el) & 16);
+		}
+		var prEl = el.parentNode;
+		while(prEl && prEl != container) {
+			if (prEl == parentEl)
+				return true;
+			prEl = prEl.parentNode;
+		}
+		return false;
+	},
+	centerEl : function(el, axis)
+	{
+		var clientScroll = EYE.getScroll();
+		var size = EYE.getSize(el);
+		if (!axis || axis == 'vertically')
+			$(el).css(
+				{
+					top: clientScroll.t + ((Math.min(clientScroll.h,clientScroll.ih) - size.hb)/2) + 'px'
+				}
+			);
+		if (!axis || axis == 'horizontally')
+			$(el).css(
+				{
+					left: clientScroll.l + ((Math.min(clientScroll.w,clientScroll.iw) - size.wb)/2) + 'px'
+				}
+			);
+	}
+});
+if (!$.easing.easeout) {
+	$.easing.easeout = function(p, n, firstNum, delta, duration) {
+		return -delta * ((n=n/duration-1)*n*n*n - 1) + firstNum;
+	};
+}
+	
+})(jQuery);
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/css/bootstrap.min.css b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/css/bootstrap.min.css
new file mode 100644
index 000000000..3424a5f10
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/css/bootstrap.min.css
@@ -0,0 +1,351 @@
+html,body{margin:0;padding:0;}
+h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;font-size:100%;line-height:1;font-family:inherit;}
+ol,ul{list-style:none;}
+q:before,q:after,blockquote:before,blockquote:after{content:"";}
+html{overflow-y:scroll;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
+a:focus{outline:thin dotted;}
+a:hover,a:active{outline:0;}
+article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
+audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}
+audio:not([controls]){display:none;}
+sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
+sup{top:-0.5em;}
+sub{bottom:-0.25em;}
+img{border:0;-ms-interpolation-mode:bicubic;}
+button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;}
+button,input{line-height:normal;*overflow:visible;}
+button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;}
+input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}
+input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
+textarea{overflow:auto;vertical-align:top;}
+body{background-color:#ffffff;margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;color:#404040;}
+.container{width:940px;margin-left:auto;margin-right:auto;zoom:1;}.container:before,.container:after{display:table;content:"";zoom:1;}
+.container:after{clear:both;}
+.container-fluid{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.container-fluid:before,.container-fluid:after{display:table;content:"";zoom:1;}
+.container-fluid:after{clear:both;}
+.container-fluid>.sidebar{position:absolute;top:0;left:20px;width:220px;}
+.container-fluid>.content{margin-left:240px;}
+a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:hover{color:#00438a;text-decoration:underline;}
+.pull-right{float:right;}
+.pull-left{float:left;}
+.hide{display:none;}
+.show{display:block;}
+.row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";zoom:1;}
+.row:after{clear:both;}
+.row>[class*="span"]{display:inline;float:left;margin-left:20px;}
+.span1{width:40px;}
+.span2{width:100px;}
+.span3{width:160px;}
+.span4{width:220px;}
+.span5{width:280px;}
+.span6{width:340px;}
+.span7{width:400px;}
+.span8{width:460px;}
+.span9{width:520px;}
+.span10{width:580px;}
+.span11{width:640px;}
+.span12{width:700px;}
+.span13{width:760px;}
+.span14{width:820px;}
+.span15{width:880px;}
+.span16{width:940px;}
+.span17{width:1000px;}
+.span18{width:1060px;}
+.span19{width:1120px;}
+.span20{width:1180px;}
+.span21{width:1240px;}
+.span22{width:1300px;}
+.span23{width:1360px;}
+.span24{width:1420px;}
+.row>.offset1{margin-left:80px;}
+.row>.offset2{margin-left:140px;}
+.row>.offset3{margin-left:200px;}
+.row>.offset4{margin-left:260px;}
+.row>.offset5{margin-left:320px;}
+.row>.offset6{margin-left:380px;}
+.row>.offset7{margin-left:440px;}
+.row>.offset8{margin-left:500px;}
+.row>.offset9{margin-left:560px;}
+.row>.offset10{margin-left:620px;}
+.row>.offset11{margin-left:680px;}
+.row>.offset12{margin-left:740px;}
+.span-one-third{width:300px;}
+.span-two-thirds{width:620px;}
+.offset-one-third{margin-left:340px;}
+.offset-two-thirds{margin-left:660px;}
+p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;}
+h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
+h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;}
+h2{font-size:24px;line-height:36px;}h2 small{font-size:14px;}
+h3,h4,h5,h6{line-height:36px;}
+h3{font-size:18px;}h3 small{font-size:14px;}
+h4{font-size:16px;}h4 small{font-size:12px;}
+h5{font-size:14px;}
+h6{font-size:13px;color:#bfbfbf;text-transform:uppercase;}
+ul,ol{margin:0 0 18px 25px;}
+ul ul,ul ol,ol ol,ol ul{margin-bottom:0;}
+ul{list-style:disc;}
+ol{list-style:decimal;}
+li{line-height:18px;color:#808080;}
+ul.unstyled{list-style:none;margin-left:0;}
+dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;}
+dl dt{font-weight:bold;}
+dl dd{margin-left:9px;}
+hr{margin:20px 0 19px;border:0;border-bottom:1px solid #eee;}
+strong{font-style:inherit;font-weight:bold;}
+em{font-style:italic;font-weight:inherit;line-height:inherit;}
+.muted{color:#bfbfbf;}
+blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:14px;font-weight:300;line-height:18px;margin-bottom:0;}
+blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';}
+address{display:block;line-height:18px;margin-bottom:18px;}
+code,pre{padding:0 3px 2px;font-family:Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
+code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;}
+pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
+form{margin-bottom:18px;}
+fieldset{margin-bottom:18px;padding-top:18px;}fieldset legend{display:block;padding-left:150px;font-size:19.5px;line-height:1;color:#404040;*padding:0 0 5px 145px;*line-height:1.5;}
+form .clearfix{margin-bottom:18px;zoom:1;}form .clearfix:before,form .clearfix:after{display:table;content:"";zoom:1;}
+form .clearfix:after{clear:both;}
+label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:normal;}
+label{padding-top:6px;font-size:13px;line-height:18px;float:left;width:130px;text-align:right;color:#404040;}
+form .input{margin-left:150px;}
+input[type=checkbox],input[type=radio]{cursor:pointer;}
+input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
+select{padding:initial;}
+input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;}
+input[type=file]{background-color:#ffffff;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
+input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;}
+select,input[type=file]{height:27px;*height:auto;line-height:27px;*margin-top:4px;}
+select[multiple]{height:inherit;background-color:#ffffff;}
+textarea{height:auto;}
+.uneditable-input{background-color:#ffffff;display:block;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;}
+:-moz-placeholder{color:#bfbfbf;}
+::-webkit-input-placeholder{color:#bfbfbf;}
+input,textarea{-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);}
+input:focus,textarea:focus{outline:0;border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);}
+input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;outline:1px dotted #666;}
+form .clearfix.error>label,form .clearfix.error .help-block,form .clearfix.error .help-inline{color:#b94a48;}
+form .clearfix.error input,form .clearfix.error textarea{color:#b94a48;border-color:#ee5f5b;}form .clearfix.error input:focus,form .clearfix.error textarea:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;}
+form .clearfix.error .input-prepend .add-on,form .clearfix.error .input-append .add-on{color:#b94a48;background-color:#fce6e6;border-color:#b94a48;}
+form .clearfix.warning>label,form .clearfix.warning .help-block,form .clearfix.warning .help-inline{color:#c09853;}
+form .clearfix.warning input,form .clearfix.warning textarea{color:#c09853;border-color:#ccae64;}form .clearfix.warning input:focus,form .clearfix.warning textarea:focus{border-color:#be9a3f;-webkit-box-shadow:0 0 6px #e5d6b1;-moz-box-shadow:0 0 6px #e5d6b1;box-shadow:0 0 6px #e5d6b1;}
+form .clearfix.warning .input-prepend .add-on,form .clearfix.warning .input-append .add-on{color:#c09853;background-color:#d2b877;border-color:#c09853;}
+form .clearfix.success>label,form .clearfix.success .help-block,form .clearfix.success .help-inline{color:#468847;}
+form .clearfix.success input,form .clearfix.success textarea{color:#468847;border-color:#57a957;}form .clearfix.success input:focus,form .clearfix.success textarea:focus{border-color:#458845;-webkit-box-shadow:0 0 6px #9acc9a;-moz-box-shadow:0 0 6px #9acc9a;box-shadow:0 0 6px #9acc9a;}
+form .clearfix.success .input-prepend .add-on,form .clearfix.success .input-append .add-on{color:#468847;background-color:#bcddbc;border-color:#468847;}
+.input-mini,input.mini,textarea.mini,select.mini{width:60px;}
+.input-small,input.small,textarea.small,select.small{width:90px;}
+.input-medium,input.medium,textarea.medium,select.medium{width:150px;}
+.input-large,input.large,textarea.large,select.large{width:210px;}
+.input-xlarge,input.xlarge,textarea.xlarge,select.xlarge{width:270px;}
+.input-xxlarge,input.xxlarge,textarea.xxlarge,select.xxlarge{width:530px;}
+textarea.xxlarge{overflow-y:auto;}
+input.span1,textarea.span1{display:inline-block;float:none;width:30px;margin-left:0;}
+input.span2,textarea.span2{display:inline-block;float:none;width:90px;margin-left:0;}
+input.span3,textarea.span3{display:inline-block;float:none;width:150px;margin-left:0;}
+input.span4,textarea.span4{display:inline-block;float:none;width:210px;margin-left:0;}
+input.span5,textarea.span5{display:inline-block;float:none;width:270px;margin-left:0;}
+input.span6,textarea.span6{display:inline-block;float:none;width:330px;margin-left:0;}
+input.span7,textarea.span7{display:inline-block;float:none;width:390px;margin-left:0;}
+input.span8,textarea.span8{display:inline-block;float:none;width:450px;margin-left:0;}
+input.span9,textarea.span9{display:inline-block;float:none;width:510px;margin-left:0;}
+input.span10,textarea.span10{display:inline-block;float:none;width:570px;margin-left:0;}
+input.span11,textarea.span11{display:inline-block;float:none;width:630px;margin-left:0;}
+input.span12,textarea.span12{display:inline-block;float:none;width:690px;margin-left:0;}
+input.span13,textarea.span13{display:inline-block;float:none;width:750px;margin-left:0;}
+input.span14,textarea.span14{display:inline-block;float:none;width:810px;margin-left:0;}
+input.span15,textarea.span15{display:inline-block;float:none;width:870px;margin-left:0;}
+input.span16,textarea.span16{display:inline-block;float:none;width:930px;margin-left:0;}
+input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
+.actions{background:#f5f5f5;margin-top:18px;margin-bottom:18px;padding:17px 20px 18px 150px;border-top:1px solid #ddd;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}.actions .secondary-action{float:right;}.actions .secondary-action a{line-height:30px;}.actions .secondary-action a:hover{text-decoration:underline;}
+.help-inline,.help-block{font-size:13px;line-height:18px;color:#bfbfbf;}
+.help-inline{padding-left:5px;*position:relative;*top:-5px;}
+.help-block{display:block;max-width:600px;}
+.inline-inputs{color:#808080;}.inline-inputs span{padding:0 2px 0 1px;}
+.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
+.input-prepend .add-on,.input-append .add-on{position:relative;background:#f5f5f5;border:1px solid #ccc;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;padding:4px 4px 4px 5px;margin-right:-1px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
+.input-prepend .active,.input-append .active{background:#a9dba9;border-color:#46a546;}
+.input-prepend .add-on{*margin-top:1px;}
+.input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
+.input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin-right:0;margin-left:-1px;}
+.inputs-list{margin:0 0 5px;width:100%;}.inputs-list li{display:block;padding:0;width:100%;}
+.inputs-list label{display:block;float:none;width:auto;padding:0;margin-left:20px;line-height:18px;text-align:left;white-space:normal;}.inputs-list label strong{color:#808080;}
+.inputs-list label small{font-size:11px;font-weight:normal;}
+.inputs-list .inputs-list{margin-left:25px;margin-bottom:10px;padding-top:0;}
+.inputs-list:first-child{padding-top:6px;}
+.inputs-list li+li{padding-top:2px;}
+.inputs-list input[type=radio],.inputs-list input[type=checkbox]{margin-bottom:0;margin-left:-20px;float:left;}
+.form-stacked{padding-left:20px;}.form-stacked fieldset{padding-top:9px;}
+.form-stacked legend{padding-left:0;}
+.form-stacked label{display:block;float:none;width:auto;font-weight:bold;text-align:left;line-height:20px;padding-top:0;}
+.form-stacked .clearfix{margin-bottom:9px;}.form-stacked .clearfix div.input{margin-left:0;}
+.form-stacked .inputs-list{margin-bottom:0;}.form-stacked .inputs-list li{padding-top:0;}.form-stacked .inputs-list li label{font-weight:normal;padding-top:0;}
+.form-stacked div.clearfix.error{padding-top:10px;padding-bottom:10px;padding-left:10px;margin-top:0;margin-left:-10px;}
+.form-stacked .actions{margin-left:-20px;padding-left:20px;}
+.condensed-table th,.condensed-table td{padding:5px 5px 4px;}
+.bordered-table{border:1px solid #ddd;border-collapse:separate;*border-collapse:collapse;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.bordered-table th+th,.bordered-table td+td,.bordered-table th+td{border-left:1px solid #ddd;}
+.bordered-table thead tr:first-child th:first-child,.bordered-table tbody tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;}
+.bordered-table thead tr:first-child th:last-child,.bordered-table tbody tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;}
+.bordered-table tbody tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;}
+.bordered-table tbody tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;}
+table .span1{width:20px;}
+table .span2{width:60px;}
+table .span3{width:100px;}
+table .span4{width:140px;}
+table .span5{width:180px;}
+table .span6{width:220px;}
+table .span7{width:260px;}
+table .span8{width:300px;}
+table .span9{width:340px;}
+table .span10{width:380px;}
+table .span11{width:420px;}
+table .span12{width:460px;}
+table .span13{width:500px;}
+table .span14{width:540px;}
+table .span15{width:580px;}
+table .span16{width:620px;}
+.zebra-striped tbody tr:nth-child(odd) td,.zebra-striped tbody tr:nth-child(odd) th{background-color:#f9f9f9;}
+.zebra-striped tbody tr:hover td,.zebra-striped tbody tr:hover th{background-color:#f5f5f5;}
+table .header{cursor:pointer;}table .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;}
+table .headerSortUp,table .headerSortDown{background-color:rgba(141, 192, 219, 0.25);text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);}
+table .header:hover:after{visibility:visible;}
+table .headerSortDown:after,table .headerSortDown:hover:after{visibility:visible;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;}
+table .headerSortUp:after{border-bottom:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;visibility:visible;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;}
+table .blue{color:#049cdb;border-bottom-color:#049cdb;}
+table .headerSortUp.blue,table .headerSortDown.blue{background-color:#ade6fe;}
+table .green{color:#46a546;border-bottom-color:#46a546;}
+table .headerSortUp.green,table .headerSortDown.green{background-color:#cdeacd;}
+table .red{color:#9d261d;border-bottom-color:#9d261d;}
+table .headerSortUp.red,table .headerSortDown.red{background-color:#f4c8c5;}
+table .yellow{color:#ffc40d;border-bottom-color:#ffc40d;}
+table .headerSortUp.yellow,table .headerSortDown.yellow{background-color:#fff6d9;}
+table .orange{color:#f89406;border-bottom-color:#f89406;}
+table .headerSortUp.orange,table .headerSortDown.orange{background-color:#fee9cc;}
+table .purple{color:#7a43b6;border-bottom-color:#7a43b6;}
+table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0;}
+.topbar{height:40px;position:fixed;top:0;left:0;right:0;z-index:10000;overflow:visible;}.topbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
+.topbar h3 a:hover,.topbar .brand:hover,.topbar ul .active>a{background-color:#333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;}
+.topbar h3{position:relative;}
+.topbar h3 a,.topbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;}
+.topbar p{margin:0;line-height:40px;}.topbar p a:hover{background-color:transparent;color:#ffffff;}
+.topbar form{float:left;margin:5px 0 0 0;position:relative;filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
+.topbar form.pull-right{float:right;}
+.topbar input{background-color:#444;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;padding:4px 9px;color:#ffffff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.topbar input:-moz-placeholder{color:#e6e6e6;}
+.topbar input::-webkit-input-placeholder{color:#e6e6e6;}
+.topbar input:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;}
+.topbar input:focus,.topbar input.focused{outline:0;background-color:#ffffff;color:#404040;text-shadow:0 1px 0 #ffffff;border:0;padding:5px 10px;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);}
+.topbar-inner,.topbar .fill{background-color:#222;background-color:#222222;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(top, #333333, #222222);background-image:-ms-linear-gradient(top, #333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(top, #333333, #222222);background-image:-o-linear-gradient(top, #333333, #222222);background-image:linear-gradient(top, #333333, #222222);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}
+.topbar div>ul,.nav{display:block;float:left;margin:0 10px 0 0;position:relative;left:0;}.topbar div>ul>li,.nav>li{display:block;float:left;}
+.topbar div>ul a,.nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;text-decoration:none;}.topbar div>ul a:hover,.nav a:hover{color:#ffffff;text-decoration:none;}
+.topbar div>ul .active>a,.nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
+.topbar div>ul.secondary-nav,.nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.topbar div>ul.secondary-nav .menu-dropdown,.nav.secondary-nav .menu-dropdown,.topbar div>ul.secondary-nav .dropdown-menu,.nav.secondary-nav .dropdown-menu{right:0;border:0;}
+.topbar div>ul a.menu:hover,.nav a.menu:hover,.topbar div>ul li.open .menu,.nav li.open .menu,.topbar div>ul .dropdown-toggle:hover,.nav .dropdown-toggle:hover,.topbar div>ul .dropdown.open .dropdown-toggle,.nav .dropdown.open .dropdown-toggle{background:#444;background:rgba(255, 255, 255, 0.05);}
+.topbar div>ul .menu-dropdown,.nav .menu-dropdown,.topbar div>ul .dropdown-menu,.nav .dropdown-menu{background-color:#333;}.topbar div>ul .menu-dropdown a.menu,.nav .menu-dropdown a.menu,.topbar div>ul .dropdown-menu a.menu,.nav .dropdown-menu a.menu,.topbar div>ul .menu-dropdown .dropdown-toggle,.nav .menu-dropdown .dropdown-toggle,.topbar div>ul .dropdown-menu .dropdown-toggle,.nav .dropdown-menu .dropdown-toggle{color:#ffffff;}.topbar div>ul .menu-dropdown a.menu.open,.nav .menu-dropdown a.menu.open,.topbar div>ul .dropdown-menu a.menu.open,.nav .dropdown-menu a.menu.open,.topbar div>ul .menu-dropdown .dropdown-toggle.open,.nav .menu-dropdown .dropdown-toggle.open,.topbar div>ul .dropdown-menu .dropdown-toggle.open,.nav .dropdown-menu .dropdown-toggle.open{background:#444;background:rgba(255, 255, 255, 0.05);}
+.topbar div>ul .menu-dropdown li a,.nav .menu-dropdown li a,.topbar div>ul .dropdown-menu li a,.nav .dropdown-menu li a{color:#999;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}.topbar div>ul .menu-dropdown li a:hover,.nav .menu-dropdown li a:hover,.topbar div>ul .dropdown-menu li a:hover,.nav .dropdown-menu li a:hover{background-color:#191919;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));background-image:-moz-linear-gradient(top, #292929, #191919);background-image:-ms-linear-gradient(top, #292929, #191919);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));background-image:-webkit-linear-gradient(top, #292929, #191919);background-image:-o-linear-gradient(top, #292929, #191919);background-image:linear-gradient(top, #292929, #191919);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);color:#ffffff;}
+.topbar div>ul .menu-dropdown .active a,.nav .menu-dropdown .active a,.topbar div>ul .dropdown-menu .active a,.nav .dropdown-menu .active a{color:#ffffff;}
+.topbar div>ul .menu-dropdown .divider,.nav .menu-dropdown .divider,.topbar div>ul .dropdown-menu .divider,.nav .dropdown-menu .divider{background-color:#222;border-color:#444;}
+.topbar ul .menu-dropdown li a,.topbar ul .dropdown-menu li a{padding:4px 15px;}
+li.menu,.dropdown{position:relative;}
+a.menu:after,.dropdown-toggle:after{width:0;height:0;display:inline-block;content:"&darr;";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
+.menu-dropdown,.dropdown-menu{background-color:#ffffff;float:left;display:none;position:absolute;top:40px;z-index:900;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:6px 0;zoom:1;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.menu-dropdown li,.dropdown-menu li{float:none;display:block;background-color:none;}
+.menu-dropdown .divider,.dropdown-menu .divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #ffffff;}
+.topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#808080;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover,.topbar .dropdown-menu a.hover,.dropdown-menu a.hover{background-color:#dddddd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);color:#404040;text-decoration:none;-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
+.open .menu,.dropdown.open .menu,.open .dropdown-toggle,.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
+.open .menu-dropdown,.dropdown.open .menu-dropdown,.open .dropdown-menu,.dropdown.open .dropdown-menu{display:block;}
+.tabs,.pills{margin:0 0 18px;padding:0;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";zoom:1;}
+.tabs:after,.pills:after{clear:both;}
+.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;}
+.tabs{border-color:#ddd;border-style:solid;border-width:0 0 1px;}.tabs>li{position:relative;margin-bottom:-1px;}.tabs>li>a{padding:0 15px;margin-right:2px;line-height:34px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;}
+.tabs .active>a,.tabs .active>a:hover{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default;}
+.tabs .menu-dropdown,.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
+.tabs a.menu:after,.tabs .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;}
+.tabs li.open.menu .menu,.tabs .open.dropdown .dropdown-toggle{border-color:#999;}
+.tabs li.open a.menu:after,.tabs .dropdown.open .dropdown-toggle:after{border-top-color:#555;}
+.pills a{margin:5px 3px 5px 0;padding:0 15px;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#00438a;}
+.pills .active a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0069d6;}
+.pills-vertical>li{float:none;}
+.tab-content>.tab-pane,.pill-content>.pill-pane,.tab-content>div,.pill-content>div{display:none;}
+.tab-content>.active,.pill-content>.active{display:block;}
+.breadcrumb{padding:7px 14px;margin:0 0 18px;background-color:#f5f5f5;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;}
+.breadcrumb .divider{padding:0 5px;color:#bfbfbf;}
+.breadcrumb .active a{color:#404040;}
+.hero-unit{background-color:#f5f5f5;margin-bottom:30px;padding:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;}
+.hero-unit p{font-size:18px;font-weight:200;line-height:27px;}
+footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
+.page-header{margin-bottom:17px;border-bottom:1px solid #ddd;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}.page-header h1{margin-bottom:8px;}
+.btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover{color:#ffffff;}
+.btn .close,.alert-message .close{font-family:Arial,sans-serif;line-height:18px;}
+.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn.success,.alert-message.success{background-color:#57a957;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn.info,.alert-message.info{background-color:#339bb9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;}
+.btn:focus{outline:1px dotted #666;}
+.btn.primary{color:#ffffff;background-color:#0064cd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn.active,.btn :active{-webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);}
+.btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
+.btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
+.btn.large{font-size:15px;line-height:normal;padding:9px 14px 9px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
+.btn.small{padding:7px 9px 7px;font-size:11px;}
+:root .alert-message,:root .btn{border-radius:0 \0;}
+button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;}
+.close{float:right;color:#000000;font-size:20px;font-weight:bold;line-height:13.5px;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=25);-khtml-opacity:0.25;-moz-opacity:0.25;opacity:0.25;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;}
+.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;background-color:#eedc94;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{margin-top:1px;*margin-top:0;}
+.alert-message a{font-weight:bold;color:#404040;}
+.alert-message.danger p a,.alert-message.error p a,.alert-message.success p a,.alert-message.info p a{color:#ffffff;}
+.alert-message h5{line-height:18px;}
+.alert-message p{margin-bottom:0;}
+.alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;}
+.alert-message .btn{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);}
+.alert-message.block-message{background-image:none;background-color:#fdf5d9;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);padding:14px;border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-message.block-message ul,.alert-message.block-message p{margin-right:30px;}
+.alert-message.block-message ul{margin-bottom:0;}
+.alert-message.block-message li{color:#404040;}
+.alert-message.block-message .alert-actions{margin-top:5px;}
+.alert-message.block-message.error,.alert-message.block-message.success,.alert-message.block-message.info{color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
+.alert-message.block-message.error{background-color:#fddfde;border-color:#fbc7c6;}
+.alert-message.block-message.success{background-color:#d1eed1;border-color:#bfe7bf;}
+.alert-message.block-message.info{background-color:#ddf4fb;border-color:#c6edf9;}
+.alert-message.block-message.danger p a,.alert-message.block-message.error p a,.alert-message.block-message.success p a,.alert-message.block-message.info p a{color:#404040;}
+.pagination{height:36px;margin:18px 0;}.pagination ul{float:left;margin:0;border:1px solid #ddd;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);}
+.pagination li{display:inline;}
+.pagination a{float:left;padding:0 14px;line-height:34px;border-right:1px solid;border-right-color:#ddd;border-right-color:rgba(0, 0, 0, 0.15);*border-right-color:#ddd;text-decoration:none;}
+.pagination a:hover,.pagination .active a{background-color:#c7eefe;}
+.pagination .disabled a,.pagination .disabled a:hover{background-color:transparent;color:#bfbfbf;}
+.pagination .next a{border:0;}
+.well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);}
+.modal-backdrop{background-color:#000000;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;}.modal-backdrop.fade{opacity:0;}
+.modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}
+.modal{position:fixed;top:50%;left:50%;z-index:11000;width:560px;margin:-250px 0 0 -280px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;}
+.modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;}
+.modal.fade.in{top:50%;}
+.modal-header{border-bottom:1px solid #eee;padding:5px 15px;}
+.modal-body{padding:15px;}
+.modal-body form{margin-bottom:0;}
+.modal-footer{background-color:#f5f5f5;padding:14px 15px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;margin-bottom:0;}.modal-footer:before,.modal-footer:after{display:table;content:"";zoom:1;}
+.modal-footer:after{clear:both;}
+.modal-footer .btn{float:right;margin-left:5px;}
+.modal .popover,.modal .twipsy{z-index:12000;}
+.twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:1000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}.twipsy.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}
+.twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
+.twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
+.twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
+.twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
+.twipsy-inner{padding:3px 8px;background-color:#000000;color:white;text-align:center;max-width:200px;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
+.twipsy-arrow{position:absolute;width:0;height:0;}
+.popover{position:absolute;top:0;left:0;z-index:1000;padding:5px;display:none;}.popover.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
+.popover.right .arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
+.popover.below .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
+.popover.left .arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
+.popover .arrow{position:absolute;width:0;height:0;}
+.popover .inner{background:#000000;background:rgba(0, 0, 0, 0.8);padding:3px;overflow:hidden;width:280px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);}
+.popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;}
+.popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;}
+.fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;}
+.label{padding:1px 3px 2px;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;white-space:nowrap;background-color:#bfbfbf;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;}
+.label.warning{background-color:#f89406;}
+.label.success{background-color:#46a546;}
+.label.notice{background-color:#62cffc;}
+.media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;content:"";zoom:1;}
+.media-grid:after{clear:both;}
+.media-grid li{display:inline;}
+.media-grid a{float:left;padding:4px;margin:0 0 18px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;}
+.media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/css/custom.css b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/css/custom.css
new file mode 100644
index 000000000..b7df8c255
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/css/custom.css
@@ -0,0 +1,97 @@
+body, html, div, p, span, a, h1, h2, h3, h4, h5{
+	margin 				: 0;
+	padding 			: 0;
+}
+
+body, html{	
+	width 				: 100%;
+}
+
+body{
+	color 				: white;
+	font-family 		: tahoma;
+	font-weight 		: lighter;
+	padding-top 		: 40px;
+}
+
+	body p{
+		font-size 		: 14px;
+	}
+	
+		body p a{
+			font-size	: 16px;
+		}
+
+h1 {
+	color 				: #E05E00;	
+	font-style 			: italic;
+}
+
+a{
+	color 				: #E05E00;	
+	text-decoration		: none;
+}
+
+a:hover{
+	text-decoration		: underline;
+}
+
+/* general */
+.clear {
+	clear: both;
+}
+
+/* Header */
+.brand{
+	color 				: #E05E00 !important;	
+	font-family 		: georgia;
+	font-style 			: italic;
+}
+
+/* list stuff */
+#org{
+	background-color 	: white;
+	margin 				: 10px;
+	padding 			: 10px;
+}
+
+#show-list{
+	cursor 				: pointer;
+}
+
+/* bootstrap overrides */
+.alert-message{
+	margin: 2px 0;
+}
+
+.topbar{
+	position 			: absolute;
+}
+
+/* Custom chart styling */
+.jOrgChart {
+  margin                : 10px;
+  padding               : 20px;
+}
+
+/* Custom node styling */
+.jOrgChart .node {
+	font-weight         : bold;
+	font-size 			: 14px;
+	background-color 	: #D5D6DB;
+	border-radius 		: 8px;
+	border 				: 5px solid gray;
+	color 				: #793a06;
+	-moz-border-radius 	: 8px;
+}
+	.node p{
+		font-family 	: tahoma;
+		font-size 		: 10px;
+		line-height 	: 11px;
+		padding 		: 2px;
+	}
+
+table {
+	margin-left: auto;
+	margin-right: auto;
+}
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/css/jquery.jOrgChart.css b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/css/jquery.jOrgChart.css
new file mode 100644
index 000000000..ffabe2740
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/css/jquery.jOrgChart.css
@@ -0,0 +1,51 @@
+/* Basic styling */
+/* Draw the lines */
+.jOrgChart .line {
+  height                : 20px;
+  width                 : 4px;
+}
+
+.jOrgChart .down {
+  background-color 		: black;	
+  margin 				: 0px auto;
+}
+
+.jOrgChart .top {
+  border-top          : 3px solid black;
+}
+
+.jOrgChart .left {
+  border-right          : 2px solid black;
+}
+
+.jOrgChart .right {
+  border-left           : 2px solid black;
+}
+
+/* node cell */
+.jOrgChart td {
+  text-align            : center;
+  vertical-align        : top;
+  padding               : 0;
+}
+
+/* The node */
+.jOrgChart .node {
+  background-color 		: #35363B;
+  display               : inline-block;
+  width                 : 120px;
+  height                : 60px;
+  z-index 				: 10;
+  margin               : 0 2px;
+}
+
+/* jQuery drag 'n drop */
+
+.drag-active {
+  border-style			: dashed !important;
+}
+
+.drop-hover {
+  border-style			: solid !important;
+  border-color 			: #E05E00 !important;
+}
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/css/prettify.css b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/css/prettify.css
new file mode 100644
index 000000000..d44b3a228
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/css/prettify.css
@@ -0,0 +1 @@
+.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/example.html b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/example.html
new file mode 100644
index 000000000..543b0f924
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/example.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
+    <title>jOrgChart - A jQuery OrgChart Plugin</title>
+    <link rel="stylesheet" href="css/bootstrap.min.css"/>
+    <link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
+    <link rel="stylesheet" href="css/custom.css"/>
+    <link href="css/prettify.css" type="text/css" rel="stylesheet" />
+
+    <script type="text/javascript" src="prettify.js"></script>
+    
+    <!-- jQuery includes -->
+    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+    
+    <script src="jquery.jOrgChart.js"></script>
+
+    <script>
+    jQuery(document).ready(function() {
+        $("#org").jOrgChart({
+            chartElement : '#chart',
+            dragAndDrop  : true
+        });
+    });
+    </script>
+  </head>
+
+  <body onload="prettyPrint();">
+    <ul id="org" style="display:none">
+      <li>Product 1<br/>
+        <ul>
+          <li>Service 1<br/>
+            <ul>
+			  <li>Resource 1<br/></li>
+			  <li>Resource 2<br/></li>
+			  <li>Resource 3<br/></li>
+			  <li>Resource 4<br/></li>
+			  <li>Resource 5<br/></li>
+            </ul>
+          </li>
+          <li>Service 6<br/></li>
+          <li>Service 7<br/>
+            <ul>
+			  <li>Resource 8<br/></li>
+			  <li>Resource 9<br/></li>
+			  <li>Resource 10<br/></li>
+			  <li>Resource 11<br/></li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+   </ul>            
+    
+    <div id="chart" class="orgChart"></div>
+    
+    <script>
+        jQuery(document).ready(function() {
+            
+            /* Custom jQuery for the example */
+            $("#show-list").click(function(e){
+                e.preventDefault();
+                
+                $('#list-html').toggle('fast', function(){
+                    if($(this).is(':visible')){
+                        $('#show-list').text('Hide underlying list.');
+                        $(".topbar").fadeTo('fast',0.9);
+                    }else{
+                        $('#show-list').text('Show underlying list.');
+                        $(".topbar").fadeTo('fast',1);                  
+                    }
+                });
+            });
+            
+            $('#list-html').text($('#org').html());
+            
+            $("#org").bind("DOMSubtreeModified", function() {
+                $('#list-html').text('');
+                
+                $('#list-html').text($('#org').html());
+                
+                prettyPrint();                
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/example_vsp.html b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/example_vsp.html
new file mode 100644
index 000000000..a2e3703d2
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/example_vsp.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
+    <title>jOrgChart - A jQuery OrgChart Plugin</title>
+    <link rel="stylesheet" href="css/bootstrap.min.css"/>
+    <link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
+    <link rel="stylesheet" href="css/custom.css"/>
+    <link href="css/prettify.css" type="text/css" rel="stylesheet" />
+
+    <script type="text/javascript" src="prettify.js"></script>
+    
+    <!-- jQuery includes -->
+    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+    
+    <script src="jquery.jOrgChart.js"></script>
+
+    <script>
+    jQuery(document).ready(function() {
+        $("#org").jOrgChart({
+            chartElement : '#chart',
+            dragAndDrop  : true
+        });
+    });
+    </script>
+  </head>
+
+  <body onload="prettyPrint();">
+    <ul id="org" style="display:none">
+      <li>Trinity<br/>
+        <ul>
+          <li>Call Forwarding<br/>
+            <ul>
+			  <li>Call Forwarding Busy<br/></li>
+			  <li>Call Forwarding Always<br/></li>
+			  <li>Call Forwarding Not Reachable<br/></li>
+            </ul>
+          </li>
+          <li>Dial Restrictions<br/>
+            <ul>
+			  <li>Outgoing Calls<br/></li>
+			  <li>Redirecting Calls<br/></li>
+			  <li>Incoming Calls<br/></li>
+            </ul>
+          </li>
+          <li>Messaging<br/>
+            <ul>
+			  <li>Voice Management<br/></li>
+			  <li>Greetings<br/></li>
+			  <li>Fax Messaging<br/></li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+   </ul>            
+    
+    <div id="chart" class="orgChart"></div>
+    
+    <script>
+        jQuery(document).ready(function() {
+            
+            /* Custom jQuery for the example */
+            $("#show-list").click(function(e){
+                e.preventDefault();
+                
+                $('#list-html').toggle('fast', function(){
+                    if($(this).is(':visible')){
+                        $('#show-list').text('Hide underlying list.');
+                        $(".topbar").fadeTo('fast',0.9);
+                    }else{
+                        $('#show-list').text('Show underlying list.');
+                        $(".topbar").fadeTo('fast',1);                  
+                    }
+                });
+            });
+            
+            $('#list-html').text($('#org').html());
+            
+            $("#org").bind("DOMSubtreeModified", function() {
+                $('#list-html').text('');
+                
+                $('#list-html').text($('#org').html());
+                
+                prettyPrint();                
+            });
+        });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/images/bkgd.png b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/images/bkgd.png
new file mode 100644
index 000000000..3bbaf5eee
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/images/bkgd.png
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/images/raspberry.jpg b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/images/raspberry.jpg
new file mode 100644
index 000000000..e79a0515d
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/images/raspberry.jpg
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/jquery.jOrgChart.js b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/jquery.jOrgChart.js
new file mode 100644
index 000000000..89411b290
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/jquery.jOrgChart.js
@@ -0,0 +1,267 @@
+/**
+ * jQuery org-chart/tree plugin.
+ *
+ * Author: Wes Nolte
+ * http://twitter.com/wesnolte
+ *
+ * Based on the work of Mark Lee
+ * http://www.capricasoftware.co.uk 
+ *
+ * Copyright (c) 2011 Wesley Nolte
+ * Dual licensed under the MIT and GPL licenses.
+ *
+ */
+(function($) {
+
+  $.fn.jOrgChart = function(options) {
+    var opts = $.extend({}, $.fn.jOrgChart.defaults, options);
+    var $appendTo = $(opts.chartElement);
+
+    // build the tree
+    $this = $(this);
+    var $container = $("<div class='" + opts.chartClass + "'/>");
+    if($this.is("ul")) {
+      buildNode($this.find("li:first"), $container, 0, opts);
+    }
+    else if($this.is("li")) {
+      buildNode($this, $container, 0, opts);
+    }
+    $appendTo.append($container);
+
+    // add drag and drop if enabled
+    if(opts.dragAndDrop){
+        $('div.node').draggable({
+            cursor      : 'move',
+            distance    : 40,
+            helper      : 'clone',
+            opacity     : 0.8,
+            revert      : true,
+            revertDuration : 100,
+            snap        : 'div.node.expanded',
+            snapMode    : 'inner',
+            stack       : 'div.node'
+        });
+        
+        $('div.node').droppable({
+            accept      : '.node',          
+            activeClass : 'drag-active',
+            hoverClass  : 'drop-hover'
+        });
+        
+      // Drag start event handler for nodes
+      $('div.node').bind("dragstart", function handleDragStart( event, ui ){
+        
+        var sourceNode = $(this);
+        sourceNode.parentsUntil('.node-container')
+                   .find('*')
+                   .filter('.node')
+                   .droppable('disable');
+      });
+
+      // Drag stop event handler for nodes
+      $('div.node').bind("dragstop", function handleDragStop( event, ui ){
+
+        /* reload the plugin */
+        $(opts.chartElement).children().remove();
+        $this.jOrgChart(opts);      
+      });
+    
+      // Drop event handler for nodes
+      $('div.node').bind("drop", function handleDropEvent( event, ui ) {    
+        var sourceNode = ui.draggable;
+        var targetNode = $(this);
+        
+        // finding nodes based on plaintext and html
+        // content is hard!
+        var targetLi = $('li').filter(function(){
+            
+            li = $(this).clone()
+                        .children("ul,li")
+                        .remove()
+                    .end();
+                    var attr = li.attr('id');
+                    if (typeof attr !== 'undefined' && attr !== false) {
+                        return li.attr("id") == targetNode.attr("id");
+                    }
+                    else {
+                        return li.html() == targetNode.html();
+                    }
+            
+        });     
+        
+        var sourceLi = $('li').filter(function(){
+            
+            li = $(this).clone()
+                        .children("ul,li")
+                        .remove()
+                    .end();
+                    var attr = li.attr('id');
+                    if (typeof attr !== 'undefined' && attr !== false) {
+                        return li.attr("id") == sourceNode.attr("id");
+                    }
+                    else {
+                        return li.html() == sourceNode.html();
+                    }
+            
+        });
+        
+        var sourceliClone = sourceLi.clone();
+        var sourceUl = sourceLi.parent('ul');
+        
+        if(sourceUl.children('li').size() > 1){
+            sourceLi.remove();          
+        }else{
+            sourceUl.remove();
+        }
+        
+        var id = sourceLi.attr("id");
+
+        if(targetLi.children('ul').size() >0){
+            if (typeof id !== 'undefined' && id !== false) {
+                targetLi.children('ul').append('<li id="'+id+'">'+sourceliClone.html()+'</li>');
+            }else{
+                targetLi.children('ul').append('<li>'+sourceliClone.html()+'</li>');        
+            }
+        }else{
+            if (typeof id !== 'undefined' && id !== false) {
+                targetLi.append('<ul><li id="'+id+'">'+sourceliClone.html()+'</li></ul>');
+            }else{
+                targetLi.append('<ul><li>'+sourceliClone.html()+'</li></ul>');                  
+            }
+        }
+        
+      }); // handleDropEvent
+        
+    } // Drag and drop
+  };
+
+  // Option defaults
+  $.fn.jOrgChart.defaults = {
+    chartElement : 'body',
+    depth      : -1,
+    chartClass : "jOrgChart",
+    dragAndDrop: false
+  };
+
+  // Method that recursively builds the tree
+  function buildNode($node, $appendTo, level, opts) {
+    var $table = $("<table cellpadding='0' cellspacing='0' border='0'/>");
+    var $tbody = $("<tbody/>");
+
+    // Construct the node container(s)
+    var $nodeRow = $("<tr/>").addClass("node-cells");
+    var $nodeCell = $("<td/>").addClass("node-cell").attr("colspan", 2);
+    var $childNodes = $node.children("ul:first").children("li");
+    var $nodeDiv;
+    
+    if($childNodes.length > 1) {
+      $nodeCell.attr("colspan", $childNodes.length * 2);
+    }
+    // Draw the node
+    // Get the contents - any markup except li and ul allowed
+    var $nodeContent = $node.clone()
+                            .children("ul,li")
+                            .remove()
+                        .end()
+                        .html();
+                        
+    var new_node_id = $node.attr("id");
+    if (typeof new_node_id !== 'undefined' && new_node_id !== false) {
+        $nodeDiv = $("<div>").addClass("node").attr("id", $node.attr("id")).append($nodeContent);
+    }else{
+        $nodeDiv = $("<div>").addClass("node").append($nodeContent);
+    }
+
+    // Expand and contract nodes
+    if ($childNodes.length > 0) {
+      $nodeDiv.click(function() {
+          var $this = $(this);
+          var $tr = $this.closest("tr");
+
+          if($tr.hasClass('contracted')){
+            $this.css('cursor','n-resize');
+            $tr.removeClass('contracted').addClass('expanded');
+            $tr.nextAll("tr").css('visibility', '');
+          }else{
+            $this.css('cursor','s-resize');
+            $tr.removeClass('expanded').addClass('contracted');
+            $tr.nextAll("tr").css('visibility', 'hidden');
+          }
+        });
+    }
+    
+    $nodeCell.append($nodeDiv);
+    $nodeRow.append($nodeCell);
+    $tbody.append($nodeRow);
+
+    if($childNodes.length > 0) {
+      // if it can be expanded then change the cursor
+      $nodeDiv.css('cursor','n-resize').addClass('expanded');
+    
+      // recurse until leaves found (-1) or to the level specified
+      if(opts.depth == -1 || (level+1 < opts.depth)) { 
+        var $downLineRow = $("<tr/>");
+        var $downLineCell = $("<td/>").attr("colspan", $childNodes.length*2);
+        $downLineRow.append($downLineCell);
+        
+        // draw the connecting line from the parent node to the horizontal line 
+        $downLine = $("<div></div>").addClass("line down");
+        $downLineCell.append($downLine);
+        $tbody.append($downLineRow);
+
+        // Draw the horizontal lines
+        var $linesRow = $("<tr/>");
+        $childNodes.each(function() {
+          var $left = $("<td>&nbsp;</td>").addClass("line left top");
+          var $right = $("<td>&nbsp;</td>").addClass("line right top");
+          $linesRow.append($left).append($right);
+        });
+
+        // horizontal line shouldn't extend beyond the first and last child branches
+        $linesRow.find("td:first")
+                    .removeClass("top")
+                 .end()
+                 .find("td:last")
+                    .removeClass("top");
+
+        $tbody.append($linesRow);
+        var $childNodesRow = $("<tr/>");
+        $childNodes.each(function() {
+           var $td = $("<td class='node-container'/>");
+           $td.attr("colspan", 2);
+           // recurse through children lists and items
+           buildNode($(this), $td, level+1, opts);
+           $childNodesRow.append($td);
+        });
+
+      }
+      $tbody.append($childNodesRow);
+    }
+
+    // any classes on the LI element get copied to the relevant node in the tree
+    // apart from the special 'collapsed' class, which collapses the sub-tree at this point
+    if ($node.attr('class') != undefined) {
+        var classList = $node.attr('class').split(/\s+/);
+        $.each(classList, function(index,item) {
+            if (item == 'collapsed') {
+                $nodeRow.nextAll('tr').css('display', 'none');
+                    $nodeRow.removeClass('expanded');
+                    $nodeRow.addClass('contracted');
+                    $nodeDiv.css('cursor','s-resize');
+            } else {
+                $nodeDiv.addClass(item);
+            }
+        });
+    }
+
+    $table.append($tbody);
+    $appendTo.append($table);
+    
+    /* Prevent trees collapsing if a link inside a node is clicked */
+    $nodeDiv.children('a').click(function(e){
+        console.log(e);
+        e.stopPropagation();
+    });
+  };
+
+})(jQuery);
diff --git a/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/prettify.js b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/prettify.js
new file mode 100644
index 000000000..eef5ad7e6
--- /dev/null
+++ b/ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/org_chart/prettify.js
@@ -0,0 +1,28 @@
+var q=null;window.PR_SHOULD_USE_CONTINUATION=!0;
+(function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a=
+[],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c<i;++c){var j=f[c];if(/\\[bdsw]/i.test(j))a.push(j);else{var j=m(j),d;c+2<i&&"-"===f[c+1]?(d=m(f[c+2]),c+=2):d=j;b.push([j,d]);d<65||j>122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;c<b.length;++c)i=b[c],i[0]<=j[1]+1?j[1]=Math.max(j[1],i[1]):f.push(j=i);b=["["];o&&b.push("^");b.push.apply(b,a);for(c=0;c<
+f.length;++c)i=f[c],b.push(e(i[0])),i[1]>i[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c<b;++c){var j=f[c];j==="("?++i:"\\"===j.charAt(0)&&(j=+j.substring(1))&&j<=i&&(d[j]=-1)}for(c=1;c<d.length;++c)-1===d[c]&&(d[c]=++t);for(i=c=0;c<b;++c)j=f[c],j==="("?(++i,d[i]===void 0&&(f[c]="(?:")):"\\"===j.charAt(0)&&
+(j=+j.substring(1))&&j<=i&&(f[c]="\\"+d[i]);for(i=c=0;c<b;++c)"^"===f[c]&&"^"!==f[c+1]&&(f[c]="");if(a.ignoreCase&&s)for(c=0;c<b;++c)j=f[c],a=j.charAt(0),j.length>=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p<d;++p){var g=a[p];if(g.ignoreCase)l=!0;else if(/[a-z]/i.test(g.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi,""))){s=!0;l=!1;break}}for(var r=
+{b:8,t:9,n:10,v:11,f:12,r:13},n=[],p=0,d=a.length;p<d;++p){g=a[p];if(g.global||g.multiline)throw Error(""+g);n.push("(?:"+y(g)+")")}return RegExp(n.join("|"),l?"gi":"g")}function M(a){function m(a){switch(a.nodeType){case 1:if(e.test(a.className))break;for(var g=a.firstChild;g;g=g.nextSibling)m(g);g=a.nodeName;if("BR"===g||"LI"===g)h[s]="\n",t[s<<1]=y++,t[s++<<1|1]=a;break;case 3:case 4:g=a.nodeValue,g.length&&(g=p?g.replace(/\r\n?/g,"\n"):g.replace(/[\t\n\r ]+/g," "),h[s]=g,t[s<<1]=y,y+=g.length,
+t[s++<<1|1]=a)}}var e=/(?:^|\s)nocode(?:\s|$)/,h=[],y=0,t=[],s=0,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=document.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);m(a);return{a:h.join("").replace(/\n$/,""),c:t}}function B(a,m,e,h){m&&(a={a:m,d:a},e(a),h.push.apply(h,a.e))}function x(a,m){function e(a){for(var l=a.d,p=[l,"pln"],d=0,g=a.a.match(y)||[],r={},n=0,z=g.length;n<z;++n){var f=g[n],b=r[f],o=void 0,c;if(typeof b===
+"string")c=!1;else{var i=h[f.charAt(0)];if(i)o=f.match(i[1]),b=i[0];else{for(c=0;c<t;++c)if(i=m[c],o=f.match(i[1])){b=i[0];break}o||(b="pln")}if((c=b.length>=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m),
+l=[],p={},d=0,g=e.length;d<g;++d){var r=e[d],n=r[3];if(n)for(var k=n.length;--k>=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,
+q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/,
+q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g,
+"");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a),
+a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e}
+for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g<d.length;++g)e(d[g]);m===(m|0)&&d[0].setAttribute("value",
+m);var r=s.createElement("OL");r.className="linenums";for(var n=Math.max(0,m-1|0)||0,g=0,z=d.length;g<z;++g)l=d[g],l.className="L"+(g+n)%10,l.firstChild||l.appendChild(s.createTextNode("\xa0")),r.appendChild(l);a.appendChild(r)}function k(a,m){for(var e=m.length;--e>=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*</.test(m)?"default-markup":"default-code";return A[a]}function E(a){var m=
+a.g;try{var e=M(a.h),h=e.a;a.a=h;a.c=e.c;a.d=0;C(m,h)(a);var k=/\bMSIE\b/.test(navigator.userAgent),m=/\n/g,t=a.a,s=t.length,e=0,l=a.c,p=l.length,h=0,d=a.e,g=d.length,a=0;d[g]=s;var r,n;for(n=r=0;n<g;)d[n]!==d[n+2]?(d[r++]=d[n++],d[r++]=d[n++]):n+=2;g=r;for(n=r=0;n<g;){for(var z=d[n],f=d[n+1],b=n+2;b+2<=g&&d[b+1]===f;)b+=2;d[r++]=z;d[r++]=f;n=b}for(d.length=r;h<p;){var o=l[h+2]||s,c=d[a+2]||s,b=Math.min(o,c),i=l[h+1],j;if(i.nodeType!==1&&(j=t.substring(e,b))){k&&(j=j.replace(m,"\r"));i.nodeValue=
+j;var u=i.ownerDocument,v=u.createElement("SPAN");v.className=d[a+1];var x=i.parentNode;x.replaceChild(v,i);v.appendChild(i);e<o&&(l[h+1]=i=u.createTextNode(t.substring(b,o)),x.insertBefore(i,v.nextSibling))}e=b;e>=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
+"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"],
+H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],
+J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+
+I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),
+["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",
+/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),
+["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes",
+hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p<h.length&&l.now()<e;p++){var n=h[p],k=n.className;if(k.indexOf("prettyprint")>=0){var k=k.match(g),f,b;if(b=
+!k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p<h.length?setTimeout(m,
+250):a&&a()}for(var e=[document.getElementsByTagName("pre"),document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],h=[],k=0;k<e.length;++k)for(var t=0,s=e[k].length;t<s;++t)h.push(e[k][t]);var e=q,l=Date;l.now||(l={now:function(){return+new Date}});var p=0,d,g=/\blang(?:uage)?-([\w.]+)(?!\S)/;m()};window.PR={createSimpleLexer:x,registerLangHandler:k,sourceDecorator:u,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",
+PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ"}})();