brnach wih issues

Nikita Kulshreshtha
1 parent 7c05a26c
Showing 3 changed files with 288 additions and 298 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
400-SOURCECODE/AIAHTML5.Web/app/views/atlas-anatomy-detail.html
@@ -592,14 +592,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         $("#layerChangeSlider").slider({
             orientation: "vertical",
-            range: "max", 
+            range: "max",
             min: 0,
             value: 0,
             slide: function (event, ui) {
-                  },
+            },
             stop: function (event, ui) {
-              
+
                 var la;
                 var rootScope = angular.element(document.getElementById("bo")).scope();
                 rootScope.$apply(function () {
@@ -652,24 +652,24 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     })
     // $rootScope.languageArray = [];
     $rootScope.loadSearchDataForBodyView = function () {
-     
+
         var languageArray = [];
         $rootScope.vocabTermDataArray = [];
         var languageArray = $rootScope.lexiconLanguageArray;
-       
+
         console.log(languageArray.length);
         console.log('loadSearchDataForBodyView');
-       
+
         var currentBodyViewId = localStorage.getItem("currentBodyViewId");
-      
+
         for (var i = 0; i <= languageArray.length - 1; i++) {
             var searchWorker = new Worker('search-wp.js');
-          
+
             //push workers in array to further used the refernece to delete the workers
             $scope.runningSearchWorkers.push({ 'workerName': searchWorker })
             //console.log('for bodyRegionId = ' + bodyRegionId + ', time: ' + new Date().toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1"))
-            
+
             searchWorker.postMessage({
@@ -679,38 +679,38 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             })
             searchWorker.onmessage = function (e) {
-            
+
                 //console.log('callback searchWorker , time: ' + new Date().toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1"));
                 $rootScope.TermNumberData = e.data.TermNumberData;
                 $rootScope.VocabTermData = e.data.VocabTermData,//same
                 $scope.vocabTermTxt = e.data.vocabTermTxt,
                  $scope.vocabLanguage = e.data.language,
                 $rootScope.vocabTermDataArray.push({ "language": $scope.vocabLanguage, "VocabTermData": $rootScope.VocabTermData, "vocabTermTxt": $scope.vocabTermTxt });
-                
+
                 for (var i = 0; i <= $rootScope.lexiconLanguageArray.length - 1; i++) {
-                
+
                     $rootScope.vocabTermDataArray[i].vocabTermTxt = new jinqJs()
                                          .from($rootScope.vocabTermDataArray[i].vocabTermTxt)
                                          .distinct('_TermText', '_ActualTermNumber')
                                          .orderBy([{ field: '_TermText', sort: 'asc' }])
                                          .select('_ActualTermNumber', '_TermText', '_cdId');
-                  //  console.log("Language= " + $rootScope.lexiconLanguageArray[i].language + ", vocabTermTxt= " + $rootScope.vocabTermDataArray[i].vocabTermTxt[0]._TermText);
+                    //  console.log("Language= " + $rootScope.lexiconLanguageArray[i].language + ", vocabTermTxt= " + $rootScope.vocabTermDataArray[i].vocabTermTxt[0]._TermText);
                 }
                 if ($rootScope.vocabTermDataArray.length == $rootScope.lexiconLanguageArray.length) {
-                $("#setting-spinner").css("display", "none");
-                //    $rootScope.isLoading = false;
-                //    $("#spinner").css("visibility", "hidden");
-                //   // $("#spinner").css("display", "none");
+                    $("#setting-spinner").css("display", "none");
+                    //    $rootScope.isLoading = false;
+                    //    $("#spinner").css("visibility", "hidden");
+                    //   // $("#spinner").css("display", "none");
-                //} else {
-                //    $rootScope.isLoading = true;
-                //    $("#spinner").css("visibility", "visible");
-                //   // $("#spinner").css("visibility", "block");
+                    //} else {
+                    //    $rootScope.isLoading = true;
+                    //    $("#spinner").css("visibility", "visible");
+                    //   // $("#spinner").css("visibility", "block");
                 }
@@ -731,7 +731,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 }
-               
+
             }
@@ -1034,7 +1034,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     //2.Draw mirror image
                     $scope.DrawMirroredImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), src, value._BodyRegionId, 'N');
-               
+
                     $rootScope.BodyRegionCordinatesData.push(
                                              {
                                                  "bodyRegionId": value._BodyRegionId, "Height": Math.round(rectangle.scaledHeight), "Width": Math.round(rectangle.scaledWidth),
@@ -1044,7 +1044,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     //3.GetMaskImageSource               
                     var maskImageSrc = $scope.GetMaskImageSource($scope.imageSource);
-                 
+
                     //4 Draw Mask Mirror Image                    
                     $scope.DrawMirroredImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), maskImageSrc, value._BodyRegionId, 'Y');
@@ -1179,7 +1179,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             }
         }
         //set scrollbars on canvas and hide loading label
-      
+
         // var isiOSSafari = (navigator.userAgent.match(/like Mac OS X/i)) ? true : false;
         var isiOSSafari = (navigator.userAgent.match(/iPad/i)) ? true : false;
@@ -1200,7 +1200,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         // $('#canvasDiv').scrollLeft($scope.imageHorizontlScrollPosition)
         $('#canvasDiv').scrollTop(50)
         var abc = $rootScope.BodyRegionCordinatesData;
-        
+
         $('#layerChangeSlider').slider("option", "value", parseInt($rootScope.totalLayers) - parseInt($scope.layerNumber));
         //  $('#spinner').css('visibility', 'hidden');
         $rootScope.isLoading = false;
@@ -1611,7 +1611,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 $scope.MultiLanguageAnnationArray = [];
                 for (var i = 0; i <= $rootScope.annotationText.length - 1; i++) {
-                  
+
                     $scope.MultiLanguageAnnationArray.push($rootScope.annotationText[i]);
                 }
@@ -1631,7 +1631,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     //   alert(annotationText);
                     $scope.MultiLanguageAnnationArray = [];
                     for (var i = 0; i <= $rootScope.annotationText.length - 1; i++) {
-                      
+
                         $scope.MultiLanguageAnnationArray.push($rootScope.annotationText[i]);
                     }
@@ -1643,7 +1643,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     //  $scope.createDynamicSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top);
                     $scope.MultiLanguageAnnationArray = [];
                     for (var i = 0; i <= $rootScope.annotationText.length - 1; i++) {
-                       
+
                         $scope.MultiLanguageAnnationArray.push($rootScope.annotationText[i]);
                     }
@@ -1698,19 +1698,19 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 var totalCanvas;
                 if (($rootScope.viewOrientationId == '1') || ($rootScope.viewOrientationId == '4')) {
                     totalCanvas = 9;
-                    
+
                 }
                 else if (($rootScope.viewOrientationId == '2') || ($rootScope.viewOrientationId == '3')) {
                     totalCanvas = 5;
-                   
+
                 }
                 else if (($rootScope.viewOrientationId == '5')) {
                     totalCanvas = 4;
-                  
+
                 }
                 else if (($rootScope.viewOrientationId == '6')) {
                     totalCanvas = 1;
-                
+
                 }
                 if ($scope.ColoredImageSRC.length < totalCanvas) {
@@ -1866,7 +1866,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         imgCanvas.addEventListener('click', function (evt) {
-     
+
             if ($scope.isLayerChange == true) {
                 $scope.isLayerChange = false;
             }
@@ -2015,7 +2015,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 //   alert(annotationText);
                 $scope.MultiLanguageAnnationArray = [];
                 for (var i = 0; i <= $rootScope.annotationText.length - 1; i++) {
-                  
+
                     $scope.MultiLanguageAnnationArray.push($rootScope.annotationText[i]);
                 }
@@ -2041,7 +2041,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     for (var i = 0; i <= $rootScope.annotationText.length - 1; i++) {
-                     
+
                         $scope.MultiLanguageAnnationArray.push($rootScope.annotationText[i]);
                     }
@@ -2053,7 +2053,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 else {
                     $scope.MultiLanguageAnnationArray = [];
                     for (var i = 0; i <= $rootScope.annotationText.length - 1; i++) {
-                       
+
                         $scope.MultiLanguageAnnationArray.push($rootScope.annotationText[i]);
                     }
@@ -2103,21 +2103,21 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                     var totalCanvas;
                     if (($rootScope.viewOrientationId == '1') || ($rootScope.viewOrientationId == '4')) {
                         totalCanvas = 9;
-                    
+
                     }
                     else if (($rootScope.viewOrientationId == '2') || ($rootScope.viewOrientationId == '3')) {
                         totalCanvas = 5;
-                   
+
                     }
                     else if (($rootScope.viewOrientationId == '5')) {
                         totalCanvas = 4;
-                  
+
                     }
                     else if (($rootScope.viewOrientationId == '6')) {
                         totalCanvas = 1;
                     }
-                
-                        if ($scope.ColoredImageSRC.length < totalCanvas) {
+
+                    if ($scope.ColoredImageSRC.length < totalCanvas) {
                         $scope.ColoredImageSRC.push(
                                            {
                                                "bodyRegionId": bodyRegionId, "SRC": src,
@@ -2495,7 +2495,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                             //  $timeout(function () { $scope.DisableProgressBar() }, 1000);
-                          
+
                         };
@@ -2843,7 +2843,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     //get annotation from term number
     $scope.GetAnnotationText = function (termNumber) {
-      
+
         $rootScope.annotationText = [];
         var annotationText;
         var annotation = [];
@@ -3092,7 +3092,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             //$scope.isMousUp();
-        
+
             $rootScope.isLoading = true;
             $('#spinner').css('visibility', 'visible');
@@ -3197,7 +3197,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         $rootScope.isLoading = false;
         $('#spinner').css('visibility', 'hidden');
-      
+
     }
@@ -3225,16 +3225,17 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
-    $scope.createDynamicSpeechBubble = function (event, x, y, isAnnotationNotForTBox) {
-      
-       
+    $scope.createDynamicSpeechBubble = function (event, x, y, isAnnotationForTBox) {
+
+
+        if (isAnnotationForTBox == true) {
             $scope.longestAnnotation = $scope.MultiLanguageAnnationArray.reduce(function (firstAnnotation, seconAnnotation) { return firstAnnotation.length > seconAnnotation.length ? firstAnnotation : seconAnnotation; });
             //1. In transparency box we shows two annotation at a time, so we need to decide the max length of annotation in btween two annotation because based on that 
             // we decide the size of speech bubble
             //2.
-         
-              if (event.ctrlKey) {
+
+            if (event.ctrlKey) {
                 console.log('ctrl pressed');
                 $scope.multiAnnotationIsON = true;
                 //2.1 create unique speech bubbles
@@ -3637,7 +3638,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                  + '<div style="position:absolute;border:1px solid #000;display:none;z-index:59000;" id="bord_annotation">'
                 + '</div>';
         $("#sppeachBubble_annotation").css("height", "auto");
-       
+
         if ($scope.longest_annotationT1.length > $scope.longest_annotationT2.length) {
             $("#sppeachBubble_annotation p").remove();
             $('#canvasDiv').append(sppechBubbleDotHTML_annotation);
@@ -3758,7 +3759,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     }
     function myFunction(crossId) {
- 
+
         $('#' + crossId).parent().parent().parent().css("display", "none");
     }
@@ -3834,7 +3835,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
-          
+
             $('#btnTranparency').addClass('tButtonActive');
             $('#btnIdentity').removeClass(' btn-primary');
             $('#btnIdentity').addClass('btn-black');
@@ -3961,7 +3962,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     function mouseUpListener(e) {
-       
+
         $scope.isTBDrawnOnBodyRegion = false;
         $(".com").remove();
@@ -4482,7 +4483,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 var tempCtx = transparencyTempCanvas.getContext('2d');
                 if (IsMirror == 'Yes') {
-                  
+
                     tempCtx.save();
                     tempCtx.translate(Width, 0);
                     tempCtx.scale(-1, 1);
@@ -4547,11 +4548,11 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         var tranparencyMaskImgSrc = $scope.GetMaskImageSource(tranparencyImgSrc);
         tempMaskImg.src = tranparencyMaskImgSrc;//"http://localhost/AIA/" + tranparencyMaskImgSrc;
         tempMaskImg.onload = function () {
-         
+
             var tempmaskCtx = transparencyTempcanavsMask.getContext('2d');
             if (IsMirror == 'Yes') {
-             
+
                 tempmaskCtx.save();
                 tempmaskCtx.translate(Width, 0);
                 tempmaskCtx.scale(-1, 1);
@@ -5066,7 +5067,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         // alert(annotationText);
         $scope.MultiLanguageAnnationArray = [];
         for (var i = 0; i <= $rootScope.annotationText.length - 1; i++) {
-         
+
             $scope.MultiLanguageAnnationArray.push($rootScope.annotationText[i]);
         }
         if (annotationText == "undefined") {
@@ -5310,8 +5311,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     function TransparencyCanvasClickListener(evt) {
-       // alert('tb clicked');
-      
+        // alert('tb clicked');
+
         var pixelData;
         var pixelDataTrans;
         var mousePos = $scope.getMousePos(evt);
@@ -5486,7 +5487,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 }
                 //$scope.annotationTextArrayT1.push(annotations.annotationT1);
                 // $scope.annotationTextArrayT2.push(annotations.annotationT2);
-               
+
                 $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, false);
             }
             else
@@ -5503,7 +5504,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 }
                 //$scope.annotationTextArrayT1.push(annotations.annotationT1);
                 // $scope.annotationTextArrayT2.push(annotations.annotationT2);
-               
+
                 $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, false);
             }
@@ -5521,7 +5522,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         var tCanvasWidthAftrSplit = tCanvasWidth.split("p");
         var tCanvasHeight = $(".ui-wrapper").css("height");
         var tCanvasHeightAftrSplit = tCanvasHeight.split("p");
-      //  alert("modesty");
+        //  alert("modesty");
         var tCanvasTotalWidth = parseInt(tCanvasLeftAftrSplit[0]) + parseInt(tCanvasWidthAftrSplit[0]);
         var tCanvasTotalHeight = parseInt(tCanvasTopAftrSplit[0]) + parseInt(tCanvasHeightAftrSplit[0]);
         var mousePos = $scope.getMousePos(evt);
@@ -5588,11 +5589,11 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 $scope.annotationTextArrayT1 = [];
                 $scope.annotationTextArrayT2 = [];
                 for (var i = 0; i <= annotations.annotationT1.length - 1; i++) {
-                    $scope.annotationTextArrayT1.push(annotations.annotationT1[i]); 
+                    $scope.annotationTextArrayT1.push(annotations.annotationT1[i]);
                 }
                 for (var i = 0; i <= annotations.annotationT2.length - 1; i++) {
-                    $scope.annotationTextArrayT2.push(annotations.annotationT2[i]); 
+                    $scope.annotationTextArrayT2.push(annotations.annotationT2[i]);
                 }
                 //$scope.annotationTextArrayT1.push(annotations.annotationT1);
                 // $scope.annotationTextArrayT2.push(annotations.annotationT2);
@@ -5613,15 +5614,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             var tCanvasHeightAftrSplit = tCanvasHeight.split("p");
             var tCanvasAttr = parseInt(tCanvasTopPosAftrSplit[0]) + parseInt(tCanvasHeightAftrSplit[0]);
-         //   if ((evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top) >= parseInt(tCanvasTopPosAftrSplit[0]) && (evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top) <= tCanvasAttr) {
-                $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, false);
+            //   if ((evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top) >= parseInt(tCanvasTopPosAftrSplit[0]) && (evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top) <= tCanvasAttr) {
+            $scope.createDynamicSpeechBubble(evt, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, false);
             //}
             //else {
             //    $rootScope.getAnnotationTextBasedOnSelectedBodyRegion(evt);
             //}
         }
-        else
-        {
+        else {
             $rootScope.getAnnotationTextBasedOnSelectedBodyRegion(evt);
         }
     }
@@ -5651,7 +5651,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         //trans  layer image data
         var pixelDataTrans = maskCanvasContexttrans.getImageData(imgX, imgY, 1, 1);
         // console.log('at the time' + pixelData.data[0])
-     
+
         var annotations = $scope.getAnnotationForTransparencyBox(pixelData, pixelDataTrans, $scope);
         if ($('#speechBubble').length > 0)
             $('#speechBubble').remove();
@@ -5917,7 +5917,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             //var txtTransparencyChange = document.getElementById("txtTransparencyChange");
             //txtTransparencyChange.value = 0;
             //   document.getElementById('txtLayerNumber').value = 0;
-       
+
             $('#layerChangeSlider').slider("option", "value", parseInt($rootScope.totalLayers) - parseInt($scope.currentLayerNumber));
@@ -6100,14 +6100,14 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         $rootScope.isNormalMode = false;
         $rootScope.isGenderChnage = false;
         $rootScope.isViewChange = false;
-       
+
         //if listanager is visisble then close it
         $rootScope.CloseListManager();
         $rootScope.isHighlightBodyByBodySystem = false;
-            
+
         $('#sppeachBubble').css('display', 'none');
         $("#dot").css("display", "none");
@@ -6363,7 +6363,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         }
         else {
-           
+
             //1.
             $scope.flushCanvas();
@@ -6388,7 +6388,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             //7.
-           // $scope.layerNumber = $('#txtlayerNumber').val();
+            // $scope.layerNumber = $('#txtlayerNumber').val();
             $scope.CalculateImageCordinates($rootScope.viewOrientationId);
             //      alert($rootScope.viewOrientationId + "gadash")
@@ -7184,7 +7184,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         DataService.getJson(layerJsonPath)
         .then(
          function (result) {
-       
+
              $rootScope.BodyLayerData = result;
@@ -7229,10 +7229,10 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                  else {
                      $scope.CalculateImageCordinates($rootScope.viewOrientationId);
-                    
+
                      //   $("#btnTranparency").remove("disabled");
                      $('#txtlayerNumber').val($scope.layerNumber)
-                     
+
                  }
@@ -8125,7 +8125,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             $("div#backdrop #termlistfilter li").find("a[id=" + actualTermNumber + "]").css({ "background-color": "#3399FF", "color": "#ffffff" });
             $scope.terminateCurrentlyRunningWPs();
-        
+
             $rootScope.isListManagerSelected = true;
             //---
             if ($rootScope.isListManagerSelected == true) {
@@ -8345,7 +8345,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     $scope.aligneCanvasWithTerm = function () {
         console.log('aligneCanvasWithTerm')
-    
+
         var newX = parseInt($scope.scaleValue($scope.termCoordinate.x, $rootScope.zoomInOut, DA[0].ZOOM_TERM_DATA));
         var newY = parseInt($scope.scaleValue($scope.termCoordinate.y, $rootScope.zoomInOut, DA[0].ZOOM_TERM_DATA));
@@ -8823,4 +8823,3 @@ function onListManagerTermSelection(id, isTermListOptionClicked) {
     });
 }
-
@@ -526,71 +526,71 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                                          .where("_TermId == " + pinTermNumber)
                                          .select();
-     
-                //3. get termText info
-                var promise = ModuleService.getTermTextForPin($scope.moduleName)
-               .then(
-                function (response) {
-                    $scope.TermInfo = response.data.Terms.Term;
+        //3. get termText info
+        var promise = ModuleService.getTermTextForPin($scope.moduleName)
+       .then(
+        function (response) {
+            $scope.TermInfo = response.data.Terms.Term;
-        var termTextdata = new jinqJs()
-                           .from($scope.TermInfo)
-                           .where("__ActualTermNumber == " + pinTermNumber)
-                           .select();
-        var termText = termTextdata[0].__TermText;
-        $scope.MultiLanguageAnnationArray = [];
-        $scope.MultiLanguageAnnationArray.push(termText);
-      
-        if (isCtrlPressed) {
+            var termTextdata = new jinqJs()
+                               .from($scope.TermInfo)
+                               .where("__ActualTermNumber == " + pinTermNumber)
+                               .select();
-        }
-        else {
-            if (isPinClicked) {
-                var existingSpeechBubble = $("div[id*='sppeachBubble']");
-                for (var i = 0; i < existingSpeechBubble.length; i++) {
-                    existingSpeechBubble[i].parentNode.removeChild(existingSpeechBubble[i]);
-
-                    //make all pin heads grey
-                    var radial = $('#aaDetailViewCanvas').createGradient({
-                        x1: 50, y1: 50,
-                        x2: 50, y2: 50,
-                        r1: 10, r2: 30,
-                        c1: 'rgba(100, 50, 0,0)',
-                        c2: 'rgb(216, 216, 216)'
-                    });
-
-                  
-                    $('#aaDetailViewCanvas').setLayers({
-                        fillStyle: radial,
-                    }).drawLayers();
-                }
+            var termText = termTextdata[0].__TermText;
+            $scope.MultiLanguageAnnationArray = [];
+            $scope.MultiLanguageAnnationArray.push(termText);
-                var existingSpeechBubbleLine = $("div[id*='speechBubbleLine']");
-                for (var i = 0; i < existingSpeechBubbleLine.length; i++) {
-                    existingSpeechBubbleLine[i].parentNode.removeChild(existingSpeechBubbleLine[i]);
-                }
-                var speechBubbleDraggedLine = $("div[id*='speechBubbleDraggedLine']");
-                for (var i = 0; i < speechBubbleDraggedLine.length; i++) {
-                    speechBubbleDraggedLine[i].parentNode.removeChild(speechBubbleDraggedLine[i]);
+            if (isCtrlPressed) {
+
+            }
+            else {
+                if (isPinClicked) {
+                    var existingSpeechBubble = $("div[id*='sppeachBubble']");
+                    for (var i = 0; i < existingSpeechBubble.length; i++) {
+                        existingSpeechBubble[i].parentNode.removeChild(existingSpeechBubble[i]);
+
+                        //make all pin heads grey
+                        var radial = $('#aaDetailViewCanvas').createGradient({
+                            x1: 50, y1: 50,
+                            x2: 50, y2: 50,
+                            r1: 10, r2: 30,
+                            c1: 'rgba(100, 50, 0,0)',
+                            c2: 'rgb(216, 216, 216)'
+                        });
+
+
+                        $('#aaDetailViewCanvas').setLayers({
+                            fillStyle: radial,
+                        }).drawLayers();
+                    }
+
+                    var existingSpeechBubbleLine = $("div[id*='speechBubbleLine']");
+                    for (var i = 0; i < existingSpeechBubbleLine.length; i++) {
+                        existingSpeechBubbleLine[i].parentNode.removeChild(existingSpeechBubbleLine[i]);
+                    }
+                    var speechBubbleDraggedLine = $("div[id*='speechBubbleDraggedLine']");
+                    for (var i = 0; i < speechBubbleDraggedLine.length; i++) {
+                        speechBubbleDraggedLine[i].parentNode.removeChild(speechBubbleDraggedLine[i]);
+                    }
                 }
             }
-        }
-        if (pinDataWithFirstTermNumber.length > 1) {
-            isSameTermWithMultiPin = true;
-        }
-        angular.forEach(pinDataWithFirstTermNumber, function (value, key) {
-            $scope.selectedPin.push(value._PinId);
-            var headX = (parseInt(value._HeadX));
-            var headY = (parseInt(value._HeadY));
-            $scope.createSpeechBubble(parseInt(headX) + 10, parseInt(headY) + 10, value._PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin);
-        })
-
-       },
-                function(error){})
+            if (pinDataWithFirstTermNumber.length > 1) {
+                isSameTermWithMultiPin = true;
+            }
+            angular.forEach(pinDataWithFirstTermNumber, function (value, key) {
+                $scope.selectedPin.push(value._PinId);
+                var headX = (parseInt(value._HeadX));
+                var headY = (parseInt(value._HeadY));
+                $scope.createSpeechBubble(parseInt(headX) + 10, parseInt(headY) + 10, value._PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin);
+            })
+
+        },
+        function (error) { })
     }
     $scope.ClearAllPins = function () {
@@ -602,10 +602,10 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     };
     $scope.createSpeechBubble = function (x, y, PinId, isCtrlPressed, isPinClicked, isSameTermWithMultiPin) {
-        
+
         $scope.longestAnnotation = $scope.MultiLanguageAnnationArray.reduce(function (firstAnnotation, seconAnnotation) { return firstAnnotation.length > seconAnnotation.length ? firstAnnotation : seconAnnotation; });
-         $scope.createSpeechBubbleBasedOnAnnotationLength(x, y, PinId);
+        $scope.createSpeechBubbleBasedOnAnnotationLength(x, y, PinId);
         $('#sppeachBubble').draggable(
         {
@@ -616,7 +616,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 $scope.angle(x, y, evt.pageX + horizontlScrollPosition - $('#imageDiv').offset().left, evt.pageY + verticalScrollPosition - $('#imageDiv').offset().top, true);
             },
         });
-                
+
     }
     $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo, language) {
@@ -696,7 +696,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
     }
-  
+
     $rootScope.Globe1 = [];
     $scope.createSpeechBubbleBasedOnAnnotationLength = function (x, y, PinId) {
@@ -776,7 +776,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             }
         }
         var Globe = [];
-       
+
         $rootScope.Globe1.push({ "currentX": x, "currentY": y, "id": PinId });
         Globe.push({ currentX: x, currentY: y });
         document.getElementById('speechBubbleLine' + PinId + '').style.display = 'block';
@@ -832,7 +832,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             });
-            $('#aaDetailViewCanvas').setLayer(pinHeadName,{
+            $('#aaDetailViewCanvas').setLayer(pinHeadName, {
                 fillStyle: radial,
             }).drawLayers();
         });
@@ -847,7 +847,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         });
         var pinHeadName = 'PinArc_' + PinId;
         var pin = $('#aaDetailViewCanvas').getLayer(pinHeadName);
-       // pin.fillStyle = radialAfterClick;
+        // pin.fillStyle = radialAfterClick;
         $('#aaDetailViewCanvas').setLayer(pinHeadName, {
             fillStyle: radialAfterClick,
@@ -880,7 +880,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         var f = cx;
         //   alert(d);
         if (BoolValues == true) {
-            $("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e-10) + 'px', 'left': (f-5) + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' });
+            $("#speechBubbleDraggedLine" + id).css({ 'display': 'block', 'width': d + 'px', 'top': (e - 10) + 'px', 'left': (f - 5) + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' });
         }
         else {
             $("#bord_annotation").css({ 'display': 'block', 'width': d + 'px', 'top': e + 'px', 'left': f + 'px', 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%' });
@@ -919,9 +919,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
             fillStyle: radial,
             x: x, y: y,
             radius: 5,
-           
+
             click: function (clickedPin) {
-                
+
                 //change the head color to green
                 var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
                     x1: 50, y1: 50,
@@ -942,7 +942,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                             .where("_PinId == " + pinID)
                             .select();
                 if (clickedPin.event.ctrlKey == true) {
-                    $scope.showAnnotation(selectedPinData,true, true );
+                    $scope.showAnnotation(selectedPinData, true, true);
                 }
                 else {
@@ -954,11 +954,11 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 //    var pinHeadName = 'Arc_' + value;
                 //    var pin = $('aaDetailViewCanvas').getLayer(pinHeadName);
                 //    pin.fillStyle = radialAfterClick;
-                   
-                    
+
+
                 //})
-                    
+
             }
         }).drawLayers();
@@ -983,5 +983,5 @@ function showSelectedSystemPins(event) {
     });
 }
 onCloseBtnClick = function (event) {
-        alert('closed')
-    }
+    alert('closed')
+}
 \ No newline at end of file
-
-    <div class="container-fluid ">
-        <!--Header-->
-        <nav class="navbar navbar-inverse navbar-fixed-top">
-            <div class="container-fluid">
-                <!-- Brand and toggle get grouped for better mobile display -->
-                <div class="navbar-header">
-                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
-                    <a class="frameLogo navbar-brand" href="welcome.html"><img src="img/logo-main.png" class="img-responsive" alt=""></a>
-                </div>
-             
-            </div>
-        </nav>
-        <!--Body-->
-        <div class="bodyWrap row">
-            <div class="col-sm-12 pageHeading">
-                <!--<button type="button" class="btn btn-success pull-left toggleBar btn-sm" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"> <i class="fa fa-bars"></i> </button>-->
-                <!--<div class=" pull-left toggleBar toggleHeadingButton" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"> <i class="fa fa-exchange"></i> </div>-->
-                <h4 class="pull-left">1<sup>st</sup> &amp; 2<sup>nd</sup> Intercostal Spaces</h4>
-                <div class="pull-right btn-group paddTop4 hidden-xs"> <a href="#" class="btn btn-xs btn-default"><i class="fa fa-minus"></i></a> <a href="#" class="btn btn-xs btn-default"><i class="fa fa-clone"></i></a> <a href="#" class="btn btn-xs btn-default"><i class="fa fa-close"></i></a> </div>
-                <div class="clearfix"></div>
+<div id="aaDetailPageDiv" class="bodyWrap row" ng-controller="TileViewListController">
+
+    <!--<div class="col-sm-12 pageHeading">
+        <!--<button type="button" class="btn btn-success pull-left toggleBar btn-sm" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"> <i class="fa fa-bars"></i> </button>-->
+    <!--<div class=" pull-left toggleBar toggleHeadingButton" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"> <i class="fa fa-exchange"></i> </div>-->
+    <!--<h4 class="pull-left">1<sup>st</sup> &amp; 2<sup>nd</sup> Intercostal Spaces</h4>-->
+    <!--<div class="pull-right btn-group paddTop4 hidden-xs"> <a href="#" class="btn btn-xs btn-default"><i class="fa fa-minus"></i></a> <a href="#" class="btn btn-xs btn-default"><i class="fa fa-clone"></i></a> <a href="#" class="btn btn-xs btn-default"><i class="fa fa-close"></i></a> </div>
+    <div class="clearfix"></div>-->
+    <!--</div>-->
+    <div class="tools pull-left" style="top:44px;">
+        <div class="toggle-icon toggleBar toggleHeadingButton" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"></div>
+        <div class="">
+            <div class="col-sm-6" title="Hide Pins"><button class="btn btn-black btn-sm" ng-click="alert('hi pin')"> <img src="../../../content/images/aa/LeftMenu/hide-pin.png" alt="" title=""></button> </div>
+            <div class="col-sm-6" title="Show Selected Pins"><button class="btn btn-black btn-sm pull-right"><img src="../../../content/images/aa/LeftMenu/draw-pin.png" alt="" title=""></button></div>
+            <div class="col-sm-6" title="Show All Pins in System(s)"><button class="btn btn-primary btn-sm marginTop5"><img src="../../../content/images/aa/LeftMenu/all-pin.png" alt="" title=""></button></div>
+            <div class="col-sm-6" title="Select System">
+                <button class="btn btn-black btn-sm pull-right marginTop5 dropdown-toggle" type="button" id="dropdownMenu221" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><img src="../../../content/images/aa/LeftMenu/icon-highlight.png" alt="" title=""></button>
+                <ul class="dropdown-menu" aria-labelledby="dropdownMenu221">
+                    <li><a href="#" title="Current Structure">All</a></li>
+                    <li role="separator" class="divider"></li>
+                    <li><a id="1" href="#" title="Cardiovascular" onclick="showSelectedSystemPins(event)">Cardiovascular</a></li>
+                    <li><a id="2" href="#" title="Digestive" onclick="showSelectedSystemPins(event)">Digestive</a></li>
+                    <li class="disabled"><a id="3" href="#" title="Endocrine" onclick="showSelectedSystemPins(event)">Endocrine</a></li>
+                    <li><a id="4" href="#" title="Immune" onclick="showSelectedSystemPins(event)">Immune</a></li>
+                    <li class="disabled"><a id="5" href="#" title="Integumentary" onclick="showSelectedSystemPins(event)">Integumentary</a></li>
+                    <li class="disabled"><a id="6" href="#" title="Lymphatic" onclick="showSelectedSystemPins(event)">Lymphatic</a></li>
+                    <li><a id="7" href="#" title="Muscular" onclick="showSelectedSystemPins(event)">Muscular</a></li>
+                    <li class="disabled"><a id="8" href="#" title="Nervous" onclick="showSelectedSystemPins(event)">Nervous</a></li>
+                    <li class="disabled"><a id="9" href="#" title="Reproductive" onclick="showSelectedSystemPins(event)">Reproductive</a></li>
+                    <li class="disabled"><a id="10" href="#" title="Respiratory" onclick="showSelectedSystemPins(event)">Respiratory</a></li>
+                    <li><a id="11" href="#" title="Skeletal" onclick="showSelectedSystemPins(event)">Skeletal</a></li>
+                    <li class="disabled"><a id="12" href="#" title="Urinary" onclick="showSelectedSystemPins(event)">Urinary</a></li>
+                </ul>
+
             </div>
-            <div class="tools pull-left" style="top:44px;">
-                <div class="toggle-icon toggleBar toggleHeadingButton" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"></div>
+            <div class="col-sm-12" data-toggle="tooltip" data-placement="top" title="Show/Hide Structure Name Boxes"><button class="btn btn-black btn-sm marginTop5 btn-block"> <img src="../../../content/images/aa/LeftMenu/comment-box.png" alt="" title=""></button> </div>
+        </div>
+        <div class="pips-slider" style="margin-top:125px">
+            <h3>Zoom <i class="fa fa-search-plus"></i></h3>
+            <div class="slider" id="vertical-slider"></div>
+        </div>
+    </div>
+
+    <div class="main2">
+        <div class="col-sm-12 stickey-area">
+            <div class="breadcrumb">
                 <div class="">
-                    <div class="col-sm-6" title="Hide Pins"><button class="btn btn-black btn-sm"> <img src="img/hide-pin.png" alt="" title=""></button> </div>
-                    <div class="col-sm-6" title="Show Selected Pins"><button class="btn btn-black btn-sm pull-right"><img src="img/draw-pin.png" alt="" title=""></button></div>
-                    <div class="col-sm-6" title="Show All Pins in System(s)"><button class="btn btn-primary btn-sm marginTop5"><img src="img/all-pin.png" alt="" title=""></button></div>
-                    <div class="col-sm-6" title="Select System">
-                        <button class="btn btn-black btn-sm pull-right marginTop5 dropdown-toggle" type="button" id="dropdownMenu221" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><img src="img/icon-highlight.png" alt="" title=""></button>
-                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu221">
-                            <li><a href="#" title="Current Structure">All</a></li>
+                    <div class="input-group col-sm-8 col-xs-7 col-md-10 pull-left">
+                        <input class="form-control input-sm " type="text" placeholder="Anterior cutaneous branch of first intercostal nerve">
+                        <!--<select class="form-control input-sm ">
+                          <option>---Select---</option>
+                          <option selected>Anterior cutaneous branch of first intercostal nerve</option>
+                          <option>Anterior cutaneous branch of second intercostal nerve</option>
+                          <option>Anterior cutaneous branch of third intercostal nerve</option>
+                          <option>Anterior intercostal artery</option>
+                          <option>Anterior intercostal vein</option>
+                        </select>-->
+                        <!--<div class="input-group-addon btn btn-primary btn-sm"></div>-->
+                    </div>
+                    &nbsp;
+                    <!-- Single button -->
+                    <div class="btn-group">
+                        <button type="button" class="btn btn-success dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <i class="fa fa-arrow-circle-right"></i>
+                        </button>
+                        <ul class="dropdown-menu">
+                            <li><a href="#">1<sup>st</sup> &amp; 2<sup>nd</sup> Intercostal Spaces</a></li>
                             <li role="separator" class="divider"></li>
-                            <li><a href="#" title="Cardiovascular">Cardiovascular</a></li>
-                            <li><a href="#" title="Digestive">Digestive</a></li>
-                            <li class="disabled"><a href="#" title="Endocrine">Endocrine</a></li>
-                            <li class="disabled"><a href="#" title="Immune">Immune</a></li>
-                            <li class="disabled"><a href="#" title="Integumentary">Integumentary</a></li>
-                            <li class="disabled"><a href="#" title="Lymphatic">Lymphatic</a></li>
-                            <li><a href="#" title="Muscular">Muscular</a></li>
-                            <li class="disabled"><a href="#" title="Nervous">Nervous</a></li>
-                            <li class="disabled"><a href="#" title="Reproductive">Reproductive</a></li>
-                            <li class="disabled"><a href="#" title="Respiratory">Respiratory</a></li>
-                            <li><a href="#" title="Skeletal">Skeletal</a></li>
-                            <li class="disabled"><a href="#" title="Urinary">Urinary</a></li>
+                            <li><a href="#">All</a></li>
                         </ul>
-
                     </div>
-                    <div class="col-sm-12" data-toggle="tooltip" data-placement="top" title="Show/Hide Structure Name Boxes"><button class="btn btn-black btn-sm marginTop5 btn-block"> <img src="img/comment-box.png" alt="" title=""></button> </div>
-                </div>
-                <div class="pips-slider" style="margin-top:125px">
-                    <h3>Zoom <i class="fa fa-search-plus"></i></h3>
-                    <div class="slider" id="vertical-slider"></div>
+                    <div class="btn-group">
+                        <button type="button" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="navigatorMan" ng-click="alert('hi nav')">
+                            <i class="fa fa-male"></i>
+                        </button>
+                        <ul class="dropdown-menu" style="min-width:auto;">
+                            <li><img src="../../../content/images/aa/LeftMenu/position.jpg" class="img-responsive"></li>
+                        </ul>
+                    </div>
+
                 </div>
             </div>
+        </div>
+        <!--<img id="scream" width="220" height="277" src="~/../../../content/images/noraml-pin.png" style="visibility:hidden" alt="The Scream">-->
+        <!--<img src="../../../content/images/noraml-pin.png" style="visibility:hidden" id="normal-pin"/>-->
+        <div class="col-sm-12">
+            <div class="container-fluid">
+                <div class="row">
-            <div class="main2">
-                <div class="col-sm-12 stickey-area">
-                    <div class="breadcrumb">
-                        <div class="">
-                            <div class="input-group col-sm-8 col-xs-7 col-md-10 pull-left">
-                                <input class="form-control input-sm " type="text" placeholder="Anterior cutaneous branch of first intercostal nerve">
-                                <!--<select class="form-control input-sm ">
-                                  <option>---Select---</option>
-                                  <option selected>Anterior cutaneous branch of first intercostal nerve</option>
-                                  <option>Anterior cutaneous branch of second intercostal nerve</option>
-                                  <option>Anterior cutaneous branch of third intercostal nerve</option>
-                                  <option>Anterior intercostal artery</option>
-                                  <option>Anterior intercostal vein</option>
-                                </select>-->
-                                <!--<div class="input-group-addon btn btn-primary btn-sm"></div>-->
-                            </div>
-                            &nbsp;
-                            <!-- Single button -->
-                            <div class="btn-group">
-                                <button type="button" class="btn btn-success dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                    <i class="fa fa-arrow-circle-right"></i>
-                                </button>
-                                <ul class="dropdown-menu">
-                                    <li><a href="#">1<sup>st</sup> &amp; 2<sup>nd</sup> Intercostal Spaces</a></li>
-                                    <li role="separator" class="divider"></li>
-                                    <li><a href="#">All</a></li>
-                                </ul>
-                            </div>
-                            <div class="btn-group">
-                                <button type="button" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                    <i class="fa fa-male"></i>
-                                </button>
-                                <ul class="dropdown-menu" style="min-width:auto;">
-                                    <li><img src="img/position.jpg" class="img-responsive"></li>
-                                </ul>
-                            </div>
-
-                        </div>
-                    </div>
-                </div>
-                <div class="col-sm-12">
-                    <div class="container-fluid">
-                        <div class="row">
-                            <div class="col-sm-12 img-thumbnail" align="center"><img src="img/1000x600.jpg" alt="" title="" class="img-responsive"></div>
-                            <!--<div class="col-sm-1 img-thumbnail pull-right" align="center"><img src="img/500x300.jpg" alt="" title="" class="img-responsive"></div>
-                            <div class="clearfix"></div>-->
-                        </div>
+                    <div class=" col-sm-12 img-thumbnail" id="imageDiv" style="height: 478px; overflow: scroll;">
+                        <img id="modItemImage" alt="" title="" style="left:0px;top:0px;position:absolute">
+                        <!--<div class="clearfix">
+                                           <img id="modItemImage" ng-init="alert('hi')" alt="" title="" class="img-responsive">
+                                        </div>
+                                        <!--<div class="col-sm-1 img-thumbnail pull-right" align="center"><img src="../../content/images/1000x600.jpg" alt="" title="" class="img-responsive"></div>
+                        <div class="clearfix"></div>-->
                     </div>
                 </div>
-                <div class="clearfix"></div>
-
+            </div>
-            </div>
         </div>
-    </div>
+    </div>
+</div>
-    
-    <script>
-        $(window).load(function () {
-            $(".stickey-area").sticky();
-        });
-    </script>
-    <script>
-        $(function () {
-            $("#slider-range-min-2").slider({
-                range: "min",
-                min: 1,
-                max: 60,
-                value: 10,
-                slide: function (event, ui) {
-                    $("#amount-2").val(ui.value);
-                }
-            });
-            $("#amount-2").val($("#slider-vertical-2").slider("value"));
-
+<script>
+    $(window).load(function () {
+        $(".stickey-area").sticky();
+    });
+</script>
+<script>
+    $(function () {
+        $("#slider-range-min-2").slider({
+            range: "min",
+            min: 1,
+            max: 60,
+            value: 10,
+            slide: function (event, ui) {
+                $("#amount-2").val(ui.value);
+            }
         });
-    </script>
+        $("#amount-2").val($("#slider-vertical-2").slider("value"));
-    <script>
-        $(document).ready(function () {
-            $('[data-toggle="tooltip"]').tooltip();
-        });
-    </script>
-    <script src="js/jquery-ui-slider-pips.js"></script>
-    <script>
-        $(".slider")
+    });
+</script>
-        .slider({
-            min: 25,
-            max: 100,
-            value: 100,
-            range: "min",
-            orientation: "vertical"
-        })
+<script>
+    $(document).ready(function () {
+        $('[data-toggle="tooltip"]').tooltip();
+    });
+</script>
+<script src="js/jquery-ui-slider-pips.js"></script>
+<script>
+    $(".slider")
-        .slider("pips", {
-            rest: "label",
-            step: "15"
-        });
-    </script>
+    .slider({
+        min: 25,
+        max: 100,
+        value: 100,
+        range: "min",
+        orientation: "vertical"
+    })
-    <script>
-        $(function () {
-            $("#draggable").draggable();
-        });
-    </script>
+    .slider("pips", {
+        rest: "label",
+        step: "15"
+    });
+</script>
+<script>
+    $(function () {
+        $("#draggable").draggable();
+    });
+</script>
+<script src="app/controllers/TileViewListController.js"></script>
 \ No newline at end of file