actually adding the files to the initial commit

Change-Id: I2f0c09692c2ae70be61b8bb552fd1bd2983eb661
Signed-off-by: DR695H <dr695h@att.com>

28 files changed, 4850 insertions, 0 deletions

diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/broadcast.jsp b/vid/src/main/webapp/WEB-INF/fusion/jsp/broadcast.jsp
new file mode 100644
index 00000000..d4e7810c
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/broadcast.jsp
@@ -0,0 +1,137 @@
+<%--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  --%>
+<%@ page import="org.openecomp.portalsdk.core.web.support.UserUtils" %>
+<%@ page import="org.openecomp.portalsdk.core.web.support.ControllerProperties" %>
+<%@ page import="org.openecomp.portalsdk.core.util.SystemProperties" %>
+
+<%-- <%@ include file="/WEB-INF/fusion/jsp/include.jsp" %> --%>
+<%@ taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ taglib prefix="fmt"    uri="http://java.sun.com/jsp/jstl/fmt" %>
+<%@ taglib prefix="fn"     uri="http://java.sun.com/jsp/jstl/functions" %>
+<link rel="stylesheet" type="text/css" href="static/fusion/css/jquery-ui.css">
+
+  <c:set var="clustered" value="<%=(\"true\".equals(SystemProperties.getProperty(SystemProperties.CLUSTERED)))%>"/>
+
+  <script src="static/fusion/js/moment.min.js"></script>
+  
+  <div class="pageTitle">
+   <h3>
+	<c:choose>
+		<c:when test="${!empty param.message_id}">
+			<h1 class="heading1" style="margin-top:20px;">Broadcast Message Edit</h1>
+		</c:when>
+		<c:otherwise>
+			<h1 class="heading1" style="margin-top:20px;">Broadcast Message Create</h1>
+		</c:otherwise>
+	</c:choose>
+   </h3>
+  </div>
+
+<div ng-controller="broadcastController" >    
+		 Please edit the broadcast message details below:&nbsp;<br><br>
+	<div class="fn-ebz-container" >
+	        <label class="fn-ebz-text-label"><sup><b>*</b></sup>Message Text:</label><BR>
+	        <textarea name="comment" ng-model="broadcastMessage.messageText" rows="5" cols="200" style="height:100px"></textarea>
+	</div>
+	<br>
+	<div class="fn-ebz-container" >
+	          <label class="fn-ebz-text-label"><sup><b>*</b></sup>Start Date:</label><BR>
+	          <input style="display:none" name="startDateHidden" ng-model="broadcastMessage.startDate">
+	          <input type="text" class="fn-ebz-text" id="startDatepicker" />
+	</div>
+	
+	<div class="fn-ebz-container" style="margin-left:3em" >
+	          <label class="fn-ebz-text-label"><sup><b>*</b></sup>End Date:</label><BR>
+	          <input style="display:none" name="endDateHidden" ng-model="broadcastMessage.endDate">
+	          <input type="text" class="fn-ebz-text" id="endDatepicker" />
+	</div>
+
+	<div class="fn-ebz-container" style="margin-left:3em"  >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>Sort Order:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="broadcastMessage.sortOrder"
+			maxlength="30" /> 
+	</div>
+	
+          <c:if test="${clustered}">
+          			<div class="fn-ebz-container" style="margin-left:1em" >	
+						<label  class="fn-ebz-text-label">Server:</label><BR>
+						<div class="form-field" att-select="broadcastSites" ng-model="broadcastMessage.siteCd"></div>
+					</div>
+          </c:if>
+		<br>
+	<div align="left" >
+		<button type="submit" ng-click="save();" att-button
+			btn-type="primary" size="small">Save</button>
+	</div>
+</div>
+<script>
+app.controller('broadcastController', function ($scope, modalService, $modal){
+	$scope.broadcastMessage=${broadcastMessage};
+	$scope.broadcastSites=${broadcastSites};
+	console.log($scope.broadcastMessage);
+	
+	$scope.save = function() {
+		  var uuu = "broadcast/save";
+		  var postData={broadcastMessage: $scope.broadcastMessage};
+	  	  $.ajax({
+	  		 type : 'POST',
+	  		 url : uuu,
+	  		 dataType: 'json',
+	  		 contentType: 'application/json',
+	  		 data: JSON.stringify(postData),
+	  		 success : function(data){
+	  			//console.log(data);
+	  			window.location.href = "broadcast_list";
+			 },
+			 error : function(data){
+				 alert("Error while saving.");
+			 }
+	  	  });
+	};
+	
+	$(function() {
+	    $( "#startDatepicker" ).datepicker();
+	    $( "#endDatepicker" ).datepicker();
+	    
+	    var startDateLong = $scope.broadcastMessage.startDate;
+		var tempStartDate = new Date(startDateLong);
+		tempStartDate = moment(tempStartDate).format('MM/DD/YY');//03 Jun 2013 04:15PM EDT
+		console.log(tempStartDate.toString());
+		$( "#startDatepicker" ).val(tempStartDate.toString());
+	    
+	    var endDateLong = $scope.broadcastMessage.endDate;
+		var tempendDate = new Date(endDateLong);
+		tempendDate = moment(tempendDate).format('MM/DD/YY');//03 Jun 2013 04:15PM EDT
+		console.log(tempendDate.toString());
+		$( "#endDatepicker" ).val(tempendDate.toString());
+		
+	    $( "#startDatepicker" ).change(function() {
+	    	var tempStartDate = moment($( "#startDatepicker" ).val()).format('YYYY-MM-DD hh:mm:ss.S');
+	    	$scope.broadcastMessage.startDate = new Date(tempStartDate.toString());
+	    });
+	    $( "#endDatepicker" ).change(function() {
+	    	var tempEndDate = moment($( "#endDatepicker" ).val()).format('YYYY-MM-DD hh:mm:ss.S');
+	    	$scope.broadcastMessage.endDate = new Date(tempEndDate.toString());
+	  	});
+	  });
+});
+
+
+</script>
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/broadcast_list.jsp b/vid/src/main/webapp/WEB-INF/fusion/jsp/broadcast_list.jsp
new file mode 100644
index 00000000..f0f1a1d5
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/broadcast_list.jsp
@@ -0,0 +1,201 @@
+<%--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  --%>
+<%@ page import="java.util.*" %>
+<%@ page import="com.fasterxml.jackson.databind.ObjectMapper" %>
+<%@ page import="org.json.JSONObject" %>
+<%@ page import="java.io.StringWriter" %>
+<%@ page import="org.openecomp.portalsdk.core.web.support.ControllerProperties" %>
+<%@ taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ taglib prefix="fmt"    uri="http://java.sun.com/jsp/jstl/fmt" %>
+<%@ taglib prefix="fn"     uri="http://java.sun.com/jsp/jstl/functions" %>
+
+  <script src="static/fusion/raptor/dy3/js/moment.min.js"></script>
+  <script>
+    function editMessage(messageLocationId, messageLocation, messageId) {
+      window.location='broadcast.htm?message_location_id='+messageLocationId + '&message_location=' + messageLocation + ((messageId != null) ? '&message_id=' + messageId : '');
+    }
+  </script>
+
+  <div class="pageTitle">
+  <h3>
+    Broadcast Messages
+    </h3>
+  </div>
+
+  <%-- Display a table for the broadcast messages of each message location --%>
+<div ng-controller="broadcastListController" > 	
+
+	<div ng-repeat="location in messageLocations" >
+		{{location.label}} Messages
+		<div title="{{location.label}} Messages" >
+
+		  	<table att-table table-data="location.messages" current-page="1">
+			  	<thead att-table-row type="header">
+			  		<tr>
+			  			<th att-table-header sortable="false" width="10%">No.</th>
+			  			<th att-table-header sortable="false" width="30%">Message Text</th>
+			  			<th att-table-header sortable="false" width="10%">Start Date</th>
+			  			<th att-table-header sortable="false" width="10%">End Date</th>
+			  			<th att-table-header sortable="false" width="10%">Sort Order</th>
+			  			<th att-table-header sortable="false" width="10%">Server</th>
+			  			<th att-table-header sortable="false" width="10%">Active?</th>
+			  			<th att-table-header sortable="false" width="10%">Delete?</th>
+			  		</tr>
+			  	</thead>
+			  	<tbody att-table-row type="body" row-repeat="message in location.messages" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+				  <tr>
+				   {{message.id}}
+				    <td width="10%"><a href="javascript:editMessage({{location.value}},'{{location.label}}',{{message.id}});">{{$index+1}}</a></td>
+				    <td width="30%">{{message.messageText}}</td>
+				    <td width="10%">
+				    	{{message.displayStartDate}}
+				    </td>
+				    <td width="10%">{{message.displayEndDate}}</td>
+				    <td width="10%">{{message.sortOrder}}</td>
+				    <td width="10%">{{message.siteCd}}</td>
+				    <td width="10%">
+				    	<div ng-click="toggleActive(message);">
+				    		<input type="checkbox" ng-model="message.active" att-toggle-main>
+				    	</div>
+				    </td>
+				     <td att-table-body width="10%">
+					    <div ng-click="remove(message);" style="font-size:20px;"><a href="javascript:void(0)" class="icon-trash"></a></div>
+				     </td>
+				  </tr>
+				 
+				</tbody>
+			</table>
+		</div>
+		<input att-button btn-type="primary" size="small" class="button" type="button" value="Add" ng-click="editMessage(location);"/>
+  	  <br/><br/><br/>
+	</div>
+</div>
+
+<script>
+app.controller('broadcastListController', function ($scope){
+	//$scope.model.messagesList=${model.messagesList};
+	var messagesMap = {};
+	<%
+		ObjectMapper mapper = new ObjectMapper();
+		HashMap hmMessages = new HashMap();
+	    
+		HashMap objModel = (HashMap)request.getAttribute("model");
+		
+	    Object objMessages = objModel.get("messagesList");
+	    //System.out.println("messagesList: "+objMessages);
+	    if((objMessages!=null) && (objMessages instanceof HashMap))
+	    {
+	    	hmMessages= (HashMap)objMessages;
+	      Iterator it = hmMessages.entrySet().iterator();
+	      while (it.hasNext()) {
+	          Map.Entry pair = (Map.Entry)it.next();
+	          //System.out.println(pair.getKey() + " = " + pair.getValue());
+	          String pairValue = mapper.writeValueAsString(pair.getValue());
+	          //System.out.println(pairValue);
+	          %>
+	          messagesMap['<%=pair.getKey()%>'] = '<%=pairValue%>'
+	          <%
+	      }
+	    }
+	    
+	    Object messageLocationsObject =  objModel.get("messageLocations");
+	    //System.out.println("messageLocations: "+messageLocationsObject);
+		String messageLocationsString = mapper.writeValueAsString(messageLocationsObject);
+		//System.out.println(messageLocationsString);
+	%>
+	$scope.messagesList=messagesMap;	
+	$scope.messageLocations=<%=messageLocationsString%>;
+	console.log($scope.messageLocations);
+	
+	$.each($scope.messageLocations, function(i, a){ 
+		//var result = [];
+	    angular.forEach($scope.messagesList, function(value, key) {
+	    	if (key+'' === a.value+'') {
+	    		var objsJSON = JSON.parse(value);
+	    		
+	    		$.each(objsJSON, function(i, a){ 
+	    			var startDateLong = a.startDate;
+	    			var tempStartDate = new Date(startDateLong);
+	    			tempStartDate = moment(tempStartDate).format('DD MMM YYYY');//03 Jun 2013 04:15PM EDT - 'DD MMM YYYY hh:mmA zz'
+	    			a.displayStartDate=tempStartDate.toString();
+	    			
+	    			var endDateLong = a.endDate;
+	    			var tempEndDate = new Date(endDateLong);
+	    			tempEndDate = moment(tempEndDate).format('DD MMM YYYY');//03 Jun 2013 04:15PM EDT
+	    			a.displayEndDate=tempEndDate.toString();
+	    		});
+	    		a.messages = objsJSON;
+	        }
+	    }); 
+	    console.log(a.messages);
+	});	
+	;
+	
+	$scope.editMessage = function(location) {
+		editMessage(location.value, location.label);
+	};
+	
+	$scope.toggleActive = function(broadcastMessage) {
+
+		//alert('deleted'+role.name);
+		var uuu = "broadcast_list/toggleActive";
+		  var postData={broadcastMessage:broadcastMessage};
+	  	  $.ajax({
+	  		 type : 'POST',
+	  		 url : uuu,
+	  		 dataType: 'json',
+	  		 contentType: 'application/json',
+	  		 data: JSON.stringify(postData),
+	  		 success : function(data){
+	  			//window.location.reload();  
+			 },
+			 error : function(data){
+				 console.log(data);
+				 alert("Error while toggling: "+ data.responseText);
+			 }
+	  	  });
+	
+	
+	};
+	
+	$scope.remove = function(broadcastMessage) {
+
+			//alert('deleted'+role.name);
+			var uuu = "broadcast_list/remove";
+			  var postData={broadcastMessage:broadcastMessage};
+		  	  $.ajax({
+		  		 type : 'POST',
+		  		 url : uuu,
+		  		 dataType: 'json',
+		  		 contentType: 'application/json',
+		  		 data: JSON.stringify(postData),
+		  		 success : function(data){
+		  			window.location.reload();  
+				 },
+				 error : function(data){
+					 console.log(data);
+					 alert("Error while deleting: "+ data.responseText);
+				 }
+		  	  });
+		
+		
+	};
+});
+</script>
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/collaborateList.jsp b/vid/src/main/webapp/WEB-INF/fusion/jsp/collaborateList.jsp
new file mode 100644
index 00000000..b1fbfab1
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/collaborateList.jsp
@@ -0,0 +1,146 @@
+<%--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  --%>
+<%@ include file="/WEB-INF/fusion/jsp/popup_modal.html" %>
+<div>
+<a href="JavaScript:void(0);" style= "color:#00547A" onClick="downloadScreenCaptureExtenstion()" id="install-button">
+		Please download the extension for ScreenCapture and refresh page</a>
+		</div>
+<div ng-controller="collaborateListController" id="collaborate_ctrl">
+	<div>
+		<h1 class="heading1" style="margin-top:20px;">User List</h1>
+		<div style="margin-top:30px">
+			<table att-table table-data="tableData" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+
+			    <thead  att-table-row type="header">
+					<tr>
+						<th att-table-header key="id">User ID</th>
+			            <th att-table-header key="lastName">Last Name</th>        
+			            <th att-table-header key="firstName">First Name</th>    
+			            <th att-table-header key="email">Email</th>
+			            <th att-table-header key="orgUserId">UserId</th>        
+			            <th att-table-header key="online" default-sort="d">Online/Offline</th>         
+			        </tr>
+			    </thead>
+			    <tbody att-table-row type="body" row-repeat="rowData in tableData">
+			        <tr>
+		            	<td att-table-body ng-bind="rowData['id']"></td>
+		            	<td att-table-body ng-bind="rowData['lastName']"></td>
+		            	<td att-table-body ng-bind="rowData['firstName']"></td>
+		            	<td att-table-body ng-bind="rowData['email']"></td>
+		            	<td att-table-body ng-bind="rowData['orgUserId']"></td>
+		        		<td att-table-body >
+		        		   <tag-badges ng-hide="rowData.online" style-type="color" class="lred" ng-click="rowData.isActive=true;openCollaboration(rowData.chatId)">Offline</tag-badges>
+						   <tag-badges ng-show="rowData.online" style-type="color" class="lgreen" ng-click="rowData.isActive=false;openCollaboration(rowData.chatId)">Online</tag-badges>				
+		        	   </td>
+			        </tr>     
+			    </tbody>	  
+			</table>
+		</div>
+	</div>	
+	<div class="fn-ebz-container">
+	          Rows Per Page:
+	          <input class="fn-ebz-text" type="text" ng-model="viewPerPage" size="5" style="width: 47px;">
+    </div>
+	<div class="fn-ebz-container">
+	          Current Page:
+	          <input class="fn-ebz-text" type="text" ng-model="currentPage" size="5" style="width: 47px;">
+    </div>
+    <div class="fn-ebz-container">
+	          Total Page(s):
+	          <input class="fn-ebz-text" type="text" ng-model="totalPage" size="5" readonly="true" style="width: 47px;">
+    </div>
+	
+
+</div>
+
+
+<!-- handling websocket peer broadcast session -->
+  <script type="text/javascript" src="app/fusion/scripts/socket/peerBroadcast.js"></script> 
+  <script type="text/javascript" src="app/fusion/external/utils/js/browserCheck.js"></script>
+  <script>
+ 
+	var initialPageVisit = "${sessionScope.initialPageVisit}";
+	var userId     = "${sessionScope.user.orgUserId}";
+	socketSetup(initialPageVisit, userId, null, "socketSend");
+	
+  
+  </script>
+ 
+<script>
+var popupModalService;
+app.controller("collaborateListController", function ($scope,$http,modalService, $modal) { 
+	// Table Data
+	$scope.tableData=${model.profileList};
+	$scope.viewPerPage = 20;
+    $scope.scrollViewsPerPage = 2;
+    $scope.currentPage = 1;
+    $scope.totalPage;
+    $scope.searchCategory = "";
+    $scope.searchString = "";
+    popupModalService = modalService;
+    setPopupService(modalService);
+ /*    modalService.showSuccess('','Modal Sample') ; */
+	for(x in $scope.tableData){
+		if($scope.tableData[x].active_yn=='Y')
+			$scope.tableData[x].active_yn=true;
+		else
+			$scope.tableData[x].active_yn=false;
+	}
+    $scope.openCollaboration = function(chatId){
+    	openInNewTab('collaboration?chat_id=' + chatId);
+    	
+    }
+   
+    $scope.toggleProfileActive = function(profileId) {
+    	if (confirm("You are about to change user's active status. Do you want to continue?")) {
+                 $http.get("profile/toggleProfileActive?profile_id="+profileId).success(function(){});
+    	}
+    };
+   
+});
+
+function openInNewTab(url) {
+	  
+	//popupModalService.popupConfirmWin("Confirm","");
+	var win = window.open(url, '_blank');
+	win.popupService = popupModalService;
+	win.focus();
+};
+
+function downloadScreenCaptureExtenstion() {
+	  
+	  var chromeURL = 'https://chrome.google.com/webstore/detail/icgmlogfeajbfdffajhoebcfbibfhaen';
+	  var firefoxURL = 'https://addons.mozilla.org/en-US/firefox/addon/screen-capturing-capability';
+	  var url;
+	  
+	  if(isChrome)
+		url = chromeURL;
+	  else if(isFirefox)
+		url = 	firefoxURL;
+	  
+	  var win = window.open(url);
+	  win.focus();
+};
+
+</script>
+
+
+ 
+  <div id="peerBroadcastSection"> </div>
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/data_out.jsp b/vid/src/main/webapp/WEB-INF/fusion/jsp/data_out.jsp
new file mode 100644
index 00000000..f3fb7a74
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/data_out.jsp
@@ -0,0 +1,20 @@
+<%--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  --%>
+${model.output_string}
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/ebz/ebz_footer.jsp b/vid/src/main/webapp/WEB-INF/fusion/jsp/ebz/ebz_footer.jsp
new file mode 100644
index 00000000..5a33314f
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/ebz/ebz_footer.jsp
@@ -0,0 +1,46 @@
+<%--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  --%>
+
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
+<script src="app/fusion/external/ebz/js/footer.js"></script>
+<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/ebz_header/footer.css" >
+ 
+
+
+<div class="footerContainer" id="footerContainer">
+	<div class="footerWrapper" id="footerWrapper">
+
+			<div class="footerItem">
+		
+			</div>
+		<div class="attFooterInfo">
+			<div class="footerLastSection">
+				<div id="attFooterLogo" class="attLogo" tabindex='0'></div>
+				
+					<br>
+					<div class="privacyPolicy">
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/ebz/ebz_header.jsp b/vid/src/main/webapp/WEB-INF/fusion/jsp/ebz/ebz_header.jsp
new file mode 100644
index 00000000..05c07f0d
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/ebz/ebz_header.jsp
@@ -0,0 +1,799 @@
+<%--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  --%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
+<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
+<%@ page isELIgnored="false"%>
+<%@ page import="org.openecomp.portalsdk.core.util.SystemProperties"%>
+<%@ page import="org.openecomp.portalsdk.core.onboarding.crossapi.PortalApiProperties"%>
+<%@ page import="org.openecomp.portalsdk.core.onboarding.crossapi.PortalApiConstants"%>
+<%@ page import="org.openecomp.portalsdk.core.domain.MenuData"%>
+<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/ebz_header/header.css">
+<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/ebz_header/portal_ebz_header.css">
+<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/style.css" >
+
+<!-- Icons -->
+<link rel="stylesheet" type="text/css" href="app/fusion/external/ionicons-2.0.1/css/ionicons.css" />
+<script src= "app/fusion/external/ebz/angular_js/angular.js"></script> 
+<script src= "app/fusion/external/ebz/angular_js/angular-route.min.js"></script>
+<script src= "app/fusion/external/ebz/angular_js/angular-sanitize.js"></script>
+<script src= "app/fusion/external/ebz/angular_js/angular-cookies.js"></script>
+<script src= "app/fusion/external/ebz/angular_js/app.js"></script>
+<script src= "app/fusion/external/ebz/angular_js/gestures.js"></script>
+<script src="static/js/jquery-1.10.2.js"></script>
+<script src="app/fusion/scripts/modalService.js"></script>
+<script src="static/js/jquery.mask.min.js" type="text/javascript"></script>
+<script src="static/js/jquery-ui.js" type="text/javascript"></script>
+<script src="app/fusion/external/ebz/sandbox/att-abs-tpls.js" type="text/javascript"></script>
+<script src="static/fusion/js/att_angular_gridster/ui-gridster-tpls.js"></script>
+<script src="static/fusion/js/att_angular_gridster/angular-gridster.js"></script>
+<script src= "app/fusion/external/ebz/angular_js/checklist-model.js"></script>
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
+<script src="app/fusion/external/angular-ui/ui-bootstrap-tpls-1.1.2.min.js"></script>
+<script src="app/fusion/scripts/services/userInfoService.js"></script>
+<script src="app/fusion/scripts/services/leftMenuService.js"></script>
+
+
+<jsp:include page="/WEB-INF/fusion/jsp/ebz/loginSnippet.html" ></jsp:include> 
+
+<c:set var="UserName"	value="<%= session.getAttribute(\"fullName\")%>" />
+<c:set var="UserFirstName"	value="<%= session.getAttribute(\"first_name\")%>" />
+
+<% 
+	String contactUsLink = SystemProperties.getProperty(SystemProperties.CONTACT_US_LINK);
+	String redirectUrl = PortalApiProperties.getProperty(PortalApiConstants.ECOMP_REDIRECT_URL);
+	String portalUrl = redirectUrl.substring(0, redirectUrl.lastIndexOf('/')) + "/processSingleSignOn";
+	String getAccessLink = redirectUrl.substring(0, redirectUrl.lastIndexOf('/')) + "/get_access";	
+%>
+<c:set var="returnPortalUrl" value="<%=portalUrl%>" />
+<c:set var="contactUsLink" value="<%=contactUsLink%>" />
+<c:set var="getAccessLink" value="<%=getAccessLink%>" />
+<style>
+.att-drawer{
+	z-index:997 !important;
+}
+
+.secondaryMenuContainer{
+	z-index:1000;
+}
+.megamenu-tabs .megamenu__item {
+	padding: 0 0;
+}
+.megamenu-tabs .megamenu__item span {
+    font-size: 18px;
+}
+
+.submenu-tabs {
+   line-height:50px;
+}
+.submenu-tabs .sub__menu{
+	top:54px;
+}
+
+.top-megamenu .megamenu-tabs ul{
+	width:98%;
+	list-style: none;
+}
+
+</style>
+<%@include  file="/WEB-INF/fusion/jsp/ebz/loginSnippet.html" %>
+
+<div style="position: relative; z-index: 999;">
+	<div ng-controller="headerController">
+	
+		 <div class="headerContainer" id="headerContainer" ng-cloak  ng-show="{{showHeader}}">
+			<div id="megaMenuContainer" class="megaMenuContainer" style="margin-top: 0; overflow: visible;">
+				<div>
+					<!--for mega Menu-->
+					<!-- Mega Menu parent-tab directive with three models menu-items, active-sub-menu, active-menu -->
+					<div id="topMenu" class="top-megamenu" ng-mouseleave="activeClickSubMenu.x.active=false; activeClickMenu.x.active=false">
+						<div style="float:left;width:100%;"parent-tab menu-items="megaMenuDataObject" active-sub-menu='activeClickSubMenu.x' active-menu='activeClickMenu.x'>
+			                <div parentmenu-tabs mega-menu="true" menu-items="megaMenuDataObject" style="height:55px;">
+								<div style="float:left">
+									<li class="megamenu__item" style="line-height:55px;" onclick="returnToPortal()">
+										
+<!-- 											<a id='returnPortal' class="primaryMenuOptionLink" style="font-weight: 400 !important; font-family: Arial !important; font-size: 18px;">ECOMP</a>
+ -->										<strong	style="font-weight: 400 !important; font-family: Arial !important; font-size: 18px;" id='returnPortal' >ECOMP Portal</strong>
+									</li>										
+									<div menu-tabs mega-menu="true" tab-name="item.text" menu-item="item" active-menu="activeClickMenu.x" 
+									ng-repeat="item in megaMenuDataObject" style="font-size: 18px;" ng-mousedown="loadFavorites()" >
+				                        <div parentmenu-tabs sub-menu="true" ng-show="activeClickMenu.x.active && item.active" menu-items="activeClickMenu.x.children">
+							<!-- Second level menu -->
+									<div>
+										<div menu-tabs sub-menu="true" tab-name="subItem.text" 
+											tab-url="subItem.url"  menu-item="subItem" 
+											ng-repeat="subItem in activeClickMenu.x.children | orderBy : 'column'" active-menu="activeClickSubMenu.x" 
+											sub-item-active="{{subItem.active}}" style="float:left;" aria-label="{{subItem.text}}"
+	                                         ng-mouseenter="submenuLevelAction(subItem.text,subItem.column)"
+	                                         ng-mouseleave="submenuLevelAction(subItem.text,subItem.column)"
+                                        	ng-click="submenuLevelAction(subItem.text,subItem.column)"  >
+                                                <i ng-if="subItem.text=='Favorites'" id="favorite-star"
+                                                   class="icon-star favorites-icon-active">
+                                                </i>
+										</div>
+	                                                                                 	
+			                                <div class="sub__menu" ng-mouseleave="activeClickSubMenu.x.active=false" >
+			                                	<ul ng-show="activeClickSubMenu.x.active"  role="menubar" class="columns">
+			               <!-- Third level menu -->					                                	
+				                                    <div menu-tabs menu-item="subItem" 
+				                                    class="columns-div"
+				                                    ng-repeat="subItem in activeClickSubMenu.x.children | orderBy : 'column'" 
+				                                    ng-show="activeClickSubMenu.x.active">
+
+	                                                    <i id="favorite-selector-third-level"
+	                                                       ng-show="isUrlFavorite(subItem.menuId)==false"
+	                                                       class="icon-star favorites-icon-inactive"
+	                                                       ng-if="subItem.url.length > 1">
+	                                                    </i>					                                    
+	                                                    <i id="favorite-selector-third-level"
+	                                                       ng-show="isUrlFavorite(subItem.menuId)"
+	                                                       class="icon-star favorites-icon-active"
+	                                                       ng-if="subItem.url.length > 1">
+	                                                    </i>					                                    
+														<span class="title" aria-label="{{subItem.text}}" 
+														ng-click="goToUrl(subItem)">{{subItem.text}}</span>
+							<!-- Fourth level menus -->	
+				                                        <div att-links-list="">
+                                                            <i id="favorite-selector-fourth-level"
+                                                               class="icon-star favorites-icon-inactive"
+                                                               ng-show="isUrlFavorite(tabValue.menuId)==false"
+                                                               ng-if="tabValue.url.length > 1">
+
+                                                            </i>
+                                                            <i id="favorite-selector-fourth-level"
+                                                               class="icon-star favorites-icon-active"
+                                                               ng-show="isUrlFavorite(tabValue.menuId)"
+                                                               ng-if="tabValue.url.length > 1">
+
+                                                            </i>
+				                                            <span role="menuitem" att-links-list-item="" 
+				                                            ng-repeat="tabValue in subItem.children" 
+				                                            ng-click="goToUrl(tabValue)" 
+				                                            att-accessibility-click="13,32" 
+				                                            ng-class="{'disabled': tabValue.disabled}">{{tabValue.text}}</span>
+				                                        </div>
+				                                        <hr ng-show="!$last"/>
+				                                        
+				                                    </div>
+				                                 </ul>
+			           <!-- Favorites level menu -->
+												<div class="favorites-window" ng-show='favoritesWindow' ng-mouseleave="hideFavoritesWindow()">
+													<div id="favorites-menu-items" ng-show="showFavorites">
+														<div ng-repeat="subItem in favoritesMenuItems" att-links-list="" style='display: inline'>
+																<i id="favorite-selector-favorites-list" class="icon-star favorites-icon-active">
+																</i>
+																<a id="favorites-list" aria-label="{{subItem.text}}"
+																   ng-click="goToUrl(subItem)" 
+																   style="margin-left: 3px; margin-right: 20px; text-decoration: none;  color: #666666;">
+																   {{subItem.text}}
+																</a>
+														</div>
+														<div>
+															<br>
+															<p style='font-weight: 400; font-family: Arial !important;
+															font-size: 18px; text-align: center; background-color: lightgray;
+															width: 400px; margin-left: 25%; margin-right: 25%;'>
+																Manage favorites on ECOMP Portal.
+															</p>
+														</div>
+													</div>
+								  <!-- Favorites when empty -->
+														<div id="favorites-empty" ng-show='favoritesWindow' ng-show="emptyFavorites">
+			                                                <div id="favorites-empty" ng-show="emptyFavorites" class="favorites-window-empty">
+			                                                    <div>
+			                                                        <img src="app/fusion/external/ebz/images/no_favorites_star.png">
+			                                                        <p class='favoritesLargeText'>No Favorites</p>
+																	<p class='favoritesNormalText'>Manage favorites on ECOMP Portal.</p>
+			                                                    </div>
+			                                                </div>
+														</div>
+													</div>
+					                                
+				                                </div>
+				                            </div>
+				                        </div> 
+				                    </div >
+				                    <li class="megamenu__item" style="line-height:55px;" ng-if="loadMenufail">
+										<strong	style="font-weight: 400 !important; font-family: Arial !important; font-size: 18px;" >Unable to load menus</strong>
+									</li>
+<!-- 										<li class="megamenu__item" style="width: 20%;">&nbsp;</li>
+ -->									</div>
+								<!--  Login Snippet-->
+								<div  style="float:right">
+									<li id="bcLoginSnippet" class="megamenu__item" style="width: 140px;" >
+										<div popover="loginSnippet.html"  aria-label="Login Snippet"	referby="loginSnippet" att-accessibility-click="13,32" popover-style="\" popover-placement="below" style="width: 200px;">
+											<div class="ion-android-person login-snippet-icon" style="display:inline-block"></div>
+											<div class="login-snippet-text" style="display: inline-block; font-size:12px; margin-left:5px;overflow: hidden; max-height: 31px;   max-width:120px; padding-top: 0px; margin-top: 0px; white-space: nowrap;" ng-bind="userProfile.firstName"></div>
+										</div>
+									</li>
+									<li class="megamenu__item" style="width:120px;">&nbsp;</li>
+								</div>
+								
+							</div>		
+						</div>
+						<div style="clear: both"></div>
+					</div>
+					</div>
+				</div>
+			</div>
+
+		<div style="position: relative; color: black; top: 70px;">
+			<div ng-cloak>		
+				<span ng-style="adjustHLeftMenu('burgerIcon')" style="z-index:998; position:fixed; left:0%; font-size:35px; margin-left:10px;text-decoration:none;">
+					<a ng-click="toggleDrawer();isOpen = !isOpen" href="javascript:void(0);" class="arrow-icon-left" >
+					<span class="ion-navicon-round"></span></a>	
+					<span ng-init="isOpen = true" ng-show="isOpen" style="font-size:16px; position:relative; top:-8px; left:-15px;">&nbsp&nbsp&nbsp {{app_name}}</span>
+				</span>
+				<div att-drawer drawer-slide="left" drawer-custom-top="{{drawer_custom_top}}px" drawer-size="200px" drawer-open="drawerOpen" drawer-custom-height="100%" >
+				    <div ng-style="adjustHLeftMenu('leftMenu')">
+					    <div class="attDrawer" style="margin-top:{{drawer_margin_top}}px;">   
+					    	<div style="margin-left:10px; margin-right:10px;">
+						    	<accordion close-others="true" css="att-accordion--no-box">
+				                    <accordion-group ng-repeat="parent in menuItems" heading="{{parent.parentLabel}}" child="{{parent.parentAction}}" parent-link="{{parent.parentAction}}" image-source="{{parent.parentImageSrc}}" child-length="{{parent.childItemList.length}}" is-open="parent.open">
+				                    	<div ng-repeat="subMenu in parent.childItemList" style="font-size:12px; margin-left:10px;">
+				                    		<a href="{{subMenu.action}}" style="font-size:12px; color:#666666;" >{{subMenu.label}}</a>
+				                    	</div>
+				                    </accordion-group>
+				                </accordion>
+							</div>						
+					    </div>
+				    </div>
+				</div>
+			</div>		
+		</div>
+	</div>
+</div>
+<script>    
+	function returnToPortal(){
+		window.location.href = "<c:out value='${returnPortalUrl}'/>";
+	}
+	detectScrollEvent = function() {
+		var footerOff = $('#footerContainer').offset().top;
+		var headOff = $('#headerContainer').offset().top;
+		var winHeight = $(window).height();
+		if ((footerOff - headOff) <= winHeight) {
+			$('.att-drawer').css({
+				"height" : footerOff - headOff - 55
+			});
+		} else {
+			$('.att-drawer').css({
+				"height" : "94vh"
+			});
+		}
+	}
+	$(window).scroll(function() {
+		if ($('.att-drawer').is(':visible')) {
+			detectScrollEvent();
+		}
+	});
+	app.controller("headerController", function($scope, $timeout, $log, $http, UserInfoService, $window, $cookies,LeftMenuService) {
+  		$log.debug('HeaderController started');
+		$scope.jsonMenuData = [];
+		$scope.loadMenufail=false;
+		$scope.app_name = "";
+		$scope.app_name_full = "";
+		$scope.megaMenuDataObject =[];
+		$scope.activeClickSubMenu = {
+          		x: ''
+        };
+      	$scope.activeClickMenu = {
+      			x: ''
+      	};
+  		$scope.favoritesMenuItems = [];
+        $scope.favoriteItemsCount = 0;
+        $scope.showFavorites = false;
+        $scope.emptyFavorites = false;
+        $scope.favoritesWindow = false;
+        $scope.userProfile={
+    			firstName:'',
+    			lastName:'',
+    			fullName:'',
+    			email:''
+    	}
+      	/*Put user info into fields*/
+    	$scope.inputUserInfo = function(userInfo){
+    		if (typeof(userInfo) != "undefined" && userInfo!=null && userInfo!=''){
+    			if (typeof(userInfo.USER_FIRST_NAME) != "undefined" && userInfo.USER_FIRST_NAME!=null && userInfo.USER_FIRST_NAME!='')
+    				$scope.userProfile.firstName = userInfo.USER_FIRST_NAME;
+    			if (typeof(userInfo.USER_LAST_NAME) != "undefined" && userInfo.USER_LAST_NAME!=null && userInfo.USER_LAST_NAME!='')
+    				$scope.userProfile.lastName = userInfo.USER_LAST_NAME;
+    			if (typeof(userInfo.USER_EMAIL) != "undefined" && userInfo.USER_EMAIL!=null && userInfo.USER_EMAIL!='')  			
+    				$scope.userProfile.email = userInfo.USER_EMAIL;
+    		}		
+    	}
+      	 /*getting user info from session*/
+    	$scope.getUserNameFromSession = function(){
+    		UserInfoService.getFunctionalMenuStaticDetailSession()
+    	  	.then(function (res) {
+  		  		$scope.userProfile.firstName = res.firstName;
+  		  		$scope.redirectUrl = res.portalUrl;
+    	  	});
+        }
+      	$scope.getTopMenuStaticInfo=function() {
+    		var promise = UserInfoService.getFunctionalMenuStaticDetailShareContext();
+    		promise.then(
+				function(res) {   					
+					if(res==null || res==''){
+						$log.info('failed getting static User information');    
+						$scope.getUserNameFromSession();
+					}else{
+						$log.info('Received static User information');
+						var resData = res;						
+						$scope.inputUserInfo(resData);					
+						$scope.userProfile.fullName = $scope.userProfile.firstName+ ' '+ $scope.userProfile.lastName;					
+					}
+				},
+				function(err) {
+					$log.info('failed getting static User information');       				
+				}
+    		);
+  		}
+      			
+		var unflatten = function( array, parent, tree ){
+			tree = typeof tree !== 'undefined' ? tree : [];
+			parent = typeof parent !== 'undefined' ? parent : { menuId: null };
+			var children = _.filter( array, function(child){ return child.parentMenuId == parent.menuId; });
+		
+			if( !_.isEmpty( children )  ){
+				if( parent.menuId === null ){
+						tree = children;
+				}else{
+					parent['children'] = children
+				}
+				_.each( children, function( child ){ unflatten( array, child ) } );
+			}
+
+			return tree;
+		}
+		
+		var menuStructureConvert = function(menuItems) {
+			var megaMenuDataObjectTemp = [
+	                                 {
+	                                	 text: "ECOMP",
+	                                	 children:menuItems
+	                                 },
+	                                 {
+	                                	 text: "Help",
+	                                	 children: [{
+	                                		 text:"Contact Us",
+	                                		 url:"<c:out value='${contactUsLink}'/>"
+	                                	 },
+	                                	 {
+	                                		 text:"Get Access",
+	                                		 url:"<c:out value='${getAccessLink}'/>"
+	                                	 }]
+	                                 }
+	                                 ];
+			return megaMenuDataObjectTemp;
+		}; 
+   		
+		
+		/*Left Menu*/
+		LeftMenuService.getAppName().then(function(response){
+        		var j = response; 
+    	  		try{
+    	  			if(j && j !== "null" && j!== "undefined"){
+    	  				console.log("app name is " + $scope.app_name);
+    	  				$scope.app_name_full = j.data;
+    	  				var processed_app_name = j.data;
+    	  				var n = processed_app_name.length;
+    	  				if (n > 15) {
+    	  					n = 15;
+    	  				}
+    	  				$scope.app_name = processed_app_name.substr(0, n);
+    	  			}else{
+    	  				throw "Get app_name respsone is not an object/is empty"; 
+    	  			}  
+    	  		}catch (e) {
+    	  			console.log("error happened while trying to get app name "+e);
+    	  			return;
+    	        }	       
+    		},function(error){
+    			console.log("error happened while calling getAppName "+error);
+    		});
+		
+	    $scope.getTopMenuStaticInfo();      
+    	$scope.getMenu=function() {
+    		
+   		 $http({
+   		        method: "GET",
+   		        url: 'get_functional_menu',
+// TIMEOUT USED FOR LOCAL TESTING ONLY	      		        
+// 		        timeout: 100
+   		 }).success(function (response) {
+			if(response == '101: Timeout') {
+	  			$log.error('Timeout attempting to get_functional_menu');
+	  		// TIMEOUT USED FOR LOCAL TESTING ONLY	      		        
+//	  			$scope.createErrorMenu();
+	  			$scope.megaMenuDataObject = menuStructureConvert('');
+	  		}else {
+ 		   		$log.debug('get_functional_menu success: ' + response); 		   			   		
+				if(typeof response != 'undefined' && response.length!=0 && typeof response[0] != 'undefined' && typeof response[0].error!="undefined"){
+// createErrorMenu() USED FOR LOCAL TESTING ONLY
+//		  			$scope.createErrorMenu();
+					$scope.megaMenuDataObject = menuStructureConvert('');
+		 	   	//	$scope.loadMenufail=true;
+			 	}else{
+		 	   		$scope.jsonMenuData = unflatten( response );
+		 	   		$scope.megaMenuDataObject = menuStructureConvert($scope.jsonMenuData);
+	 	   		}
+			}
+		}).error(function (response){
+// createErrorMenu() USED FOR LOCAL TESTING ONLY	      		        
+//		  		$scope.createErrorMenu();
+
+	 	   		//$scope.loadMenufail=true;
+	 	   		$scope.megaMenuDataObject = menuStructureConvert('');
+		        $log.debug('REST API failed get_functional_menu...'+ response);
+		  });
+  		}
+    	$scope.adjustHLeftMenu = function (type){
+    		$scope.showHeader = ($cookies.show_app_header == undefined ? true : $cookies.show_app_header);
+    		
+    		if($scope.showHeader == true) {
+	    		$scope.drawer_margin_top = 60;
+	    		$scope.drawer_custom_top = 54;
+	    		$scope.toggle_drawer_top = 55;
+    		}
+    		else  {
+    			
+    			$scope.drawer_margin_top = 50;
+        		$scope.drawer_custom_top = 0;
+        		$scope.toggle_drawer_top = 10;
+    		}
+    		if(type=='burgerIcon'){
+    			return { "top": $scope.toggle_drawer_top+"px"};
+    		}else if(type=='leftMenu'){
+    			return { "margin-top": $scope.drawer_margin_top+"px"};
+    		}else
+    			return;
+    	}
+    	$scope.adjustHeader=function() {
+    		$scope.showHeader = ($cookies.show_app_header == undefined ? true : $cookies.show_app_header);
+    		
+    		if($scope.showHeader == true) {
+	    		$scope.drawer_margin_top = 50;
+	    		$scope.drawer_custom_top = 54;
+	    		$scope.toggle_drawer_top = 55;
+    		}
+    		else  {
+    			
+    			$scope.drawer_margin_top = 40;
+        		$scope.drawer_custom_top = 0;
+        		$scope.toggle_drawer_top = 10;
+    		}
+    		
+    		
+    	}
+    	
+    	
+		//$scope.getMenu();
+		$scope.adjustHeader();
+		
+
+		/* **************************************************************************/
+		/* Logic for the favorite menus is here */
+
+            $scope.loadFavorites = function () {
+                $log.debug('loadFavorites has happened.');
+                if ($scope.favoritesMenuItems == '') {
+                    $scope.generateFavoriteItems();
+                    $log.debug('loadFavorites is calling generateFavoriteItems()');
+                } else {
+                    $log.debug('loadFavorites is NOT calling generateFavoriteItems()');
+                }
+            }
+            
+            $scope.goToUrl = function (item) {
+                $log.info("goToUrl called")
+                $log.info(item);
+
+                var url = item.url;
+                var restrictedApp = item.restrictedApp;
+                $log.debug('Restricted app status is: ' + restrictedApp);
+                if (!url) {
+                    $log.info('No url found for this application, doing nothing..');
+                    return;
+                }
+                if (restrictedApp) {
+                    $window.open(url, '_blank');
+                } else {
+                    $window.open(url, '_self');
+                }
+
+            }
+            
+            $scope.submenuLevelAction = function(index, column) {
+                if ($scope.favoritesMenuItems == '') {
+                    $scope.generateFavoriteItems();
+                    $log.debug('submenuLevelAction is calling generateFavoriteItems()');
+                }
+                $log.debug('item hovered/clicked: ' + index + '; column = ' + column);
+                if (column == 2) {  // 2 is Design
+                    $scope.favoritesWindow = false;
+                    $scope.showFavorites = false;
+                    $scope.emptyFavorites = false;
+                }
+                if (index=='Favorites' && $scope.favoriteItemsCount != 0) {
+                    $log.debug('Showing Favorites window');
+                    $scope.favoritesWindow = true;
+                    $scope.showFavorites = true;
+                    $scope.emptyFavorites = false;
+                }
+                if (index=='Favorites' && $scope.favoriteItemsCount == 0) {
+                    $log.debug('Hiding Favorites window in favor of No Favorites Window');
+                    $scope.favoritesWindow = true;
+                    $scope.showFavorites = false;
+                    $scope.emptyFavorites = true;
+                }
+                if (column > 2) {
+                    $scope.favoritesWindow = false;
+                    $scope.showFavorites = false;
+                    $scope.emptyFavorites = false;
+                }
+            };
+            
+            $scope.hideFavoritesWindow = function() {
+                $log.debug('$scope.hideFavoritesWindow has been called');
+                $scope.showFavorites = false;
+                $scope.emptyFavorites = false;
+            }
+            
+            $scope.isUrlFavorite = function (menuId) {
+//                 $log.debug('array objects in menu favorites = ' + $scope.favoriteItemsCount + '; menuId=' + menuId);
+                var jsonMenu =  JSON.stringify($scope.favoritesMenuItems);
+                var isMenuFavorite =  jsonMenu.indexOf('menuId\":' + menuId);
+                if (isMenuFavorite==-1) {
+                    return false;
+                } else {
+                    return true;
+                }
+
+            }
+		            
+            $scope.generateFavoriteItems  = function() {
+            	$http({
+      		        method: "GET",
+      		        url: 'get_favorites',
+		// TIMEOUT USED FOR LOCAL TESTING ONLY	      		        
+//			      		        timeout: 100
+	      		    }).success(function (response) {
+				  		if (response == '101: Timeout') {
+						$log.error('Timeout attempting to get_favorites_menu');
+					} else {
+					 	if(typeof response != 'undefined' && response.length!=0 && typeof response[0] != 'undefined' && typeof response[0].error!="undefined"){
+						    $log.error('REST API failed get_favorites' + response);
+					 	   	}else{
+					 	   		$log.debug('get_favorites = ' + JSON.stringify(response));
+						 	   	$scope.favoritesMenuItems = response;
+		                        $scope.favoriteItemsCount = Object.keys($scope.favoritesMenuItems).length;
+		                        $log.info('number of favorite menus: ' + $scope.favoriteItemsCount);
+	                        }
+				  		}
+					}).error(function (response){
+					    $log.error('REST API failed get_favorites' + response);
+
+					});
+        	}
+		            
+		        	$scope.createFavoriteErrorMenu=function() {
+		                $scope.favoritesMenuItems = [
+
+		                                         	];
+		                $scope.favoriteItemsCount = Object.keys($scope.favoritesMenuItems).length;
+		                $log.info('number of favorite menus: ' + $scope.favoriteItemsCount);
+		        	}
+		            
+        	/* end of Favorite Menu code */
+	        /* **************************************************************************/
+
+        	
+	        /* **************************************************************************/
+        	// THIS IS USED FOR LOCAL TESTING ONLY
+	        /* **************************************************************************/
+
+			$scope.createErrorMenu=function() {
+    		$scope.jsonMenuData = [
+                                   {
+                               	    "menuId": 1,
+                               	    "column": 2,
+                               	    "text": "Design",
+                               	    "parentMenuId": null,
+                               	    "url": ""
+                               	  },
+                               	  {
+                               	    "menuId": 2,
+                               	    "column": 3,
+                               	    "text": "Infrastructure Ordering",
+                               	    "parentMenuId": null,
+                               	    "url": ""
+                               	  },
+                               	  {
+                               	    "menuId": 3,
+                               	    "column": 4,
+                               	    "text": "Service Creation",
+                               	    "parentMenuId": null,
+                               	    "url": ""
+                               	  },
+                               	  {
+                               	    "menuId": 4,
+                               	    "column": 5,
+                               	    "text": "Service Mgmt",
+                               	    "parentMenuId": null,
+                               	    "url": ""
+                               	  },
+                               	  {
+                               	    "menuId": 90,
+                               	    "column": 1,
+                               	    "text": "Google",
+                               	    "parentMenuId": 1,
+                               	    "url": "http://google.com"
+                               	  },
+                               	  {
+                               	    "menuId": 91,
+                               	    "column": 1,
+                               	    "text": "Mike Little's Coffee Cup",
+                               	    "parentMenuId": 2,
+                               	    "url": "http://coffee.com"
+                               	  },
+                               	  {
+                               	    "menuId": 92,
+                               	    "column": 2,
+                               	    "text": "Andy and his Astrophotgraphy",
+                               	    "parentMenuId": 3,
+                               	    "url": "http://nightskypix.com"
+                               	  },
+                               	  {
+                               	    "menuId": 93,
+                               	    "column": 1,
+                               	    "text": "JSONLint",
+                               	    "parentMenuId": 4,
+                               	    "url": "http://http://jsonlint.com"
+                               	  },
+                               	  {
+                               	    "menuId": 94,
+                               	    "column": 2,
+                               	    "text": "HROneStop",
+                               	    "parentMenuId": 4,
+                               	    "url": ""
+                               	  },
+                               	  {
+                               	    "menuId": 95,
+                               	    "column": 2,
+                               	    "text": "4th Level App4a R16",
+                               	    "parentMenuId": 4,
+                               	    "url": ""
+                               	  },
+                               	  {
+                               	    "menuId": 96,
+                               	    "column": 3,
+                               	    "text": "3rd Level App1c R200",
+                               	    "parentMenuId": 4,
+                               	    "url": "http://app1c.com"
+                               	  },
+                               	  {
+                               	    "menuId": 97,
+                               	    "column": 1,
+                               	    "text": "3rd Level App4b R16",
+                               	    "parentMenuId": 5,
+                               	    "url": "http://app4b.com"
+                               	  },
+                               	  {
+                               	    "menuId": 98,
+                               	    "column": 2,
+                               	    "text": "3rd Level App2b R16",
+                               	    "parentMenuId": 5,
+                               	    "url": "http://app2b.com"
+                               	  },
+                               	  {
+                               	    "menuId": 99,
+                               	    "column": 1,
+                               	    "text": "Favorites",
+                               	    "parentMenuId": null,
+                               	    "url": ""
+                               	  }
+                               	];
+	  		$scope.jsonMenuData = unflatten( $scope.jsonMenuData );
+ 	   		$scope.megaMenuDataObject = menuStructureConvert($scope.jsonMenuData);
+//	  		$log.debug(JSON.stringify($scope.jsonMenuData));
+    	}
+		var childItemList="";
+		var parentList = "";
+		try{
+			childItemList = ${menu.childItemList};
+			parentList = ${menu.parentList};
+		}catch(err){
+			console.log("error while getting left menu");
+		}
+		
+ 		var pageUrl = window.location.href.split('/')[window.location.href.split('/').length-1];
+		
+		$scope.menuItems = [];
+		for (var i = 0; i < parentList.length; i++) {
+			$scope.openCurrentMenu = false;
+		 if(pageUrl==parentList[i].action)
+				$scope.openCurrentMenu = true;
+			$scope.childItemList = childItemList[i];
+			for(chIndex in  $scope.childItemList){
+				if($scope.childItemList.length>0)
+					if($scope.childItemList[chIndex].action!=null){
+						if($scope.childItemList[chIndex].action==pageUrl)
+							$scope.openCurrentMenu = true;
+					}
+			}
+			$scope.item = {
+				parentLabel : parentList[i].label,
+				parentAction : parentList[i].action,
+				parentImageSrc : parentList[i].imageSrc,
+				open:$scope.openCurrentMenu,
+				childItemList : $scope.childItemList
+			}
+			$scope.menuItems.push($scope.item);
+		}
+		$scope.arrowShow = true;
+		$scope.drawerOpen = false;
+		$scope.subMenuContent = false;
+		$scope.toggleSubMenu = function() {
+			$scope.subMenuContent = !$scope.subMenuContent;
+		};
+
+		var drawerOpen = 'open';
+		if (drawerOpen == 'open') {
+			$scope.drawerOpen = true;
+			$scope.arrowShow = true;
+		} else {
+			$scope.arrowShow = false;
+		}
+		$scope.arrowShow = true;
+		$scope.drawerOpen = false;
+		$scope.toggleDrawer = function() {
+			$scope.drawerOpen = !($scope.drawerOpen);
+			if ($scope.drawerOpen) {
+				$scope.arrowShow = true;				
+				if (document.getElementById('mContent')!=null)
+					document.getElementById('mContent').style.marginLeft = "210px"; 			
+			} else {
+				$scope.arrowShow = false;
+				if (document.getElementById('mContent')!=null)
+					document.getElementById('mContent').style.marginLeft = "50px";
+			}
+		};
+		//var drawerOpen = getCookie('drawerOpen');
+		if (drawerOpen == 'open') {
+			$scope.drawerOpen = true;
+			$scope.arrowShow = true;
+		} else {
+			$scope.arrowShow = false;
+		}
+		$timeout(function() {
+			detectScrollEvent();
+		}, 800);
+		
+	});
+	
+	app.filter("ellipsis", function(){
+	    return function(text, length){
+	        if (text) {
+	            var ellipsis = text.length > length ? "..." : "";
+	            return text.slice(0, length) + ellipsis;
+	        };
+	        return text;        
+	    }
+	});
+</script>
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/ebz/loginSnippet.html b/vid/src/main/webapp/WEB-INF/fusion/jsp/ebz/loginSnippet.html
new file mode 100644
index 00000000..0f29ee77
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/ebz/loginSnippet.html
@@ -0,0 +1,120 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<script type="text/ng-template" id="loginSnippet.html">
+          <div style="line-height: normal; right: 167px; min-height: 200px; height: auto; width: auto; " ng-controller="loginSnippetCtrl" >
+									<div id="reg-header-snippet">
+										<div class="reg-profilePicture" style="min-height: 215px; width: auto; " id="reg-profile-links">
+											<div id="reg-profileImage">	
+												<div style="clear: both; height: 80px; position: relative; width: 80px;">
+												
+													<span style="  background-position: -1px -1px; height: 81px;left: 0;position: absolute;top: 0;width: 81px;">&nbsp;</span>
+												</div>
+											</div>						
+											<div id="reg-logout-div">
+												<a class="reg-logout-btn" href="logout.htm">Log Out</a>	
+											</div>
+										</div>
+										<div tabindex="0" class="reg-profileDetails" id="reg-profiledetails-id">
+										<ul class="reg-Details-table" style="list-style: none;">
+											<li><div class="reg-userName-table"><div id="reg-userName-table-row"><div id="reg-userName-table-cell"><h3 class="att-global-fonts" id="reg-userName" ng-bind="userProfile.fullName"></h3><span class="visuallyhidden">.</span></div></div></div></li>
+											<li><div class="reg-userEmail-label"><span class="reg-userEmail-label-spn">EMAIL<span class="visuallyhidden">:</span></span></div></li>
+											<li><div class="reg-userEmail-value"><span class="reg-userEmail-value-spn" ng-bind="userProfile.email"><span class="visuallyhidden">.</span></span></div></li>
+											<li><div class="reg-userRole-label"><span class="reg-userRole-label-spn">User ID<span class="visuallyhidden">:</span></span></div></li>
+											<li><div class="reg-userRole-value"><span class="reg-userRole-value-spn" ng-bind="userProfile.orgUserId"><span class="visuallyhidden"></span></span></div></li>			
+										</ul>	
+										</div>
+										</div>
+									</div>
+    </script>
+    <script type="text/ng-template" id="chat_box.html">
+     
+								<div style="width: auto;">
+									
+									<div style="font-size: 24px; font-family: omnes_attregular;line-height: 26px;color: #444444;text-align: center;">
+										<span>Live Chat</span>
+									</div>
+									<div  style="line-height:15px; padding-left:20px; padding-right:20px;">
+										Chat is currently unavailable.<br><br>
+										
+									</div>
+								</div>   
+	</script>       
+
+<script>
+var loginSnippetCtrl =  function ($scope,$http, $log,UserInfoService){
+	/*Define fields*/
+	$scope.userProfile={
+			firstName:'',
+			lastName:'',
+			fullName:'',
+			email:''
+	}
+	/*Put user info into fields*/
+	$scope.inputUserInfo = function(userInfo){
+		if (typeof(userInfo) != "undefined" && userInfo!=null && userInfo!=''){
+			if (typeof(userInfo.USER_FIRST_NAME) != "undefined" && userInfo.USER_FIRST_NAME!=null && userInfo.USER_FIRST_NAME!='')
+				$scope.userProfile.firstName = userInfo.USER_FIRST_NAME;
+			if (typeof(userInfo.USER_LAST_NAME) != "undefined" && userInfo.USER_LAST_NAME!=null && userInfo.USER_LAST_NAME!='')
+				$scope.userProfile.lastName = userInfo.USER_LAST_NAME;
+			if (typeof(userInfo.USER_EMAIL) != "undefined" && userInfo.USER_EMAIL!=null && userInfo.USER_EMAIL!='')  			
+				$scope.userProfile.email = userInfo.USER_EMAIL;		
+			if (typeof(userInfo.USER_ORGUSERID) != "undefined" && userInfo.USER_ORGUSERID!=null && userInfo.USER_ORGUSERID!='')  			
+				$scope.userProfile.orgUserId = userInfo.USER_ORGUSERID;				
+		}		
+	}
+	 /*getting user info from session*/
+	$scope.getUserNameFromSession = function(){
+		UserInfoService.getFunctionalMenuStaticDetailSession()
+	  	.then(function (response) {
+	  		var j = response;
+	  		console.log(response);
+	  		$scope.userProfile.fullName = response.userName;
+	  		$scope.userProfile.orgUserId = response.orgUserId;
+	  		$scope.userProfile.email = response.email;
+	  	});
+    }
+	/*getting user info from shared context*/
+	$scope.getUserName=function() {
+		var promise = UserInfoService.getFunctionalMenuStaticDetailShareContext();
+		promise.then(
+			function(res) { 
+				if(res==null || res==''){
+					$log.info('Getting User information from session');
+					$scope.getUserNameFromSession();
+				}else{
+					$log.info('Received User information from shared context',res);
+					var resData = res;
+					$scope.inputUserInfo(resData);					
+					$scope.userProfile.fullName = $scope.userProfile.firstName+ ' '+ $scope.userProfile.lastName;					
+				}
+			},
+			function(err) {
+				console.log('error');
+			}
+		);
+    };
+    /*call the get user info function*/
+    try{   	
+    	$scope.getUserName();
+    }catch(err){
+    	$log.info('Error while getting User information',err);
+    }
+}
+ </script>
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/ebz_template.jsp b/vid/src/main/webapp/WEB-INF/fusion/jsp/ebz_template.jsp
new file mode 100644
index 00000000..59b61d19
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/ebz_template.jsp
@@ -0,0 +1,45 @@
+<%--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  --%>
+<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
+
+<!DOCTYPE html>
+<html ng-app="abs">
+    <head>
+		<%@ include file="/WEB-INF/fusion/jsp/meta.jsp" %>
+		<script src="static/js/jquery-1.10.2.js" type="text/javascript"></script>
+	</head>
+	<body class="templatebody" style="opacity: 1; background-color: rgb(242, 242, 242); padding: 0px;">
+		<div class="applicationWindow">
+			<div>
+				<tiles:insertAttribute name="header" />
+			</div>
+			<br>
+			<div class="content" id="mContent">
+				<div class="body-content-jsp">
+					<tiles:insertAttribute name="body" />
+				</div>
+			</div>
+			<br>
+			<div>
+				<tiles:insertAttribute name="footer" /> 
+			</div>
+		</div>
+	</body>
+</html>
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/ebz_template_noheader_nofooter.jsp b/vid/src/main/webapp/WEB-INF/fusion/jsp/ebz_template_noheader_nofooter.jsp
new file mode 100644
index 00000000..98dccb4c
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/ebz_template_noheader_nofooter.jsp
@@ -0,0 +1,35 @@
+<%--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  --%>
+<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
+<!DOCTYPE html>
+<html>
+    <%@ include file="/WEB-INF/fusion/jsp/meta.jsp" %>
+	<body class="templatebody" style="opacity: 1; background-color: rgb(242, 242, 242); padding: 0px;">
+		<div class="applicationWindow">
+		
+			<div class="content" style="margin-left:100px; margin-right:100px;">
+				<div>
+					<tiles:insertAttribute name="body" />
+				</div>
+			</div>
+			
+		</div>
+	</body>
+</html>
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/ebz_template_report_embedded.jsp b/vid/src/main/webapp/WEB-INF/fusion/jsp/ebz_template_report_embedded.jsp
new file mode 100644
index 00000000..4281a063
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/ebz_template_report_embedded.jsp
@@ -0,0 +1,48 @@
+<%--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  --%>
+<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
+<!DOCTYPE html>
+<html ng-app="abs">
+    <%@ include file="/WEB-INF/fusion/jsp/meta.jsp" %>
+		<script src="static/js/jquery-1.10.2.js" type="text/javascript"></script>
+<script src= "app/fusion/external/ebz/angular_js/angular.js"></script> 
+<script src= "app/fusion/external/ebz/angular_js/angular-route.min.js"></script>
+<script src= "app/fusion/external/ebz/angular_js/angular-sanitize.js"></script>
+<script src= "app/fusion/external/ebz/angular_js/app.js"></script>
+<script src= "app/fusion/external/ebz/angular_js/gestures.js"></script>
+<script src="static/js/jquery-1.10.2.js"></script>
+<script src="static/js/modalService.js"></script>
+<script src="static/js/jquery.mask.min.js" type="text/javascript"></script>
+<script src="static/js/jquery-ui.js" type="text/javascript"></script>
+<script src="app/fusion/external/ebz/sandbox/att-abs-tpls.js" type="text/javascript"></script>
+<script src="static/fusion/js/att_angular_gridster/ui-gridster-tpls.js"></script>
+<script src="static/fusion/js/att_angular_gridster/angular-gridster.js"></script>
+<script src= "app/fusion/external/ebz/angular_js/checklist-model.js"></script>
+<script src="app/fusion/external/angular-ui/ui-bootstrap-tpls-1.1.2.min.js"></script>		
+
+    
+	<body class="templatebody" style="opacity: 1; background-color: rgb(242, 242, 242); padding: 0px;">
+		<div class="applicationWindow">
+			<div class="content">
+					<tiles:insertAttribute name="body" />
+			</div>
+		</div>
+	</body>
+</html>
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/es_search_demo.jsp b/vid/src/main/webapp/WEB-INF/fusion/jsp/es_search_demo.jsp
new file mode 100644
index 00000000..dbf9eefb
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/es_search_demo.jsp
@@ -0,0 +1,97 @@
+<%--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  --%>
+<!-- <link rel="stylesheet" type="text/css" href="app/fusion/elasticsearch/styles/styles.css" > -->
+<script>
+app.controller('elasticSearchController',['$scope','$http',function ($scope,$http) { 
+	$scope.submenuId = "";
+	$scope.isNew="";
+ 	$scope.viewPerPage = 20;
+    $scope.currentPage = 2;
+    $scope.totalPage;	
+    $scope.searchCategory = "";
+    $scope.searchString = "";
+ 	$scope.tableData=[];
+ 	$scope.searchText='';
+ 	$scope.flagCount=0;
+ 	function escapeRegExp(str) {
+ 		return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|\&]/g, " ");
+ 	}
+ 	$scope.test = function(){
+ 		$scope.searchText=$scope.searchText;
+ 		var sendData ={
+ 			"data" : escapeRegExp($scope.searchText),
+ 			"size" : "100",
+ 			"fuzzy" : "true",
+ 			"resultname" : "custsuggest"
+		};
+		
+ 		if($scope.flagCount<3 || $scope.searchText.length==0){
+ 			$scope.flagCount++;
+ 			$http.get('es_search/' + encodeURIComponent(JSON.stringify(sendData))).
+ 				then(function(response){
+ 					var data = JSON.parse(response.data.result);
+ 					$scope.tableData = data.hits.hits;
+ 				})
+ 				.catch(function(data,status){
+					console.log("Error: " + status + " : " + data); 					
+ 				})
+ 				.finally(function() {
+ 					$scope.flagCount--;
+ 				});
+ 		}
+ 	}
+ 	$scope.searchText='';
+}]);
+</script>
+
+<div style="margin-left:20px;" ng-app="eSearchApp">
+ 	<div style="margin-top:20px; margin-bottom:20px;"><span class="heading1">Elastic Search - </span><span class="heading2">Corporate Location Data System</span></div>
+	<div class="demoElas" ng-controller="elasticSearchController">
+		<div class="form-field" align="center">
+           <input type="text" placeholder="What are you looking for?" class="search__large-iconform" ng-model="searchText" ng-change="test()">
+           <i class="icon-search">&nbsp;</i>
+        </div>
+        
+        <table att-table table-data="tableData" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+		     <thead att-table-row type="header">
+		        <tr>
+		         	<th att-table-header>Customer Name</th>  
+		            <th att-table-header>Phone</th>  
+		            <th att-table-header>Street</th>  
+		            <th att-table-header>City</th>  
+		            <th att-table-header>State</th>  
+		            <th att-table-header>ZIP</th>
+		            <th att-table-header>CLLI</th>  
+		        </tr>
+			 </thead>
+		    <tbody att-table-row type="body" row-repeat="options in tableData">
+		        <tr>
+		     	  	<td att-table-body >{{options._source.name}}</td>
+					<td att-table-body >{{options._source.suggest.payload.tn}}</td>
+					<td att-table-body >{{options._source.suggest.payload.addr}}</td>
+					<td att-table-body >{{options._source.suggest.payload.city}}</td>
+					<td att-table-body >{{options._source.suggest.payload.st}}</td>
+					<td att-table-body >{{options._source.suggest.payload.zip}}</td>	
+					<td att-table-body >{{options._source.suggest.payload.clli}}</td>			
+				</tr>     
+		    </tbody>
+		</table>
+	</div>
+</div>
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/es_suggest_demo.jsp b/vid/src/main/webapp/WEB-INF/fusion/jsp/es_suggest_demo.jsp
new file mode 100644
index 00000000..05cfaf55
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/es_suggest_demo.jsp
@@ -0,0 +1,97 @@
+<%--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  --%>
+<!-- <link rel="stylesheet" type="text/css" href="app/fusion/elasticsearch/styles/styles.css" > -->
+<script>
+app.controller('elasticSearchController',['$scope','$http',function ($scope,$http) { 
+	$scope.submenuId = "";
+	$scope.isNew="";
+ 	$scope.viewPerPage = 20;
+    $scope.currentPage = 2;
+    $scope.totalPage;	
+    $scope.searchCategory = "";
+    $scope.searchString = "";
+ 	$scope.tableData=[];
+ 	$scope.searchText='';
+ 	$scope.flagCount=0;
+ 	function escapeRegExp(str) {
+ 		return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|\&]/g, " ");
+ 	}
+ 	$scope.test = function(){
+ 		$scope.searchText=$scope.searchText;
+ 		var sendData ={
+ 			"data" : escapeRegExp($scope.searchText),
+ 			"size" : "20",
+ 			"fuzzy" : "true",
+ 			"resultname" : "custsuggest"
+		};
+		
+ 		if($scope.flagCount<3 || $scope.searchText.length==0){
+ 			$scope.flagCount++;
+ 			$http.get('es_suggest/' + encodeURIComponent(JSON.stringify(sendData))).
+ 				then(function(response){
+ 					var data = JSON.parse(response.data.result);
+ 					$scope.tableData = data.custsuggest[0].options;
+ 				})
+ 				.catch(function(data,status){
+					console.log("Error: " + status + " : " + data); 					
+ 				})
+ 				.finally(function() {
+ 					$scope.flagCount--;
+ 				});
+ 		}
+ 	}
+ 	$scope.searchText='';
+}]);
+</script>
+
+<div style="margin-left:20px;" ng-app="eSearchApp">
+ 	<div style="margin-top:20px; margin-bottom:20px;"><span class="heading1">Elastic Search - </span><span class="heading2">Corporate Location Data System</span></div>
+	<div class="demoElas" ng-controller="elasticSearchController">
+		<div class="form-field" align="center">
+           <input type="text" placeholder="What are you looking for?" class="search__large-iconform" ng-model="searchText" ng-change="test()">
+           <i class="icon-search">&nbsp;</i>
+        </div>
+        
+        <table att-table table-data="tableData" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+		     <thead att-table-row type="header">
+		        <tr>
+		         	<th att-table-header>Customer Name</th>  
+		            <th att-table-header>Phone</th>  
+		            <th att-table-header>Street</th>  
+		            <th att-table-header>City</th>  
+		            <th att-table-header>State</th>  
+		            <th att-table-header>ZIP</th>
+		            <th att-table-header>CLLI</th>  
+		        </tr>
+			 </thead>
+		    <tbody att-table-row type="body" row-repeat="options in tableData">
+		        <tr>
+		     	  	<td att-table-body >{{options.text}}</td>
+					<td att-table-body >{{options.payload.tn}}</td>
+					<td att-table-body >{{options.payload.addr}}</td>
+					<td att-table-body >{{options.payload.city}}</td>
+					<td att-table-body >{{options.payload.st}}</td>
+					<td att-table-body >{{options.payload.zip}}</td>	
+					<td att-table-body >{{options.payload.clli}}</td>			
+				</tr>     
+		    </tbody>
+		</table>
+	</div>
+</div>
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/frame_insert.jsp b/vid/src/main/webapp/WEB-INF/fusion/jsp/frame_insert.jsp
new file mode 100644
index 00000000..5f550c68
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/frame_insert.jsp
@@ -0,0 +1,44 @@
+<%--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  --%>
+<iframe id="frame_insert" src="${frame_int}"></iframe>
+
+<script type="text/javascript">
+
+    var frameId = "#frame_insert";
+
+	$(frameId).load(function(){
+		iframeLoaded()
+	   
+	});
+  
+
+  function iframeLoaded() {
+	  var iFrameRef =  $(frameId);
+      if(iFrameRef) {
+    	  
+    	  var height = iFrameRef.contents().find("input[name='inner_height']");
+    	  var width = iFrameRef.contents().find("input[name='inner_width']");
+            
+    	  iFrameRef.css('height', (height.val() != undefined ? height.val():"500px"));
+    	  iFrameRef.css('width',  (width.val() != undefined ? width.val():"500px"));
+    	  iFrameRef.css('border','none');
+      }   
+  }
+</script>   
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/include.jsp b/vid/src/main/webapp/WEB-INF/fusion/jsp/include.jsp
new file mode 100644
index 00000000..cd6a5e09
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/include.jsp
@@ -0,0 +1,30 @@
+<%--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  --%>
+<%@ page import="org.openecomp.portalsdk.core.util.SystemProperties" %>
+<%@ page import="org.openecomp.portalsdk.core.web.support.AppUtils" %>
+
+<%@ page import="java.util.LinkedHashMap" %>
+
+
+<%@ taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ taglib prefix="fmt"    uri="http://java.sun.com/jsp/jstl/fmt" %>
+<%@ taglib prefix="fn"     uri="http://java.sun.com/jsp/jstl/functions" %>
+
+<c:set var="request" value="<%=request%>"/>
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/jcs_admin.jsp b/vid/src/main/webapp/WEB-INF/fusion/jsp/jcs_admin.jsp
new file mode 100644
index 00000000..ba18a7f6
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/jcs_admin.jsp
@@ -0,0 +1,144 @@
+<%--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  --%>
+<%-- <%@ include file="/WEB-INF/fusion/jsp/include.jsp"%> --%>
+<%@ taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ taglib prefix="fmt"    uri="http://java.sun.com/jsp/jstl/fmt" %>
+<%@ taglib prefix="fn"     uri="http://java.sun.com/jsp/jstl/functions" %>
+
+<%@ include file="/WEB-INF/fusion/jsp/popup_modal.html" %>
+
+<div align="left" ng-controller="cacheAdminController">
+	<div class="pageTitle"><h3>Cache Regions</h3></div>
+	These are the regions which are currently defined in the cache. 'Items'	and 'Bytes' refer to the elements currently in memory (not spooled).
+	You can clear all items for a region by clicking on the Clear icon next	to the desired region below. You can also <a href="#" ng-click="clearAll();">clear all regions</a> which
+	empties the entire cache. <br /><br />
+
+	<div style="width: 97%; border-top: 1px solid #c4c4c4; margin-top: 0px; background-color: #fff; padding: 10px 0; color: #646464s">
+		<div style="margin: 0 20px 10px 0px; font-size: 80%; float: left; width: 97%;">
+			<div class="col-md-4"><b>Cache Name</b></div>
+			<div class="col-md-2"><b># of Items</b></div>
+			<div class="col-md-2"><b>Bytes</b></div>
+			<div class="col-md-2"><b>Status</b></div>
+			<div class="col-md-3"><b>Memory Hits</b></div>
+			<div class="col-md-3"><b>Aux Hits</b></div>
+			<div class="col-md-3"><b>Not Found Misses</b></div>
+			<div class="col-md-3"><b>Expired Misses</b></div>
+			<div class="col-md-1"><b>Clear?</b></div>
+			<div class="col-md-1"><b>Items</b></div>
+		</div>
+		<div ng-repeat="region in regions">
+			<div style="margin: 0 20px 10px 0px; font-size: 80%; float: left; width: 97%;">
+				<div class="col-md-4"><a href="#" tooltip="Click to Show Region Details" ng-click="showRegionDetails(region.cacheName);">{{region.cacheName}}</a></div>
+				<div class="col-md-2">{{region.size}}</div>
+				<div class="col-md-2">{{region.byteCount}}</div>
+				<div class="col-md-2">{{region.status}}</div>
+				<div class="col-md-3">{{region.hitCountRam}}</div>
+				<div class="col-md-3">{{region.hitCountAux}}</div>
+				<div class="col-md-3">{{region.missCountNotFound}}</div>
+				<div class="col-md-3">{{region.missCountExpired}}</div>
+				<div class="col-md-1">
+					<div ng-click="clearRegion(region.cacheName);" style="font-size:20px;"><a href="javascript:void(0)" class="icon-trash"></a></div>
+				</div>
+				<div class="col-md-1"><span class="att--tree__plus col-md-1" ng-class="{minus: bling$index}" ng-click="bling$index = !bling$index" style="display: block;"></span></div>
+			</div>
+			<div style="margin: 0px 20px 0px 30px; font-size: 80%; float: left; width: 95%; border-top: 1px solid #e4e4e4; padding-top: 10px"
+				ng-show="bling$index">
+				<span class="att--tree__arrow" style="height: 20px; width: 20px; display: inline-block; float: left"></span>
+				<div class="col-md-12"><b>Key</b></div>
+				<div class="col-md-2"><b>Eternal?</b></div>
+				<div class="col-md-4"><b>Created</b></div>
+				<div class="col-md-2"><b>Max Life</b></div>
+				<div class="col-md-2"><b>Expires</b></div>
+				<div class="col-md-1"><b>Clear?</b></div>
+			</div>
+			<div ng-repeat="item in region.items">
+				<div style="margin: 0px 20px 0px 30px; font-size: 80%; float: left; width: 95%;" ng-show="bling$index">
+					<span class="att--tree__arrow" style="height: 20px; width: 20px; display: inline-block; float: left"></span>
+					<div class="col-md-12"><a href="#" tooltip="Click to Show Item Details" ng-click="showItemDetails(region.cacheName,item.key);">{{item.key}}</a></div>
+					<div class="col-md-2">{{item.eternal}}</div>
+					<div class="col-md-4">{{item.createTime}}</div>
+					<div class="col-md-2">{{item.maxLifeSeconds}}</div>
+					<div class="col-md-2">{{item.expiresInSeconds}}</div>
+					<div class="col-md-1">
+						<div ng-click="clearItem(region.cacheName,item.key);" style="font-size:20px;"><a href="javascript:void(0)" class="icon-trash"></a></div>
+					</div>
+				</div>
+			</div>
+			<div style="clear: both"></div>
+		</div>
+	</div>
+</div>
+
+<script>
+app.controller('cacheAdminController', function ($scope,$interval,$http,$modal,modalService){
+	$scope.regions=${model};
+	 
+	$scope.clearAll = function() {
+		modalService.popupConfirmWin("Confirm",'You are about to clear all of the items for all cache regions. Do you want to continue?',
+    			function(){
+			        $http.get("jcs_admin/clearAll").success(function(response){$scope.regions=response;});
+					
+    	})
+	};
+	
+	$scope.clearRegion = function(cacheName) {
+		modalService.popupConfirmWin("Confirm",'You are about to clear all of the items in the cache region "' + cacheName + '". Do you want to continue?',
+    			function(){
+			       $http.get("jcs_admin/clearRegion?cacheName="+cacheName).success(function(response){$scope.regions=response;});
+					
+    	})
+	};
+	
+	$scope.clearItem = function(cacheName,key) {
+		modalService.popupConfirmWin("Confirm",'You are about to clear this item from the cache region "' + cacheName + '". Do you want to continue?',
+    			function(){
+			       $http.get("jcs_admin/clearItem?keyName="+key+"&cacheName="+cacheName).success(function(response){$scope.regions=response;});
+					
+    	})
+	};
+	
+	$scope.showRegionDetails = function(cacheName) {
+		$http.get("jcs_admin/showRegionDetails?cacheName="+cacheName).success(function(response){modalService.showSuccess('',response);});
+	};
+
+	$scope.showItemDetails = function(cacheName,key) {
+			$http.get("jcs_admin/showItemDetails?keyName="+key+"&cacheName="+cacheName).success(function(response){ 
+				var message = "CacheName: "+ response.cacheName 
+					+"\nkey: "+response.key
+					+"\nIS_SPOOL: "+response.attr.IS_SPOOL
+					+"\nIS_LATERAL: "+response.attr.IS_LATERAL
+					+"\nIS_REMOTE: "+response.attr.IS_REMOTE
+					+"\nIS_ETERNAL: "+response.attr.IS_ETERNAL
+					+"\nversion: "+response.attr.version
+					+"\nmaxLifeSeconds: "+response.attr.maxLifeSeconds
+					+"\nmaxIdleTimeSeconds: "+response.attr.maxIdleTimeSeconds
+					+"\nsize: "+response.attr.size
+					+"\ncreateTime: "+response.attr.createTime
+					+"\nlastAccessTime: "+response.attr.lastAccessTime
+					+"\nidleTime: "+response.attr.idleTime
+					+"\ntimeToLiveSeconds: "+response.attr.timeToLiveSeconds
+					+"\nisSpool: "+response.attr.isSpool
+					+"\nisLateral: "+response.attr.isLateral
+					+"\nisRemote: "+response.attr.isRemote
+					+"\nisEternal: "+response.attr.isEternal;
+				modalService.showSuccess('',message);});
+	};
+});
+</script>
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/meta.jsp b/vid/src/main/webapp/WEB-INF/fusion/jsp/meta.jsp
new file mode 100644
index 00000000..3c4ff52a
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/meta.jsp
@@ -0,0 +1,36 @@
+<%--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  --%>
+<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/fn-ebz.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/demo.css" >
+	 	<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/base.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/btn.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/dtpk.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/frms.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/sldr.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/style.css" >
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/tbs.css" > 		
+		<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/ebz_header/portal_ebz_header.css">
+		
+</head>
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/popup_modal.html b/vid/src/main/webapp/WEB-INF/fusion/jsp/popup_modal.html
new file mode 100644
index 00000000..0766cecd
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/popup_modal.html
@@ -0,0 +1,324 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+
+<script type="text/ng-template" id="modal_informative.html">
+       <div class="modal__informative font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Success!</h2>
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content" style="white-space: pre-wrap;">{{message.text}}</div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Dismiss</button>
+            </div>
+        </div>
+    </script>
+   
+   <script type="text/ng-template" id="modal_message.html">
+       <div class="modal__informative font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Attention!</h2>
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content" style="white-space: pre-wrap;">{{message.text}}</div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Dismiss</button>
+            </div>
+        </div>
+    </script>
+   
+    <script type="text/ng-template" id="delete_informative.html">
+   <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are you sure you want to delete the profile?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+   <script type="text/ng-template" id="email_report_informative.html">
+   <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Mailing your report...</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              The report will be sent to your email soon!
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Ok</button>
+            </div>
+        </div>
+    </script>
+    <script type="text/ng-template" id="delete_authCode.html">
+   <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are you sure you want to delete the Authorization Code(s)?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+     <script type="text/ng-template" id="delete_Schedule.html">
+   		<div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete This Schedule(s) ?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+    <script type="text/ng-template" id="alternate_number.html">
+   		<div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete This Number ?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+     <script type="text/ng-template" id="manage_device.html">
+   		<div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete This Line Port ?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+    <script type="text/ng-template" id="delete_virtualOnNet.html">
+  		 <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete this Virtual On-Net User?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+    <script type="text/ng-template" id="delete_user_meet_me_conference.html">
+   		<div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete this Conference?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+    <script type="text/ng-template" id="confirmation_informative.html">
+   		<div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">{{message.title}}</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content" style="white-space: pre-wrap;">{{message.text}}<br/></div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div> 
+        </div>
+    </script>
+   
+    <script type="text/ng-template" id="confirmation_for_delete.html">
+   		<div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name"> <h2 class="font-showcase-font-name">Are You Sure You Want to Delete This {{message.title}}?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">Deletions are not reversible. {{message.text}}<br/></div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div> 
+        </div>
+    </script>
+   
+   <script type="text/ng-template" id="modal_warning.html">
+   <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Unable to process your request!</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+			<div class="modal__content" style="white-space: pre-wrap;">Unable to process your request.   <br/>{{message.text}}<br/>
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Dismiss</button>
+            </div>
+        </div>
+    </script>
+    
+    <script type="text/ng-template" id="modal_warning_message.html">
+   <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Warning</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+			<div class="modal__content" style="white-space: pre-wrap;">{{message.text}}<br/>
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Dismiss</button>
+            </div>
+        </div>
+    </script>
+
+
+    
+    <script type="text/ng-template" id="modal_prompt.html">
+       <div class="modal__warning font-showcase">
+          <div class="modal__header">
+              <h2 class="font-showcase-font-name">Unable to process your request. </h2>
+              <i class="icon-circle-action-close close-modal modal__header--close"  ng-click="$dismiss()"></i>
+              
+          </div>
+          <div class="divider-container"><hr> </div>      
+          <div class="modal__content">
+              Unable to process your request.   <br/> {{message.text}}
+          </div>
+   	</div>
+    </script>
+     <script type="text/ng-template" id="delete_device.html">
+        <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete This Device?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+     <script type="text/ng-template" id="delete_multiple_device.html">
+        <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete The Device(s)?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+
+<script>
+
+//.controller('modalpopupController', function ($scope, $modalInstance){
+var modalpopupController =  function ($scope, $modalInstance, message){
+	
+	$scope.message = message;
+	
+	
+	$scope.hello = function () {
+        $modalInstance.close($scope.digitPattern);
+    };
+	$modalInstance.ok = function() {
+        //add the  ok functionality
+        alert("Logout");        
+    };
+    $modalInstance.cancel = function() {
+        //add the cancel functionality
+        alert("Keep Log in");
+    };
+    $modalInstance.cancelbutton = function() {
+        //add the cancel functionality
+        alert("Modal Waring popup close event");
+    };
+}
+
+
+</script>
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/popup_modal_role.html b/vid/src/main/webapp/WEB-INF/fusion/jsp/popup_modal_role.html
new file mode 100644
index 00000000..c163002d
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/popup_modal_role.html
@@ -0,0 +1,274 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+
+<script type="text/ng-template" id="role_functions_popup.html">
+          <div class="modal__informative font-showcase" style="width:700px;height:500px;overflow:scroll">
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name" style="width: 500px;">Select Role Functions</h2>
+            </div>
+            <button align="right" class="button button--primary button--small" herf="javascript:void(0)" ng-click="close()">Close</button>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">           	 	
+				<table table-data="availableRoleFunctions" att-table>
+					<thead att-table-row type="header">
+						<tr>
+							<th att-table-header sortable="false" width="10%"> </th>
+							<th att-table-header sortable="false" width="90%">Role Function</th>
+						</tr>
+					</thead>
+					<tbody att-table-row type="body" row-repeat="availableRoleFunction in availableRoleFunctions" style="max-height: 980px;" >
+					  <tr>
+					  
+						<td width="10%">
+							<div ng-click="toggleRoleFunction(availableRoleFunction.selected,availableRoleFunction);">
+							<input type="checkbox" ng-model="availableRoleFunction.selected" att-toggle-main>
+							</div>
+						</td>
+						<td width="90%">{{ availableRoleFunction.name }}</td>
+						
+					  </tr>
+					</tbody>
+				</table>	
+            </div>
+        </div>
+</script>
+
+
+<script type="text/ng-template" id="child_roles_popup.html">
+          <div class="modal__informative font-showcase" style="width:700px;height:500px;overflow:scroll">
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name" style="width: 500px;">Select Child Roles</h2>
+            </div>
+            <button align="right" class="button button--primary button--small" herf="javascript:void(0)" ng-click="close()">Close</button>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">           	 	
+					<table table-data="availableRoles" att-table>
+						<thead att-table-row type="header">
+							<tr>
+								<th att-table-header sortable="false" width="10%"> </th>
+								<th att-table-header sortable="false" width="90%">Role</th>
+							</tr>
+						</thead>
+						<tbody att-table-row type="body" row-repeat="availableRole in availableRoles" style="max-height: 980px;" >
+							<tr>
+							<td att-table-body width="10%">
+								<div ng-click="toggleChildRole(availableRole.selected,availableRole);">
+								<input type="checkbox" ng-model="availableRole.selected" att-toggle-main>
+								</div>
+							</td>
+							<td att-table-body width="90%">{{ availableRole.name }}</td>
+							</tr>
+						</tbody>
+					</table>	
+            </div>
+        </div>
+</script>
+
+<script>
+
+var rolepopupController =  function ($scope, $modalInstance, role,modalService){
+	$scope.role = role;
+	
+	if($scope.role.childRoles==null){
+		$scope.role.childRoles=[];
+	}
+	
+	$scope.ociavailableRoles=${availableRoles};
+	console.log($scope.ociavailableRoles);
+	$scope.availableRoles=[];
+	if($scope.ociavailableRoles)
+		$.each($scope.ociavailableRoles, function(i, a){ 
+			var availableRole = a;
+			availableRole.selected = false;
+			if($scope.role.childRoles){
+		    $.each($scope.role.childRoles, function(j, b){ 
+		    	if(a.id === b.id) {
+		    		availableRole.selected = true;
+		    	}
+		    });
+			};
+		    $scope.availableRoles.push(availableRole);	    
+		});	
+		;
+	
+	$scope.ociavailableRoleFunctions=${availableRoleFunctions};
+	
+	$scope.availableRoleFunctions = []; 
+	if($scope.ociavailableRoleFunctions)
+		$.each($scope.ociavailableRoleFunctions, function(i, a){ 
+			var availableRoleFunction = a;
+			availableRoleFunction.selected = false;
+		    $.each($scope.role.roleFunctions, function(j, b){ 
+		    	if(a.code === b.code) {
+		    		availableRoleFunction.selected = true;
+		    	}
+		    });
+		    $scope.availableRoleFunctions.push(availableRoleFunction);	    
+		});	
+		;
+	
+		$scope.toggleRoleFunction = function(selected,availableRoleFunction) {
+			//alert('toggleRole: '+selected);
+			 
+			if(!selected) {
+				//remove role function
+				if(role.id==null){
+					var index = $scope.role.roleFunctions.indexOf(availableRoleFunction);
+				 	if(index>=0)
+						$scope.role.roleFunctions.splice(index, 1);
+					return;
+				}
+				var uuu = "role/removeRoleFunction.htm?role_id=${param.role_id}";
+				modalService.popupConfirmWinWithCancel("Confirm","You are about to remove the role function "+availableRoleFunction.name+" from the role for "+$scope.role.name+". Do you want to continue?",
+		    			function(){
+								var postData={roleFunction:availableRoleFunction};
+							  	  $.ajax({
+							  		 type : 'POST',
+							  		 url : uuu,
+							  		 dataType: 'json',
+							  		 contentType: 'application/json',
+							  		 data: JSON.stringify(postData),
+							  		 success : function(data){
+							  			$scope.$apply(function(){$scope.role=data.role;}); 
+									 },
+									 error : function(data){
+										 modalService.showFailure("Fail","Error while saving.");
+									 }
+							  	  });
+					
+		    	},
+		    	function(){
+		    		availableRoleFunction.selected=!availableRoleFunction.selected;
+		    	})
+				
+			} else {
+				//add role function
+				if(role.id==null){
+					$scope.role.roleFunctions.push(availableRoleFunction);
+					return;
+				}
+				var uuu = "role/addRoleFunction.htm?role_id=${param.role_id}";
+				modalService.popupConfirmWinWithCancel("Confirm","You are about to add the role function "+availableRoleFunction.name+" to the role for "+$scope.role.name+". Do you want to continue?",
+		    			function(){
+					  var postData={roleFunction:availableRoleFunction};
+				  	  $.ajax({
+				  		 type : 'POST',
+				  		 url : uuu,
+				  		 dataType: 'json',
+				  		 contentType: 'application/json',
+				  		 data: JSON.stringify(postData),
+				  		 success : function(data){
+				  			$scope.$apply(function(){$scope.role=data.role;}); 
+						 },
+						 error : function(data){
+							 modalService.showFailure("Fail","Error while saving.");
+						 }
+				  	  });
+					
+		    	},
+		    	function(){
+		    		availableRoleFunction.selected=!availableRoleFunction.selected;
+		    	})
+				
+			}
+			
+			  
+	};
+	
+	$scope.toggleChildRole = function(selected,availableRole) {
+		//alert('toggleRole: '+selected);
+
+		if(!selected) {
+			//remove role
+			if(role.id==null){
+				var index = $scope.role.childRoles.indexOf(availableRole);
+			 	if(index>=0)
+					$scope.role.childRoles.splice(index, 1);
+				return;
+			}
+			var uuu = "role/removeChildRole.htm?role_id=${param.role_id}";
+			modalService.popupConfirmWinWithCancel("Confirm","You are about to remove the child role "+availableRole.name+" from the role for "+$scope.role.name+". Do you want to continue?",
+	    			function(){
+						var postData={childRole:availableRole};
+					  	  $.ajax({
+					  		 type : 'POST',
+					  		 url : uuu,
+					  		 dataType: 'json',
+					  		 contentType: 'application/json',
+					  		 data: JSON.stringify(postData),
+					  		 success : function(data){
+					  			 console.log('role',data.role);
+					  			 $scope.$apply(function(){$scope.role=data.role;}); 
+							 },
+							 error : function(data){
+								 modalService.showFailure("Fail","Error while saving.");
+							 }
+					  	  });
+				
+	    	},
+	    	function(){
+	    		 availableRole.selected=true;			
+	    	})
+			
+		} else {
+			//add role
+			if(role.id==null){
+				$scope.role.childRoles.push(availableRole);
+				return;
+			}
+			var uuu = "role/addChildRole.htm?role_id=${param.role_id}";
+			modalService.popupConfirmWinWithCancel("Confirm","You are about to add the child role "+availableRole.name+" to the role for "+$scope.role.name+". Do you want to continue?",
+	    			function(){
+				  var postData={childRole:availableRole};
+			  	  $.ajax({
+			  		 type : 'POST',
+			  		 url : uuu,
+			  		 dataType: 'json',
+			  		 contentType: 'application/json',
+			  		 data: JSON.stringify(postData),
+			  		 success : function(data){
+			  			$scope.$apply(function(){$scope.role=data.role;}); 
+					 },
+					 error : function(data){
+						 modalService.showFailure("Fail","Error while saving.");
+					 }
+			  	});
+				
+	    	},
+	    	function(){
+	    		availableRole.selected=false;
+	    	})
+			
+			
+		}
+		
+		  
+	};
+
+	
+	$scope.close = function() {
+		console.log('role', $scope.role);
+		$modalInstance.close({role:$scope.role});
+	};
+	
+}
+
+
+</script>
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/popup_modal_rolefunction.html b/vid/src/main/webapp/WEB-INF/fusion/jsp/popup_modal_rolefunction.html
new file mode 100644
index 00000000..ee0b5121
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/popup_modal_rolefunction.html
@@ -0,0 +1,87 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<script type="text/ng-template" id="edit_role_function_popup.html">
+          <div class="modal__informative font-showcase" style="width:400px;">
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name" style="width: 500px;">{{label}}</h2>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">           	 	
+					<div class="fn-ebz-container" >
+					<label class="fn-ebz-text-label"><sup><b>*</b></sup>Name:</label><br>
+					<input type="text" class="fn-ebz-text" ng-model="editRoleFunction.name"
+						maxlength="30" /> 
+					</div>
+					<br/>
+					<div class="fn-ebz-container" >
+					<label class="fn-ebz-text-label"><sup><b>*</b></sup>Code:</label><br>
+					<input type="text" class="fn-ebz-text" ng-model="editRoleFunction.code" ng-disabled="disableCd"
+						maxlength="30" /> 
+					</div>
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="saveRoleFunction(editRoleFunction);">Save</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="close()">Close</button>
+            </div>
+        </div>
+</script>
+
+<script>
+
+var rolefunctionpopupController =  function ($scope, $modalInstance, message){
+	if(message.availableRoleFunction==null)
+		$scope.label='Add Role Function'
+	else{
+		$scope.label='Edit Role Function'
+		$scope.disableCd=true;
+	}
+	$scope.editRoleFunction = message.availableRoleFunction;
+	
+	$scope.saveRoleFunction = function(availableRoleFunction) {
+		  var uuu = "role_function_list/saveRoleFunction.htm";
+		  var postData={availableRoleFunction: availableRoleFunction};
+	  	  $.ajax({
+	  		 type : 'POST',
+	  		 url : uuu,
+	  		 dataType: 'json',
+	  		 contentType: 'application/json',
+	  		 data: JSON.stringify(postData),
+	  		 success : function(data){
+	  			$scope.$apply(function(){
+	  				//$scope.availableRoleFunctions=[];$scope.$apply();
+	  				$scope.availableRoleFunctions=data.availableRoleFunctions;});  
+	  			//alert("Update Successful.") ;
+	  			console.log($scope.availableRoleFunctions);
+				
+	  			//$scope.editRoleFunction = null;
+	  			$modalInstance.close({availableRoleFunctions:$scope.availableRoleFunctions});
+			 },
+			 error : function(data){
+				 alert("Error while saving.");
+			 }
+	  	  });
+		};
+		
+	$scope.close = function() {
+		$modalInstance.close();
+	};
+}
+
+</script>
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/post_search.jsp b/vid/src/main/webapp/WEB-INF/fusion/jsp/post_search.jsp
new file mode 100644
index 00000000..94d4b0bf
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/post_search.jsp
@@ -0,0 +1,356 @@
+<%--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  --%>
+<%@ page import="java.util.*" %>
+<%@ page import="com.fasterxml.jackson.databind.ObjectMapper" %>
+<%@ page import="org.json.JSONObject" %>
+<%@ taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ taglib prefix="fmt"    uri="http://java.sun.com/jsp/jstl/fmt" %>
+<%@ taglib prefix="fn"     uri="http://java.sun.com/jsp/jstl/functions" %>
+<%@ include file="/WEB-INF/fusion/jsp/popup_modal.html" %>
+<%@ include file="/WEB-INF/fusion/jsp/popup_modal_rolefunction.html" %>
+<%@ include file="/WEB-INF/fusion/jsp/popup_modal_role.html" %>
+<link rel="stylesheet" type="text/css" href="static/fusion/css/jquery-ui.css">
+
+<div ng-controller="postSearchController" >
+
+<h1 class="heading1" style="margin-top:20px;">WEBPHONE Search</h1>
+      <br>
+  		Please enter search criteria below:<br/>
+
+            <div class="fn-ebz-container">
+	          Last Name:<br/>
+	          <input class="fn-ebz-text" type="text"   ng-model="postSearchBean.lastName" value="" size="25">
+            </div>
+          
+            <div class="fn-ebz-container">
+	          First Name:<br/>
+	          <input class="fn-ebz-text" type="text" ng-model="postSearchBean.firstName" value="" size="25">
+            </div>
+         
+            <div class="fn-ebz-container">
+	          UserId:<br/>
+	          <input class="fn-ebz-text" type="text" ng-model="postSearchBean.orgUserId" value="" size="25">
+            </div>
+           
+            <div class="fn-ebz-container">
+	          Manager OrgUserId:<br/>
+	          <input class="fn-ebz-text" type="text" ng-model="postSearchBean.orgManagerUserId" value="" size="25">
+            </div>
+           <br>
+            <div class="fn-ebz-container">
+	          Organization:<br/>
+	          <input class="fn-ebz-text" type="text" ng-model="postSearchBean.orgCode" value="" size="25">
+            </div>
+           
+            <div class="fn-ebz-container">
+	          Email:<br/>
+	          <input class="fn-ebz-text" type="text" ng-model="postSearchBean.email" value="" size="25">
+            </div>
+     <br>
+<!--      Sort By: <br/>
+         	<div class="fn-ebz-container" >
+       
+ 		<div class="fn-ebz-container">	
+			<div class="form-field" att-select="sortByList" ng-model="postSearchBean.sortBy1"></div>
+		</div>
+        </div>
+        
+       
+        
+
+            <div class="fn-ebz-container" >
+           <br/>
+            &nbsp;
+
+		<div class="fn-ebz-container">	
+			<div class="form-field" att-select="sortByList" ng-model="postSearchBean.sortBy2"></div>
+		</div>
+       </div>
+        
+
+            <div class="fn-ebz-container" >
+            <br/> &nbsp;
+
+		<div class="fn-ebz-container">	
+			<div class="form-field" att-select="sortByList" ng-model="postSearchBean.sortBy3"></div>
+		</div>
+        </div> -->
+		<div>
+		 	<input att-button btn-type="primary" size="small" class="button" type="submit" value="Search" ng-click="search(postSearchBean);" />
+		
+		     <input att-button btn-type="primary" size="small" class="button" type="submit" value="Reset"  ng-click="reset();"/>
+		</div>
+		<br>
+		{{noResultsString}}
+      <div ng-if="profileList.length != 0">
+  	    <table att-table table-data="profileList" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+		  <thead att-table-row type="header" >
+		    <tr>
+  			<th att-table-header  width="5%" align="left">No</th>
+  			<th att-table-header  width="30%" key="lastName" align="left">Name</th>
+  			<th att-table-header  width="5%"  key="orgUserId" align="left">OrgUserId</th>
+  			<th att-table-header  width="10%" key="orgCode" align="left">Organization</th>
+  			<th att-table-header  width="20%" align="left">Phone</th>
+  			<th att-table-header  width="20%" key="email" align="left">Email</th>
+  			<th att-table-header  width="10%" align="left">Import?</th>
+  			</tr>
+		  </thead>
+         	
+            <tbody att-table-row type="body" row-repeat="profile in profileList" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->	
+              <tr >
+              	<td att-table-body width="5%" align="left">
+                {{$index + 1}}
+                </td>
+            	<td att-table-body width="30%" align="left">                	
+	              <div ng-if="ngexistingUsers[profile.orgUserId] == null">
+        	          {{profile.lastName}},&nbsp;{{profile.firstName}}
+            	  </div>
+	              <div ng-if="ngexistingUsers[profile.orgUserId] != null">
+    	              <a href="profile.htm?profile_id={{ngexistingUsers[profile.orgUserId]}}" alt="View/Edit Profile">
+                  	  {{profile.lastName}},&nbsp;{{profile.firstName}}
+	                  </a>
+            	   </div>
+               
+                </td>
+            	<td att-table-body width="5%" align="left">
+                {{profile.orgUserId}}
+                </td>
+            	<td att-table-body width="10%" align="left">
+                {{profile.orgCode}}
+                </td>
+            	<td att-table-body width="20%" align="left">
+                {{profile.phone}}
+                </td>
+            	<td att-table-body width="20%" align="left">
+                {{profile.email}}
+                </td>
+                
+            	<td att-table-body width="10%" align="left">
+		            <div ng-if="ngexistingUsers[profile.orgUserId] == null">
+		            	<div ng-click="toggleSelection(profile);">
+		                <input name="selected" type="checkbox" ng-model="profile.selected" att-checkbox/>
+		                </div>
+		             </div>
+		             <div ng-if="ngexistingUsers[profile.orgUserId] != null">
+		                Exists
+		             </div>
+                </td>
+              </tr>
+              </tbody>
+	    </table>
+	    <div class="fn-ebz-container">
+	          Rows Per Page:
+	          <input class="fn-ebz-text" type="text" ng-model="viewPerPage" size="5" style="width: 47px;">
+        </div>
+		<div class="fn-ebz-container">
+	          Current Page:
+	          <input class="fn-ebz-text" type="text" ng-model="currentPage" size="5" style="width: 47px;">
+        </div>
+        <div class="fn-ebz-container">
+	          Total Page(s):
+	          <input class="fn-ebz-text" type="text" ng-model="totalPage" size="5" readonly="true" style="width: 47px;">
+        </div>
+		
+        <div ng-if="profileList.length != 0">
+          <input att-button btn-type="primary" size="small" class="button" type="submit" value="Import" ng-click="process();"/>
+        </div>
+
+      </div>
+
+
+
+
+</div>
+<script>
+	app.controller('postSearchController', function ($scope,modalService){ 
+
+		$scope.viewPerPage = 200;
+		$scope.currentPage = 1;
+		$scope.totalPage;
+		$scope.searchCategory = "";
+		$scope.searchString = "";
+		
+		$scope.noResultsString = "";
+		
+		$scope.postSearchBean=${postSearchBean};
+		$scope.profileList=${profileList};
+		//console.log($scope.postSearchBean);
+		
+		$scope.ngexistingUsers=${existingUsers};
+		console.log($scope.ngexistingUsers);
+		
+		$scope.ocisortByList=${sortByList};
+		$scope.sortByList = [];
+		if($scope.ocisortByList)
+		$.each($scope.ocisortByList, function(i, a){ 
+			var sortBy = {"index":i, "value":a.value, "title":a.label};
+		    $scope.sortByList.push(sortBy);
+		});	
+		;
+	
+		$scope.search = function(postSearchBean) {
+				console.log(postSearchBean);
+				var uuu = "post_search/search";
+				  var postData={postSearchBean:postSearchBean};
+			  	  $.ajax({
+			  		 type : 'POST',
+			  		 url : uuu,
+			  		 dataType: 'json',
+			  		 contentType: 'application/json',
+			  		 data: JSON.stringify(postData),
+			  		 success : function(data){
+			  			$scope.$apply(function(){
+			  				$scope.profileList=data.postSearchBean.searchResult;
+			  				//$scope.postSearchBean={};
+			  				console.log($scope.profileList);
+			  				if($scope.profileList.length == 0)
+			  					$scope.noResultsString = "There is currently no one in WEBPHONE matching your search criteria.";
+			  				else
+			  					$scope.noResultsString = "";
+			  				});  
+					 },
+					 error : function(data){
+						 console.log(data);
+						 modalService.showFailure("Fail","Error while searching: "+ data.responseText);
+					 }
+			  	  });
+			
+		};
+		
+		$scope.reset = function() {
+				$scope.postSearchBean={};
+				$scope.profileList=[];
+				$scope.noResultsString = "";
+				//console.log($scope.postSearchBean);
+		};
+		
+		$scope.process = function() {
+			$scope.prepareProfileSelection();
+			var uuu = "post_search/process";
+			  var postData={postSearchBean:$scope.postSearchBean};
+		  	  $.ajax({
+		  		 type : 'POST',
+		  		 url : uuu,
+		  		 dataType: 'json',
+		  		 contentType: 'application/json',
+		  		 data: JSON.stringify(postData),
+		  		 success : function(data){
+		  			$scope.$apply(function(){
+		  				$scope.profileList=data.postSearchBean.searchResult;
+		  				//$scope.postSearchBean={};
+		  				$scope.ngexistingUsers=data.existingUsers;
+		  				$scope.postSearchBean.selected=null;		  				
+		  				});  
+				 },
+				 error : function(data){
+					 console.log(data);
+					 modalService.showFailure("Fail","Error while searching: "+ data.responseText);
+				 }
+		  	  });
+		
+	};
+	$scope.importProfileList=[];
+	$scope.toggleSelection = function(profile) {
+		if(profile.selected)
+			$scope.importProfileList.push(profile);
+		else{			
+			var index = $scope.importProfileList.indexOf(profile);
+		 	if(index>=0)
+				$scope.importProfileList.splice(index, 1);
+		}
+	};
+	
+	$scope.prepareProfileSelection = function() {
+		if($scope.importProfileList)
+			$.each($scope.importProfileList, function(i, profile){ 
+			    $scope.preparePostSearchBean(profile);
+			});	
+			;
+	}
+	
+	$scope.preparePostSearchBean = function(profile) {
+		//console.log('Importing: '+profile.orgUserId);
+		//console.log('ngexistinguser:'+$scope.ngexistingUsers[profile.orgUserId])
+		if($scope.postSearchBean.selected==null){
+			$scope.postSearchBean.selected=[];
+			$scope.postSearchBean.postOrgUserId=[];
+			$scope.postSearchBean.postHrid=[];
+			$scope.postSearchBean.postFirstName=[];
+			$scope.postSearchBean.postLastName=[];
+			$scope.postSearchBean.postOrgCode=[];
+			$scope.postSearchBean.postPhone=[];
+			$scope.postSearchBean.postEmail=[];
+			$scope.postSearchBean.postAddress1=[];
+			$scope.postSearchBean.postAddress2=[];
+			$scope.postSearchBean.postCity=[];
+			$scope.postSearchBean.postState=[];
+			$scope.postSearchBean.postZipCode=[];
+			$scope.postSearchBean.postLocationClli=[];
+			$scope.postSearchBean.postBusinessCountryCode=[];
+			$scope.postSearchBean.postBusinessCountryName=[];
+			$scope.postSearchBean.postDepartment=[];
+			$scope.postSearchBean.postDepartmentName=[];
+			$scope.postSearchBean.postBusinessUnit=[];
+			$scope.postSearchBean.postBusinessUnitName=[];
+			$scope.postSearchBean.postJobTitle=[];
+			$scope.postSearchBean.postOrgManagerUserId=[];
+			$scope.postSearchBean.postCommandChain=[];
+			$scope.postSearchBean.postCompanyCode=[];
+			$scope.postSearchBean.postCompany=[];
+			$scope.postSearchBean.postCostCenter=[];
+			$scope.postSearchBean.postSiloStatus=[];
+			$scope.postSearchBean.postFinancialLocCode=[];
+		}
+			
+		$scope.postSearchBean.selected.push(profile.orgUserId);	
+		$scope.postSearchBean.postOrgUserId.push(profile.orgUserId);
+		$scope.postSearchBean.postHrid.push(profile.hrid);
+		$scope.postSearchBean.postFirstName.push(profile.firstName);
+		$scope.postSearchBean.postLastName.push(profile.lastName);
+		$scope.postSearchBean.postOrgCode.push(profile.orgCode);
+		$scope.postSearchBean.postPhone.push(profile.phone);
+		$scope.postSearchBean.postEmail.push(profile.email);
+		$scope.postSearchBean.postAddress1.push(profile.address1);
+		$scope.postSearchBean.postAddress2.push(profile.address2);
+		$scope.postSearchBean.postCity.push(profile.city);
+		$scope.postSearchBean.postState.push(profile.state);
+		if(profile.zipCodeSuffix==null)
+			$scope.postSearchBean.postZipCode.push(profile.zipCode);
+		else
+			$scope.postSearchBean.postZipCode.push(profile.zipCode+'-'+profile.zipCodeSuffix);
+		$scope.postSearchBean.postLocationClli.push(profile.locationClli);
+		$scope.postSearchBean.postBusinessCountryCode.push(profile.businessCountryCode);
+		$scope.postSearchBean.postBusinessCountryName.push(profile.businessCountryName);
+		$scope.postSearchBean.postDepartment.push(profile.department);
+		$scope.postSearchBean.postDepartmentName.push(profile.departmentName);
+		$scope.postSearchBean.postBusinessUnit.push(profile.businessUnit);
+		$scope.postSearchBean.postBusinessUnitName.push(profile.businessUnitName);
+		$scope.postSearchBean.postJobTitle.push(profile.jobTitle);
+		$scope.postSearchBean.postOrgManagerUserId.push(profile.orgManagerUserId);
+		$scope.postSearchBean.postCommandChain.push(profile.commandChain);
+		$scope.postSearchBean.postCompanyCode.push(profile.companyCode);
+		$scope.postSearchBean.postCompany.push(profile.company);
+		$scope.postSearchBean.postCostCenter.push(profile.costCenter);
+		$scope.postSearchBean.postSiloStatus.push(profile.siloStatus);
+		$scope.postSearchBean.postFinancialLocCode.push(profile.financialLocCode);
+	};
+		
+	});	
+</script> 
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/profile.jsp b/vid/src/main/webapp/WEB-INF/fusion/jsp/profile.jsp
new file mode 100644
index 00000000..e5349c6a
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/profile.jsp
@@ -0,0 +1,442 @@
+<%--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  --%>
+<%@ page import="org.openecomp.portalsdk.core.domain.User"%>
+<%@ page import="org.openecomp.portalsdk.core.web.support.UserUtils"%>
+
+<%@page import="org.openecomp.portalsdk.core.web.support.ControllerProperties"%>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
+<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
+
+<link rel="stylesheet" type="text/css" href="static/fusion/css/jquery-ui.css">
+<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/fn-ebz.css" >
+<%@ include file="/WEB-INF/fusion/jsp/popup_modal.html" %>
+
+<%@ include file="/WEB-INF/fusion/jsp/include.jsp"%>
+
+<div class="pageTitle">
+	<h3>
+	<c:choose>
+		<c:when test="${!empty profileId}">
+			<h1 class="heading1" style="margin-top:20px;">Profile Edit</h1>
+		</c:when>
+		<c:otherwise>
+			<h1 class="heading1" style="margin-top:20px;">Profile Edit</h1>
+		</c:otherwise>
+	</c:choose>
+	</h3>
+</div>
+
+<div ng-controller="profileController" >
+
+     Please edit the profile details below:&nbsp;<br><br>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>First Name:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.firstName"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>Last Name:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.lastName"
+			maxlength="30" /> 
+	</div>
+     
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">OrgUserId:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.orgUserId"
+			maxlength="30" style="margin-right:0px;"/> 
+	</div>
+
+	<div class="fn-ebz-container" >
+	<label class="fn-ebz-text-label">Manager OrgUserId:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.orgManagerUserId"
+			maxlength="30" style="margin-right:0px;"/> 
+	</div>
+<BR>
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">Login Id:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.loginId"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" style="margin-right:20px">
+		<label class="fn-ebz-text-label">Password:</label><BR>
+		<input type="password" ng-model="profile.loginPwd"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>Phone:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.phone"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+	<label class="fn-ebz-text-label">Fax:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.fax"
+			maxlength="30" /> 
+	</div>
+<BR>
+	<div class="fn-ebz-container" >
+	<label class="fn-ebz-text-label">Cellular:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.cellular"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>Email:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.email"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">Address 1:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.address1"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">Address 2:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.address2"
+			maxlength="30" /> 
+	</div>
+<BR>
+	<div class="fn-ebz-container" >
+	<label class="fn-ebz-text-label">City:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.city"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container">	
+		<label  class="fn-ebz-text-label">State:</label><BR>
+		<div class="form-field" att-select="stateList.options" ng-model="stateList.selected"></div>
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">Zip Code:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.zipCode"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container">	
+		<label  class="fn-ebz-text-label">Country:</label><BR>
+		<div class="form-field" att-select="countries" ng-model="selectedCountry"></div>
+	</div>
+	<BR>
+	<div class="fn-ebz-container">	
+		<label  class="fn-ebz-text-label">Time Zone:</label><BR>
+		<div class="form-field" att-select="timeZones" ng-model="selectedTimeZone"></div>
+	</div>
+	
+	<div align="left" >
+		<button type="submit" ng-click="saveProfile();" att-button
+			btn-type="primary" size="small">Save</button>
+	</div>
+	
+<br>
+	<div class="pageTitle">
+		<label>Roles</label>
+		<a ng-click="addNewRolePopup();" class="icon-add" size="small"></a>
+   
+	</div>
+
+	<table 	att-table table-data="profile.roles" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+<!-- 	<table border="1" class="hovertable_1"> -->
+	     <thead att-table-row type="header">
+  		<tr>
+  			<th att-table-header sortable="false" align="left"  width="90%">Name</th>
+  			<th att-table-header sortable="false"  width="10%">Remove?</th>
+  		</tr>
+  		 </thead>
+  		 <tbody att-table-row type="body" row-repeat="role in profile.roles" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+<!-- 		  <tr ng-repeat="role in profile.roles track by role.id"> -->
+		  <tr>
+		    <td att-table-body width="90%" >{{ role.name }}</td>
+		    <td att-table-body width="10%">
+		    	<a ng-click="removeRole(role);" ><img src="static/fusion/images/deleteicon.gif"></a>
+		     </td>
+		  </tr>
+		 </tbody>
+	</table>
+	
+	<div id="dialog" style="overflow:scroll" class="modal__informative font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name" style="color:#157BB2">Select Roles</h2>
+            </div>
+            <button align="right" class="button button--primary button--small" herf="javascript:void(0)" ng-click="close()">Close</button>
+            <div class="divider-container"><hr></div>  
+            <div class="modal__content">           	 	
+				<table table-data="availableRoles" att-table  >
+			        <thead att-table-row type="header">
+				  		<tr>
+				  			<th att-table-header sortable="false" width="10%"> </th>
+				  			<th att-table-header sortable="false" width="90%">Role</th>
+				  		</tr>
+			  		</thead>
+				  
+				    <tbody att-table-row type="body" row-repeat="availableRole in availableRoles" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+				  	  <tr>
+					  	<td att-table-body width="10%">
+					  		<div ng-click="toggleRole(availableRole.selected,availableRole);">
+					    	<input type="checkbox" ng-model="availableRole.selected" att-toggle-main>
+					    	</div>
+					    </td>
+					    <td att-table-body width="90%">{{ availableRole.name }}</td>
+				  	  </tr>
+				    </tbody>
+		        </table>
+            </div>
+    </div>
+	
+</div>
+
+
+
+<script>
+app.controller('profileController', function ($scope,modalService){
+
+	$scope.profile=${model.profile};
+	$scope.profileId = $scope.profile.id;
+	$scope.orgUserId=$scope.profile.orgUserId;
+	$scope.orgManagerUserId=$scope.profile.orgManagerUserId;
+	
+	$scope.viewPerPage = 2;
+	$scope.currentPage = 1;
+	$scope.totalPage;
+	$scope.searchCategory = "";
+	$scope.searchString = "";
+	
+	$( "#dialog" ).hide();
+	
+	$scope.ociavailableRoles=${model.availableRoles};
+	//modalService.showFailure('Error','') ; 
+	$scope.availableRoles = []; 
+	if($scope.ociavailableRoles)
+		$.each($scope.ociavailableRoles, function(i, a){ 
+			var availableRole = a;
+			availableRole.selected = false;
+		    $.each($scope.profile.roles, function(j, b){ 
+		    	if(a.id === b.id) {
+		    		availableRole.selected = true;
+		    	} 
+		    });
+		    $scope.availableRoles.push(availableRole);	    
+		});	
+		;
+	
+	$scope.ociTimeZones = ${model.timeZones};
+	$scope.timeZones = []; 
+	$scope.selectedTimeZone = null;
+	if($scope.ociTimeZones){
+		$.each($scope.ociTimeZones, function(i, a){ 
+			var timeZone = {"index":i, "value":a.value, "title":a.label};
+		    $scope.timeZones.push(timeZone);
+		    if($scope.profile.timeZoneId !== null && a.value === $scope.profile.timeZoneId.toString()){
+		    	$scope.selectedTimeZone = timeZone;
+			}	    
+		});	
+	};
+	
+	$scope.ociCountries = ${model.countries};
+	$scope.countries = []; 
+	$scope.selectedCountry = null;
+	//alert($scope.ociCountries[0].label);
+	if($scope.ociCountries)
+	$.each($scope.ociCountries, function(i, a){ 
+		var country = {"index":i, "value":a.value, "title":a.label};
+	    $scope.countries.push(country);
+	    if(a.value === $scope.profile.country){
+	    	$scope.selectedCountry = country;
+		}	    
+	});	
+	;
+	
+	var stateList=${model.stateList};
+	//alert(stateList[0].label);
+	stateList = stateList== null? []: stateList;
+	var selectedState= $scope.profile.state ? $scope.profile.state:"";
+	$scope.stateList = initDropdownWithLookUp(stateList,selectedState );
+	
+	$scope.saveProfile = function() {
+		  var uuu = "profile/saveProfile?profile_id="+$scope.profileId;
+		  var postData={profile: $scope.profile,
+				        selectedCountry:$scope.selectedCountry!=null?$scope.selectedCountry.value:"",
+				        selectedState:$scope.stateList.selected!=null?$scope.stateList.selected.value:"",
+				        selectedTimeZone:$scope.selectedTimeZone!=null?$scope.selectedTimeZone.value:""
+		               };
+	  	  $.ajax({
+	  		 type : 'POST',
+	  		 url : uuu,
+	  		 dataType: 'json',
+	  		 contentType: 'application/json',
+	  		 data: JSON.stringify(postData),
+	  		 success : function(data){
+	  			modalService.showSuccess("Success","Update Successful.");
+			 },
+			 error : function(data){
+				modalService.showFailure("Fail","Error while saving.");
+			 }
+	  	  });
+	};
+		
+	$scope.addNewRolePopup = function(role) {
+		$( "#dialog" ).dialog({
+		      modal: true,
+		      width: 500,
+		      height:600
+		    });
+		$(".ui-dialog-titlebar").hide();     
+	};
+		
+		$scope.toggleRole = function(selected,availableRole) {
+				//alert('toggleRole: '+selected);
+				if(!selected) {
+					//remove role
+					var uuu = "profile/removeRole?profile_id=" + $scope.profileId;
+					modalService.popupConfirmWinWithCancel("Confirm","You are about to remove the role "+availableRole.name+" from the profile for "+$scope.profile.firstName+" "+$scope.profile.lastName+". Do you want to continue?",
+			    			function(){
+									var postData={role:availableRole};
+								  	  $.ajax({
+								  		 type : 'POST',
+								  		 url : uuu,
+								  		 dataType: 'json',
+								  		 contentType: 'application/json',
+								  		 data: JSON.stringify(postData),
+								  		 success : function(data){
+								  			$scope.$apply(function(){$scope.profile=data;}); 
+										 },
+										 error : function(data){
+											 modalService.showFailure("Fail","Error while saving.");
+										 }
+								  	  });
+					},
+				    function(){
+				          availableRole.selected=!availableRole.selected;
+					});
+				
+				} else {
+					//add role
+					var uuu = "profile/addNewRole?profile_id=" + $scope.profileId;
+					modalService.popupConfirmWinWithCancel("Confirm","You are about to add the role "+availableRole.name+" from the profile for "+$scope.profile.firstName+" "+$scope.profile.lastName+". Do you want to continue?",
+			    			function(){
+									var postData={role:availableRole};
+								  	  $.ajax({
+								  		 type : 'POST',
+								  		 url : uuu,
+								  		 dataType: 'json',
+								  		 contentType: 'application/json',
+								  		 data: JSON.stringify(postData),
+								  		 success : function(data){
+								  			$scope.$apply(function(){$scope.profile=data;}); 
+										 },
+										 error : function(data){
+											 modalService.showFailure("Fail","Error while saving.");
+										 }
+								  	  });
+						
+			    	},function(){
+				          availableRole.selected=!availableRole.selected;
+			    	})
+				}
+				
+				  
+		};
+
+		$scope.removeRole = function(role) {
+			modalService.popupConfirmWin("Confirm","You are about to remove the role "+role.name+" from the profile for "+$scope.profile.firstName+" "+$scope.profile.lastName+". Do you want to continue?",
+	    			function(){
+							  var uuu = "profile/removeRole?profile_id=" + $scope.profileId;
+							  var postData={role:role};
+						  	  $.ajax({
+						  		 type : 'POST',
+						  		 url : uuu,
+						  		 dataType: 'json',
+						  		 contentType: 'application/json',
+						  		 data: JSON.stringify(postData),
+						  		 success : function(data){
+						  			$scope.$apply(function(){
+						  				$scope.profile=data;
+						  				$.each($scope.availableRoles, function(k, c){ 
+						  			    	if(c.id === role.id) {
+						  			    		c.selected = false;
+						  			    	}
+						  			    });
+						  			});
+						  			
+								 },
+								 error : function(data){
+									 modalService.showFailure("Fail","Error while saving.");
+								 }
+						  	  });
+				
+	    	})
+			
+		};
+		
+		function initDropdownWithLookUp(arr,selectedValue){
+			var dropdownArray=[];
+			var selected = null;
+			if(arr){
+				for(var i = 0,l = arr.length; i < l; i++) {
+					var option = { 
+					        "index" : i ,
+					        "value" : arr[i].value,
+					        "title" : arr[i].label
+					    };
+					dropdownArray.push(option);
+					if(arr[i].value === selectedValue){
+						selected = option;
+					}
+				}
+			}
+			var dropDown={};
+			dropDown.options = dropdownArray;
+			dropDown.selected = selected;
+			return dropDown;
+		};
+		
+		$scope.doRolePopup = function() {	
+			 var modalInstance = $modal.open({
+			    templateUrl: 'roles_popup.html',
+			    controller: 'rolepopupController',
+			    resolve: {
+			    	 message: function () {
+			    		 var message ={
+			    				 availableRoles: $scope.availableRoles
+		        		  };
+			          return message;
+			        }
+			      }
+			  });   
+			 	modalInstance.result.then(function (opts) {
+					if(opts!=null){
+						$scope.profile=opts.profile;
+					}		
+	           });
+		} 
+		
+		$scope.close = function(){
+			$('#dialog').dialog('close');
+		}
+	
+
+});
+</script>
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/profile_search.jsp b/vid/src/main/webapp/WEB-INF/fusion/jsp/profile_search.jsp
new file mode 100644
index 00000000..21e274f7
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/profile_search.jsp
@@ -0,0 +1,104 @@
+<%--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  --%>
+<%@ include file="/WEB-INF/fusion/jsp/popup_modal.html" %>
+<div ng-controller="profileSearchController">
+	<div>
+		<h1 class="heading1" style="margin-top:20px;">Profile Search</h1>
+		<div style="margin-top:30px">
+			<table att-table table-data="tableData" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+
+			    <thead  att-table-row type="header">
+					<tr>
+						<th att-table-header key="id">User ID</th>
+			            <th att-table-header key="last_name">Last Name</th>        
+			            <th att-table-header key="first_name">First Name</th>    
+			            <th att-table-header key="email">Email</th>
+			            <th att-table-header key="orgUserId">OrgUserId</th>        
+			            <th att-table-header key="org_manager_userid">Manager OrgUserId</th> 
+			            <th att-table-header >Edit</th>
+			            <th att-table-header key="active">Active?</th>         
+			        </tr>
+			    </thead>
+			    <tbody att-table-row type="body" row-repeat="rowData in tableData">
+			        <tr>
+		            	<td att-table-body >{{rowData.id}}</td>
+		            	<td att-table-body >{{rowData.lastName}}</td>
+		            	<td att-table-body >{{rowData.firstName}}</td>
+		            	<td att-table-body >{{rowData.email}}</td>
+		            	<td att-table-body >{{rowData.orgUserId}}</td>
+		            	<td att-table-body >{{rowData.managerId}}</td>
+		            	<td att-table-body ><a href="" ng-click="editRow(rowData.id)" class="icon-edit" style="color: #888;font-size:20px;"></a></td>
+		        		<td att-table-body >
+		        		   <div ng-click="toggleProfileActive(rowData)">
+		        		     <input type="checkbox"  ng-model="rowData.active" att-toggle-main>
+		        		   </div>
+		        	   </td>
+			        </tr>     
+			    </tbody>	  
+			</table>
+		</div>
+	</div>	
+	<div class="fn-ebz-container">
+	          Rows Per Page:
+	          <input class="fn-ebz-text" type="text" ng-model="viewPerPage" size="5" style="width: 47px;">
+    </div>
+	<div class="fn-ebz-container">
+	          Current Page:
+	          <input class="fn-ebz-text" type="text" ng-model="currentPage" size="5" style="width: 47px;">
+    </div>
+    <div class="fn-ebz-container">
+	          Total Page(s):
+	          <input class="fn-ebz-text" type="text" ng-model="totalPage" size="5" readonly="true" style="width: 47px;">
+    </div>
+</div>
+	
+<script>
+app.controller("profileSearchController", function ($scope,$http,modalService, $modal) { 
+	// Table Data
+	$scope.tableData=${model.profileList};
+	$scope.viewPerPage = 20;
+    $scope.scrollViewsPerPage = 2;
+    $scope.currentPage = 1;
+    $scope.totalPage;
+    $scope.searchCategory = "";
+    $scope.searchString = "";
+   // modalService.showSuccess('','Modal Sample') ;
+	for(x in $scope.tableData){
+		if($scope.tableData[x].active_yn=='Y')
+			$scope.tableData[x].active_yn=true;
+		else
+			$scope.tableData[x].active_yn=false;
+	}
+    $scope.editRow = function(profileId){
+        window.location = 'profile?profile_id=' + profileId;
+    }
+   
+    $scope.toggleProfileActive = function(rowData) {
+    	modalService.popupConfirmWinWithCancel("Confirm","You are about to change user's active status. Do you want to continue?",
+    			function(){ 
+    		        $http.get("profile/toggleProfileActive?profile_id="+rowData.id).success(function(){});
+    	},
+    	function(){
+    		rowData.active=!rowData.active;
+    	})
+    };
+
+});
+</script>
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/role.jsp b/vid/src/main/webapp/WEB-INF/fusion/jsp/role.jsp
new file mode 100644
index 00000000..9e944aa4
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/role.jsp
@@ -0,0 +1,286 @@
+<%--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  --%>
+<%@ taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ taglib prefix="fmt"    uri="http://java.sun.com/jsp/jstl/fmt" %>
+<%@ taglib prefix="fn"     uri="http://java.sun.com/jsp/jstl/functions" %>
+
+<%@ include file="/WEB-INF/fusion/jsp/popup_modal.html" %>
+<%@ include file="/WEB-INF/fusion/jsp/popup_modal_rolefunction.html" %>
+<%@ include file="/WEB-INF/fusion/jsp/popup_modal_role.html" %>
+<style type="text/css">
+    .bc-style{
+    	margin: 20px;
+    	align: left;
+    }
+</style>
+<div class="bc-style">
+    <ul class="breadcrumb" >
+        <li><a href="welcome">Home</a></li>
+        <li><a href="role_list">Roles</a></li>
+        <li class="active">Role</li>
+    </ul>
+</div>
+<div class="pageTitle">
+<h3>
+	<c:choose>
+		<c:when test="${!empty param.role_id}">
+			<h1 class="heading1" style="margin-top:20px;">Role Edit</h1>
+		</c:when>
+		<c:otherwise>
+			<h1 class="heading1" style="margin-top:20px;">Role Create</h1>
+		</c:otherwise>
+	</c:choose>
+	</h3>
+</div>
+
+<div ng-controller="roleController" >
+
+	<br>
+     Please edit the role details below:&nbsp;<br>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>Name:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="role.name"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">Priority:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="role.priority"
+			maxlength="30" /> 
+	</div>
+	
+	<div align="left" >
+		<button type="submit" ng-click="saveRole();" att-button
+			btn-type="primary" size="small">Save</button>
+	</div>
+	
+	<br>
+	<div class="pageTitle">
+		<label>Role Functions</label>
+		<a ng-click="addNewRoleFunctionModalPopup();" class="icon-add" size="small"></a>
+	</div>
+
+	<table table-data="role.roleFunctions" att-table >
+	     <thead att-table-row type="header">
+  		<tr>
+  			<th att-table-header sortable="false" align="left"  width="90%">Name</th>
+  			<th att-table-header sortable="false"  width="10%">Remove?</th>
+  		</tr>
+  		 </thead>
+  		 <tbody att-table-row type="body" row-repeat="roleFunction in role.roleFunctions" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+		  <tr>
+		    <td att-table-body width="90%" >{{ roleFunction.name }}</td>
+		    <td att-table-body width="10%">
+		    	<div ng-click="removeRoleFunction(roleFunction);" style="font-size:20px;"><a href="javascript:void(0)" class="icon-trash"></a></div>
+		     </td>
+		  </tr>
+		 </tbody>
+	</table>
+	<a href="role_function_list.htm">Manage Role Functions</a><br><br>
+	
+	<div class="pageTitle">
+		<label>Child Roles</label>
+		<a ng-click="addNewChildRoleModalPopup();" class="icon-add" size="small"></a>
+	</div>
+	
+	<table table-data="role.childRoles" att-table >
+	     <thead att-table-row type="header">
+  		<tr>
+  			<th att-table-header sortable="false" align="left"  width="90%">Name</th>
+  			<th att-table-header sortable="false"  width="10%">Remove?</th>
+  		</tr>
+  		 </thead>
+  		 <tbody att-table-row type="body" row-repeat="role in role.childRoles" style="max-height: 980px;" >
+		  <tr>
+		    <td att-table-body width="90%" >{{ role.name }}</td>
+		    <td att-table-body width="10%">
+		    	<div ng-click="removeChildRole(role);" style="font-size:20px;"><a href="javascript:void(0)" class="icon-trash"></a></div>
+		     </td>
+		  </tr>
+		 </tbody>
+	</table>
+	
+	<div id="dialogChildRole" title="Select Child Roles">
+	  <table table-data="availableRoles" att-table>
+	  	<thead att-table-row type="header">
+	  		<tr>
+	  			<th att-table-header sortable="false" width="10%"> </th>
+	  			<th att-table-header sortable="false" width="90%">Role</th>
+	  		</tr>
+	  		</thead>
+	  		<tbody att-table-row type="body" row-repeat="availableRole in availableRoles" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+		  	<tr>
+		  	<td att-table-body width="10%">
+		  		<div ng-click="toggleChildRole(availableRole.selected,availableRole);">
+		    	<input type="checkbox" ng-model="availableRole.selected" att-toggle-main>
+		    	</div>
+		    </td>
+		    <td att-table-body width="90%">{{ availableRole.name }}</td>
+		    
+		  </tr>
+		  </tbody>
+		</table>
+	</div>
+</div>
+
+
+
+<script>
+app.controller('roleController', function ($scope, modalService, $modal){
+	$scope.role=${role};
+	console.log($scope.role.roleFunctions);
+		
+	$( "#dialogRoleFunction" ).hide();
+	$( "#dialogChildRole" ).hide();
+	
+	$scope.ociavailableRoleFunctions=${availableRoleFunctions};
+	
+	$scope.availableRoleFunctions = []; 
+	if($scope.ociavailableRoleFunctions)
+		$.each($scope.ociavailableRoleFunctions, function(i, a){ 
+			var availableRoleFunction = a;
+			availableRoleFunction.selected = false;
+		    $.each($scope.role.roleFunctions, function(j, b){ 
+		    	if(a.code === b.code) {
+		    		availableRoleFunction.selected = true;
+		    	}
+		    });
+		    $scope.availableRoleFunctions.push(availableRoleFunction);	    
+		});	
+		;
+
+		$scope.saveRole = function() {
+			  var uuu = "role/saveRole.htm?role_id=${param.role_id}";
+			  var postData={role: $scope.role, childRoles: $scope.role.childRoles, roleFunctions : $scope.role.roleFunctions};
+		  	  $.ajax({
+		  		 type : 'POST',
+		  		 url : uuu,
+		  		 dataType: 'json',
+		  		 contentType: 'application/json',
+		  		 data: JSON.stringify(postData),
+		  		 success : function(data){
+		  			 modalService.showSuccess("Success","Update Successful.");
+				 },
+				 error : function(data){
+					 console.log(data);
+					 modalService.showFailure("Fail","Error while saving.");
+				 }
+		  	  });
+			};
+		
+		$scope.addNewRoleFunctionModalPopup = function() {
+			var modalInstance = $modal.open({
+			    templateUrl: 'role_functions_popup.html',
+			    controller: 'rolepopupController',
+			    backdrop: 'static',
+			    resolve: {
+			    	role: function () {
+			          return $scope.role;
+			        }					
+			      }
+			  }); 
+			modalInstance.result.then(function(response){
+	            console.log('response', response);
+	            $scope.role=response.role;
+	        });
+		};
+		
+		$scope.addNewChildRoleModalPopup = function() {
+			var modalInstance = $modal.open({
+			    templateUrl: 'child_roles_popup.html',
+			    controller: 'rolepopupController',
+			    backdrop: 'static',
+			    resolve: {
+			    	role: function () {
+			          return $scope.role;
+			        }					
+			      }
+			  }); 
+			modalInstance.result.then(function(response){
+	            console.log('response', response);
+	            $scope.role=response.role;
+	        });
+		};
+		
+		
+
+		$scope.removeRoleFunction = function(roleFunction) {
+			modalService.popupConfirmWin("Confirm","You are about to remove the role function "+roleFunction.name+" from the role for "+$scope.role.name+". Do you want to continue?",
+	    			function(){
+				          var uuu = "role/removeRoleFunction.htm?role_id=${param.role_id}";
+						  var postData={roleFunction:roleFunction};
+					  	  $.ajax({
+					  		 type : 'POST',
+					  		 url : uuu,
+					  		 dataType: 'json',
+					  		 contentType: 'application/json',
+					  		 data: JSON.stringify(postData),
+					  		 success : function(data){
+					  			$scope.$apply(function(){
+					  				$scope.role=data.role;
+					  				$.each($scope.availableRoleFunctions, function(k, c){ 
+					  			    	if(c.code === roleFunction.code) {
+					  			    		c.selected = false;
+					  			    	}
+					  			    });
+					  			});
+					  			
+							 },
+							 error : function(data){
+								 modalService.showFailure("Fail","Error while saving.");
+							 }
+					  	  });
+				
+	    	})
+			
+		};
+		
+		$scope.removeChildRole = function(childRole) {
+			modalService.popupConfirmWin("Confirm","You are about to remove the child role "+childRole.name+" from the role for "+$scope.role.name+". Do you want to continue?",
+	    			function(){
+				      var uuu = "role/removeChildRole.htm?role_id=${param.role_id}";
+					  var postData={childRole:childRole};
+				  	  $.ajax({
+				  		 type : 'POST',
+				  		 url : uuu,
+				  		 dataType: 'json',
+				  		 contentType: 'application/json',
+				  		 data: JSON.stringify(postData),
+				  		 success : function(data){
+				  			$scope.$apply(function(){
+				  				$scope.role=data.role;
+				  				$.each($scope.availableRoles, function(k, c){ 
+				  			    	if(c.id === childRole.id) {
+				  			    		c.selected = false;
+				  			    	}
+				  			    });
+				  			});
+				  			
+						 },
+						 error : function(data){
+							 modalService.showFailure("Fail","Error while saving.");
+						 }
+				  	  });
+				
+	    	})
+		};
+});
+</script>
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/role_function_list.jsp b/vid/src/main/webapp/WEB-INF/fusion/jsp/role_function_list.jsp
new file mode 100644
index 00000000..d34a1fbf
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/role_function_list.jsp
@@ -0,0 +1,213 @@
+<%--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  --%>
+
+<%-- <%@ include file="/WEB-INF/fusion/jsp/include.jsp" %> --%>
+      
+<%@ taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ taglib prefix="fmt"    uri="http://java.sun.com/jsp/jstl/fmt" %>
+<%@ taglib prefix="fn"     uri="http://java.sun.com/jsp/jstl/functions" %>
+
+<%@ include file="/WEB-INF/fusion/jsp/popup_modal_rolefunction.html" %>
+<%@ include file="/WEB-INF/fusion/jsp/popup_modal.html" %>
+<div ng-controller="roleFunctionListController" > 	
+	<div class="pageTitle">
+
+	        <h1 class="heading1" style="margin-top:20px;">Role Functions</h1>
+	        
+	        <a ng-click="addNewRoleFunctionModalPopup();" class="icon-add" size="small" ></a>
+	 <br><br>
+	        
+	</div>
+	 
+	<br>
+	Click on the edit icon to update a role function, the plus icon to add additional role functions, or the delete icon to remove them.
+	<br>
+	<div id="rolesTable" title="Role Functions">
+	  <table att-table table-data="availableRoleFunctions" current-page="1">
+	  	<thead att-table-row type="header">
+	  		<tr>
+	  			<th att-table-header width="70%">Name</th>
+	  			<th att-table-header width="10%">Code</th>
+	  			<th att-table-header width="10%">Edit?</th>
+	  			<th att-table-header width="10%">Delete?</th>
+	  		</tr>
+	  	</thead>
+	  	<tbody att-table-row type="body" row-repeat="availableRoleFunction in availableRoleFunctions" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+		  <tr>
+		    <td att-table-body width="70%">{{ availableRoleFunction.name }}</td>
+		    <td att-table-body width="10%">{{ availableRoleFunction.code }}</td>
+		    <td att-table-body width="10%">
+		    <!-- <a ng-click="editRoleFunctionPopup(availableRoleFunction);" >
+		    <img src="static/fusion/images/editicon.gif">
+		    </a> -->
+		    <div ng-click="editRoleFunctionModalPopup(availableRoleFunction);" style="font-size:20px;"><a href="javascript:void(0)" class="icon-edit"></a></div>
+		    </td>
+		     <td att-table-body width="10%">
+		    	<!-- <a ng-click="removeRole(availableRoleFunction);" ><img src="static/fusion/images/deleteicon.gif"></a> -->
+		    	<div ng-click="removeRole(availableRoleFunction);" style="font-size:20px;"><a href="javascript:void(0)" class="icon-trash"></a></div>
+		     </td>
+		  </tr>
+		</tbody>
+		</table>
+	</div>
+	
+<!-- 	<div align="left" style="marin-bottom: 50px;"> -->
+<!-- 		<button type="submit" onClick="window.location='role_function.htm';" att-button -->
+<!-- 			btn-type="primary" size="small">Create</button> -->
+<!-- 	</div> -->
+	
+	<div id="dialog" title="Add Role Function">
+	   	
+	   	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>Name:</label><br>
+		<input type="text" class="fn-ebz-text" ng-model="editRoleFunction.name"
+			maxlength="30" /> 
+		</div>
+	   	<br/>
+	   	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>Code:</label><br>
+		<input type="text" class="fn-ebz-text" ng-model="editRoleFunction.code" ng-disabled="editRoleFunction.code!=null"
+			maxlength="30" /> 
+		</div>
+		<br/>
+		<button type="submit" ng-click="saveRoleFunction(editRoleFunction);" att-button
+			btn-type="primary" size="small">Save</button>
+		
+	</div>
+	
+</div>
+
+
+
+
+<script>
+app.controller('roleFunctionListController', function ($scope, modalService, $modal){
+	$( "#dialog" ).hide();
+	$scope.availableRoleFunctions=${availableRoleFunctions};
+	
+	
+	$scope.editRoleFunction = null;
+	var dialog = null;
+	$scope.editRoleFunctionPopup = function(availableRoleFunction) {
+		$scope.editRoleFunction = availableRoleFunction;
+		$( "#dialog" ).dialog({
+		      modal: true
+	    });
+	};
+	
+	$scope.editRoleFunctionModalPopup = function(availableRoleFunction) {
+		$scope.editRoleFunction = availableRoleFunction;
+		var modalInstance = $modal.open({
+		    templateUrl: 'edit_role_function_popup.html',
+		    controller: 'rolefunctionpopupController',
+		    resolve: {
+		    	message: function () {
+		    		var message = {
+		    				availableRoleFunction: $scope.editRoleFunction
+                           	};
+		          return message;
+		        }					
+		      }
+		  }); 
+		modalInstance.result.then(function(response){
+            console.log('response', response);
+            $scope.availableRoleFunctions=response.availableRoleFunctions;
+        });
+	};
+	
+	$scope.addNewRoleFunctionModalPopup = function(availableRoleFunction) {
+		$scope.editRoleFunction = null;
+		var modalInstance = $modal.open({
+		    templateUrl: 'edit_role_function_popup.html',
+		    controller: 'rolefunctionpopupController',
+		    resolve: {
+		    	message: function () {
+		    		var message = {
+		    				availableRoleFunction: $scope.editRoleFunction
+                           	};
+		          return message;
+		        }					
+		      }
+		  }); 
+		modalInstance.result.then(function(response){
+            console.log('response', response);
+            $scope.availableRoleFunctions=response.availableRoleFunctions;
+        });
+	};
+	
+	$scope.addNewRoleFunctionPopup = function() {
+		$scope.editRoleFunction = null;
+		$( "#dialog" ).dialog({
+		      modal: true
+	    });
+	};
+	
+	$scope.saveRoleFunction = function(availableRoleFunction) {
+		  var uuu = "role_function_list/saveRoleFunction.htm";
+		  var postData={availableRoleFunction: availableRoleFunction};
+	  	  $.ajax({
+	  		 type : 'POST',
+	  		 url : uuu,
+	  		 dataType: 'json',
+	  		 contentType: 'application/json',
+	  		 data: JSON.stringify(postData),
+	  		 success : function(data){
+	  			$scope.$apply(function(){
+	  				$scope.availableRoleFunctions=[];$scope.$apply();
+	  				$scope.availableRoleFunctions=data.availableRoleFunctions;});  
+	  			//alert("Update Successful.") ;
+	  			console.log($scope.availableRoleFunctions);
+  				
+	  			$scope.editRoleFunction = null;
+	  			$( "#dialog" ).dialog("close");
+			 },
+			 error : function(data){
+				 alert("Error while saving.");
+			 }
+	  	  });
+		};
+	
+		
+		$scope.removeRole = function(availableRoleFunction) {
+			modalService.popupConfirmWin("Confirm","You are about to delete the role function "+availableRoleFunction.name+". Do you want to continue?",
+	    			function(){
+							var uuu = "role_function_list/removeRoleFunction.htm";
+							  var postData={availableRoleFunction: availableRoleFunction};
+						  	  $.ajax({
+						  		 type : 'POST',
+						  		 url : uuu,
+						  		 dataType: 'json',
+						  		 contentType: 'application/json',
+						  		 data: JSON.stringify(postData),
+						  		 success : function(data){
+						  			$scope.$apply(function(){$scope.availableRoleFunctions=data.availableRoleFunctions;});  
+								 },
+								 error : function(data){
+									 console.log(data);
+									 modalService.showFailure("Fail","Error while deleting: "+ data.responseText);
+								 }
+						  	  });
+				
+	    	})
+		};
+		
+
+});
+</script>
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/role_list.jsp b/vid/src/main/webapp/WEB-INF/fusion/jsp/role_list.jsp
new file mode 100644
index 00000000..37919c8e
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/role_list.jsp
@@ -0,0 +1,139 @@
+<%--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  --%>
+
+<%-- <%@ include file="/WEB-INF/fusion/jsp/include.jsp" %> --%>
+
+<%@ taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ taglib prefix="fmt"    uri="http://java.sun.com/jsp/jstl/fmt" %>
+<%@ taglib prefix="fn"     uri="http://java.sun.com/jsp/jstl/functions" %>
+<%@ include file="/WEB-INF/fusion/jsp/popup_modal.html" %>
+
+<div class="pageTitle">
+	<h1 class="heading1" style="margin-top:20px;">Roles</h1>
+</div>
+<br>
+Click on a Role to view its details.
+     
+<div ng-controller="roleListController" > 	
+	<div id="dialog" title="Roles">
+	  <table att-table table-data="availableRoles" current-page="1">
+	  	<thead att-table-row type="header">
+	  		<tr>
+	  			<th att-table-header width="70%">Name</th>
+	  			<th att-table-header width="10%">Priority</th>
+	  			<th att-table-header width="10%">Active?</th>
+	  			<th att-table-header width="10%">Delete?</th>
+	  		</tr>
+	  	</thead>
+	  	<tbody att-table-row type="body" row-repeat="availableRole in availableRoles" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+<!-- 		  <tr ng-repeat="availableRole in availableRoles track by availableRole.id">		  	 -->
+		  <tr>
+		    <td width="70%"><a href="role.htm?role_id={{availableRole.id}}">{{ availableRole.name }}</a></td>
+		    <td width="10%">{{ availableRole.priority }}</td>
+		    <td width="10%">
+		    	<div ng-click="toggleRole(availableRole.active,availableRole);">
+		    	<input type="checkbox" ng-model="availableRole.active" att-toggle-main>
+		    	</div>
+		    </td>
+		     <td att-table-body width="10%">
+		    	<div ng-click="removeRole(availableRole);" style="font-size:20px;"><a href="javascript:void(0)" class="icon-trash"></a></div>
+		     </td>
+		  </tr>
+		</tbody>
+		</table>
+	</div>
+	
+	<div align="left" style="marin-bottom: 50px;">
+		<button type="submit" onClick="window.location='role.htm';" att-button
+			btn-type="primary" size="small">Create</button>
+	</div>
+	
+</div>
+
+
+
+
+<script>
+app.controller('roleListController', function ($scope,modalService){
+	
+	$scope.availableRoles=${availableRoles};
+	//console.log($scope.availableRoles);
+		$scope.toggleRole = function(selected,availableRole) {
+				//alert('toggleRole: '+selected);
+				var toggleType = null;
+				if(selected) {
+					toggleType = "activate";
+				} else {
+					toggleType = "inactivate";
+				}
+				
+				modalService.popupConfirmWinWithCancel("Confirm","You are about to "+toggleType+" the test role "+availableRole.name+". Do you want to continue?",
+		    			function(){
+			                    var uuu = "role_list/toggleRole";
+								
+								var postData={role:availableRole};
+							  	  $.ajax({
+							  		 type : 'POST',
+							  		 url : uuu,
+							  		 dataType: 'json',
+							  		 contentType: 'application/json',
+							  		 data: JSON.stringify(postData),
+							  		 success : function(data){
+							  			console.log(data);
+							  			$scope.$apply(function(){$scope.availableRoles=data.availableRoles;}); 
+							  			console.log($scope.availableRoles);
+									 },
+									 error : function(data){
+										 console.log(data);
+										 modalService.showFailure("Fail","Error while saving.");
+									 }
+							  	  });
+					
+		    	},
+		    	function(){
+		    		availableRole.active=!availableRole.active;
+		    	})
+				  
+		};
+
+		$scope.removeRole = function(role) {
+			modalService.popupConfirmWin("Confirm","You are about to delete the role "+role.name+". Do you want to continue?",
+	    			function(){
+							var uuu = "role_list/removeRole";
+							  var postData={role:role};
+						  	  $.ajax({
+						  		 type : 'POST',
+						  		 url : uuu,
+						  		 dataType: 'json',
+						  		 contentType: 'application/json',
+						  		 data: JSON.stringify(postData),
+						  		 success : function(data){
+						  			$scope.$apply(function(){$scope.availableRoles=data.availableRoles;});  
+								 },
+								 error : function(data){
+									 console.log(data);
+									 modalService.showFailure("Fail","Error while deleting: "+ data.responseText);
+								 }
+						  	  });
+				
+	    	})
+		};
+});
+</script>
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/sequence/details.jsp b/vid/src/main/webapp/WEB-INF/fusion/jsp/sequence/details.jsp
new file mode 100644
index 00000000..eacdfbe0
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/sequence/details.jsp
@@ -0,0 +1 @@
+<iframe style="border:none" src="app/fusion/sequence/view-models/details.html" height="700" width="1300"></iframe> 
\ No newline at end of file
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/usage_list.jsp b/vid/src/main/webapp/WEB-INF/fusion/jsp/usage_list.jsp
new file mode 100644
index 00000000..4e45ffb3
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/usage_list.jsp
@@ -0,0 +1,87 @@
+<%--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  --%>
+
+<%-- <%@ include file="/WEB-INF/fusion/jsp/include.jsp" %> --%>
+<%@ taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ taglib prefix="fmt"    uri="http://java.sun.com/jsp/jstl/fmt" %>
+<%@ taglib prefix="fn"     uri="http://java.sun.com/jsp/jstl/functions" %>
+<%@ include file="/WEB-INF/fusion/jsp/popup_modal.html" %>
+
+<div ng-controller="usageListController" > 	
+	<div class="pageTitle">
+		<h3>
+          Usage
+		</h3>
+    </div>
+    <br/>
+		The following shows all users currently logged into the application. Click the icon to expel a user from the application.
+    
+	<div title="Current User Sessions">
+	  <table att-table table-data="users" current-page="1">
+	  	
+	  	<thead att-table-row type="header">
+	  		<tr>
+	  			<th att-table-header sortable="false" width="10%" align="left">Current User Sessions</th>
+	  			<th att-table-header sortable="false" width="10%" align="center"></th>
+	  			<th att-table-header sortable="false" width="10%" align="center"></th>
+	  			<th att-table-header sortable="false" width="10%" align="center"></th>
+	  			<th att-table-header sortable="false" width="10%" align="center"></th>
+	  			<th att-table-header sortable="false" width="10%" align="center"></th>
+	  		</tr>
+	  		<tr>
+	  			<th att-table-header sortable="false" width="10%" align="center">User Id</th>
+	  			<th att-table-header sortable="false" width="10%" align="center">User Name</th>
+	  			<th att-table-header sortable="false" width="10%" align="center">Email</th>
+	  			<th att-table-header sortable="false" width="10%" align="center">Last Access Time (minutes)</th>
+	  			<th att-table-header sortable="false" width="10%" align="center">Time Remaining (minutes)</th>
+	  			<th att-table-header sortable="false" width="10%" align="center">Expel?</th>
+	  		</tr>
+	  	</thead>
+	  	<tbody att-table-row type="body" row-repeat="user in users" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody--> 
+		  <tr>
+		    <td att-table-body width="10%">{{user.id}}</td>
+		    <td att-table-body width="10%">{{user.lastName}}</td>
+		    <td att-table-body width="10%">{{user.email}}</td>
+		    <td att-table-body width="10%">{{user.lastAccess}}</td>
+		    <td att-table-body width="10%">{{user.remaining}}</td>
+		    <td att-table-body width="10%"><div ng-hide="user.delete=='yes'">Current Session</div>
+		    	<div ng-click="removeSession(user.sessionId);" ng-hide="user.delete=='no'" style="font-size:20px;"><a href="javascript:void(0)" class="icon-trash"></a></div>
+		    </td>
+		  </tr>
+		</tbody>
+		</table>
+	</div>
+</div>
+
+
+
+
+<script>
+app.controller('usageListController', function ($scope,$interval,$http,$modal,modalService){
+	
+	$scope.users=${model};console.log($scope.users);	
+	$scope.removeSession = function(sessionId) {
+		modalService.popupConfirmWin("Confirm","You are about to expel this user from the application. All of their unsaved data will be lost. Do you want to continue?",
+    			function(){
+			          $http.get("usage_list/removeSession?deleteSessionId="+sessionId).success(function(response){$scope.users=response;});
+    	});
+	}
+});
+</script>
diff --git a/vid/src/main/webapp/WEB-INF/fusion/jsp/webrtc/collaboration.jsp b/vid/src/main/webapp/WEB-INF/fusion/jsp/webrtc/collaboration.jsp
new file mode 100644
index 00000000..ff6c985e
--- /dev/null
+++ b/vid/src/main/webapp/WEB-INF/fusion/jsp/webrtc/collaboration.jsp
@@ -0,0 +1,492 @@
+<%--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  --%>
+
+
+<!DOCTYPE html>
+
+<html xmlns="http://www.w3.org/1999/xhtml" ng-app="abs">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<link type="text/css" rel="stylesheet" href="app/fusion/styles/layout/layout-default-latest.css" />
+    <link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/btn.css" >
+    <link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/fn-ebz.css" >
+		<style type="text/css">
+	/*
+	 *	NOTE: All CSS is purely cosmetic - it does not affect functionality
+	 *  http://layout.jquery-dev.com/demos.cfm
+	 */
+
+	/* customize borders to avoid double-borders around inner-layouts */
+	.ui-layout-pane {
+		border:			0; /* override layout-default-latest.css */
+		border-top:		1px solid #BBB;
+		border-bottom:	1px solid #BBB;
+	}
+	.ui-layout-pane-north ,
+	.ui-layout-pane-south {
+		border:			1px solid #BBB;
+		overflow:		auto;
+	}
+	.ui-layout-pane-west ,
+	.ui-layout-pane-east {
+	}
+	.ui-layout-pane-center	{
+		border-left:	0;
+		border-right:	0;
+		}
+		.inner-center {
+			border:		1px solid #BBB;
+		}
+
+	/* add shading to outer sidebar-panes */
+	.outer-west ,
+	.outer-east {
+		background-color: #EEE;
+	}
+	.middle-west ,
+	.middle-east {
+		background-color: #F8F8F8;
+	}
+
+	/* remove padding & scrolling from panes that are 'containers' for nested layouts */
+	.outer-center ,
+	.middle-center {
+		border:			0; /* cosmetic */
+		padding:		0;
+		overflow:		auto;
+	}
+
+	/*
+	 *	customize borders on panes/resizers to make pretty
+	 */
+	.ui-layout-pane-west		{ border-right:		0; }
+	.ui-layout-resizer-west		{ border-left:		1px solid #BBB; }
+	.ui-layout-pane-east		{ border-left:		0; }
+	.ui-layout-resizer-east		{ border-right:		1px solid #BBB; }
+	.ui-layout-pane-north		{ border-bottom:	0; }
+	.ui-layout-resizer-north	{ border-top:		1px solid #BBB; }
+	.ui-layout-pane-south		{ border-top:		0; }
+	.ui-layout-resizer-south	{ border-bottom: 	1px solid #BBB; }
+	/*
+	 *	add borders to resizers when pane is 'closed'
+	 *
+	 *.ui-layout-resizer-closed	{ border:			1px solid #BBB; }
+	 */
+	/*
+	 *	show both borders when the resizer is 'dragging'
+	 */
+	.ui-layout-resizer-west-dragging ,
+	.ui-layout-resizer-east-dragging {
+		border-left:		1px solid #BBB;
+		border-right:		1px solid #BBB;
+	}
+	.ui-layout-resizer-north-dragging ,
+	.ui-layout-resizer-south-dragging {
+		border-top:		1px solid #BBB;
+		border-bottom:	1px solid #BBB;
+	}
+	
+	
+	/*
+	layout toggler background image
+	*/
+	.ui-layout-toggler-west, .ui-layout-toggler-east {
+	border-width: 1px 0;
+	background-image: url("static/fusion/images/layout/panel-e-w-toggle.png");
+	background-size: 10px 10px;
+    background-repeat: no-repeat;
+    background-position: center; 
+	}
+	
+	.ui-layout-toggler-north, .ui-layout-toggler-south {
+	border-width: 0 1px;
+	background-image: url("static/fusion/images/layout/panel-n-s-toggle.png");
+	background-size: 10px 10px;
+	background-repeat: no-repeat;
+	 background-position: center; 
+	}
+	
+	body{background-color:#fff;font-size:14px;font-size:.875rem;margin:0;padding:0px 0 20px;position:relative}
+
+	</style>
+
+
+	<!-- LAYOUT v 1.3.0 -->
+	<script type="text/javascript" src="app/fusion/scripts/layout/jquery-latest.js"></script>
+	<script type="text/javascript" src="app/fusion/scripts/layout/jquery-ui-latest.js"></script>
+	<script type="text/javascript" src="app/fusion/scripts/layout/jquery.layout-latest.js"></script>
+	<script type="text/javascript" src="app/fusion/scripts/webrtc/RTCMultiConnection.js"></script>
+    <script type="text/javascript" src="app/fusion/scripts/socket/peerBroadcast.js"></script>
+	<script type="text/javascript" src="app/fusion/scripts/layout/debug.js"></script>
+	<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/fn-ebz.css" >
+	<link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/style.css" >
+
+	<script src= "app/fusion/external/ebz/angular_js/angular.js"></script> 
+	<script src= "app/fusion/external/ebz/angular_js/angular-route.min.js"></script>
+	<script src= "app/fusion/external/ebz/angular_js/angular-sanitize.js"></script>
+	<script src= "app/fusion/external/ebz/angular_js/app.js"></script>
+	<script src= "app/fusion/external/ebz/angular_js/gestures.js"></script>
+	
+	<%@ include file="/WEB-INF/fusion/jsp/popup_modal.html" %>
+	<script src="app/fusion/scripts/modalService.js"></script>
+	<script src="app/fusion/external/ebz/sandbox/att-abs-tpls.js" type="text/javascript"></script>
+	<script src="app/fusion/scripts/att_angular_gridster/ui-gridster-tpls.js"></script>
+	<script src="app/fusion/scripts/att_angular_gridster/angular-gridster.js"></script>
+	<script src= "app/fusion/external/ebz/angular_js/checklist-model.js"></script>
+	<style>
+		body{background-color:#fff;font-size:14px;font-size:.875rem;margin:0;padding:0px 0 20px;position:relative}
+	</style>
+
+	<script type="text/javascript">
+
+	
+	var popupModalService;
+	
+	app.controller("collaborationController", function ($scope,$http,modalService, $modal) { 
+		popupModalService = modalService;
+		   
+		});
+	
+
+	$(document).ready(function () {
+
+		// OUTER-LAYOUT
+		panelLayout = $('body').layout({
+			center__paneSelector:	".outer-center"
+		,	west__paneSelector:		".outer-west"
+		,	east__paneSelector:		".outer-east"
+		//,	west__size:				800
+		//,	east__size:				125
+		,	spacing_open:			8  // ALL panes
+		,	spacing_closed:			12 // ALL panes
+	
+		,	center__childOptions: {
+			center__paneSelector:	".inner-center"
+		,	west__paneSelector:		".inner-west"
+		,	east__paneSelector:		".inner-east"
+		,	west__size:				75
+		,	east__size:				75
+		,	spacing_open:			8  // ALL panes
+		,	spacing_closed:			8  // ALL panes
+		,	west__spacing_closed:	12
+		,	east__spacing_closed:	12
+		}
+
+		 
+
+		
+		});
+		
+	
+		function initializeConnections() {
+	    	
+	    	var channelId = null;
+			channelId = location.href.replace(/\/|:|#|%|\.|\[|\]/g, '');
+			var videoChannelId = channelId.concat("video");
+			var screenChannelId = channelId.concat("screen");
+			
+			videoConnection = new RTCMultiConnection(videoChannelId);
+			screenConnection = new RTCMultiConnection(screenChannelId);
+			
+			configConnection(videoConnection,true,true,false,true,false);
+		    configConnection(screenConnection,false,false,true,false,true);
+	    	
+	    };
+	    
+	    function configConnection(_connection, _audio, _video, _screen, _data, _oneway) {
+	    	 _connection.session = {
+	                 audio:     _audio, // by default, it is true
+	                 video:     _video, // by default, it is true
+	                 screen:    _screen,
+	                 data:      _data,
+	                 oneway:    _oneway,
+	                 broadcast: false
+	            };
+	    	 
+	    	 _connection.direction = "one-to-one";
+	    	 
+	    	 if( _data == true ) {
+	    	 _connection.onmessage = function(e) {
+	             appendDIV(e.data);
+
+	             console.debug(e.userid, 'posted', e.data);
+	             console.log('latency:', e.latency, 'ms');
+	         };
+	    	 }
+	    
+	     
+	    }; 
+	    
+	    function assignStreamToDom() {
+	    	
+	    	
+	    	screenConnection.screenbody = document.querySelector('.screenContainer1'); 
+	    	screenConnection.videobody = document.querySelector('.videoContainer2'); 
+	    	
+	    	videoConnection.screenbody = document.querySelector('.screenContainer2'); 
+	    	videoConnection.videobody = document.querySelector('.videoContainer1'); 
+	    };
+	    
+		function maximizeLayout() {
+	    	
+			// open the panes and maximize the window.
+		     top.window.resizeTo(screen.availWidth,screen.availHeight);
+		     panelLayout.open('west');
+		     // panelLayout.open('south'); is not working due to state initialization problem; debug to find out. so replacing the call with work around below - hack.
+	    	 $(".ui-layout-toggler-south-closed").first().click();
+		     
+		 };
+	    
+	   function minimizeLayout() {
+	    	
+			// close the panes and minimize the window.
+		     top.window.resizeTo(screen.availWidth - 2*screen.availWidth/3, screen.availHeight - screen.availHeight/2);
+		     panelLayout.close('west');
+		     // panelLayout.close('south'); is not working due to state initialization problem; debug to find out. so replacing the call with work around below - hack.
+	    	 $(".ui-layout-toggler-south-opened").first().click();
+	    };
+	    
+	    function emptyContainers() {
+	    	 $('.screenContainer1').empty(); 
+		     $('.videoContainer2').empty(); 
+		    	
+		     $('.screenContainer2').empty();  
+		     $('.videoContainer1').empty(); 
+	    };
+	    
+	    function appendDIV(div, parent) {
+	        if (typeof div === 'string') {
+	            var content = div;
+	            div = document.createElement('div');
+	            div.innerHTML =  content;
+	          };
+	          
+	          var chatOutput = document.getElementById('chat-output'),
+	            fileProgress = document.getElementById('file-progress');
+	    
+	          if (!parent) chatOutput.insertBefore(div, chatOutput.firstChild);
+	            else fileProgress.insertBefore(div, fileProgress.firstChild);
+
+	            div.tabIndex = 0;
+	            $('#chat-input').focus();
+	     };
+	     
+	     function confirmClose() {
+	    	 var message = "Are you sure you want to close the session?";
+	    	 
+	    	 if(popupModalService != undefined) {
+	    		 popupModalService.popupConfirmWin("Confirm", message, function(){ location.reload();});
+	    	 }
+	    	 
+	    	 else if (confirm(message) == true) {
+	    		     location.reload();
+	    		    //window.opener.location.reload(); // go to the parent window
+	    			//close();
+	    	    } else {
+	    	        // do nothing
+	    	    }
+	    	 
+	     };
+	     
+	     function notifyOthers() {
+	    	 
+	    	// var websocket = localStorage.getItem('notifySocket');
+	    	 //if( websocket != null) {
+	    		 // handling websocket peer broadcast session 
+	    		 var currentUser = "${sessionScope.user.orgUserId}";
+	    		 var initialPageVisit = "${sessionScope.initialPageVisit}";
+	    		 var remoteUser = '';
+	    		 
+	    		 var userList = location.search.split('chat_id=')[1].split('-');
+	    		 for(var i=0;i<userList.length;i++) {
+	    			 if(userList[i] !== currentUser) {
+	    				 remoteUser = userList[i];
+	    				 break;
+	    			 }
+	    		 }
+	    		
+	    		socketSetup(initialPageVisit, currentUser, remoteUser,"socketSend");
+	    		
+	    		 
+	    		 
+	    		 
+	    	
+	    	 
+	     };
+	     
+	     function makeChatVisible() {
+	    	 
+	    	 $('#chat-input').css("visibility", 'visible');    	 
+	     };
+	    
+	    
+	    
+	     /* on click button enabled*/
+	     document.getElementById('share-screen').onclick = function() {
+	    
+	     emptyContainers();	 
+	     videoConnection.close();
+		 screenConnection.close();	 
+	     
+	     maximizeLayout();
+	     emptyContainers();
+	     makeChatVisible();
+	     
+	     videoConnection.open();
+	     screenConnection.open();
+	     
+	     
+	     notifyOthers();
+	     
+	    
+	    
+		};
+
+		 document.getElementById('stop-share-screen').onclick = function() {
+		 
+		 emptyContainers();
+		 
+		 videoConnection.close();
+		 screenConnection.close();
+		 
+		 confirmClose();
+		 
+		};
+
+		 document.getElementById('view-screen').onclick = function() {
+		
+		 maximizeLayout();
+		 emptyContainers();
+		 makeChatVisible();
+		 
+		 // timeout is required for the sharing to properly work
+		 setTimeout(function() { 
+			 screenConnection.connect();
+		 },2000);
+		 setTimeout(function() { 
+			 videoConnection.connect();
+		 },1000);
+		
+		 
+		};
+		
+		document.getElementById('chat-input').onkeypress = function(e) {
+	        if (e.keyCode !== 13 || !this.value) return;
+	        var message = "<b>${model.name}</b>: " + this.value;
+	        appendDIV(message);
+
+	        // sending text message
+	        videoConnection.send(message);
+
+	        this.value = '';
+	    };
+	    
+	    /*
+	    document.getElementById('file').onchange = function() {
+	    	videoConnection.send(this.files[0]);
+        };
+		*/
+		
+		
+		//document.querySelector('.screenContainerPane').appenChild(document.querySelector('.screenContainer'));
+		//document.querySelector('.videoContainerPane').appendChild(document.querySelector('.videoContainer'));
+		
+		//panelLayout.bindButton($('#share-screen'), 'open', 'outer-west');
+		//panelLayout.bindButton($('#stop-share-screen'), 'close', 'outer-west');
+		var videoConnection = null, screenConnection = null;
+		initializeConnections();
+		assignStreamToDom();
+		
+		// start the share
+		//document.getElementById('share-screen').click();
+		//
+		});
+	
+
+</script>
+
+
+</head>
+
+<body>
+<!--  
+	<button id="share-screen" hidden="true" style="display: none;" class="setup">Share Your Screen</button>
+    <button id="stop-share-screen" hidden="true" style="display: none;" class="setup">Stop Share Your Screen</button>
+    <button id="view-screen" hidden="true" style="display: none;" class="setup">View My Screen</button>   
+    
+    -->    
+ 
+<div class="outer-center" style="position: absolute; left: 12px; right: 0px; top: 0px;bottom: 0px;">
+	<div class="inner-center">
+	
+	<!-- 	<jsp:include page="/WEB-INF/fusion/zul/chatOne.zul" /> -->
+	
+	
+	
+	<table style="width: 100%;">
+				<tbody><tr>
+                    <td>
+                        <button id="share-screen"  class="button button--primary button--small setup">Start Session</button>
+    				    <button id="stop-share-screen"  class="button button--primary button--small setup">Stop Session</button>
+    					<button id="view-screen" class="button button--primary button--small setup">View</button>       
+	
+                    </td>
+    
+                </tr>
+            </tbody>
+	
+                <tbody><tr>
+                    <td>
+                         <input type="text" id="chat-input" style="font-size: 1.2em;visibility:collapse;" placeholder="type here.."/>
+                         <div id="chat-output"></div>
+                    </td>
+                    <!-- 
+                    <td style="background: white;">
+                        <input type="file" id="file">
+                        <div id="file-progress"></div>
+                    </td>
+                     -->
+                </tr>
+            </tbody>
+    </table>
+	
+		
+	</div>
+	<div id="inner-south" class="ui-layout-south">
+		<div class="videoContainer1"></div>
+		<div class="videoContainer2"></div>
+ 		
+	</div>
+</div>
+
+<div class="outer-west">
+   <div class="screenContainer1"></div>
+   <div class="screenContainer2"></div>
+   <div ng-controller="collaborationController">
+   </div>
+</div>
+
+
+
+
+
+</body>
+</html>