From 885da7bcf27f0f5860e032fabd1800bdcf4515bc Mon Sep 17 00:00:00 2001
From: amrita.vishnoi <amrita.vishnoi@ebix.com>
Date: Fri, 29 Jul 2016 17:30:27 +0530
Subject: [PATCH] List Manager is merged

---
 400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js   | 591 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------
 400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js |  28 +++++++++++++++++++++++++++-
 400-SOURCECODE/AIAHTML5.Web/app/main/AIA.js                   |   5 +++++
 400-SOURCECODE/AIAHTML5.Web/index.html                        | 205 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------------------------------------------------------------------------------------------
 4 files changed, 677 insertions(+), 152 deletions(-)

diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
index a0facf9..cd09477 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
@@ -19,9 +19,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     $scope.TermNumberData;
     $rootScope.BodySystemData
     $scope.bodyViewId = 0;
-    $scope.bgartData;
+    $rootScope.bgartData;
     //view specific constants
-    $scope.voId;
+    $rootScope.voId;
     $scope.layerNumber;
     $scope.daCounter = 1;
     $scope.bagartDetails;
@@ -292,7 +292,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     $scope.openBodyView = function () {
         //debugger;
         $rootScope.isLoading = true;
-        $scope.voId = localStorage.getItem("currentBodyViewId");;
+        $rootScope.voId = localStorage.getItem("currentBodyViewId");;
 
         //load bodyRegion data
         var brViewdata = DataService.getJson('~/../content/data/json/da/da_dat_brview.json')
@@ -501,29 +501,29 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         $scope.layerNumber = 0;
         $scope.skinTone = DA[0].ethnicity;
 
-        $scope.viewOrientationId = $scope.voId;
-        if ($scope.voId == 5) {
+        $scope.viewOrientationId = $rootScope.voId;
+        if ($rootScope.voId == 5) {
             $scope.viewOrientationId = 1;
         }
-        else if ($scope.voId == 6) {
+        else if ($rootScope.voId == 6) {
             $scope.viewOrientationId = 2;
         }
-        else if ($scope.voId == 7) {
+        else if ($rootScope.voId == 7) {
             $scope.viewOrientationId = 3;
         }
-        else if ($scope.voId == 8) {
+        else if ($rootScope.voId == 8) {
             $scope.viewOrientationId = 4;
         }
-        else if ($scope.voId == 9) {
+        else if ($rootScope.voId == 9) {
             $scope.viewOrientationId = 5;
         }
-        else if ($scope.voId == 10) {
+        else if ($rootScope.voId == 10) {
             $scope.viewOrientationId = 6;
         }
-        else if ($scope.voId == 11) {
+        else if ($rootScope.voId == 11) {
             $scope.viewOrientationId = 5;
         }
-        else if ($scope.voId == 12) {
+        else if ($rootScope.voId == 12) {
             $scope.viewOrientationId = 6;
         }
 
@@ -536,13 +536,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         bgartdata.then(
            function (result) {
                //debugger;
-               $scope.bgartData = result;
+               $rootScope.bgartData = result;
                $scope.CalculateImageCordinates($scope.viewOrientationId);
 
            },
            function (error) {
                // handle errors here
-               console.log(' $scope.bgartData = ' + error.statusText);
+               console.log(' $rootScope.bgartData = ' + error.statusText);
            });
     };
 
@@ -550,7 +550,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     //calculate coordinates for body region images
     $scope.CalculateImageCordinates = function (viewOrientationId) {
 
-        //  debugger;
+        console.log('CalculateImageCordinates');
         //remove the previous layer mask data from array
         var n = $rootScope.MaskCanvasData.length
 
@@ -577,7 +577,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
         //calculate image coordinates and draw image
         var bodyRegionCoordinates = $rootScope.BodyRegionData.BodyRegionViews;
-        // var viewOrientationId = String($scope.voId);
+        // var viewOrientationId = String($rootScope.voId);
 
 
         $scope.bodyRegionCoordinates = new jinqJs()
@@ -585,10 +585,10 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 .where('_ViewOrientationId == ' + viewOrientationId)
                 .select();
 
-        // if ($scope.voId == 9 || $scope.voId == 11) {
+        // if ($rootScope.voId == 9 || $rootScope.voId == 11) {
 
         $scope.bagartDetails = new jinqJs()
-           .from($scope.bgartData.BackgroundArts.BackgroundArtDetail)
+           .from($rootScope.bgartData.BackgroundArts.BackgroundArtDetail)
            .where('_ViewOrientationId == ' + viewOrientationId)
            .select();
         //}
@@ -758,7 +758,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                             var rectangle = scaleRectangle(value._X, value._Y, value._Height, value._Width, value._MirrorValue);
 
 
-                            var src = "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $scope.voId + "/layers/0/" + value._BodyRegionId + "/" + $scope.figLaefImageName;
+                            var src = "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $rootScope.voId + "/layers/0/" + value._BodyRegionId + "/" + $scope.figLaefImageName;
 
                             $scope.DrawImage(rectangle.scaledHeight, rectangle.scaledWidth, rectangle.scaledX, rectangle.scaledY, src, 'modestyImg' + value._BodyRegionId, 'N')
 
@@ -883,7 +883,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
                 if (bodyRegion == bodyRegionId && bodyRegionSkinTone == $scope.skinTone) {
 
-                    return "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $scope.voId + "/layers/" + $scope.layerNumber + "/" + bodyRegionId + "/" + $scope.skinTone + "/" + SelectedLayerData.BodyRegion[z].Image._ImageName;
+                    return "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $rootScope.voId + "/layers/" + $scope.layerNumber + "/" + bodyRegionId + "/" + $scope.skinTone + "/" + SelectedLayerData.BodyRegion[z].Image._ImageName;
                 }
             }
         }
@@ -891,10 +891,10 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         else {
             //  debugger;
             //below 4 bodyviews have only single body region
-            if ($scope.voId == 9 || $scope.voId == 11 || $scope.voId == 10 || $scope.voId == 12) {
+            if ($rootScope.voId == 9 || $rootScope.voId == 11 || $rootScope.voId == 10 || $rootScope.voId == 12) {
                 var bodyRegion = SelectedLayerData.BodyRegion._BodyRegionId;
 
-                return "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $scope.voId + "/layers/" + $scope.layerNumber + "/" + bodyRegionId + "/" + SelectedLayerData.BodyRegion.Image._ImageName;
+                return "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $rootScope.voId + "/layers/" + $scope.layerNumber + "/" + bodyRegionId + "/" + SelectedLayerData.BodyRegion.Image._ImageName;
 
             }
             else // it is for other body view which have multiple body regions and layer no > 0
@@ -904,7 +904,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     var bodyRegion = SelectedLayerData.BodyRegion[z]._BodyRegionId;
                     if (bodyRegion == bodyRegionId) {
 
-                        return "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $scope.voId + "/layers/" + $scope.layerNumber + "/" + bodyRegionId + "/" + SelectedLayerData.BodyRegion[z].Image._ImageName;
+                        return "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $rootScope.voId + "/layers/" + $scope.layerNumber + "/" + bodyRegionId + "/" + SelectedLayerData.BodyRegion[z].Image._ImageName;
 
 
                     }
@@ -941,12 +941,12 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             for (var z = 0; z <= $scope.bagartDetailsOnSktn.length; z++) {
                 var gender = $scope.bagartDetailsOnSktn[z]._Gender;
                 if (gender == selectedGender) {
-                    return "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $scope.voId + "/layers/0/" + bodyRegionId + "/" + $scope.skinTone + "/" + $scope.bagartDetailsOnSktn[z]._ImageId;
+                    return "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $rootScope.voId + "/layers/0/" + bodyRegionId + "/" + $scope.skinTone + "/" + $scope.bagartDetailsOnSktn[z]._ImageId;
                 }
             }
         }
         else {
-            return "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $scope.voId + "/layers/0/" + bodyRegionId + "/" + $scope.skinTone + "/" + $scope.bagartDetailsOnSktn[0]._ImageId;
+            return "content/images/DA/" + $scope.zoomInOut + "/body-views/" + $rootScope.voId + "/layers/0/" + bodyRegionId + "/" + $scope.skinTone + "/" + $scope.bagartDetailsOnSktn[0]._ImageId;
 
         }
     }
@@ -1229,7 +1229,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 //set z index to make leaf canvas on top of hip canavs
                 imgCanvas.style.zIndex = "200";
             }
-            if (($scope.voId == 11 || $scope.voId == 9) && bodyRegionId == 6) {
+            if (($rootScope.voId == 11 || $rootScope.voId == 9) && bodyRegionId == 6) {
                 imgCanvas.style.zIndex = "500";
             }
 
@@ -1302,7 +1302,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 //see the annotation apart from leaf then the actual click will be on modesty canvas, but for annotation er
                 // 
             else if (maskCanvasId.match('modestyImg') && RGBColor == '000000') {
-                //if ($scope.voId == 11) {
+                //if ($rootScope.voId == 11) {
                 //    maskCanvasId = 'imageCanvas6_mci';
                 //    x = $('#imageCanvas6_mci').left;
                 //    y = $('#imageCanvas6_mci').top;
@@ -1630,6 +1630,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
     $scope.HighlightBodyByTermList = function (TermList) {
 
+
+        console.log('HighlightBodyByTermList is called');
+
         $scope.highlightedBR = null;
         $scope.highlightedBR = [];
 
@@ -1653,9 +1656,10 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
         $timeout(function () {
             for (var x = 0; x < 9; x++) {
-                // console.log('$rootScope.MaskCanvasData.length= ' + n)
-                // debugger
 
+                console.log('$rootScope.MaskCanvasData.length= ' + n)
+                // debugger
+               
                 var bodyRegionId = $rootScope.MaskCanvasData[x].bodyRegionId;
                 var canvasId = $rootScope.MaskCanvasData[x].canvasId;
                 var maskData = $rootScope.MaskCanvasData[x].maskData;
@@ -3025,8 +3029,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             }
             if ($scope.TransparencyBoxStartX <= bodyRegionRight && value.X <= transparencyBoxRight && $scope.TransparencyBoxStartY <= bodyRegionBottom && value.Y <= transparencyBoxBottom) {
 
-                //if ($scope.voId != "9") {
-                //    if ($scope.voId != "11") {
+                //if ($rootScope.voId != "9") {
+                //    if ($rootScope.voId != "11") {
                 //        $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.X, value.Y, value.IsMirror, $scope.TransparencyBoxStartX, TransparencyEndX, $scope.TransparencyBoxStartY, TransparencyBoxEndY, $scope, false, false);
 
                 //    }
@@ -3038,7 +3042,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 //        $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.X, value.Y, value.IsMirror, $scope.TransparencyBoxStartX, TransparencyEndX, $scope.TransparencyBoxStartY, TransparencyBoxEndY, $scope, false, false);
                 //    }
                 //}
-                if (($scope.voId == "9" || $scope.voId == "11")) {
+                if (($rootScope.voId == "9" || $rootScope.voId == "11")) {
                     if (value.bodyRegionId == "6") {
                         $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.X, value.Y, value.IsMirror, $scope.TransparencyBoxStartX, TransparencyEndX, $scope.TransparencyBoxStartY, TransparencyBoxEndY, $scope, false, false);
                     }
@@ -3385,7 +3389,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     var length = imageData.length;
 
                     //change background of image from transparent to white
-                    if ($scope.voId == 9 || $scope.voId == 11) {
+                    if ($rootScope.voId == 9 || $rootScope.voId == 11) {
                         for (var i = 3; i < length; i += 4) {
                             imageData[i] = '#FFFFFFFF';
                         }
@@ -4241,6 +4245,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     $scope.highLightBody = function ()
     {
 
+        console.log('highLightBody is called');
 
         if ($rootScope.isHighLight == true) {
 
@@ -4346,6 +4351,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
                 if ($scope.grayeddBR.length == 9) {
                     if ($scope.isHighlightByListManager == true) {
+
+                        console.log('$scope.grayeddBR.length is ' + $scope.grayeddBR.length);
                         $timeout(function () {
 
                             //  $rootScope.isHighLight = false;
@@ -4569,7 +4576,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         //   $(event.currentTarget.attributes[2].value).parent().addClass("active");
 
         var viewname = localStorage.getItem("currentViewTitle")
-        var currentBodyViewId = $scope.correspondingBodyViewIds[$scope.voId];
+        var currentBodyViewId = $scope.correspondingBodyViewIds[$rootScope.voId];
 
         if ((event.currentTarget.attributes[1].value == 'Male') && (localStorage.getItem("genderId") == 'Female')) {
 
@@ -4639,7 +4646,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         }
 
 
-        $scope.voId = currentBodyViewId;
+        $rootScope.voId = currentBodyViewId;
 
         var layerJsonPath = '~/../content/data/json/da/body-views/' + currentBodyViewId + '/da_dat_layer_' + currentBodyViewId + '.json';
 
@@ -4688,18 +4695,18 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         var selectedViewId = $scope.bodyViews[event.currentTarget.attributes[1].value];
         $scope.viewOrientationId = selectedViewId;
         if (localStorage.getItem("genderId") == 'Male') {
-            if ($scope.voId != selectedViewId) {
+            if ($rootScope.voId != selectedViewId) {
                 if (selectedViewId == 5) {
-                    $scope.voId = 9;
+                    $rootScope.voId = 9;
                 }
                 else if (selectedViewId == 6) {
-                    $scope.voId = 10;
+                    $rootScope.voId = 10;
                 }
                 else
-                    $scope.voId = selectedViewId;
+                    $rootScope.voId = selectedViewId;
                 $rootScope.isLoading = true;
 
-                $scope.loadSelectedBodyView($scope.voId);
+                $scope.loadSelectedBodyView($rootScope.voId);
             };
 
 
@@ -4716,11 +4723,11 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             }
             else
                 selectedViewId = $scope.correspondingBodyViewIds[selectedViewId];;
-            if ($scope.voId != selectedViewId) {
-                $scope.voId = selectedViewId;
+            if ($rootScope.voId != selectedViewId) {
+                $rootScope.voId = selectedViewId;
                 $rootScope.isLoading = true;
 
-                $scope.loadSelectedBodyView($scope.voId);
+                $scope.loadSelectedBodyView($rootScope.voId);
             };
 
 
@@ -4869,6 +4876,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
     }
 
+
+
     function OnPaintCanvasMouseMove(event) {
 
         if ($rootScope.isDrawingToolSelected == true) {
@@ -4893,7 +4902,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     //body highlight options functinality
     $scope.LoadBodySystemData = function () {
 
-        var currentBodyViewId = $scope.voId;
+        var currentBodyViewId = $rootScope.voId;
         var systemListHtml = '<ul class="dropdown-menu" aria-labelledby="dropdownMenu2"><li><a href="#" title="Current Structure">Current Structure</a></li>  <li role="separator" class="divider"></li>'
         var systemList = $rootScope.CommonData.DACommonData.BodySystems.Item;
 
@@ -4972,6 +4981,500 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
     }
 
+    //list manager
+    $scope.$on('listManagerEvent', function (event, data) {
+        //  debugger;
+        console.log('listManagerEvent')
+        if ($rootScope.islistManagerEventAlredayDispachted == true) {
+
+
+            var systemList = $rootScope.CommonData.DACommonData.BodySystems.Item;
+
+            //var systemListHtml = '<option value="0" selected="">All</option>'
+
+            var $all = $('<option ng-click=refreshTermListOnSystemSelection($event) id="0" selected="">All</option>').appendTo('#bodySystems');
+            $compile($all)($scope);
+
+            angular.forEach(systemList, function (value, key) {
+
+                var $elem = $('<option ng-click=refreshTermListOnSystemSelection($event) id="' + value._BodySystemId + '"  title="' + value._Name + '" >' + value._Name + '</option>').appendTo('#bodySystems');
+                $compile($elem)($scope);
+                // systemListHtml = systemListHtml + '<<option id="' + value._BodySystemId + '"  title="' + value._Name + '" ng-click=" $scope.refreshTermListOnSystemSelection(event)">' + value._Name + '</option>'
+            })
+
+
+            // $('#bodySystems').append(systemListHtml);
+
+
+            var currentView = localStorage.getItem("currentViewTitle");
+            var viewNmeHtml = '<option>' + currentView + '</option>'
+            $('#viewName').append(viewNmeHtml);
+
+            var len = $rootScope.openModules.length;
+            var openViewLen = $rootScope.openViews.length;
+
+            var currentOpenModuleId = $rootScope.openModules[len - 1].ModuleId;
+            var currentOpenViewId = $rootScope.openViews[openViewLen - 1].BodyViewId;
+            $rootScope.viewOrientationId = currentOpenViewId;
+            //confirm that this is DA module which is last open
+            if (currentOpenModuleId == 1) {
+                $http({ method: 'GET', url: '~/../content/data/json/da/body-views/' + currentOpenViewId + '/da_dat_tm_sg_' + currentOpenViewId + '.json' }).success(function (data) {
+                    $scope.TermNumberData = data;
+                    var actualtermList = new jinqJs()
+                                        .from($scope.TermNumberData.TermData.Term)
+                                        .select('_ActualTermNumber');
+
+                    var TermTextList = [];
+                    var TermTextList = [];
+
+                    $scope.loadListManger();
+
+
+                })
+                   .error(function (data, status, headers, config) {
+
+                       console.log(data);
+
+                   });
+
+
+
+                $rootScope.islistManagerEventAlredayDispachted = false;
+                var jj;
+            }
+
+        }
+
+
+
+    });
+
+    $scope.loadListManger = function () {
+
+
+
+        var path = '~/../content/data/json/da/vocab/english/cm_dat_vocabterm_1.json'
+
+        $http({ method: 'GET', url: '~/../content/data/json/da/vocab/english/cm_dat_vocabterm_1.json' }).success(function (data) {
+
+            var VocabTermData = data;
+
+            var vocabTermTxt = [];
+
+            angular.forEach($scope.TermNumberData.TermData.Term, function (value1, key1) {
+
+                angular.forEach(VocabTermData.VocabTerms.Term, function (value2, key2) {
+
+
+                    if (value1._ActualTermNumber === value2._ActualTermNumber) {
+                        vocabTermTxt.push(
+
+                             {
+
+                                 "_ActualTermNumber": value2._ActualTermNumber,
+
+                                 "_TermText": value2._TermText,
+
+                                 "_cdId": value2._cdId
+
+                             }
+
+                              );
+
+                    }
+
+                })
+
+
+
+            })
+
+
+
+            $scope.VocabTermTxt = new jinqJs()
+
+           .from(vocabTermTxt)
+
+           .distinct('_TermText', '_ActualTermNumber')
+
+           .orderBy([{ field: '_TermText', sort: 'asc' }])
+
+           .select('_ActualTermNumber', '_TermText', '_cdId');
+
+
+            for (var j = 0; j < $scope.VocabTermTxt.length; j++) {
+                var $el = $('<option ng-click=HighlightBodyOnListManagerSelection($event) id=' + $scope.VocabTermTxt[j]._ActualTermNumber + '>' + $scope.VocabTermTxt[j]._TermText + '</option>').appendTo('#termList')
+                $compile($el)($scope);
+            }
+            var termsTotal = '<span class="pull-left marginTop5">' + $scope.VocabTermTxt.length + ' Structures</span>';
+            $("#totalTerms").empty();
+            $('#totalTerms').append(termsTotal);
+
+            $rootScope.isLoading = false;
+            $('#spinner').css('visibility', 'hidden');
+
+        })
+
+           .error(function (data, status, headers, config) {
+
+               console.log(data);
+
+           });
+    }
+
+
+    $scope.HighlightBodyOnListManagerSelection = function (event) {
+
+
+        //debugger
+        $rootScope.isListManagerSelected = true;
+        $rootScope.isLoading = true;
+
+        $('#spinner').css('visibility', 'visible');
+        //1.
+        var actualTermNumber = event.currentTarget.id;//attributes[0].value;
+        $scope.TermList = $scope.getTermNumberList(actualTermNumber);
+
+        //2.
+        var internalLayerNumberList = [];
+        for (var i = 0; i < $scope.TermList.length; i++) {
+            var layerNumber = $scope.TermList[i]._InternalLayerNumber
+
+            internalLayerNumberList[i] = parseInt(layerNumber);
+        }
+
+        internalLayerNumberList.sort(function (a, b) { return a - b })
+        var internalLayerNumber = internalLayerNumberList[0]//.replace('00', '');
+
+        //3. get layer number
+        if (internalLayerNumber >= DA[0].SKIN_START_INTERNAL_LAYER && internalLayerNumber <= DA[0].SKIN_END_INTERNAL_LAYER) {
+
+            internalLayerNumber = DA[0].SKIN_DEFAULT_INTERNAL_LAYER;
+        }
+
+        var layerNumber;
+        var matchedLayerNumber = new jinqJs()
+                                        .from($rootScope.BodyLayerData.Layers.DataLayer)
+                                         .where("_lni == " + internalLayerNumber)
+                                        .select('_LayerNumber');
+
+        if (matchedLayerNumber == null || matchedLayerNumber.length == 0) {
+            layerNumber = 0;
+        }
+        else {
+            layerNumber = matchedLayerNumber[0]._LayerNumber
+        }
+
+        if (layerNumber == 0) {
+            layerNumber = $scope.totalLayers;
+        }
+        else {
+            layerNumber = parseInt(layerNumber) - 1;
+        }
+
+        $scope.layerNumber = layerNumber;
+
+        //4.get scroll position
+        if (actualTermNumber != DA[0].SKIN_TERM_ID) {
+
+            $scope.termCoordinate = $scope.getTermCoordinate(actualTermNumber);
+
+        }
+
+        //5.
+        $scope.matchdedDataOnLayer = new jinqJs()
+                                .from($scope.TermNumberData.TermData.Term)
+                                .where('_InternalLayerNumber == ' + internalLayerNumber)
+                                .select();
+
+        //6.
+        var matchedDataonActualTerm = new jinqJs()
+                                 .from($scope.matchdedDataOnLayer)
+                                 .where('_ActualTermNumber == ' + actualTermNumber)
+                                 .select('_TermNumber');
+
+
+        var termNo = matchedDataonActualTerm[0]._TermNumber.toString();
+
+        //7.get termList
+        $scope.fullTermlist = [];
+        $scope.AllTerms = [];
+
+        if (termNo != DA[0].figLeafTermId) {
+
+            $scope.getChildTermList(termNo);
+            // $timeout(function () { $scope.getSiblings(termNo) }, 50);
+            $scope.getSiblings(termNo)
+        }
+
+
+
+
+        $('#txtlayerNumber').val((parseInt($scope.layerNumber)));
+        $('#layerChangeSlider').slider("option", "value", parseInt($scope.totalLayers) - parseInt($scope.layerNumber));
+
+        //8.remove current layer canavses
+        for (var i = 1; i < 7; i++) {
+
+            var id;
+            var maskId;
+
+            id = 'imageCanvas' + i;
+            maskId = 'imageCanvas' + i + '_mci';
+
+            var canvas = document.getElementById(id);
+            document.getElementById('canvasDiv').removeChild(canvas);
+
+            var maskcanvas = document.getElementById(maskId);
+            document.getElementById('canvasDiv').removeChild(maskcanvas);
+
+            if (i == 4 || i == 5 || i == 6) {
+                id = 'imageCanvas' + i + '_MR';
+                maskId = 'imageCanvas' + i + '_MR_mci';
+
+                var canvas = document.getElementById(id);
+                document.getElementById('canvasDiv').removeChild(canvas);
+
+                var maskcanvas = document.getElementById(maskId);
+                document.getElementById('canvasDiv').removeChild(maskcanvas);
+            }
+
+            //remove modesty canavs
+            var modestyCanvases = $("canvas[id*='imageCanvasmodestyImg']");
+            for (var j = 0; j < modestyCanvases.length; j++) {
+                modestyCanvases[j].remove();
+            }
+        }
+
+        //9.
+        $timeout(function () {
+            $rootScope.isHighLight = false;
+            $scope.CalculateImageCordinates($scope.viewOrientationId)
+        }, 10);
+
+        $scope.isHighlightByListManager = true;
+
+        //10.
+        $timeout(function () {
+            $rootScope.isHighLight = true;
+            $scope.highLightBody()
+        }, 500);
+        //$timeout(function () {
+
+        //  //  $rootScope.isHighLight = false;
+
+        //    $scope.HighlightBodyByTermList($scope.TermList)
+        //}, 2000);
+
+        //4.get scroll position
+
+    }
+
+    $scope.getChildTermList = function (termNo) {
+
+
+        var data = new jinqJs()
+                         .from($scope.matchdedDataOnLayer)
+                          .where("_ParentTermNumber == " + termNo)
+                         .select();
+
+        var data2 = new jinqJs()
+                                        .from(data)
+                                         .where("_TermNumber != " + termNo)
+                                        .select();
+
+        var k;
+        if (data2 != null && data2.length > 0) {
+            for (var i = 0; i < data2.length; i++) {
+
+                var serachTerm = data2[i]._TermNumber;
+                var isFound = jQuery.inArray(serachTerm, $scope.fullTermlist)
+                if (isFound == -1) {
+                    $scope.fullTermlist.push(serachTerm);
+                    $scope.AllTerms.push({ '_TermNumber': serachTerm })
+                    $scope.getChildTermList(serachTerm);
+                }
+            }
+        }
+    }
+
+    $scope.getSiblings = function (termNo) {
+
+        var data = new jinqJs()
+                   .from($scope.matchdedDataOnLayer)
+                   .where("_TermNumber == " + termNo)
+                   .select();
+        var termNo = data[0]._ActualTermNumber;
+
+        var data2 = new jinqJs()
+                   .from($scope.matchdedDataOnLayer)
+                   .where("_ActualTermNumber == " + termNo)
+                   .select();
+
+        if (data2 != null && data2.length > 0) {
+            for (var i = 0; i < data2.length; i++) {
+                $scope.fullTermlist.push(data2[i]._TermNumber);
+                $scope.AllTerms.push({ '_TermNumber': data2[i]._TermNumber })
+                $scope.getChildTermList(data2[i]._TermNumber);
+            }
+        }
+    }
+
+    $scope.getTermCoordinate = function (actualTermNumber) {
+
+        return {
+            x: $scope.TermList[0]._CenterX,
+            y: $scope.TermList[0]._CenterY
+        }
+    }
+
+    $scope.aligneCanvasWithTerm = function () {
+        console.log('aligneCanvasWithTerm')
+        var newX = parseInt($scope.scaleValue($scope.termCoordinate.x, $scope.zoomInOut, DA[0].ZOOM_TERM_DATA));
+        var newY = parseInt($scope.scaleValue($scope.termCoordinate.y, $scope.zoomInOut, DA[0].ZOOM_TERM_DATA));
+
+        var canvasX = parseInt($('#canvasDiv').css('left'));
+        var canvasY = parseInt($('#canvasDiv').css('top'));
+        var canvasWidth = parseInt($('#canvasDiv').css('width'));
+        var canvasHeight = parseInt($('#canvasDiv').css('height'));
+        var canvasBottom = canvasY + canvasHeight;
+        var canvasRight = canvasX + canvasWidth
+
+
+        if (newX >= canvasX && newX <= canvasRight && newY >= canvasY && newY <= canvasBottom) {
+
+        }
+        else {
+            newX = newX - canvasWidth / 2;
+            newY = newY - canvasHeight / 2;
+
+        }
+
+
+
+        console.log('newX =' + newX + ',newY= ' + newY)
+        $('#canvasDiv').scrollLeft(newX);
+        $('#canvasDiv').scrollTop(newY);
+
+
+    }
+
+    $scope.scaleValue = function (nValue, nNewZoom, nExistingZoom) {
+
+        var iReturnValue = nValue * nNewZoom;
+        return Math.round(iReturnValue / nExistingZoom);
+    }
+
+    $scope.refreshTermListOnSystemSelection = function (event) {
+
+        $('#termList').empty();
+        // $('#termList').innerHTML = '';
+
+        if (event.currentTarget.id == 0) {
+            $scope.loadListManger();
+        }
+        else {
+            var bodySystemDataPath = '~/../content/data/json/da/body-views/' + localStorage.getItem("currentBodyViewId") + '/da_dat_body_system_term_' + localStorage.getItem("currentBodyViewId") + '.json';
+            DataService.getJson(bodySystemDataPath)
+           .then(
+            function (result) {
+
+                $rootScope.BodySystemData = result;
+                var systemMatchedTermList = new jinqJs()
+                                       .from($rootScope.BodySystemData.BodySystem.BodySystemTerm)
+                                       .where('_SystemNumber == ' + event.currentTarget.id)
+                                       .select();
+
+                $scope.refreshTerms(systemMatchedTermList);
+            },
+            function (error) {
+                console.log(error.statusText)
+            }
+            )
+
+        }
+    }
+
+    $scope.refreshTerms = function (termList) {
+
+        var path = '~/../content/data/json/da/vocab/english/cm_dat_vocabterm_1.json'
+
+        $http({ method: 'GET', url: '~/../content/data/json/da/vocab/english/cm_dat_vocabterm_1.json' }).success(function (data) {
+
+            var VocabTermData = data;
+
+            var vocabTermTxt = [];
+
+            for (var i = 0; i < termList.length; i++) {
+
+                var actulaTermNumber = new jinqJs()
+                                   .from($scope.TermNumberData.TermData.Term)
+                                   .where('_TermNumber == ' + termList[i]._TermNumber)
+                                   .select('_ActualTermNumber');
+                angular.forEach(VocabTermData.VocabTerms.Term, function (value2, key2) {
+
+
+                    if (actulaTermNumber[0]._ActualTermNumber == value2._ActualTermNumber) {
+                        vocabTermTxt.push(
+
+                             {
+
+                                 "_ActualTermNumber": value2._ActualTermNumber,
+
+                                 "_TermText": value2._TermText,
+
+                                 "_cdId": value2._cdId
+
+                             }
+
+                              );
+
+                    }
+
+                })
+
+            }
+
+
+
+
+
+            $scope.VocabTermTxt = new jinqJs()
+
+           .from(vocabTermTxt)
+
+           .distinct('_TermText', '_ActualTermNumber')
+
+           .orderBy([{ field: '_TermText', sort: 'asc' }])
+
+           .select('_ActualTermNumber', '_TermText', '_cdId');
+
+
+            for (var j = 0; j < $scope.VocabTermTxt.length; j++) {
+                var $el = $('<option ng-click=HighlightBodyOnListManagerSelection($event) id=' + $scope.VocabTermTxt[j]._ActualTermNumber + '>' + $scope.VocabTermTxt[j]._TermText + '</option>').appendTo('#termList')
+                $compile($el)($scope);
+            }
+
+            var termsTotal = '<span class="pull-left marginTop5">' + $scope.VocabTermTxt.length + ' Structures</span>';
+            $("#totalTerms").empty();
+            //$('#totalTerms').innerHTML = '';
+
+            $('#totalTerms').append(termsTotal);
+            $rootScope.isLoading = false;
+            $('#spinner').css('visibility', 'hidden');
+
+        })
+
+           .error(function (data, status, headers, config) {
+
+               console.log(data);
+
+           });
+
+
+    }
+
+
 }]
 
 );
\ No newline at end of file
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
index d1a379a..af32c1d 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
@@ -209,17 +209,43 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
 
         //list manager function
 
+        //list manager function
+
         $rootScope.ShowListManager = function () {
+            console.log('ShowListManager')
 
             $('#listManager').css('display', 'block');
+            $("#listManager").css("visibility", "visible");
+            $('#listManager').draggable();
 
             $rootScope.isLoading = true;
             $('#spinner').css('visibility', 'visible');
             $rootScope.islistManagerEventAlredayDispachted = true;
-           
+
             $rootScope.$broadcast('listManagerEvent', true);
         }
 
+        $rootScope.CloseListManager = function () {
+            console.log('close')
+            $rootScope.isListManagerSelected = false;
+            $('#listManager').css('display', 'none');
+            $("#listManager").css("visibility", "hidden");
+            // $rootScope.isAnnotationWindowClose = true;
+            //  if('#termList')
+            if ($('#termList option').length > 0) {
+                //$('#termList option') = null;
+                //$('#termList').innerHTML='';
+                $('#termList')
+                .find('option')
+                .remove()
+                .end()
+                if ($('#termList option').length > 0) {
+
+                }
+            }
+
+
+        }
 
         function fillListManagerTerms() {
 
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/main/AIA.js b/400-SOURCECODE/AIAHTML5.Web/app/main/AIA.js
index e7ccf00..f248667 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/main/AIA.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/main/AIA.js
@@ -162,6 +162,11 @@ AIA.constant('DA', [
         ethnicity: 'W',
         modesty: 'Y',
         figLeafTermId: '5868',
+        SKIN_START_INTERNAL_LAYER: 100,
+        SKIN_END_INTERNAL_LAYER: 199,
+        SKIN_DEFAULT_INTERNAL_LAYER: 100,
+        ZOOM_TERM_DATA: 50,
+        SKIN_TERM_ID: 1
     },
 ]);
 
diff --git a/400-SOURCECODE/AIAHTML5.Web/index.html b/400-SOURCECODE/AIAHTML5.Web/index.html
index 2acce58..24feea0 100644
--- a/400-SOURCECODE/AIAHTML5.Web/index.html
+++ b/400-SOURCECODE/AIAHTML5.Web/index.html
@@ -282,118 +282,109 @@
     </div>
    
      <!--List manager-->
-
     <style>
-        select[multiple], select[size] {
-            height: 100%;
-        }
+    #listManager {
+    background:#fff; border-radius:3px; border:1px solid #ededed;
+    -webkit-box-shadow: 0px 0px 2px 1px rgba(173,173,173,1);
+    -moz-box-shadow: 0px 0px 2px 1px rgba(173,173,173,1);
+    box-shadow: 0px 0px 2px 1px rgba(173,173,173,1);
+    width:350px;
+    position:absolute;top:170px;left:140px;display:none;z-index:1100;
+
+    }
+    #listManager .annotation-modal-header{ background:#818f44; padding:2px 10px; }
+    #listManager .annotation-modal-header h4{ color:#fff; font-size:15px; line-height:20px;}
+    #listManager .modal-header .close{ color:#fff; margin:0; opacity:10; text-shadow:none;}
+    #listManager .modal-footer{ padding:5px 10px;}
+
+    </style>
+    <div id="listManager" style="">
+        <div class="modal-header annotation-modal-header">
+            <button type="button" class="close" aria-label="Close" ng-click="CloseListManager()"><span aria-hidden="true">&times;</span></button>
+            <h4 class="modal-title" id="myModalLabel">List Manager</h4>
+        </div>
+        <div class="modal-body">
+            <div class="row paddingTopBtm10">
+                <div class="col-sm-12" ng-init="FillListManager()">
+
+                    <div class="form-group">
+                        <label for="sel1">Window</label>
+                        <select class="form-control" id="viewName">
+                            <!--<option>Male Lateral</option>-->
+
+                        </select>
+                    </div>
+                    <div style="">
+                        <div class="form-group">
+                            <div onclick="mytoggle()" class="btn btn-success btn-block" style="padding:3px 12px;">
+                                <i class=" fa fa-caret-right"></i>  <span>Restrict List to</span>
+                            </div>
+                        </div>
+
+                        <div id="divSection" style="display:none;">
+
+
+
+                            <div class="well well-sm marginTopBtm10">
+                                <div class="form-horizontal">
+                                    <div class="form-group">
+                                        <label class="col-sm-4 control-label" for="System">System</label>
+                                        <div class="col-sm-8">
+                                            <select id="bodySystems" class="form-control"></select>
+                                        </div>
+                                    </div>
+                                    <div class="form-group">
+                                        <label class="col-sm-4 control-label" for="inputPassword3">Area</label>
+                                        <div class="col-sm-8">
+                                            <select class="form-control">
+                                                <option value="1" selected="">Entire View</option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+
+                        </div>
+
+
+
+                        <div class="form-group">
+                            <select id="termList" class="form-control" multiple="" size="10"></select>
+                        </div>
+
+                    </div>
+                    <div style="clear:both;"></div>
+
+
+
+
+                </div>
+            </div>
+
+        </div>
+        <div class="modal-footer" id="totalTerms">
+            <!--<span class="pull-left marginTop5">424 Structures</span>-->
+            <button data-dismiss="modal" class="btn btn-primary" type="button"><i class="fa fa-arrow-circle-right"></i></button>
+        </div>
+    </div>
+    <script>
+        function mytoggle() {
+            var div = document.getElementById("divSection");
+            if (div.style.display == 'block') {
+                div.style.display = 'none';
+                return;
+            }
+            div.style.display = 'block';
+        }
+    </script>
+
+
+
 
-        .container {
-            margin-left: auto;
-            margin-right: auto;
-            padding-left: 15px;
-            padding-right: 15px;
-        }
-    </style>
-    <div id="listManager" style="position:fixed;top:80px;left:300px;display:none;z-index:1100;">
-        <div class="container" style="background:white;width:400px;height:500px;" ng-init="FillListManager()">
-            <div class="form-group">
-                <label for="sel1">Window</label>
-                <select class="form-control" id="sel1">
-                    <option>Male Lateral</option>
-
-                </select>
-            </div>
-            <div style="">
-                <div onclick="mytoggle()">
-                    <span class="caret"></span>  <span>Restrict List to</span>
-                </div>
-                <div id="divSection" style="display:none;">
-                    <div class="form-group form-inline">
-                        <label for=" email">
-                            System
-                        </label>
-                        <select class="form-control" id="sel1">
-                            <option>ALL</option>
-                            <option>Male Lateral</option>
-
-                        </select>
-                    </div>
-                    <div class="form-group form-inline">
-                        <label for=" email">
-                            Area:
-                        </label>
-                        <select class="form-control" id="sel1">
-                            <option>Entire View</option>
-                            <option>Entire View</option>
-
-                        </select>
-                    </div>
-                </div>
-                <div style="background:white;width:100%;height:400px;">
-                    <select id="termList" class="form-control" multiple="">
-                        <!--<option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>
-                        <option>ABC</option>-->
-
-                    </select>
-                </div>
-            </div>
-            <div style="clear:both;"></div>
-            <div>
-                <div style="float:left;">2330 Structure</div>
-
-                <div style="float:right;">
-                    <div>
-                        icon
-                        <span class="caret"></span>
-                    </div>
 
-                </div>
 
 
-            </div>
-        </div>
-    </div>
     <script>
         function mytoggle() {
             var div = document.getElementById("divSection");
--
libgit2 0.21.4