ADAM / AIAHTML5

Commit 1ddf7575ab77f87d72dca1091961a3790ed565b5

Authored by Nikita Kulshreshtha
1 parent 4ffad4e9

all is working fine except toggle button in male anterior. 

in this commit.
1. layer change and Annoatations are working fine.
Inline Side-by-side
Showing 28 changed files with 2442 additions and 941 deletions
400-SOURCECODE/AIAHTML5.Web/Web.config
  View file @1ddf757
... ... @@ -38,7 +38,7 @@
38 38 <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
39 39 <mimeMap fileExtension=".mp3" mimeType="audio/mpeg" />
40 40 <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
41   -
  41 + <!--<mimeMap fileExtension=".json" mimeType="application/json" />-->
42 42  
43 43 </staticContent>
44 44 <defaultDocument enabled="true">
... ...
400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
  View file @1ddf757
1   -
2   -'use strict';
3   -
4   -AIA.controller("DAController", ["$scope", "$rootScope", "$compile", "$http", "$log", "$location", "$timeout", "DA","Modules", "$routeParams",
5   -function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,Modules,$routeParam ) {
6   -
7   - $scope.genderId = "";
8   - $scope.BodyViewData = null;
9   - $scope.selectedGenderBodyViewData = null;
10   - $scope.imagePath = "";
11   - $scope.BodyRegionData = null;
12   - $scope.BodyRegionCordinatesData = null;
13   - $scope.isTransparencyActivated = null;
14   - $scope.BodyLayerData = null;
15   - $scope.VocabTermData = null;
16   - $scope.bodyViewId = 0;
  1 +'use strict';
  2 +
  3 +AIA.controller("DAController", ["$scope", "$rootScope", "$compile", "$http", "$log", "$location", "$timeout", "DA", "Modules", "$routeParams",
  4 +function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Modules, $routeParam) {
  5 +
  6 + $scope.genderId = "";
  7 + $scope.BodyViewData;
  8 + $scope.selectedGenderBodyViewData;
  9 + $scope.imagePath = "";
  10 + $scope.BodyRegionData;
  11 + $scope.BodyRegionCordinatesData;
  12 + $scope.isTransparencyActivated;
  13 + $scope.BodyLayerData;
  14 + $scope.VocabTermData;
  15 + $scope.TermNumberData;
  16 + $scope.bodyViewId = 0;
17 17 //view specific constants
18   - $scope.voId ;
19   - $scope.layerNo;
20   - $scope.daCounter=1;
21   -
  18 + $scope.voId;
  19 + $scope.layerNumber;
  20 + $scope.daCounter = 1;
22 21  
23   - //get the DA body view list based on selected gender
24   - $scope.getDAViewList = function ($event) {
25 22  
26   - // debugger;
27   - if ($('#MainImage') != null) {
28   - $('#MainImage').remove();
29   - }
30   - $rootScope.currentActiveModuleTitle = Modules[0].Name;
31   - $("#bodyViewList").empty();
32   - //for default load
33   - if ($event == null) {
34   - $scope.genderId = "Male";
  23 + //get the DA body view list based on selected gender
  24 + $scope.getDAViewList = function ($event) {
  25 +
  26 + // debugger;
  27 + if ($('#MainImage') != null) {
  28 + $('#MainImage').remove();
  29 + }
  30 + $rootScope.currentActiveModuleTitle = Modules[0].Name;
  31 + $("#bodyViewList").empty();
  32 + //for default load
  33 + if ($event == null) {
  34 + $scope.genderId = "Male";
  35 + }
  36 + else {
  37 + $scope.genderId = $event.currentTarget.id;
  38 + }
  39 + if ($event != null) {
  40 + if ($event.currentTarget.id == "Male") {
  41 + $('#Male').addClass('active');
  42 + $('#Female').removeClass("active");
35 43 }
36 44 else {
37   - $scope.genderId = $event.currentTarget.id;
  45 + $('#Female').addClass('active');
  46 + $('#Male').removeClass("active");
38 47 }
39   - if ($event != null) {
40   - if ($event.currentTarget.id == "Male") {
41   - $('#Male').addClass('active');
42   - $('#Female').removeClass("active");
43   - }
44   - else{
45   - $('#Female').addClass('active');
46   - $('#Male').removeClass("active");
47   - }
48   -
49   - }
50   - $scope.selectedGenderBodyViewData = new jinqJs()
51   - .from($scope.BodyViewData.BodyViews.view)
52   - .where('_gender == ' + $scope.genderId)
53   - .select();
54   -
55   -
56   - angular.forEach($scope.selectedGenderBodyViewData, function (value, key) {
57   -
58   - var userEthnicity = DA[0].ethnicity;
59   - var userModestysettings = DA[0].modesty;
60   - var userSelectedSkintone = 'W';
61   - $scope.userModestySetting = 'Y'
62   - var thumbnailImage;
63   - if((value._id==1)||(value._id==3)|| (value._id==5)||(value._id==6)||(value._id==7)||(value._id==11))
64   - thumbnailImage = ((value._thumbnailImage).replace('.jpg', '_' + userEthnicity + userModestysettings)) + '.jpg';
65   - else {
66   - thumbnailImage = ((value._thumbnailImage).replace('.jpg', '_' + userEthnicity)) + '.jpg';
67   -
68   - }
69   -
70   - $scope.imagePath = "~/../content/images/DA/BodyViews/" + value._id + '/skintone/' + userEthnicity + '/' + thumbnailImage;
71   - // debugger;
72   -
73   - var $el = $('<div id=' + value._id + ' class="col-sm-3 col-lg-2" title = ' + value._title + ' data-ng-click="openView($event)"><div class="thumbnail" >'
74   - + '<img class= "daImg" id="' + value._title + '" src="' + $scope.imagePath + '" alt="" title="" >'
75   - + '<div class="caption"><p>' + value._title + '</p></div></a></div></div>').appendTo('#bodyViewList');
76   -
77   -
78   - $compile($el)($scope);
79   - $(".sidebar").mCustomScrollbar({
80   - autoHideScrollbar: true,
81   - //theme:"rounded"
82   - });
83   -
84   - });
85   -
86   - };
87   -
88   -
89   -
90   - $scope.openView = function ($event) {
91   - // debugger;
92   - $rootScope.currentBodyViewId = $event.currentTarget.id;
93   - $rootScope.ViewTitle = $event.currentTarget.textContent;
94   -
95   - localStorage.setItem("currentViewTitleFromJson", $event.currentTarget.textContent);
96   - localStorage.setItem("currentBodyViewId", $event.currentTarget.id);
97   -
98   - var u = $location.url();
99   - $location.url('/da-body-view');
100   -
101   -
102   - }
103 48  
104   -
105   - //load json data for body view
106   - $scope.loadDissectibleAnatomyData = function () {
107   -
108   - $rootScope.ClearIframe();
109   - //load bodyView data
110   - $http({ method: 'GET', url: '~/../content/data/json/da_dat_contentlist.json' }).success(function (data) {
111   -
112   - $scope.BodyViewData = data;
113   - //load default body view list for male
114   - $scope.getDAViewList();
115   -
116   - })
117   - .error(function (data, status, headers, config) {
118   - console.log(data);
119   - });
120   -
121   -
122   -
123   - $('#daLoaderLabel').css('visibility', 'hidden')
124   -
125   -
126   - $http({ method: 'GET', url: '~/../content/data/json/da_dat_tm_sg_1.json' }).success(function (data) {
127   - $scope.TermNumberData = data;
128   -
129   - })
130   - .error(function (data, status, headers, config) {
131   - console.log(data);
132   - });
133   -
134   -
135   - //load vocabterm data
136   - $http({ method: 'GET', url: '~/../content/data/json/cm_dat_vocabterm_1.json' }).success(function (data) {
137   - $scope.VocabTermData = data;
138   - })
139   - .error(function (data, status, headers, config) {
140   - console.log(data);
141   - });
142   -
143   - //push the details of open module in array $rootScope.openModules
144   - $rootScope.openModules.push( { "ModuleId": 1 } );
145 49 }
  50 + $scope.selectedGenderBodyViewData = new jinqJs()
  51 + .from($scope.BodyViewData.BodyViews.view)
  52 + .where('_gender == ' + $scope.genderId)
  53 + .select();
146 54  
147 55  
148   - //da-body-view functions
  56 + angular.forEach($scope.selectedGenderBodyViewData, function (value, key) {
149 57  
150   - $scope.openBodyView = function () {
151   -
152   -
153   - var openViews;
154   - var currentBodyViewId = localStorage.getItem("currentBodyViewId");
155   - // debugger;
156   - if ($rootScope.openViews.length>0) {
157   - openViews = new jinqJs()
158   - .from($rootScope.openViews)
159   - .where("BodyViewId==" + currentBodyViewId)
160   - .select();
161   - }
162   - var counter = 1;
163   -
164   - // var tittle = $rootScope.ViewTitle;
165   - var tittle = localStorage.getItem("currentViewTitleFromJson");
166   -
167   - if (openViews!=null && openViews.length > 0)
168   - {
169   - angular.forEach(openViews, function (value, key) {
170   -
171   - if (value.BodyView == tittle) {
172   - tittle = localStorage.getItem("currentViewTitleFromJson") + counter++;
173   - $rootScope.currentActiveViewTitle = tittle;
174   - localStorage.setItem("currentViewTitle", tittle);
175   - }
176   -
177   - });
178   - }
  58 + var userEthnicity = DA[0].ethnicity;
  59 + var userModestysettings = DA[0].modesty;
  60 + var userSelectedSkintone = 'W';
  61 + $scope.userModestySetting = 'Y'
  62 + var thumbnailImage;
  63 + if ((value._id == 1) || (value._id == 3) || (value._id == 5) || (value._id == 6) || (value._id == 7) || (value._id == 11))
  64 + thumbnailImage = ((value._thumbnailImage).replace('.jpg', '_' + userEthnicity + userModestysettings)) + '.jpg';
179 65 else {
180   - localStorage.setItem("currentViewTitle", tittle);
  66 + thumbnailImage = ((value._thumbnailImage).replace('.jpg', '_' + userEthnicity)) + '.jpg';
  67 +
181 68 }
182 69  
183   -
184   -
185   - $.jsPanel({
186   - id: 'daImagePanel',
187   - //selector: '.daView',
188   - theme: 'success',
189   - ajax: {
190   - url: 'app/views/da/da-view.html'
191   - },
192   - title: localStorage.getItem("currentViewTitle"),
193   - // bootstrap: 'columns large-10 medium-9',
194   - position: {
195   - top: 70, //50,
196   - left: 1,
197   - // right: 0
198   - },
199   - //overflow: { horizontal: 'scroll', vertical: 'scroll' },
200   -
201   - size: { width: $(window).outerWidth()-10 , height: $(window).outerHeight()-110 },
202   - //size: { width: 500, height: 500 },
  70 + $scope.imagePath = "~/../content/images/DA/BodyViews/" + value._id + '/skintone/' + userEthnicity + '/' + thumbnailImage;
  71 + // debugger;
  72 +
  73 + var $el = $('<div id=' + value._id + ' class="col-sm-3 col-lg-2" title = ' + value._title + ' data-ng-click="openView($event)"><div class="thumbnail" >'
  74 + + '<img class= "daImg" id="' + value._title + '" src="' + $scope.imagePath + '" alt="" title="" >'
  75 + + '<div class="caption"><p>' + value._title + '</p></div></a></div></div>').appendTo('#bodyViewList');
  76 +
203 77  
  78 + $compile($el)($scope);
  79 + $(".sidebar").mCustomScrollbar({
  80 + autoHideScrollbar: true,
  81 + //theme:"rounded"
204 82 });
205 83  
206   - $scope.LoadDefaultLayerImage();
207   - // $rootScope.openViewsDA.push({ "ViewId": 1 });
208   - $rootScope.currentSlug = 'da-body-view';
209   -
210   - //hide scrollbar
  84 + });
211 85  
  86 + };
212 87  
213   - $rootScope.openViews.push(
214   - {
215   - "module": $rootScope.currentActiveModuleTitle, "BodyView": tittle, "state": 'max', "BodyViewId": $rootScope.currentBodyViewId,
216   - "slug": $rootScope.currentSlug
217   - }
218   - );
219   - // debugger;
220   - }
221 88  
222   - angular.element(document).ready(function () {
223 89  
  90 + $scope.openView = function ($event) {
  91 + // debugger;
  92 + $rootScope.currentBodyViewId = $event.currentTarget.id;
  93 + $rootScope.ViewTitle = $event.currentTarget.textContent;
  94 +
  95 + localStorage.setItem("currentViewTitleFromJson", $event.currentTarget.textContent);
  96 + localStorage.setItem("currentBodyViewId", $event.currentTarget.id);
  97 +
  98 + var u = $location.url();
  99 + $location.url('/da-body-view');
  100 +
  101 +
  102 + }
  103 +
  104 +
  105 + //load json data for body view
  106 + $scope.loadDissectibleAnatomyData = function () {
  107 +
  108 + $rootScope.ClearIframe();
  109 + //load bodyView data
  110 + $http({ method: 'GET', url: '~/../content/data/json/da_dat_contentlist.json' }).success(function (data) {
  111 +
  112 + $scope.BodyViewData = data;
  113 + //load default body view list for male
  114 + $scope.getDAViewList();
224 115  
225   -
226 116 })
227   -
  117 + .error(function (data, status, headers, config) {
  118 + console.log(data);
  119 + });
228 120  
229 121  
  122 + $('#daLoaderLabel').css('visibility', 'hidden')
230 123  
231 124  
  125 + $http({ method: 'GET', url: '~/../content/data/json/da_dat_tm_sg_1.json' }).success(function (data) {
  126 + $scope.TermNumberData = data;
  127 +
  128 + })
  129 + .error(function (data, status, headers, config) {
  130 + console.log(data);
  131 + });
232 132  
233 133  
  134 + //load vocabterm data
  135 + $http({ method: 'GET', url: '~/../content/data/json/cm_dat_vocabterm_1.json' }).success(function (data) {
  136 + $scope.VocabTermData = data;
  137 + })
  138 + .error(function (data, status, headers, config) {
  139 + console.log(data);
  140 + });
234 141  
235   - $scope.LoadDefaultLayerImage = function () {
236   -
237   - $http({ method: 'GET', url: '~/../content/data/json/da_dat_brview.json' }).success(function (data) {
238   -
239   - $scope.BodyRegionData = data;
240   - console.log($scope.BodyRegionData);
241   - })
242   - .error(function (data, status, headers, config) {
243   - console.log(data);
244   - });
  142 + //push the details of open module in array $rootScope.openModules
  143 + $rootScope.openModules.push({ "ModuleId": 1 });
  144 + }
245 145  
246 146  
247   - // Load Layer data
248   - $http({ method: 'GET', url: '~/../content/data/json/da_dat_layer_1.json' }).success(function (data) {
249   - // debugger
250   - $scope.BodyLayerData = data;
251   - console.log($scope.BodyLayerData);
  147 + //da-body-view functions
  148 +
  149 + $scope.openBodyView = function () {
  150 +
  151 +
  152 + //load json
  153 + $http({ method: 'GET', url: '~/../content/data/json/da_dat_tm_sg_1.json' }).success(function (data) {
  154 + $scope.TermNumberData = data;
  155 + })
  156 + .error(function (data, status, headers, config) {
  157 + console.log(data);
  158 + });
  159 +
  160 +
  161 + //load vocabterm data
  162 + $http({ method: 'GET', url: '~/../content/data/json/cm_dat_vocabterm_1.json' }).success(function (data) {
  163 + $scope.VocabTermData = data;
  164 + })
  165 + .error(function (data, status, headers, config) {
  166 + console.log(data);
  167 + });
  168 +
  169 +
  170 +
  171 + var openViews;
  172 + var currentBodyViewId = localStorage.getItem("currentBodyViewId");
  173 + // debugger;
  174 + if ($rootScope.openViews.length > 0) {
  175 + openViews = new jinqJs()
  176 + .from($rootScope.openViews)
  177 + .where("BodyViewId==" + currentBodyViewId)
  178 + .select();
  179 + }
  180 + var counter = 1;
  181 +
  182 + // var tittle = $rootScope.ViewTitle;
  183 + var tittle = localStorage.getItem("currentViewTitleFromJson");
  184 +
  185 + if (openViews != null && openViews.length > 0) {
  186 + angular.forEach(openViews, function (value, key) {
  187 +
  188 + if (value.BodyView == tittle) {
  189 + tittle = localStorage.getItem("currentViewTitleFromJson") + counter++;
  190 + $rootScope.currentActiveViewTitle = tittle;
  191 + localStorage.setItem("currentViewTitle", tittle);
  192 + }
252 193  
253   - })
254   - .error(function (data, status, headers, config) {
255   - console.log(data);
256 194 });
257   - // debugger;
  195 + }
  196 + else {
  197 + localStorage.setItem("currentViewTitle", tittle);
  198 + }
258 199  
259   - $scope.voId = localStorage.getItem("currentBodyViewId");;
260   - $scope.layerNo = 0;
261   - $scope.skinTone = DA[0].ethnicity;
262 200  
263   - $timeout(function () { $scope.CalculateImageCordinates($scope.voId); }, 250);
264 201  
265   - };
  202 + $.jsPanel({
  203 + id: 'daImagePanel',
  204 + selector: '.daBodyView',
  205 + theme: 'success',
  206 + ajax: {
  207 + url: 'app/views/da/da-view.html'
  208 + },
  209 + title: localStorage.getItem("currentViewTitle"),
  210 + position: {
  211 + top: 70,
  212 + left: 1,
  213 + },
266 214  
  215 + size: { width: $(window).outerWidth() - 10, height: $(window).outerHeight() - 110 },
267 216  
268   - //calculate coordinates for body region images
269   - $scope.CalculateImageCordinates = function (viewOrientationId) {
  217 + });
270 218  
271   - //debugger;
272   - //set height of canvas div and left tool bar as per window size
273   - $scope.BodyRegionCordinatesData = []; // create an empty array
274 219  
275   - $('#canvasDiv').css('height', $('#daImagePanel').outerHeight() - 104)
276   - //$('#canvasDiv').css('width', $('#daImagePanel').outerWidth() - 100)
277   - $('#leftToolBar').css('height', $('#daImagePanel').outerHeight() )
278 220  
279   -
280 221  
281   - //calculate image coordinates and draw image
282   - var bodyRegionCoordinates = $scope.BodyRegionData.BodyRegionViews;
283   - var viewOrientationId = String($scope.voId);
284 222  
  223 + $scope.LoadDefaultLayerImage();
  224 + // $rootScope.openViewsDA.push({ "ViewId": 1 });
  225 + $rootScope.currentSlug = 'da-body-view';
285 226  
286   - $scope.bodyRegionCoordinates = new jinqJs()
287   - .from($scope.BodyRegionData.BodyRegionViews.BodyRegionCordinates)
288   - .where('_ViewOrientationId == ' + viewOrientationId)
289   - .select();
  227 + //hide scrollbar
290 228  
291   - angular.forEach($scope.bodyRegionCoordinates, function (value, key) {
292 229  
  230 + $rootScope.openViews.push(
  231 + {
  232 + "module": $rootScope.currentActiveModuleTitle, "BodyView": tittle, "state": 'max', "BodyViewId": $rootScope.currentBodyViewId,
  233 + "slug": $rootScope.currentSlug
  234 + }
  235 + );
  236 + // debugger;
293 237  
294   - if (value._HaveMirrorImage == 'Y') {
  238 + var e1 = angular.element(document.getElementById("daBodyview"));
  239 + $timeout(function () { $compile(e1.contents())($scope) }, 250);
  240 + // $compile(e1.contents())($scope);
295 241  
296   - //DrawMirroredImage
  242 + $('#daBodyview').css("height", $(window).outerHeight());
  243 +
  244 + $('#daBodyview').css("width", $(window).outerWidth());
  245 + }
297 246  
298   - //0. Scaling as per default zoom
299   - var rectangle = scaleRectangle(value._X, value._Y, value._Height, value._Width, value._MirrorValue);
  247 + angular.element(document).ready(function () {
300 248  
301   - //1.Get image source
302   - var src = $scope.GetImageSource(value._BodyRegionId);
303   - $scope.imageSource = src;
304   - // debugger;
305   - //2.Draw mirror image
306   - $scope.DrawMirroredImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), src, value._BodyRegionId, 'N');
307   - // debugger;
308   - $scope.BodyRegionCordinatesData.push(
309   - {
310   - "bodyRegionId": value._BodyRegionId, "Height": Math.round(rectangle.scaledHeight), "Width": Math.round(rectangle.scaledWidth),
311   - "X": Math.round(rectangle.scaledX), "Y": Math.round(rectangle.scaledY), "IsMirror": 'Yes'
312   - }
313   - );
314 249  
315   - //3.GetMaskImageSource
316   - var maskImageSrc = $scope.GetMaskImageSource($scope.imageSource);
317   - // debugger;
318   - //4 Draw Mask Mirror Image
319   - $scope.DrawMirroredImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), maskImageSrc, value._BodyRegionId, 'Y');
320   -
  250 + })
321 251  
322   - //Draw Normal Image
323 252  
324   - //0. Scaling as per default zoom
325   - var rectangle = scaleRectangle(value._X, value._Y, value._Height, value._Width, 0);
326 253  
327   - //1.Draw body region which have mirror image
328   - $scope.DrawImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), src, value._BodyRegionId, 'N');
329   - $scope.BodyRegionCordinatesData.push(
330   - {
331   - "bodyRegionId": value._BodyRegionId, "Height": Math.round(rectangle.scaledHeight), "Width": Math.round(rectangle.scaledWidth),
332   - "X": Math.round(rectangle.scaledX), "Y": Math.round(rectangle.scaledY), "IsMirror": 'No'
333   - }
334   - );
335 254  
336   - //2.Draw body region for mask image
337   - $scope.DrawImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), maskImageSrc, value._BodyRegionId, 'Y');
338   -
339 255  
340   - }
341   - else {
342   - //Draw body region which don't have mirror image
343 256  
344   - //0.Scaling as per default zoom
345   - var rectangle = scaleRectangle(value._X, value._Y, value._Height, value._Width, value._MirrorValue);
346 257  
347   - //1.Get image source
348   - var src = $scope.GetImageSource(value._BodyRegionId);
349   - $scope.imageSource = src;
350 258  
351   - //2.Draw body region which don't have mirror image
352   - $scope.DrawImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), src, value._BodyRegionId, 'N');
  259 + $scope.LoadDefaultLayerImage = function () {
  260 + // debugger;
  261 + $http({ method: 'GET', url: '~/../content/data/json/da_dat_brview.json' }).success(function (data) {
353 262  
354   - $scope.BodyRegionCordinatesData.push(
355   - {
356   - "bodyRegionId": value._BodyRegionId, "Height": Math.round(rectangle.scaledHeight), "Width": Math.round(rectangle.scaledWidth),
357   - "X": Math.round(rectangle.scaledX), "Y": Math.round(rectangle.scaledY), "IsMirror": 'No'
358   - }
359   - );
  263 + $scope.BodyRegionData = data;
  264 + console.log($scope.BodyRegionData);
  265 + })
  266 + .error(function (data, status, headers, config) {
  267 + console.log(data);
  268 + });
360 269  
361   - //3.GetMaskImageSource
362   - var maskSRC = $scope.GetMaskImageSource($scope.imageSource);
363 270  
364   - //4.Draw body region for mask image
365   - $scope.DrawImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), maskSRC, value._BodyRegionId, 'Y');
366   -
367   - }
  271 + // Load Layer data
  272 + $http({ method: 'GET', url: '~/../content/data/json/da_dat_layer_1.json' }).success(function (data) {
  273 + // debugger
  274 + $scope.BodyLayerData = data;
  275 + console.log($scope.BodyLayerData);
368 276  
  277 + })
  278 + .error(function (data, status, headers, config) {
  279 + console.log(data);
  280 + });
369 281  
370   - });
  282 + // debugger;
371 283  
372   - //set scrollbars on canvas and hide loading label
373   - $('#daLoaderLabel').css('visibility', 'hidden')
374   - $('#canvasDiv').css('overflow', 'scroll')
375   - $('#canvasDiv').scrollLeft($('#canvasDiv').width() / 2)
376   - // $('#canvasDiv').scrollLeft($scope.imageHorizontlScrollPosition)
377   - $('#canvasDiv').scrollTop(50)
378   - var abc = $scope.BodyRegionCordinatesData
379   - }
  284 + $scope.voId = localStorage.getItem("currentBodyViewId");;
  285 + $scope.layerNumber = 0;
  286 + $scope.skinTone = DA[0].ethnicity;
380 287  
381   - function scaleRectangle(x, y, height, width, mirrorValue) {
382   - var nzoom = 75;
383   - var existingZoon = 100;
  288 + $timeout(function () { $scope.CalculateImageCordinates($scope.voId); }, 250);
384 289  
385   - var X = 0;
386   - var scaledY = 0;
387   - var scaledHeight = 0;
388   - var scaledWidth = 0;
389 290  
390   - if (mirrorValue != 0) {
391   - var mirroredX = parseInt(mirrorValue) + parseInt(x);
392   - var newX = (mirroredX * nzoom);
393   - mirroredX = (newX / existingZoon);
394   - X = mirroredX;
395   - }
396   - else {
397   - var newX = (x * nzoom);
398   - X = (newX / existingZoon);
399   - }
  291 + };
400 292  
401   - var newY = (y * nzoom);
402   - var Y = (newY / existingZoon);
403 293  
404   - var newHeight = (height * nzoom);
405   - var ht = (newHeight / existingZoon);
  294 + //calculate coordinates for body region images
  295 + $scope.CalculateImageCordinates = function (viewOrientationId) {
406 296  
407   - var newWidth = (width * nzoom);
408   - var wt = (newWidth / existingZoon);
  297 + // debugger;
  298 + //set height of canvas div and left tool bar as per window size
  299 + $scope.BodyRegionCordinatesData = []; // create an empty array
409 300  
410   - return {
411   - scaledX: X,
412   - scaledY: Y,
413   - scaledHeight: ht,
414   - scaledWidth: wt
415   - }
416   - }
  301 + $('#canvasDiv').css('height', $('#daImagePanel').outerHeight() - 104)
  302 + //$('#canvasDiv').css('width', $('#daImagePanel').outerWidth() - 100)
  303 + $('#leftToolBar').css('height', $('#daImagePanel').outerHeight())
417 304  
418   - $scope.GetMaskImageSource = function (src) {
419   - var mciImage = src.replace('.jpg', '_mci.png')
420   - return mciImage;
421 305  
422   - }
423 306  
  307 + //calculate image coordinates and draw image
  308 + var bodyRegionCoordinates = $scope.BodyRegionData.BodyRegionViews;
  309 + var viewOrientationId = String($scope.voId);
424 310  
425   - $scope.GetImageSource = function (bodyRegionId) {
426   - // debugger;
427   - var dataLength = $scope.BodyLayerData.Layers.DataLayer.length;
428 311  
429   - //set max for LayerNumber input
430   - $scope.totalLayers = dataLength - 1;
  312 + $scope.bodyRegionCoordinates = new jinqJs()
  313 + .from($scope.BodyRegionData.BodyRegionViews.BodyRegionCordinates)
  314 + .where('_ViewOrientationId == ' + viewOrientationId)
  315 + .select();
431 316  
432   - $('#txtLayerNumber').attr('max', $scope.totalLayers);
  317 + angular.forEach($scope.bodyRegionCoordinates, function (value, key) {
433 318  
434   - $scope.one = 1;
435 319  
436   - $scope.userInput = parseInt($scope.layerNo);
  320 + if (value._HaveMirrorImage == 'Y') {
437 321  
  322 + //DrawMirroredImage
438 323  
439   - var SelectedLayerData = [];
440   - SelectedLayerData = $scope.BodyLayerData.Layers.DataLayer[dataLength - $scope.userInput - 1];
441   - if ($scope.layerNo == 0) {
442   - for (var z = 0; z <= SelectedLayerData.BodyRegion.length; z++) {
  324 + //0. Scaling as per default zoom
  325 + var rectangle = scaleRectangle(value._X, value._Y, value._Height, value._Width, value._MirrorValue);
443 326  
444   - var bodyRegion = SelectedLayerData.BodyRegion[z]._BodyRegionId;
445   - var bodyRegionSkinTone = SelectedLayerData.BodyRegion[z].Image._SkintTone;
  327 + //1.Get image source
  328 + var src = $scope.GetImageSource(value._BodyRegionId);
  329 + $scope.imageSource = src;
  330 + // debugger;
  331 + //2.Draw mirror image
  332 + $scope.DrawMirroredImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), src, value._BodyRegionId, 'N');
  333 + // debugger;
  334 + $scope.BodyRegionCordinatesData.push(
  335 + {
  336 + "bodyRegionId": value._BodyRegionId, "Height": Math.round(rectangle.scaledHeight), "Width": Math.round(rectangle.scaledWidth),
  337 + "X": Math.round(rectangle.scaledX), "Y": Math.round(rectangle.scaledY), "IsMirror": 'Yes'
  338 + }
  339 + );
446 340  
447   - if (bodyRegion == bodyRegionId && bodyRegionSkinTone == $scope.skinTone) {
  341 + //3.GetMaskImageSource
  342 + var maskImageSrc = $scope.GetMaskImageSource($scope.imageSource);
  343 + // debugger;
  344 + //4 Draw Mask Mirror Image
  345 + $scope.DrawMirroredImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), maskImageSrc, value._BodyRegionId, 'Y');
448 346  
449   - return "content/images/DA/BodyViews/" + $scope.voId + "/layers/" + $scope.layerNo + "/" + bodyRegionId + "/" + $scope.skinTone + "/" + SelectedLayerData.BodyRegion[z].Image._ImageName;
450   - }
451   - }
452   - }
453 347  
454   - else {
455   - for (z = 0; z <= SelectedLayerData.BodyRegion.length; z++) {
456   - var bodyRegion = SelectedLayerData.BodyRegion[z]._BodyRegionId;
457   - if (bodyRegion == bodyRegionId) {
458   - return "content/images/DA/BodyViews/" + $scope.voId + "/layers/" + $scope.layerNo + "/" + bodyRegionId + "/" + SelectedLayerData.BodyRegion[z].Image._ImageName;
459   - }
460   - }
461   - }
462   - }
  348 + //Draw Normal Image
463 349  
  350 + //0. Scaling as per default zoom
  351 + var rectangle = scaleRectangle(value._X, value._Y, value._Height, value._Width, 0);
464 352  
465   - $scope.DrawMirroredImage = function (h, w, x, y, src, bodyRegionId, isMaskImage) {
  353 + //1.Draw body region which have mirror image
  354 + $scope.DrawImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), src, value._BodyRegionId, 'N');
  355 + $scope.BodyRegionCordinatesData.push(
  356 + {
  357 + "bodyRegionId": value._BodyRegionId, "Height": Math.round(rectangle.scaledHeight), "Width": Math.round(rectangle.scaledWidth),
  358 + "X": Math.round(rectangle.scaledX), "Y": Math.round(rectangle.scaledY), "IsMirror": 'No'
  359 + }
  360 + );
466 361  
467   - var FlipedImgCanvas = document.createElement('canvas');
468   - FlipedImgCanvas.height = h;
469   - FlipedImgCanvas.width = w;
470   - FlipedImgCanvas.setAttribute("data-IsMirrored", "Y")
471   - FlipedImgCanvas.style.position = "absolute";
472   - FlipedImgCanvas.style.left = x + "px";
473   - FlipedImgCanvas.style.top = y + "px";
  362 + //2.Draw body region for mask image
  363 + $scope.DrawImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), maskImageSrc, value._BodyRegionId, 'Y');
474 364  
475   - if (isMaskImage == 'Y') {
476   - FlipedImgCanvas.id = 'imageCanvas' + bodyRegionId + '_MR_mci';
477   - FlipedImgCanvas.style.visibility = 'hidden'
478 365  
479 366 }
480 367 else {
481   - FlipedImgCanvas.id = 'imageCanvas' + bodyRegionId + '_MR';
482   - FlipedImgCanvas.style.visibility = 'visible'
  368 + //Draw body region which don't have mirror image
  369 +
  370 + //0.Scaling as per default zoom
  371 + var rectangle = scaleRectangle(value._X, value._Y, value._Height, value._Width, value._MirrorValue);
  372 +
  373 + //1.Get image source
  374 + var src = $scope.GetImageSource(value._BodyRegionId);
  375 + $scope.imageSource = src;
  376 +
  377 + //2.Draw body region which don't have mirror image
  378 + $scope.DrawImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), src, value._BodyRegionId, 'N');
  379 +
  380 + $scope.BodyRegionCordinatesData.push(
  381 + {
  382 + "bodyRegionId": value._BodyRegionId, "Height": Math.round(rectangle.scaledHeight), "Width": Math.round(rectangle.scaledWidth),
  383 + "X": Math.round(rectangle.scaledX), "Y": Math.round(rectangle.scaledY), "IsMirror": 'No'
  384 + }
  385 + );
  386 +
  387 + //3.GetMaskImageSource
  388 + var maskSRC = $scope.GetMaskImageSource($scope.imageSource);
  389 +
  390 + //4.Draw body region for mask image
  391 + $scope.DrawImage(Math.round(rectangle.scaledHeight), Math.round(rectangle.scaledWidth), Math.round(rectangle.scaledX), Math.round(rectangle.scaledY), maskSRC, value._BodyRegionId, 'Y');
483 392  
484 393 }
485   - FlipedImgCanvas.addEventListener('click', function (evt) {
486 394  
487   - //get mouse coordinate of mirror image click
488   - var mousePos = getMousePos(evt);
489   - //alert(mousePos.x + ',' + mousePos.y);
490 395  
491   - var context = FlipedImgCanvas.getContext("2d");
492   - var canvasId = context.canvas.getAttribute('id');
  396 + });
493 397  
494   - var mirrorCanvasX = context.canvas.offsetLeft;
495   - var mirrorCanvasWidth = context.canvas.clientWidth;
  398 + //set scrollbars on canvas and hide loading label
  399 + $('#daLoaderLabel').css('visibility', 'hidden')
  400 + $('#canvasDiv').css('overflow', 'scroll')
  401 + $('#canvasDiv').scrollLeft($('#canvasDiv').width() / 2)
  402 + // $('#canvasDiv').scrollLeft($scope.imageHorizontlScrollPosition)
  403 + $('#canvasDiv').scrollTop(50)
  404 + var abc = $scope.BodyRegionCordinatesData;
  405 + // debugger;
  406 + $('#layerChangeSlider').slider("option", "value", parseInt($scope.totalLayers) - parseInt($scope.layerNumber));
496 407  
497   - var maskCanvasId = (canvasId.replace('_MR', '')) + '_mci';
498   - var maskCanvas = document.getElementById(maskCanvasId);
499   - var canvasContextForRGB = maskCanvas.getContext("2d");
500 408  
  409 + }
501 410  
502   - var canvasDiv = document.getElementById('canvasDiv');
503   - var verticalScrollPosition = canvasDiv.scrollTop;
504   - var horizontlScrollPosition = canvasDiv.scrollLeft;
  411 + function scaleRectangle(x, y, height, width, mirrorValue) {
  412 + var nzoom = 75;
  413 + var existingZoon = 100;
505 414  
506   - var distanceXOnMirrorImage = (parseInt(mirrorCanvasX) + parseInt(mirrorCanvasWidth)) - (parseInt(mousePos.x) + horizontlScrollPosition);// - 135);
  415 + var X = 0;
  416 + var scaledY = 0;
  417 + var scaledHeight = 0;
  418 + var scaledWidth = 0;
507 419  
508   - var mirrorXOnNormalImage = parseInt(canvasContextForRGB.canvas.offsetLeft) + parseInt(distanceXOnMirrorImage);
  420 + if (mirrorValue != 0) {
  421 + var mirroredX = parseInt(mirrorValue) + parseInt(x);
  422 + var newX = (mirroredX * nzoom);
  423 + mirroredX = (newX / existingZoon);
  424 + X = mirroredX;
  425 + }
  426 + else {
  427 + var newX = (x * nzoom);
  428 + X = (newX / existingZoon);
  429 + }
509 430  
510   - var actulalX = mirrorXOnNormalImage
511   - var actualY = mousePos.y + verticalScrollPosition
  431 + var newY = (y * nzoom);
  432 + var Y = (newY / existingZoon);
512 433  
  434 + var newHeight = (height * nzoom);
  435 + var ht = (newHeight / existingZoon);
513 436  
  437 + var newWidth = (width * nzoom);
  438 + var wt = (newWidth / existingZoon);
514 439  
  440 + return {
  441 + scaledX: X,
  442 + scaledY: Y,
  443 + scaledHeight: ht,
  444 + scaledWidth: wt
  445 + }
  446 + }
515 447  
516   - var pixelData = canvasContextForRGB.getImageData(Math.round(actulalX - parseInt(canvasContextForRGB.canvas.offsetLeft)), Math.round(actualY - y), 1, 1);
  448 + $scope.GetMaskImageSource = function (src) {
  449 + var mciImage = src.replace('.jpg', '_mci.png')
  450 + return mciImage;
517 451  
518   - pixelData.data[0] = pixelData.data[0] - 9;
519   - pixelData.data[1] = pixelData.data[1] - 9;
520   - pixelData.data[2] = pixelData.data[2] - 9
  452 + }
521 453  
522   - var Red;
523   - var Green;
524   - var Blue;
525   - var zero = "0";
526 454  
527   - if ((pixelData.data[0]).toString().length != 2) {
528   - Red = zero.concat((pixelData.data[0]).toString())
529   - }
530   - else {
531   - Red = (pixelData.data[0]).toString()
532   - }
533   - if ((pixelData.data[1]).toString().length != 2) {
534   - Green = zero.concat((pixelData.data[1]).toString())
535   - }
536   - else {
537   - Green = (pixelData.data[1]).toString()
  455 + $scope.GetImageSource = function (bodyRegionId) {
  456 + // debugger;
  457 + var dataLength = $scope.BodyLayerData.Layers.DataLayer.length;
538 458  
539   - }
540   - if ((pixelData.data[2]).toString().length != 2) {
541   - Blue = zero.concat((pixelData.data[2]).toString())
542   - }
543   - else {
544   - Blue = (pixelData.data[2]).toString()
  459 + //set max for LayerNumber input
  460 + $scope.totalLayers = dataLength - 1;
545 461  
546   - }
547   - var RGBColor = (Red + Green + Blue);
  462 + $('#txtLayerNumber').attr('max', $scope.totalLayers);
  463 + $('#layerChangeSlider').slider("option", "max", $scope.totalLayers);
  464 + // $('#layerChangeSlider').slider("option", "value",parseInt($scope.totalLayers)-parseInt($scope.layerNumber));
548 465  
  466 + $scope.one = 1;
549 467  
550   - var annotationText = $scope.GetAnnotationText(parseInt(RGBColor));
  468 + $scope.userInput = parseInt($scope.layerNumber);
551 469  
552   - if ($('#speechBubble').length > 0) {
553   - $('#speechBubble').remove();
554 470  
555   - createSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)
  471 + var SelectedLayerData = [];
  472 + SelectedLayerData = $scope.BodyLayerData.Layers.DataLayer[dataLength - $scope.userInput - 1];
  473 + if ($scope.layerNumber == 0) {
  474 + for (var z = 0; z <= SelectedLayerData.BodyRegion.length; z++) {
556 475  
557   - }
558   - else
559   - createSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)
  476 + var bodyRegion = SelectedLayerData.BodyRegion[z]._BodyRegionId;
  477 + var bodyRegionSkinTone = SelectedLayerData.BodyRegion[z].Image._SkintTone;
560 478  
  479 + if (bodyRegion == bodyRegionId && bodyRegionSkinTone == $scope.skinTone) {
561 480  
  481 + return "content/images/DA/BodyViews/" + $scope.voId + "/layers/" + $scope.layerNumber + "/" + bodyRegionId + "/" + $scope.skinTone + "/" + SelectedLayerData.BodyRegion[z].Image._ImageName;
  482 + }
  483 + }
  484 + }
  485 +
  486 + else {
  487 + for (z = 0; z <= SelectedLayerData.BodyRegion.length; z++) {
  488 + var bodyRegion = SelectedLayerData.BodyRegion[z]._BodyRegionId;
  489 + if (bodyRegion == bodyRegionId) {
  490 + return "content/images/DA/BodyViews/" + $scope.voId + "/layers/" + $scope.layerNumber + "/" + bodyRegionId + "/" + SelectedLayerData.BodyRegion[z].Image._ImageName;
  491 + }
  492 + }
  493 + }
  494 + }
562 495  
563   - }, false);
564 496  
565   - FlipedImgCanvas.addEventListener('mousedown', function (evt) {
  497 + $scope.DrawMirroredImage = function (h, w, x, y, src, bodyRegionId, isMaskImage) {
566 498  
567   - //alert('mousedown')
568   - }, false);
  499 + var FlipedImgCanvas = document.createElement('canvas');
  500 + FlipedImgCanvas.height = h;
  501 + FlipedImgCanvas.width = w;
  502 + FlipedImgCanvas.setAttribute("data-IsMirrored", "Y")
  503 + FlipedImgCanvas.style.position = "absolute";
  504 + FlipedImgCanvas.style.left = x + "px";
  505 + FlipedImgCanvas.style.top = y + "px";
569 506  
  507 + if (isMaskImage == 'Y') {
  508 + FlipedImgCanvas.id = 'imageCanvas' + bodyRegionId + '_MR_mci';
  509 + FlipedImgCanvas.style.visibility = 'hidden'
570 510  
571   - FlipedImgCanvas.addEventListener('mouseup', function (evt) {
572   - //alert('mouseup')
  511 + }
  512 + else {
  513 + FlipedImgCanvas.id = 'imageCanvas' + bodyRegionId + '_MR';
  514 + FlipedImgCanvas.style.visibility = 'visible'
573 515  
  516 + }
  517 + FlipedImgCanvas.addEventListener('click', function (evt) {
574 518  
575   - }, false);
  519 + //get mouse coordinate of mirror image click
  520 + var mousePos = $scope.getMousePos(evt);
  521 + //alert(mousePos.x + ',' + mousePos.y);
576 522  
577 523 var context = FlipedImgCanvas.getContext("2d");
  524 + var canvasId = context.canvas.getAttribute('id');
578 525  
579   - var PI = Math.PI;
580   - var PI2 = PI * 2;
581   - var cw, ch, imgW, imgH, mouseX, mouseY;
582   - var scaleFactor = 1.00;
  526 + var mirrorCanvasX = context.canvas.offsetLeft;
  527 + var mirrorCanvasWidth = context.canvas.clientWidth;
583 528  
584   - //$scaler = $("#scaler");
585   - //$scaler.val(scaleFactor);
586   - //$scaler.hide();
  529 + var maskCanvasId = (canvasId.replace('_MR', '')) + '_mci';
  530 + var maskCanvas = document.getElementById(maskCanvasId);
  531 + var canvasContextForRGB = maskCanvas.getContext("2d");
587 532  
588   - var img = new Image();
589   - img.onload = start;
590 533  
591   - // img.src = "~/../content/images/" + src;;
592   - img.src = src;
593   - console.log("img.src: " + img.src);
594   - console.log("src: " + src);
  534 + var canvasDiv = document.getElementById('canvasDiv');
  535 + var verticalScrollPosition = canvasDiv.scrollTop;
  536 + var horizontlScrollPosition = canvasDiv.scrollLeft;
595 537  
  538 + var distanceXOnMirrorImage = (parseInt(mirrorCanvasX) + parseInt(mirrorCanvasWidth)) - (parseInt(mousePos.x) + horizontlScrollPosition);// - 135);
596 539  
597   - function start() {
598   - context.save();
599   - context.translate(w, 0);
600   - context.scale(-1, 1);
601   - context.drawImage(img, 0, 0);
602   - context.restore();
  540 + var mirrorXOnNormalImage = parseInt(canvasContextForRGB.canvas.offsetLeft) + parseInt(distanceXOnMirrorImage);
603 541  
  542 + var actulalX = mirrorXOnNormalImage
  543 + var actualY = mousePos.y + verticalScrollPosition
604 544  
605   - };
606 545  
607   - document.getElementById('canvasDiv').appendChild(FlipedImgCanvas);
608 546  
609 547  
610   - }
  548 + var pixelData = canvasContextForRGB.getImageData(Math.round(actulalX - parseInt(canvasContextForRGB.canvas.offsetLeft)), Math.round(actualY - y), 1, 1);
611 549  
612   - $scope.DrawImage = function (h, w, x, y, src, bodyRegionId, isMaskImage) {
  550 + pixelData.data[0] = pixelData.data[0] - 9;
  551 + pixelData.data[1] = pixelData.data[1] - 9;
  552 + pixelData.data[2] = pixelData.data[2] - 9
613 553  
614   - var imgCanvas = document.createElement('canvas');
615   - // imgCanvas.style.backgroundColor = 'red';
616   - imgCanvas.height = h;
617   - imgCanvas.width = w;
618   - imgCanvas.setAttribute("data-IsMirrored", "N")
619   - imgCanvas.style.position = "absolute";
620   - imgCanvas.style.left = x + "px";
621   - imgCanvas.style.top = y + "px";
622   - if (isMaskImage == 'Y') {
623   - imgCanvas.style.visibility = 'hidden'
624   - imgCanvas.id = 'imageCanvas' + bodyRegionId + '_mci';
  554 + var Red;
  555 + var Green;
  556 + var Blue;
  557 + var zero = "0";
625 558  
  559 + if ((pixelData.data[0]).toString().length != 2) {
  560 + Red = zero.concat((pixelData.data[0]).toString())
626 561 }
627 562 else {
628   - imgCanvas.id = 'imageCanvas' + bodyRegionId;
629   - imgCanvas.style.visibility = 'visible'
  563 + Red = (pixelData.data[0]).toString()
  564 + }
  565 + if ((pixelData.data[1]).toString().length != 2) {
  566 + Green = zero.concat((pixelData.data[1]).toString())
  567 + }
  568 + else {
  569 + Green = (pixelData.data[1]).toString()
630 570  
631 571 }
632   - imgCanvas.addEventListener('click', function (evt) {
  572 + if ((pixelData.data[2]).toString().length != 2) {
  573 + Blue = zero.concat((pixelData.data[2]).toString())
  574 + }
  575 + else {
  576 + Blue = (pixelData.data[2]).toString()
633 577  
  578 + }
  579 + var RGBColor = (Red + Green + Blue);
634 580  
635 581  
636   - var context = imgCanvas.getContext("2d");
  582 + var annotationText = $scope.GetAnnotationText(parseInt(RGBColor));
637 583  
  584 + if ($('#speechBubble').length > 0) {
  585 + $('#speechBubble').remove();
638 586  
639   - var canvasId = context.canvas.getAttribute('id');
  587 + $scope.createSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)
640 588  
641   - var maskCanvasId = canvasId + '_mci';
642   - var maskCanvas = document.getElementById(maskCanvasId);
643   - var canvasContextForRGB = maskCanvas.getContext("2d");
  589 + }
  590 + else
  591 + $scope.createSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)
644 592  
645 593  
646   - var mousePos = getMousePos(evt);
647   - // alert(mousePos.x + ',' + mousePos.y);
648 594  
649   - var canvasDiv = document.getElementById('canvasDiv');
650   - var verticalScrollPosition = canvasDiv.scrollTop;
651   - var horizontlScrollPosition = canvasDiv.scrollLeft;
  595 + }, false);
652 596  
  597 + FlipedImgCanvas.addEventListener('mousedown', function (evt) {
653 598  
654   - //We substracted 135, as the difference between flex and html coordinates for same organ is 135
655   - var actulalX = mousePos.x + horizontlScrollPosition// - 135;// + leftToolBarWidth;
656   - var actualY = mousePos.y + verticalScrollPosition //- 135; //+ tomenuBarheight + titleBarheight + searchComboheight;
  599 + //alert('mousedown')
  600 + }, false);
657 601  
658 602  
  603 + FlipedImgCanvas.addEventListener('mouseup', function (evt) {
  604 + //alert('mouseup')
659 605  
660   - var pixelData = canvasContextForRGB.getImageData(Math.round(actulalX - x), Math.round(actualY - y), 1, 1);
661 606  
662   - pixelData.data[0] = pixelData.data[0] - 9;
663   - pixelData.data[1] = pixelData.data[1] - 9;
664   - pixelData.data[2] = pixelData.data[2] - 9;
665   - var Red;
666   - var Green;
667   - var Blue;
668   - var zero = "0";
  607 + }, false);
669 608  
670   - if ((pixelData.data[0]).toString().length != 2) {
671   - Red = zero.concat((pixelData.data[0]).toString())
672   - }
673   - else {
674   - Red = (pixelData.data[0]).toString()
675   - }
676   - if ((pixelData.data[1]).toString().length != 2) {
677   - Green = zero.concat((pixelData.data[1]).toString())
678   - }
679   - else {
680   - Green = (pixelData.data[1]).toString()
  609 + var context = FlipedImgCanvas.getContext("2d");
681 610  
682   - }
683   - if ((pixelData.data[2]).toString().length != 2) {
684   - Blue = zero.concat((pixelData.data[2]).toString())
685   - }
686   - else {
687   - Blue = (pixelData.data[2]).toString()
  611 + var PI = Math.PI;
  612 + var PI2 = PI * 2;
  613 + var cw, ch, imgW, imgH, mouseX, mouseY;
  614 + var scaleFactor = 1.00;
688 615  
689   - }
690   - var RGBColor = (Red + Green + Blue);
  616 + //$scaler = $("#scaler");
  617 + //$scaler.val(scaleFactor);
  618 + //$scaler.hide();
691 619  
  620 + var img = new Image();
  621 + img.onload = start;
692 622  
693   - var annotationText = $scope.GetAnnotationText(parseInt(RGBColor));
  623 + // img.src = "~/../content/images/" + src;;
  624 + img.src = src;
  625 + console.log("img.src: " + img.src);
  626 + console.log("src: " + src);
694 627  
695   - if ($('#speechBubble').length > 0) {
696   - $('#speechBubble').remove();
697 628  
698   - createSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)
  629 + function start() {
  630 + context.save();
  631 + context.translate(w, 0);
  632 + context.scale(-1, 1);
  633 + context.drawImage(img, 0, 0);
  634 + context.restore();
699 635  
700   - }
701   - else
702   - createSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)
703 636  
  637 + };
  638 +
  639 + document.getElementById('canvasDiv').appendChild(FlipedImgCanvas);
704 640  
705   - }, false);
706 641  
  642 + }
707 643  
  644 + $scope.DrawImage = function (h, w, x, y, src, bodyRegionId, isMaskImage) {
708 645  
  646 + var imgCanvas = document.createElement('canvas');
  647 + // imgCanvas.style.backgroundColor = 'red';
  648 + imgCanvas.height = h;
  649 + imgCanvas.width = w;
  650 + imgCanvas.setAttribute("data-IsMirrored", "N")
  651 + imgCanvas.style.position = "absolute";
  652 + imgCanvas.style.left = x + "px";
  653 + imgCanvas.style.top = y + "px";
  654 + if (isMaskImage == 'Y') {
  655 + imgCanvas.style.visibility = 'hidden'
  656 + imgCanvas.id = 'imageCanvas' + bodyRegionId + '_mci';
709 657  
710   - var PI = Math.PI;
711   - var PI2 = PI * 2;
712   - var cw, ch, imgW, imgH, mouseX, mouseY;
713   - var scaleFactor = 1.00;
  658 + }
  659 + else {
  660 + imgCanvas.id = 'imageCanvas' + bodyRegionId;
  661 + imgCanvas.style.visibility = 'visible'
714 662  
715   - //$scaler = $("#scaler");
716   - //$scaler.val(scaleFactor);
717   - //$scaler.hide();
  663 + }
  664 + imgCanvas.addEventListener('click', function (evt) {
718 665  
719   - var context = imgCanvas.getContext('2d');
720   - var img = new Image();
721   - img.onload = start;
722 666  
723   - img.src = src;
724   - // img.src = img.src = "~/../content/images/" + src;
725   - console.log("img.src: " + img.src);
726   - console.log("src: " + src);
  667 + // debugger;
  668 + var context = imgCanvas.getContext("2d");
727 669  
728 670  
  671 + var canvasId = context.canvas.getAttribute('id');
729 672  
730   - function start() {
  673 + var maskCanvasId = canvasId + '_mci';
  674 + var maskCanvas = document.getElementById(maskCanvasId);
  675 + var canvasContextForRGB = maskCanvas.getContext("2d");
731 676  
732   - context.drawImage(img, 0, 0);
733   - };
734   - $('#daLoaderLabel').css('visibility', 'visible')
735   - document.getElementById('canvasDiv').appendChild(imgCanvas);
736 677  
737   - }
  678 + var mousePos = $scope.getMousePos(evt);
  679 + // alert(mousePos.x + ',' + mousePos.y);
738 680  
739   - //get annotation from term number
740   - $scope.GetAnnotationText = function (termNumber) {
741   -
742   - var annotationText;
743   - //0
744   - var figLeafTermNo = 5868; // to do declare constant for this
745   -
746   - if (parseInt(termNumber) != parseInt(figLeafTermNo)) {
747   - $scope.TermNumber = termNumber;
748   - $scope.matchedTermNoData = new jinqJs()
749   - .from($scope.TermNumberData.TermData.Term)
750   - .where('_TermNumber == ' + termNumber)
751   - .select();
752   - //1.
753   - var actualTermNo = 0;
754   - for (z = 0; z <= $scope.matchedTermNoData.length; z++) {
755   - //send actual term no to get the term text.
756   - actualTermNo = $scope.matchedTermNoData[0]._ActualTermNumber;
757   - annotationText = $scope.GetAnnotationBasedOnActualTermNo(actualTermNo);
758   - break;
759   - };
760   -
761   - //2.
  681 + var canvasDiv = document.getElementById('canvasDiv');
  682 + var verticalScrollPosition = canvasDiv.scrollTop;
  683 + var horizontlScrollPosition = canvasDiv.scrollLeft;
  684 +
  685 +
  686 + //We substracted 135, as the difference between flex and html coordinates for same organ is 135
  687 + var actulalX = mousePos.x + horizontlScrollPosition// - 135;// + leftToolBarWidth;
  688 + var actualY = mousePos.y + verticalScrollPosition //- 135; //+ tomenuBarheight + titleBarheight + searchComboheight;
  689 +
  690 +
  691 +
  692 + var pixelData = canvasContextForRGB.getImageData(Math.round(actulalX - x), Math.round(actualY - y), 1, 1);
  693 +
  694 + pixelData.data[0] = pixelData.data[0] - 9;
  695 + pixelData.data[1] = pixelData.data[1] - 9;
  696 + pixelData.data[2] = pixelData.data[2] - 9;
  697 + var Red;
  698 + var Green;
  699 + var Blue;
  700 + var zero = "0";
762 701  
  702 + if ((pixelData.data[0]).toString().length != 2) {
  703 + Red = zero.concat((pixelData.data[0]).toString())
763 704 }
764 705 else {
765   - // send term no to vocab json data to get the text
  706 + Red = (pixelData.data[0]).toString()
766 707 }
767   - return annotationText;
768   - }
  708 + if ((pixelData.data[1]).toString().length != 2) {
  709 + Green = zero.concat((pixelData.data[1]).toString())
  710 + }
  711 + else {
  712 + Green = (pixelData.data[1]).toString()
  713 +
  714 + }
  715 + if ((pixelData.data[2]).toString().length != 2) {
  716 + Blue = zero.concat((pixelData.data[2]).toString())
  717 + }
  718 + else {
  719 + Blue = (pixelData.data[2]).toString()
  720 +
  721 + }
  722 + var RGBColor = (Red + Green + Blue);
  723 +
  724 +
  725 + var annotationText = $scope.GetAnnotationText(parseInt(RGBColor));
  726 +
  727 + if ($('#speechBubble').length > 0) {
  728 + $('#speechBubble').remove();
  729 +
  730 + $scope.createSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)
  731 +
  732 + }
  733 + else
  734 + $scope.createSpeechBubble(evt, annotationText, evt.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left + 5, evt.pageY + verticalScrollPosition - $('#canvasDiv').offset().top - 50)
  735 +
  736 +
  737 + }, false);
  738 +
  739 +
  740 +
  741 +
  742 + var PI = Math.PI;
  743 + var PI2 = PI * 2;
  744 + var cw, ch, imgW, imgH, mouseX, mouseY;
  745 + var scaleFactor = 1.00;
  746 +
  747 + //$scaler = $("#scaler");
  748 + //$scaler.val(scaleFactor);
  749 + //$scaler.hide();
  750 +
  751 + var context = imgCanvas.getContext('2d');
  752 + var img = new Image();
  753 + img.onload = start;
  754 +
  755 + img.src = src;
  756 + // img.src = img.src = "~/../content/images/" + src;
  757 + console.log("img.src: " + img.src);
  758 + console.log("src: " + src);
  759 +
769 760  
770   - $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo) {
771 761  
772   - var Annotation;
773   - $scope.ActualTermNo = actualTermNo;
  762 + function start() {
774 763  
775   - $scope.matchedActualTermData = new jinqJs()
776   - .from($scope.VocabTermData.VocabTerms.Term)
777   - .where('_ActualTermNumber == ' + actualTermNo)
  764 + context.drawImage(img, 0, 0);
  765 + };
  766 + $('#daLoaderLabel').css('visibility', 'visible')
  767 + document.getElementById('canvasDiv').appendChild(imgCanvas);
  768 +
  769 + }
  770 +
  771 + //get annotation from term number
  772 + $scope.GetAnnotationText = function (termNumber) {
  773 + // debugger;
  774 +
  775 + var annotationText;
  776 + //0
  777 + var figLeafTermNo = 5868; // to do declare constant for this
  778 +
  779 + if (parseInt(termNumber) != parseInt(figLeafTermNo)) {
  780 + $scope.TermNumber = termNumber;
  781 + $scope.matchedTermNoData = new jinqJs()
  782 + .from($scope.TermNumberData.TermData.Term)
  783 + .where('_TermNumber == ' + termNumber)
778 784 .select();
779   - for (z = 0; z <= $scope.matchedActualTermData.length; z++) {
  785 + //1.
  786 + var actualTermNo = 0;
  787 + for (var z = 0; z <= $scope.matchedTermNoData.length; z++) {
780 788 //send actual term no to get the term text.
781   - Annotation = $scope.matchedActualTermData[0]._TermText;
782   - // alert("Annotation : " + Annotation);
  789 + actualTermNo = $scope.matchedTermNoData[0]._ActualTermNumber;
  790 + annotationText = $scope.GetAnnotationBasedOnActualTermNo(actualTermNo);
783 791 break;
784 792 };
785   - return Annotation;
  793 +
  794 + //2.
  795 +
  796 + }
  797 + else {
  798 + // send term no to vocab json data to get the text
786 799 }
  800 + return annotationText;
  801 + }
  802 +
  803 + $scope.GetAnnotationBasedOnActualTermNo = function (actualTermNo) {
  804 + // debugger;
  805 +
  806 + var Annotation;
  807 + $scope.ActualTermNo = actualTermNo;
  808 +
  809 + $scope.matchedActualTermData = new jinqJs()
  810 + .from($scope.VocabTermData.VocabTerms.Term)
  811 + .where('_ActualTermNumber == ' + actualTermNo)
  812 + .select();
  813 + for (var z = 0; z <= $scope.matchedActualTermData.length; z++) {
  814 + //send actual term no to get the term text.
  815 + Annotation = $scope.matchedActualTermData[0]._TermText;
  816 + // alert("Annotation : " + Annotation);
  817 + break;
  818 + };
  819 + return Annotation;
  820 + }
787 821  
788 822  
789 823 //layer change function
790   - $scope.LayerChange = function () {
791   - alert('layer changed');
  824 + $scope.LayerChange = function () {
  825 +
  826 + var canvasDiv = document.getElementById('canvasDiv');
  827 + $scope.imageVerticalScrollPosition = canvasDiv.scrollTop;
  828 + $scope.imageHorizontlScrollPosition = canvasDiv.scrollLeft;
  829 +
  830 +
  831 + $('#daLoaderLabel').css('visibility', 'visible')
  832 + var canDiv = document.getElementById('canvasDiv');
  833 + var canDivChildCount = canDiv.childElementCount;
  834 + if (canDivChildCount > 0) {
  835 + canDiv.innerHTML = '';
792 836 }
793 837  
  838 + $scope.CalculateImageCordinates($scope.voId);
  839 +
  840 +
  841 + $('#canvasDiv').scrollLeft($scope.imageHorizontlScrollPosition)
  842 + $('#canvasDiv').scrollTop($scope.imageVerticalScrollPosition)
  843 +
  844 + }
794 845  
795 846 //called on jspanel close
796   - $scope.openParent = function () {
797   - // debugger;
798   - var openViews = $rootScope.openViews;
799   - if (openViews.length > 0) {
800   - $rootScope.openViews.splice(openViews.length - 1);
801   - }
802   - if (openViews.length > 0) {
803   - var lastOpenMoudle = $rootScope.openViews[openViews.length - 1];
804   - }
805   - $('#daImagePanel').remove();
806   - $location.url('/da-view-list');
  847 + $scope.openParent = function () {
  848 + // debugger;
  849 + var openViews = $rootScope.openViews;
  850 + if (openViews.length > 0) {
  851 + $rootScope.openViews.splice(openViews.length - 1);
  852 + }
  853 + if (openViews.length > 0) {
  854 + var lastOpenMoudle = $rootScope.openViews[openViews.length - 1];
807 855 }
  856 + $('#daImagePanel').remove();
  857 + $location.url('/da-view-list');
  858 + }
808 859  
809 860 //called on jsanel minimize
810   - $scope.setState = function (state,title) {
811   - //debugger;
812   -
  861 + $scope.setState = function (state, title) {
  862 + //debugger;
813 863  
814   - $('#canvasDiv').css('overflow', 'scroll')
815   - $('#canvasDiv').scrollLeft($('#canvasDiv').width() / 2)
816   - // $('#canvasDiv').scrollLeft($scope.imageHorizontlScrollPosition)
817   - $('#canvasDiv').scrollTop(50)
818 864  
819   - var alreadyOpenThisView = new jinqJs()
820   - .from($rootScope.openViews)
821   - .where("BodyView == " + title)
822   - .select();
823   - var k=0;
824   - if (alreadyOpenThisView != null) {
825   - for (var i = 0; i < $rootScope.openViews.length; i++) {
826   - k++;
827   - if ($rootScope.openViews[i].BodyView == title) {
828   - $rootScope.openViews.splice((k-1),1);
829   -
830   - $rootScope.openViews.push(
831   - {
832   - "module": $rootScope.currentActiveModuleTitle, "BodyView": title, "state": state, "BodyViewId": $rootScope.currentBodyViewId,
833   - "slug": $rootScope.currentSlug
834   - }
835   - );
836   - }
  865 + var alreadyOpenThisView = new jinqJs()
  866 + .from($rootScope.openViews)
  867 + .where("BodyView == " + title)
  868 + .select();
  869 + var k = 0;
  870 + if (alreadyOpenThisView != null) {
  871 + for (var i = 0; i < $rootScope.openViews.length; i++) {
  872 + k++;
  873 + if ($rootScope.openViews[i].BodyView == title) {
  874 + $rootScope.openViews.splice((k - 1), 1);
  875 +
  876 + $rootScope.openViews.push(
  877 + {
  878 + "module": $rootScope.currentActiveModuleTitle, "BodyView": title, "state": state, "BodyViewId": $rootScope.currentBodyViewId,
  879 + "slug": $rootScope.currentSlug
837 880 }
  881 + );
838 882 }
839   -
840   - }
  883 + }
  884 + }
  885 +
  886 + }
  887 +
  888 + $scope.changeLayer = function () {
  889 + console.log('changeLayer');
  890 + // alert('slide')
  891 + }
841 892  
  893 + $('layerChangeSlider').slider().on('slideStop', function (ev) {
  894 + alert('slide')
  895 + var newVal = $('.span2').data('slider').getValue();
  896 + if (originalVal != newVal) {
  897 + alert('Value Changed!');
  898 + }
  899 + });
  900 +
  901 +
  902 + $scope.getMousePos = function (evt) {
  903 +
  904 + return {
  905 + x: Math.round(evt.pageX - $('#canvasDiv').offset().left),
  906 + y: Math.round(evt.pageY - $('#canvasDiv').offset().top)
  907 + }
  908 + }
  909 +
  910 +
  911 + $scope.createSpeechBubble = function(event, text, x, y) {
  912 +
  913 + $('#canvasDiv').css('cursor', 'pointer');
  914 + $('<div id="speechBubble" class="BubbleDiv" style="display:visible; top:' + y + 'px; left:' + x + 'px;"> <div class="">'
  915 + + '<div class="Bubble">'
  916 + + '<div class="BubbleCloseBtn"></div><div class="BubbleContent">' + text + '</div><div class="bottomLeftArrow"></div>'
  917 + //+'<div class="bottomRightArrow"></div><div class="topLeftArrow"></div><div class="topRightArrow"></div>
  918 + + '</div></div></div>').appendTo('#canvasDiv');
  919 +
  920 + $('#speechBubble').on('click', '.BubbleCloseBtn', function (e) {
  921 + $('#speechBubble').css('display', 'none');
  922 + });
  923 +
  924 + $('#canvasDiv').attr("data-bubbleid", "speechBubble")
  925 +
  926 +
  927 + };
  928 +
  929 + $scope.createSpeechBubbleOnTransparencyBox = function (event, text1, text2, x, y) {
  930 +
  931 + $('#canvasDiv').css('cursor', 'pointer');
  932 + $('<div id="speechBubbleTrns" class="BubbleDiv" style="display:visible; top:' + y + 'px; left:' + x + 'px;"> <div class="">'
  933 + + '<div class="Bubble">'
  934 + + '<div class="BubbleCloseBtn"></div><div class="BubbleContent">' + text1 + '</div><div class="BubbleContent">' + text2 + '</div><div class="bottomLeftArrow"></div>'
  935 + //+'<div class="bottomRightArrow"></div><div class="topLeftArrow"></div><div class="topRightArrow"></div>
  936 + + '</div></div></div>').appendTo('#canvasDiv');
  937 +
  938 + $('#speechBubbleTrns').on('click', '.BubbleCloseBtn', function (e) {
  939 + $('#speechBubbleTrns').css('display', 'none');
  940 + });
  941 +
  942 + $('#canvasDiv').attr("data-bubbleid", "speechBubble")
  943 +
  944 +
  945 + };
  946 +
  947 +
  948 + function positionTooltip(event, x, y) {
  949 + // alert('positionTooltip')
  950 + x = 100,
  951 + y = 200,
  952 +
  953 + $('div.speech-bubble').css({
  954 + 'position': 'absolute', 'top': x, 'left': y, 'background-color': '#f8f8f8',
  955 + 'border': '2px solid #c8c8c8', 'width': '150px', 'height': '50px'
  956 + });
  957 +
  958 +
  959 + $('.arrow').css({
  960 + 'border-style': 'solid',
  961 + 'position': 'absolute'
  962 + });
  963 +
  964 + $('.bottom').css({
  965 + 'border-color': '#c8c8c8 transparent transparent transparent',
  966 + 'border-width': ' 8px 8px 0px 8px',
  967 + 'bottom': -'8px'
  968 + })
  969 + };
842 970  
843 971  
844 972  
845   - }]
  973 +}]
846 974  
847 975  
848 976  
849   -);
  977 +);
850 978 \ No newline at end of file
... ...
400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
  View file @1ddf757
1 1 'use strict';
2 2  
3   -AIA.controller("HomeController", ["$rootScope","Modules", "$log", "$location", "$timeout",
4   - function ($rootScope,Modules, $log, $location, $timeout) {
  3 +AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", "$timeout",
  4 + function ($rootScope, Modules, $log, $location, $timeout) {
5 5  
6 6 //$scope.pageToOpen = {
7 7 // name: 'MainMenu'
8 8 //};
9 9 $rootScope.pageToOpen = 'app/widget/MainMenu.html';
10   - $rootScope.currentBodyViewId ;
  10 + $rootScope.currentBodyViewId;
11 11 $rootScope.currentActiveModuleTitle = 'Welcome to A.D.A.M. Interactive Anatomy';//Modules[0].Name;
12 12 $rootScope.currentActiveViewTitle;
13 13 $rootScope.cuurentActiveModuleId;
... ... @@ -18,7 +18,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;,&quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;, &quot;
18 18 $rootScope.ViewTitle;
19 19  
20 20 $rootScope.ClearIframe = function () {
21   - if ($('#daImagePanel')!=null)
  21 + if ($('#daImagePanel') != null)
22 22 $('#daImagePanel').remove();
23 23  
24 24 $rootScope.hideScrollbar();
... ...
400-SOURCECODE/AIAHTML5.Web/app/main/AIA.js
  View file @1ddf757
... ... @@ -43,26 +43,26 @@ AIA.constant(&#39;DA&#39;, [
43 43  
44 44 AIA.constant('Modules', [
45 45 {
46   - Id:1,
  46 + Id: 1,
47 47 Name: 'Dissectible Anatomy',
48 48 },
49 49 {
50   - Id:2,
  50 + Id: 2,
51 51 Name: 'Atlas Anatomy',
52 52 },
53 53 {
54   - Id:3,
  54 + Id: 3,
55 55 Name: '3D Anatomy',
56 56 },
57 57 {
58   - Id:4,
  58 + Id: 4,
59 59 Name: 'Clinical Illustrations',
60 60 },
61   -
  61 +
62 62 ]);
63 63 AIA.constant('BodyViewws', [
64 64 {
65   - Id:1,
  65 + Id: 1,
66 66 Name: 'Male Anterior',
67 67 },
68 68 ]);
... ... @@ -78,12 +78,12 @@ AIA.config(function ($routeProvider, pages, $locationProvider) {
78 78 {
79 79 templateUrl: pages[i].pageUrl,
80 80 controller: pages[i].pageController
81   - })
  81 + })
82 82 .otherwise({
83 83 templateUrl: 'app/widget/MainView.html',
84 84 controller: 'HomeController'
85 85 })
86   -
  86 +
87 87 }
88 88 }
89   -});
  89 +});
90 90 \ No newline at end of file
... ...
400-SOURCECODE/AIAHTML5.Web/app/views/da/da-body-view.html
  View file @1ddf757
1   -
2   -<div ng-app="AIA" ng-controller="DAController">
  1 +<div>
3 2 <div ng-include="aap/widget/MainMenu.html"></div>
4   - <div ng-init="openBodyView()" id="daView"></div>
5   - <div class=" daView">
6   -
7   - </div>
8   -</div>
  3 + <div ng-init="openBodyView()" id="daBodyview" class="daBodyView" ng-controller="DAController"></div>
  4 + <!--<div >
9 5  
  6 + </div>-->
  7 +</div>
10 8 \ No newline at end of file
... ...
400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html
  View file @1ddf757
1   -<div class=" ">
2   - <div class="leftToolBar tools pull-left">
  1 +<div class=" " id="daView" ng-controller="DAController">
  2 + <div class="pos-relative leftToolBar tools pull-left">
3 3 <div class="toggle-icon toggleBar toggleHeadingButton" title="Show/Hide Sidebar" style="top:20px;"></div>
4 4 <div class="" style="top:20px">
5 5 <div class="col-sm-6" title="Identify">
6   - <button class="btn btn-primary btn-sm"> <img src="content/images/icon-identity.png" alt="" title=""></button>
  6 + <button class="btn btn-primary btn-sm" ng-click="changeLayer()"> <img src="content/images/icon-identity.png" alt="" title=""></button>
7 7 </div>
8 8 <div class="col-sm-6 pull-right" title="Zoom-in/Zoom-out">
9 9 <button class="btn btn-black btn-sm pull-right"><img src="content/images/icon-zoom.png" alt="" title=""></button>
... ... @@ -63,15 +63,15 @@
63 63 </div>
64 64 <div class="">
65 65 <p>
66   - <input type="number" id="txtlayerNumber" value="0" step="1" max="100" min="0" style="width:80px; margin:10px 0 0 15px;" ng-model="layerNo" ng-change="LayerChange()">
  66 + <input type="number" id="txtlayerNumber" value="0" step="1" min="0" style="width:80px; margin:10px 0 0 15px;" ng-model="layerNumber" ng-change="LayerChange()">
67 67  
68 68 </p>
69   - <div id="layerChangeSlider" style="height:140px;" class="vert_slider "></div>
  69 + <div id="layerChangeSlider" style="height:140px;" class="vert_slider " ng-model="layerNumber"></div>
70 70 </div>
71 71 </div>
72 72  
73 73 <div class="main2">
74   - <div class="col-sm-12 stickey-area" >
  74 + <div class="col-sm-12 stickey-area">
75 75 <div class="breadcrumb ">
76 76 <div class="">
77 77 <div class="input-group col-sm-8 col-xs-7 col-md-10 pull-left">
... ... @@ -110,11 +110,12 @@
110 110 <div class="clearfix"></div>
111 111 </div>
112 112 </div>
113   - </div>
114   - <div class="clearfix"></div>
115 113 </div>
  114 + <div class="clearfix"></div>
  115 +</div>
116 116 </div>
117   -<script>$(window).load(function () {
  117 +<script>
  118 +$(window).load(function () {
118 119 $(".stickey-area").sticky();
119 120 });</script>
120 121 <script>
... ... @@ -123,16 +124,43 @@
123 124 orientation: "vertical",
124 125 range: "max", // <--- needed...
125 126 min: 0,
126   - max: 100,
127   - value: 50,
  127 + // max: 100,
  128 + //value: 0,
  129 +
128 130 slide: function (event, ui) {
129   - $("#txtlayerNumber").val(100 - ui.value); // basic math operation..
130   - }
131   - });
132   - $("#txtlayerNumber").val($("#layerChangeSlider").slider("value"));
  131 + // $("#txtlayerNumber").val(100 - ui.value); // basic math operation..
  132 + var la;
  133 + var scope = angular.element(document.getElementById("daView")).scope();
  134 + scope.$apply(function () {
  135 +
  136 +
  137 + la = parseInt(scope.totalLayers) //- parseInt(scope.layerNumber);
  138 + // $('#layerChangeSlider').slider("option", "value", la - ui.value);
  139 + var slideVal = la - ui.value;
  140 + $("#txtlayerNumber").val(slideVal);
  141 + scope.layerNumber = slideVal;
  142 + scope.LayerChange();
  143 + });
  144 + // $("#txtlayerNumber").val($("#layerChangeSlider").slider("value"));
  145 +
  146 + },
  147 + //slideStop: function (event, ui) {
  148 + // alert('mjnk')
  149 + //}
  150 + })
133 151 });
134 152 </script>
135 153  
  154 +<!--<script>
  155 + $(function () {
  156 + $('#layerChangeSlider').slider().on('slideStop', function () {
  157 + alert('fjkjksdbgjkgjkfgk')
  158 + })
  159 +
  160 +</script>
  161 + });-->
  162 +
  163 +
136 164 <script>
137 165 $(function () {
138 166 $("#slider-range-min-2").slider({
... ... @@ -184,21 +212,9 @@
184 212 var bar = $('.leftToolBar');
185 213 var main = $('.main2');
186 214 $('.toggleBar').click(function () {
187   - // alert('kkkkkkkkkkkkkk')
188   - /*barPos = parseInt($('.sidebar').css('left'));
189   - if(barPos!==0 && !bar.hasClass('active'))
190   - {
191   - bar.addClass('active');
192   - main.addClass('active');
193   - }
194   - else
195   - {
196   - bar.removeClass('active');
197   - main.removeClass('active');
198   - }*/
199   - // $('#cp').width = $(window).outerWidth() - 10;
200   - bar.toggleClass('active');
201   - main.toggleClass('active');
  215 +
  216 + bar.toggleClass('active');
  217 + main.toggleClass('active');
202 218 });
203 219 });
204 220 </script>
205 221 \ No newline at end of file
... ...
400-SOURCECODE/AIAHTML5.Web/app/widget/MainMenu.html
  View file @1ddf757
1   -<div class="bodyWrap row container-fluid">
  1 +<div class="bodyWrap row container-fluid" >
2 2 <div class="col-sm-12 col-md-12 pageHeading">
3 3 <!--<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>-->
4 4 <div class=" pull-left toggleBar toggleHeadingButton" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar" style="padding-left: 15px; "> <i class="fa fa-bars"></i> </div>
... ...
400-SOURCECODE/AIAHTML5.Web/app/widget/MainView.html
  View file @1ddf757
1 1 <div class="bodyWrap row" ng-init="ClearIframe()">
2   - <div ng-include="'app/widget/MainMenu.html'"/>
  2 + <div ng-include="'app/widget/MainMenu.html'" />
3 3 <div class="main">
4 4 <div class="col-sm-12" style="padding-left:25px; width:99%">
5 5 <div align="center" id="MainImage"><img src="content/images/img1.png" alt="" title="" class="img-responsive"></div>
... ...
400-SOURCECODE/AIAHTML5.Web/content/css/main.css
  View file @1ddf757
... ... @@ -694,3 +694,4 @@ textarea {
694 694 line-height: 30px;
695 695 }
696 696  
  697 +.daBodyView{}
697 698 \ No newline at end of file
... ...
400-SOURCECODE/AIAHTML5.Web/index.html
  View file @1ddf757
... ... @@ -28,11 +28,12 @@
28 28 <link href="themes/default/css/bootstrap/3.3.6/jquery-ui.css" rel="stylesheet" />
29 29  
30 30 <link href="libs/jquery/jquery_plugin/jsPanel/jspanel/jquery.jspanel.css" rel="stylesheet" />
  31 + <link href="libs/jquery/jquery_plugin/SpeechBubble/css/bubble.css" rel="stylesheet" />
31 32  
32 33  
33 34 </head>
34   -<body class="no-scroll" ng-controller="HomeController">
35   - <div class="container-fluid " >
  35 +<body class="no-scroll" ng-controller="HomeController" id="bo">
  36 + <div class="container-fluid ">
36 37 <!--Header-->
37 38  
38 39 <nav class="navbar navbar-inverse navbar-fixed-top">
... ... @@ -47,7 +48,7 @@
47 48 <div ng-include="'app/widget/TopMenu.html'"></div>
48 49 </div>
49 50 </nav>
50   - <div class="bodyWrap row container-fluid" >
  51 + <div class="bodyWrap row container-fluid">
51 52  
52 53  
53 54 <div ng-view></div>
... ... @@ -67,7 +68,7 @@
67 68 <div class="row">
68 69 <div class="col-sm-12">
69 70 <h5>Mode</h5>
70   -
  71 +
71 72 <div class="btn-group btn-group-justified" role="group" aria-label="...">
72 73 <div class="btn-group" role="group">
73 74 <button type="button" class="btn btn-sm btn-success">Identify</button>
... ... @@ -138,6 +139,8 @@
138 139 <script src="content/js/custom/custom.js"></script>
139 140 <script src="libs/jinqJs.js"></script>
140 141 <script src="libs/jquery/jquery_plugin/jsPanel/jspanel/jquery.jspanel.js"></script>
  142 + <script src="libs/jquery/jquery_plugin/SpeechBubble/bubble.js"></script>
  143 +
141 144 <!--<script src="libs/jquery/jquery_plugin/jsPanel/jspanel/jquery.jspanel.min.js"></script>-->
142 145 <script src="app/main/AIA.js"></script>
143 146  
... ... @@ -146,7 +149,7 @@
146 149 <script src="app/controllers/HomeController.js"></script>
147 150  
148 151  
149   -
  152 +
150 153  
151 154  
152 155 <script>
... ...
400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/SpeechBubble/README.md 0 → 100644
  View file @1ddf757
  1 +jquery-bubble
  2 +===============
  3 +
  4 +A JQuery widget for showing context-sensitive information for any form element in a popup bubble (aka tooltip).
  5 +
  6 +Bubbles can be attached to any element and are automatically positioned to account for target element position on the page and page scroll such that they will always be visible on the page. Bubbles will be positioned above/right, above/left, bottom/left, or bottom/right of the target using callout arrows to point to the target. Each bubble contains a title and content, where content can be any HTML markup. Hover over an element and the bubble appears immediately or after a configureable delay. Move off the target or bubble and the bubble disappears immediately or after a configureable delay.
  7 +
  8 +Bubble markup containing title and content can be sent with the page or created automatically in the browser. Title and content can be editted directly inside the bubble via the "editable" option.
  9 +
  10 +
  11 +The sample index.html shows simple target elements that can be dragged anywhere on the page to observe the behavior of the bubble positioning. Go <a href="http://byennaco.github.io/jquery-bubble/">here</a> to see the running demo. Go <a href="http://byennaco.github.io/jquery-bubble/doc/bubble.html">here</a> for documentation.
  12 +
  13 +Due to a problem with positioning the top callout arrows on IE8 and Opera, a client-side browser sniffer is included. This can be removed from the head tag if you don't care about these browsers.
  14 +
  15 +Tested with JQuery 1.11.1 and 2.0.
... ...
400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/SpeechBubble/browser.js 0 → 100644
  View file @1ddf757
  1 +/* Standard client-side browser sniffer.
  2 + */
  3 +WebBrowser = {
  4 + /** Get user agent. */
  5 + _getAgent: function() {
  6 + return navigator.userAgent.toLowerCase();
  7 + },
  8 +
  9 + /** Get major version number. */
  10 + _getMajor: function() {
  11 + return parseInt(navigator.appVersion);
  12 + },
  13 +
  14 + /** Get minor version number. */
  15 + _getMinor: function() {
  16 + return parseFloat(navigator.appVersion);
  17 + },
  18 +
  19 + // Platform tests.
  20 +
  21 + isLinux: function() {
  22 + var agent = this._getAgent();
  23 + return (agent.indexOf("inux") != -1);
  24 + },
  25 +
  26 + isMac: function() {
  27 + var agent = this._getAgent();
  28 + return (agent.indexOf("macintosh") != -1);
  29 + },
  30 +
  31 + isSun: function() {
  32 + var agent = this._getAgent();
  33 + return (agent.indexOf("sunos") != -1);
  34 + },
  35 +
  36 + isWin: function() {
  37 + var agent = this._getAgent();
  38 + return (agent.indexOf("win") != -1 || agent.indexOf("16bit") != -1);
  39 + },
  40 +
  41 + getPlatform: function() {
  42 + if (this.isLinux()) return "linux";
  43 + if (this.isMac()) return "mac";
  44 + if (this.isSun()) return "sun";
  45 + if (this.isWin()) return "win";
  46 + return null;
  47 + },
  48 +
  49 + getVersion: function() {
  50 + if (this.isIE()) {
  51 + return this._getMajorIE();
  52 + } else {
  53 + return this._getMajor();
  54 + }
  55 + },
  56 +
  57 + // Browser tests.
  58 +
  59 + isFirefox: function() {
  60 + var agent = this._getAgent();
  61 + return (agent.indexOf("firefox") != -1);
  62 + },
  63 +
  64 + isGecko: function() {
  65 + // Note: Safari is based on WebKit.
  66 + var agent = this._getAgent();
  67 + return (agent.indexOf("gecko") != -1 && agent.indexOf("safari") == -1);
  68 + },
  69 +
  70 + isMozilla: function() {
  71 + var agent = this._getAgent();
  72 + return (agent.indexOf("gecko") != -1 && agent.indexOf("firefox") == -1
  73 + && agent.indexOf("safari") == -1);
  74 + },
  75 +
  76 + isSafari: function() {
  77 + var agent = this._getAgent();
  78 + return (agent.indexOf("safari") != -1) && (agent.indexOf("chrome") == -1);
  79 + },
  80 +
  81 + isChrome: function() {
  82 + var agent = this._getAgent();
  83 + return (agent.indexOf("chrome") != -1);
  84 + },
  85 +
  86 + isOpera: function() {
  87 + var agent = this._getAgent();
  88 + return (agent.indexOf("opera") != -1);
  89 + },
  90 +
  91 +
  92 + // Internet Explorer tests.
  93 +
  94 + // The detector and version extractor were taken from the IE Browser Detector
  95 + // at http://www.pinlady.net/PluginDetect/IE/
  96 +
  97 + isIE: function() {
  98 + // To detect IE, while being independent of the navigator.userAgent,
  99 + // we use a combination of 2 methods:
  100 + //
  101 + // a) Look at the document.documentMode. If this property is READ ONLY
  102 + // and is a number >=0, then we have IE 8+.
  103 + // According to Microsoft:
  104 + // When the current document has not yet been determined, documentMode returns a value of
  105 + // zero (0). This usually happens when a document is loading.
  106 + // When a return value of zero is received, try to determine the document
  107 + // compatibility mode at a later time.
  108 + //
  109 + // b) See if the browser supports Conditional Compilation.
  110 + // If so, then we have IE < 11.
  111 + //
  112 + var tmp = document.documentMode;
  113 + try {document.documentMode = "";} catch (e) {};
  114 +
  115 + // If we have a number, then IE.
  116 + // If not, then if we can see the conditional compilation, then IE.
  117 + // Else we have a non-IE browser.
  118 + var retVal = typeof document.documentMode == "number" || eval("/*@cc_on!@*/!1");
  119 +
  120 + // We switch the value back to be unobtrusive for non-IE browsers
  121 + try {document.documentMode = tmp;} catch(e) {};
  122 +
  123 + return retVal;
  124 +
  125 + },
  126 +
  127 + _getMajorIE: function() {
  128 + // IE version from user agent
  129 + //
  130 + // For IE < 11, we look for "MSIE 10.0", etc...
  131 + // For IE 11+, we look for "rv:11.0", etc...
  132 + var verUA =
  133 + (/^(?:.*?[^a-zA-Z])??(?:MSIE|rv\s*\:)\s*(\d+\.?\d*)/i).test(navigator.userAgent || "") ?
  134 + parseFloat(RegExp.$1, 10) : null;
  135 +
  136 + // Array of classids that can give us the IE version
  137 + var CLASSID = [
  138 + "{45EA75A0-A269-11D1-B5BF-0000F8051515}", // Internet Explorer Help
  139 + "{3AF36230-A269-11D1-B5BF-0000F8051515}", // Offline Browsing Pack
  140 + "{89820200-ECBD-11CF-8B85-00AA005B4383}"
  141 + ];
  142 +
  143 + // Get true IE version using clientCaps.
  144 + var obj = document.createElement("div");
  145 + try {obj.style.behavior = "url(#default#clientcaps)"} catch (e) {};
  146 +
  147 + var verIEtrue = false;
  148 + for (var x = 0; x < CLASSID.length; x++) {
  149 + try {
  150 + // This works for IE 5.5+.
  151 + // For IE 5, we would need to insert obj into the DOM, then set the behaviour,
  152 + // and then query.
  153 + verIEtrue = obj.getComponentVersion(CLASSID[x],"componentid").replace(/,/g,".");
  154 + } catch (e){ };
  155 + if (verIEtrue) break;
  156 + };
  157 +
  158 + // Given string "AA.BB.CCCC.DDDD", convert to a floating point number AA.BB
  159 + // If verIEtrue is null, then verTrueFloat is 0.
  160 + var verTrueFloat = parseFloat(verIEtrue || "0", 10);
  161 +
  162 + // For IE 8+, we look at document.documentMode
  163 + //
  164 + // Note: It is unlikely that a web designer would set document.documentMode to
  165 + // some arbitrary value for IE < 8.
  166 + var docModeIE = document.documentMode ||
  167 + // If document.documentMode is not defined, then we have IE < 8 Desktop.
  168 + // We try to artificially create a document mode number.
  169 + //
  170 + // if document.compatMode == "BackCompat", then we have Quirks mode, so return 5.
  171 + // document.documentMode == 5 in Quirks mode.
  172 + ((/back/i).test(document.compatMode || "") ? 5 : verTrueFloat) ||
  173 +
  174 + // Else return version from navigator.userAgent, or null
  175 + verUA;
  176 +
  177 + // [number / null]
  178 + //
  179 + // Try to use True version first, because this gives the
  180 + // actual browser version.
  181 + //
  182 + // If not available, then use the document mode.
  183 + // In most cases, this will be the actual IE version, anyway.
  184 + verIE = verTrueFloat || docModeIE;
  185 +
  186 + return verIE;
  187 + },
  188 +
  189 + getBrowser: function() {
  190 + var ret = "";
  191 + if (this.isFirefox()) ret += "firefox ";
  192 + if (this.isSafari()) ret += "safari ";
  193 + if (this.isChrome()) ret += "chrome ";
  194 + if (this.isOpera()) ret += "opera ";
  195 + if (this.isGecko()) ret += "gecko ";
  196 + if (this.isMozilla()) ret += "mozilla ";
  197 + if (this.isIE()) ret += "ie" + _getMajorIE();
  198 + return ret;
  199 + },
  200 +
  201 + // Events
  202 +
  203 + stopPropagation: function(event) {
  204 + if (this.isIE()) {
  205 + event.cancelBubble = true;
  206 + event.returnValue = false;
  207 + return false;
  208 + } else {
  209 + event.stopPropagation();
  210 + event.preventDefault();
  211 + return false;
  212 + }
  213 + },
  214 +
  215 + getEvent: function(event) {
  216 + if (this.isIE()) {
  217 + return (event) ? event : ((window.event) ? window.event : null);
  218 + } else {
  219 + return event;
  220 + }
  221 + },
  222 +
  223 + getTarget: function(event) {
  224 + if (this.isIE()) {
  225 + return event.srcElement;
  226 + } else {
  227 + return event.target;
  228 + }
  229 + },
  230 +
  231 + addEvent: function(elmTarget, sEventName, fCallback) {
  232 + if (document.addEventListener) {
  233 + // Browsers that support W3C Standards compliant implementation of
  234 + // adding event handlers
  235 + elmTarget.addEventListener(sEventName, fCallback, false);
  236 +
  237 + } else if (document.attachEvent) {
  238 + // IE6 adding event handler
  239 + elmTarget.attachEvent('on' + sEventName, fCallback);
  240 +
  241 + } else {
  242 + // Browsers that do not support W3C or IE event functions
  243 + return false;
  244 + }
  245 + },
  246 +
  247 + removeEvent: function(elmTarget, sEventName, fCallback) {
  248 + if (document.addEventListener) {
  249 + // Browsers that support W3C Standards compliant implementation of
  250 + // removing event handlers
  251 + elmTarget.removeEventListener(sEventName, fCallback, false);
  252 +
  253 + } else if (document.attachEvent) {
  254 + // IE6 removing event handler
  255 + elmTarget.detachEvent('on' + sEventName, fCallback);
  256 +
  257 + } else {
  258 + // Browsers that do not support W3C or IE event functions
  259 + return false;
  260 + }
  261 + },
  262 +
  263 + changeEvent: function(elmTarget, fCallback) {
  264 + if (document.addEventListener) {
  265 + // Browsers that support W3C Standards compliant implementation of
  266 + // adding event handlers for property change
  267 + elmTarget.addEventListener("DOMAttrModified", fCallback, false);
  268 +
  269 + } else if (document.attachEvent) {
  270 + // IE6 adding event handler for property change
  271 + elmTarget.attachEvent("onpropertychange", fCallback);
  272 +
  273 + } else {
  274 + // Browsers that do not support W3C or IE event functions
  275 + return false;
  276 + }
  277 + }
  278 +};
... ...
400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/SpeechBubble/bubble.js 0 → 100644
  View file @1ddf757
  1 +/**
  2 + * A JQuery widget for showing context-sensitive information for any form element in a popup bubble (aka tooltip).
  3 + *
  4 + * Bubbles can be attached to any element and are automatically positioned to account for target element position
  5 + * on the page and page scroll such that they will always be visible on the page. Bubbles will be positioned
  6 + * above/right, above/left, bottom/left, or bottom/right of the target using callout arrows to point to the target.
  7 + * Each bubble contains a title and content, where content can be any HTML markup. Hover over an element and the
  8 + * bubble appears immediately or after a configureable delay. Move off the target or bubble and the bubble disappears
  9 + * immediately or after a configureable delay.
  10 + *
  11 + * Bubble markup containing title and content can be sent with the page or created automatically in the browser.
  12 + * Title and content can be editted directly inside the bubble via the "editable" option.
  13 + *
  14 + * @name bubble
  15 + * @function
  16 + * @namespace bubble
  17 + * @property {Object} props Key-Value pairs of properties.
  18 + * @property {string} props.title The bubble title
  19 + * @property {string} props.content The bubble content, can include HTML markup.
  20 + * @property {boolean} props.editable When set to true, the Edit icon is available for displaying the bubble
  21 + * in edit mode so title and content can be changed.
  22 + * @property {string} props.ajax URL to retrieve title and content in JSON format. This would be used
  23 + * instead of the title and content attributes.
  24 + */
  25 +(function ($) {
  26 +
  27 + // We may be dealing with 2 unique bubble instances at any time.
  28 + // A pending bubble is one that is on a timer delay before it
  29 + // becomes visible. An active bubble is one that is visible.
  30 + // These plugin variables represent these 2 Bubble class instances.
  31 + //
  32 + var pendingBubble = null;
  33 + var activeBubble = null;
  34 +
  35 + // In general, a pending bubble can always be cancelled. But when the pending bubble
  36 + // is the result of an immediate bubble reactivation, then we want to block events that
  37 + // would otherwise cause the bubble to be cancelled.
  38 + var isCancelBlocked = false;
  39 +
  40 + var options;
  41 +
  42 + /**
  43 + * Maximum percentage of the width of the bubble header that
  44 + * the title can consume. This should be a themeable parameter
  45 + * that matches the default width specified in the stylesheet for "BubbleTitle".
  46 + * @constant {number}
  47 + * @default 75
  48 + * @memberof bubble
  49 + * @private
  50 + */
  51 + var BUBBLE_TITLE_WIDTH = 75;
  52 +
  53 + /**
  54 + * The html template for the bubble widget.
  55 + * @constant {string}
  56 + * @memberof bubble
  57 + * @private
  58 + * @default
  59 + */
  60 + var TEMPLATE = '\
  61 +<div class="BubbleDiv" style="display:none">\n\
  62 + <div class="BubbleShadow">\n\
  63 + <div class="Bubble">\n\
  64 + <div class="BubbleHeader">\n\
  65 + <div class="BubbleTitle"></div>\n\
  66 + <div class="BubbleCloseBtn"></div>\n\
  67 + <div class="BubbleEditBtn"></div>\n\
  68 + </div>\n\
  69 + <div class="BubbleContent">\n\
  70 + </div>\n\
  71 + <div class="bottomLeftArrow"></div>\n\
  72 + <div class="bottomRightArrow"></div>\n\
  73 + <div class="topLeftArrow"></div>\n\
  74 + <div class="topRightArrow"></div>\n\
  75 + </div>\n\
  76 + </div>\n\
  77 +</div>\n\
  78 +';
  79 +
  80 + // Plugin
  81 + $.fn.bubble = function(opts) {
  82 +
  83 + options = $.extend({
  84 + openDelay: 500,
  85 + closeDelay: 2000,
  86 + editable: "false"
  87 + }, opts);
  88 +
  89 + // Listen for clicks on the document and check to see if the event target
  90 + // is .BubbleDiv or has .BubbleDiv as a parent. If it is not, then the click
  91 + // originated from outside the bubble and we can cancel the bubble.
  92 + $(document).click(function(event) {
  93 + if (!$(event.target).closest('.BubbleDiv').length) {
  94 + cancelBubble(event);
  95 + }
  96 + });
  97 +
  98 + return this.each(function() {
  99 + var bubbleID = $(this).data("bubbleid");
  100 + if (bubbleID == null) {
  101 + // No bubbleID attached to this element, then create the bubble markup for it
  102 + // with a unique ID and set the value of the data attribute of the element to
  103 + // the bubble's unique ID.
  104 + bubbleID = $(TEMPLATE).appendTo('body').uniqueId().attr("id");
  105 +
  106 + if (options.ajax != null) {
  107 + // Get bubble title and content via ajax. Return should be a single
  108 + // json object with "title" and "content" options.
  109 + $.getJSON(options.ajax, function(data) {
  110 + // Success
  111 + $('#' + bubbleID + ' .BubbleTitle').html(data.title);
  112 + $('#' + bubbleID + ' .BubbleContent').html(data.content);
  113 + })
  114 + .fail(function(jqxhr, textStatus, error) {
  115 + // Put the error in the bubble.
  116 + var err = "Request failed: " + textStatus + " " + error;
  117 + $('#' + bubbleID + ' .BubbleTitle').html(options.ajax);
  118 + $('#' + bubbleID + ' .BubbleContent').html(err);
  119 + console.log(err );
  120 + });
  121 + } else {
  122 + // Get bubble title and content from options.
  123 + $('#' + bubbleID + ' .BubbleTitle').html(options.title);
  124 + $('#' + bubbleID + ' .BubbleContent').html(options.content);
  125 + }
  126 + $(this).data("bubbleid", bubbleID);
  127 +
  128 + // Clear options that are specific per bubble instance.
  129 + options.title = null;
  130 + options.content = null;
  131 + options.ajax = null;
  132 + }
  133 +
  134 + // Add options for this bubble.
  135 + $('#' + bubbleID).data("editable", options.editable);
  136 +
  137 + $('#' + bubbleID + ' .BubbleCloseBtn').click(function (event) {
  138 + //$('#demoBubble').css('display', 'none');
  139 + cancelBubble(event);
  140 + });
  141 +
  142 + $('#' + bubbleID + ' .BubbleEditBtn').click(function(event) {
  143 + var contentSelector = '#' + bubbleID + ' .BubbleContent';
  144 + var contentEditorSelector = '#' + bubbleID + ' .BubbleContentEditor';
  145 + var contentTextarea = $(contentEditorSelector + ' textarea');
  146 + var titleSelector = '#' + bubbleID + ' .BubbleTitle';
  147 + var titleEditorSelector = '#' + bubbleID + ' .BubbleTitleEditor';
  148 + var titleTextarea = $(titleEditorSelector + ' textarea');
  149 + var content = $(contentSelector).html();
  150 + var title = $(titleSelector).text();
  151 + if (contentTextarea.length == 0) {
  152 + // Move the bubble content into an editable textarea inside its own parent div.
  153 + $("<div></div>").addClass("BubbleContentEditor").insertAfter(contentSelector);
  154 + $("<textarea></textarea>").val($.trim(content)).appendTo(contentEditorSelector)
  155 + .height($(contentSelector).height() + 20);
  156 +
  157 + // Move the bubble title into an editable textarea inside its own parent div.
  158 + $("<div></div>").addClass("BubbleTitleEditor").insertAfter(titleSelector);
  159 + $("<textarea></textarea>").val($.trim(title)).appendTo(titleEditorSelector)
  160 + .width($(titleSelector).width())
  161 + .height($(titleSelector).height());
  162 +
  163 + $(contentSelector).css({"display": "none"});
  164 + $(titleSelector).css({"display": "none"});
  165 + setArrowPosition(bubbleID);
  166 + } else {
  167 + // Move the editted content from the textarea to bubble content and remove the editor.
  168 + var content = contentTextarea.val();
  169 + $(contentSelector).html(content);
  170 + $(contentEditorSelector).remove();
  171 + $(contentSelector).css({"display": "block"});
  172 +
  173 + // Move the editted title from the textarea to bubble title and remove the editor.
  174 + var title = titleTextarea.val();
  175 + $(titleSelector).text(title);
  176 + $(titleEditorSelector).remove();
  177 + $(titleSelector).css({"display": "block"});
  178 +
  179 + // Immediate reactivate the bubble with the updated content.
  180 + var bubbleDOM = $("#" + bubbleID).get(0);
  181 + var event = new Object();
  182 + event.type = "click";
  183 + event.target = bubbleDOM.payload.target;
  184 + cancelBubble(event);
  185 + isCancelBlocked = true;
  186 + event.type = "mousenter";
  187 + initBubble(bubbleID, event, 0);
  188 + }
  189 + });
  190 +
  191 + $(this)
  192 + .addClass("ui-bubbleable")
  193 + .mouseenter(function(event) {
  194 + var bubbleID = $(this).data("bubbleid");
  195 + if (bubbleID != null) {
  196 + initBubble(bubbleID, event);
  197 + }})
  198 + .mouseout(function(event) {
  199 + cancelBubble(event);})
  200 + .mousedown(function(event) {
  201 + cancelBubble(event);});
  202 +
  203 + return $(this);
  204 + });
  205 +
  206 + };
  207 +
  208 +
  209 + /****** Bubble class ******/
  210 +
  211 + /**
  212 + * Backing class for pending and active bubbles.
  213 + *
  214 + * @namespace Bubble
  215 + * @function Bubble
  216 + * @class
  217 + * @constructor
  218 + * @param id ID of the bubble to start
  219 + * @param evt event associated with the creation of this bubble.
  220 + * @private
  221 + */
  222 + function Bubble(id, evt) {
  223 + this.id = id;
  224 + this.evt = evt;
  225 + this.target = evt.target;
  226 + this.timeoutID = null;
  227 + this.cancelled = false; // only applicable to an active bubble
  228 + this.stopped = false; // only applicable to an active bubble
  229 + this.arrow = null;
  230 +
  231 + // Get the absolute position of the target.
  232 + var offset = $(this.target).offset();
  233 + this.target.absLeft = offset.left;
  234 + this.target.absTop = offset.top;
  235 +
  236 + // Get the DOM element for the bubble.
  237 + var bubble = $("#" + this.id).get(0);
  238 +
  239 + // The 1st instance of this bubble element will not have the "payload" property
  240 + // set. In this case, we want to grab any positioning information that may have
  241 + // been specified as part of the style attribute. Specific positioning can be
  242 + // used to override the default positioning of the bubble.
  243 + //
  244 + if (bubble.payload == null) {
  245 + var t = parseInt($("#" + this.id).css("top"));
  246 + var l = parseInt($("#" + this.id).css("left"));
  247 + if ($.isNumeric(t)) {
  248 + this.top = t;
  249 + }
  250 + if ($.isNumeric(l)) {
  251 + this.left = l;
  252 + }
  253 + } else {
  254 + // Old payload exists, so migrate positioning info from it to this object.
  255 + this.top = bubble.payload.top;
  256 + this.left = bubble.payload.left;
  257 + }
  258 +
  259 + // Extend the DOM object to account for our Bubble object payload, so
  260 + // we can register event handlers for the payload.
  261 + bubble.payload = this;
  262 +
  263 + bubble.onmouseover = function() {
  264 + // Treat same as mouseover on target. If bubble scheduled to be stopped, cancel
  265 + // the scheduled stop.
  266 + if (this.payload.timeoutID != null)
  267 + clearTimeout(this.payload.timeoutID);
  268 + this.payload.cancelled = false;
  269 + this.payload.timeoutID = null;
  270 + }
  271 + bubble.onmouseout = function() {
  272 + // Create our own event and override target to be the target
  273 + // object associated with this bubble.
  274 + var event = new Object();
  275 + event.type = "mouseout";
  276 + event.target = this.payload.target;
  277 + cancelBubble(event);
  278 + }
  279 +
  280 + // Display the Edit button icon if bubble is edittable.
  281 + var editable = $('#' + id).data("editable")
  282 + if (editable == true) {
  283 + $("#" + id + ".BubbleDiv .BubbleEditBtn").css({"display": "block"});
  284 + } else {
  285 + $("#" + id + ".BubbleDiv .BubbleEditBtn").css({"display": "none"});
  286 + }
  287 +
  288 + // Initialize the BubbleTitle width as a percentage of the bubble header.
  289 + $("#" + bubble.id + ".BubbleDiv .BubbleTitle").width(BUBBLE_TITLE_WIDTH + "%");
  290 + };
  291 +
  292 + /**
  293 + * Start bubble
  294 + *
  295 + * @function
  296 + * @memberof Bubble
  297 + * @this Bubble
  298 + * @instance
  299 + * @private
  300 + */
  301 + function start() {
  302 +
  303 + // Get JQuery bubble object associated with this Bubble instance.
  304 + var bubble = $("#" + this.id);
  305 + if (bubble.length == 0) {
  306 + return;
  307 + }
  308 +
  309 + // If bubble already rendered, do nothing.
  310 + if (bubble.css("display") == "block") {
  311 + return;
  312 + }
  313 +
  314 + // Render the bubble. Must do this here, else target properties referenced
  315 + // below will not be valid.
  316 + bubble.css("display", "block");
  317 +
  318 +
  319 + ////////////////////////////////////////////////////////////////////
  320 +
  321 + // THIS CODE BLOCK IS NECESSARY WHEN THE PAGE FONT IS VERY SMALL,
  322 + // AND WHICH OTHERWISE CAUSES THE PERCENTAGE OF THE HEADER WIDTH
  323 + // ALLOCATED TO THE BUBBLE TITLE TO BE TOO LARGE SUCH THAT IT
  324 + // ENCROACHES ON THE SPACE ALLOCATED FOR THE CLOSE BUTTON ICON,
  325 + // RESULTING IN LAYOUT MISALIGNMENT IN THE HEADER.
  326 +
  327 + // Assume BubbleTitle width max percentage of the bubble header.
  328 + var maxPercent = BUBBLE_TITLE_WIDTH;
  329 +
  330 + // Sum of widths of all elements in the header BUT the title. This includes
  331 + // the width of the close button icon, and the margins around the button and
  332 + // the title. This should be a themeable parameter that matches the left/right
  333 + // margins specified in the stylesheet for "BubbleTitle" and "BubbleCloseBtn".
  334 + nonTitleWidth = 39;
  335 +
  336 + // Get the widths (in pixels) of the bubble header and title
  337 + var headerWidth = $("#" + bubble.attr("id") + ".BubbleDiv .BubbleHeader").width();
  338 + var titleWidth = $("#" + bubble.attr("id") + ".BubbleDiv .BubbleTitle").width();
  339 +
  340 + // Revise the aforementioned percentage downward until the title no longer
  341 + // encroaches on the space allocated for the close button. We decrement by
  342 + // 5% each time because by doing so in smaller chunks when the font gets so
  343 + // small only results in unnecessary extra loop interations.
  344 + //
  345 + if (headerWidth > nonTitleWidth) {
  346 + while ((maxPercent > 5) && (titleWidth > (headerWidth - nonTitleWidth))) {
  347 + maxPercent -= 5;
  348 + $("#" + bubble.attr("id") + ".BubbleDiv .BubbleTitle").width(maxPercent + "%");
  349 + titleWidth = $("#" + bubble.attr("id") + ".BubbleDiv .BubbleTitle").width();
  350 + }
  351 + }
  352 +
  353 + ////////////////////////////////////////////////////////////////////
  354 +
  355 +
  356 + // If specific positioning specified, then simply use it. This means the bubble
  357 + // will not contain any callout arrows and no provisions are made to guarantee
  358 + // the bubble renders in the viewable area.
  359 + if ((this.top != null) && (this.left != null)) {
  360 +
  361 + bubble.css({"left": this.left, "top": this.top});
  362 +
  363 + } else {
  364 +
  365 + // No positioning specified, so we calculate the optimal position to guarantee
  366 + // bubble is fully viewable and includes callout arrows.
  367 +
  368 +
  369 + // A bubble can render one of 4 callout arrow images, each of which are
  370 + // child nodes of the bubble. To get access to those nodes, we have to
  371 + // traverse the bubble's container hierarchy.
  372 + //
  373 + var bottomLeftArrow = $("#" + bubble.attr("id") + ".BubbleDiv .bottomLeftArrow");
  374 + var bottomRightArrow = $("#" + bubble.attr("id") + ".BubbleDiv .bottomRightArrow");
  375 + var topLeftArrow = $("#" + bubble.attr("id") + ".BubbleDiv .topLeftArrow");
  376 + var topRightArrow = $("#" + bubble.attr("id") + ".BubbleDiv .topRightArrow");
  377 +
  378 + var slidLeft = false;
  379 +
  380 + // Assume default bubble position northeast of target, which implies a
  381 + // bottomLeft callout arrow
  382 + this.arrow = bottomLeftArrow;
  383 +
  384 + // Get the <html> node so can get scroll info
  385 + var html = $("html");
  386 +
  387 + // Try to position bubble to right of target.
  388 + var bubbleLeft = this.target.absLeft + this.target.offsetWidth + 5;
  389 +
  390 + // Check if right edge of bubble exceeds page boundary.
  391 + var rightEdge = bubbleLeft + bubble.width();
  392 + if (rightEdge > ($(document).width() + html.scrollLeft())) {
  393 +
  394 + // Shift bubble to left side of target; implies a bottomRight arrow.
  395 + bubbleLeft = this.target.absLeft - bubble.width();
  396 + this.arrow = bottomRightArrow;
  397 + slidLeft = true;
  398 +
  399 + // If left edge of bubble crosses left page boundary, then
  400 + // reposition bubble back to right of target and implies to go
  401 + // back to bottomLeft arrow. User will need to use scrollbars
  402 + // to position bubble into view.
  403 + if (bubbleLeft <= 0) {
  404 + bubbleLeft = this.target.absLeft + this.target.offsetWidth + 5;
  405 + this.arrow = bottomLeftArrow;
  406 + slidLeft = false;
  407 + }
  408 + }
  409 +
  410 + // Try to position bubble above target
  411 + var bubbleTop = this.target.absTop - bubble.height();
  412 +
  413 + // Check if top edge of bubble crosses top page boundary
  414 + if (bubbleTop <= html.scrollTop()) {
  415 + // Shift bubble to bottom of target. User may need to use scrollbars
  416 + // to position bubble into view.
  417 + bubbleTop = this.target.absTop + this.target.offsetHeight + 5;
  418 +
  419 + // Use appropriate top arrow depending on left/right position.
  420 + if (slidLeft == true)
  421 + this.arrow = topRightArrow;
  422 + else
  423 + this.arrow = topLeftArrow;
  424 + }
  425 +
  426 + // Set new bubble position.
  427 + bubble.css({"left": bubbleLeft + "px", "top": bubbleTop + "px"});
  428 +
  429 + // If rendering a callout arrow, set it's position relative to the bubble.
  430 + if (this.arrow != null) {
  431 + $(this.arrow).css({"display": "block", "visibility": "visible"});
  432 + setArrowPosition(this.id);
  433 + }
  434 + }
  435 +
  436 + this.evt = null;
  437 + this.cancelled = false;
  438 + this.stopped = false;
  439 + this.timeoutID = null;
  440 +
  441 + } // start
  442 +
  443 +
  444 + /**
  445 + * Stop the bubble. If an event is provided, the stop
  446 + * may be conditional on the event type. If no event
  447 + * is provided, then use the event member for this class,
  448 + * it may have been posted there. Otherwise if no
  449 + * event is available, then force an unconditional stop.
  450 + *
  451 + * @function
  452 + * @memberof Bubble
  453 + * @this Bubble
  454 + * @instance
  455 + * @private
  456 + * @param evt event associated with stopping the bubble.
  457 + */
  458 + function stop(evt) {
  459 +
  460 + // Clear any timeout associated with this bubble.
  461 + if (this.timeoutID != null) {
  462 + clearTimeout(this.timeoutID);
  463 + this.timeoutID = null;
  464 + }
  465 + this.cancelled = false;
  466 +
  467 + // Get bubble object.
  468 + var bubble = $("#" + this.id);
  469 + if (bubble.length == 0) {
  470 + return;
  471 + }
  472 +
  473 + // If bubble not already rendered, do nothing.
  474 + if (bubble.css("display") != "block") {
  475 + return;
  476 + }
  477 +
  478 + var evt = (evt) ? evt : this.evt;
  479 + this.evt = null;
  480 +
  481 + // If the event source is any element contained in the bubble
  482 + // BUT the close icon, then simply return without dismissing the bubble.
  483 + if (evt != null) {
  484 + var target = evt.target;
  485 + while (target != null) {
  486 + // Stop loop if bubble's close button clicked.
  487 + if ((evt.type == "click") && (target.className != null) && (target.className == "BubbleCloseBtn"))
  488 + break;
  489 +
  490 + if (target.parentNode != null) {
  491 + if (target.parentNode.id == this.id)
  492 + // Event source is bubble, so ignore the event.
  493 + return;
  494 + }
  495 + target = target.parentNode;
  496 + }
  497 + }
  498 +
  499 + // Dismiss the bubble for all events outside the bubble.
  500 + if (this.arrow != null) {
  501 + $(this.arrow).css({"display": "none", "visibility": "hidden"});
  502 + }
  503 + bubble.css("display", "none");
  504 + this.stopped = true;
  505 +
  506 + } // stop
  507 +
  508 + // Interfaces for Bubble class
  509 + // We make the functions instance methods by assigning them
  510 + // to the prototype object of the constructor.
  511 + //
  512 + Bubble.prototype.start = start;
  513 + Bubble.prototype.stop = stop;
  514 +
  515 + /****** End Bubble class ******/
  516 +
  517 + /**
  518 + * Initialize a bubble to start after a specified period of time.
  519 + *
  520 + * @function
  521 + * @memberof bubble
  522 + * @static
  523 + * @private
  524 + * @param id ID of the bubble to start
  525 + * @param evt event that triggered this handler
  526 + * @param delay number of millisecond to delay start of the bubble.
  527 + * If not specified, the delay is as specified in the plugin options
  528 + */
  529 + function initBubble(id, evt, delay) {
  530 +
  531 + // Do not initialize a bubble that is already pending.
  532 + if ((pendingBubble != null) && (pendingBubble.id == id)) {
  533 + return;
  534 + }
  535 +
  536 + // Do not initialize a bubble that is already active.
  537 + // If it was cancelled, we clear the cancel and leave
  538 + // the bubble active.
  539 + if ((activeBubble != null) && (activeBubble.id == id)) {
  540 + if (activeBubble.cancelled == true) {
  541 + clearTimeout(activeBubble.timeoutID);
  542 + activeBubble.cancelled = false;
  543 + activeBubble.timeoutID = null;
  544 + }
  545 + return;
  546 + }
  547 +
  548 + pendingBubble = new Bubble(id, evt);
  549 + pendingBubble.timeoutID = setTimeout(startBubble, (delay != null) ? delay : options.openDelay);
  550 +
  551 + } // initBubble
  552 +
  553 +
  554 + /**
  555 + * Cancel the bubble. It is possible we could be in a state of
  556 + * transitioning between an active and pending bubble. So we
  557 + * unconditionally stop the pending bubble. The active bubble
  558 + * is "softly" cancelled only upon a mouseout event, otherwise
  559 + * it too is stopped unconditionally.
  560 + *
  561 + * @function
  562 + * @memberof bubble
  563 + * @static
  564 + * @private
  565 + * @param evt event that triggered this handler
  566 + */
  567 + function cancelBubble(evt) {
  568 +
  569 + if (isCancelBlocked == true) {
  570 + return;
  571 + }
  572 +
  573 + // Unconditionally stop pending bubble.
  574 + if (pendingBubble != null) {
  575 + pendingBubble.stop();
  576 + pendingBubble = null;
  577 + }
  578 +
  579 + // Delay stop of active bubble on mouseout event, and only if
  580 + // if it has not already been scheduled for stoppage. Otherwise,
  581 + // unconditionally stop it.
  582 + //
  583 + if (activeBubble != null) {
  584 + if (evt.type == "mouseout") {
  585 + if ((evt.target.id == activeBubble.target.id) && (activeBubble.cancelled == false)) {
  586 + activeBubble.evt = evt;
  587 + activeBubble.timeoutID = setTimeout(stopBubble, options.closeDelay);
  588 + activeBubble.cancelled = true;
  589 + }
  590 + } else {
  591 + // If in edit mode, remove the editors and restore the content and title.
  592 + var contentSelector = '#' + activeBubble.id + ' .BubbleContent';
  593 + var contentEditorSelector = '#' + activeBubble.id + ' .BubbleContentEditor';
  594 + var contentTextarea = $(contentEditorSelector + ' textarea');
  595 + var titleSelector = '#' + activeBubble.id + ' .BubbleTitle';
  596 + var titleEditorSelector = '#' + activeBubble.id + ' .BubbleTitleEditor';
  597 + var titleTextarea = $(titleEditorSelector + ' textarea');
  598 + if (contentTextarea.length != 0) {
  599 + $(contentEditorSelector).remove();
  600 + $(contentSelector).css({"display": "block"});
  601 + $(titleEditorSelector).remove();
  602 + $(titleSelector).css({"display": "block"});
  603 + }
  604 +
  605 + stopBubble(evt);
  606 + }
  607 + }
  608 +
  609 + } // cancelBubble
  610 +
  611 +
  612 + /**
  613 + * If a new bubble is pending, start it. If another bubble already
  614 + * started, stop it.
  615 + * @function
  616 + * @memberof bubble
  617 + * @static
  618 + * @private
  619 + */
  620 + function startBubble() {
  621 +
  622 + // Stop existing bubble unconditionally, if it exists.
  623 + if (activeBubble != null) {
  624 + activeBubble.stop()
  625 + }
  626 + activeBubble = null;
  627 +
  628 + // If no pending bubble registered, simply return.
  629 + if (pendingBubble == null) {
  630 + return;
  631 + }
  632 +
  633 + // Don't activate pending bubble for target that is dragging.
  634 + if ($(pendingBubble.target).hasClass('ui-draggable-dragging')) {
  635 + pendingBubble = null;
  636 + return;
  637 + }
  638 +
  639 + // Pending bubble becomes the active one.
  640 + activeBubble = pendingBubble;
  641 + pendingBubble = null;
  642 + activeBubble.start();
  643 + isCancelBlocked = false;
  644 +
  645 + } // startBubble
  646 +
  647 +
  648 + /**
  649 + * Stop the active bubble.
  650 + * @function
  651 + * @memberof bubble
  652 + * @static
  653 + * @private
  654 + *
  655 + * @param evt event associated with stopping the bubble, or null.
  656 + */
  657 + function stopBubble(evt) {
  658 +
  659 + if (activeBubble == null)
  660 + return;
  661 +
  662 + activeBubble.stop(evt);
  663 + if (activeBubble.stopped == true)
  664 + activeBubble = null;
  665 +
  666 + } // stopBubble
  667 +
  668 + /**
  669 + * Set the positions of the callout arrow for the specified bubble.
  670 + * @function
  671 + * @memberof bubble
  672 + * @static
  673 + * @private
  674 + *
  675 + * @param bubbleID the ID of the bubble
  676 + */
  677 + function setArrowPosition(bubbleID) {
  678 + // Get a handle to the top arrow if it is displayed.
  679 + var topLeftArrow = $("#" + bubbleID + ".BubbleDiv .topLeftArrow");
  680 + var topRightArrow = $("#" + bubbleID + ".BubbleDiv .topRightArrow");
  681 + var isTopLeftArrowVisible = (topLeftArrow.css("display") == "block") ? true : false;
  682 + var isTopRightArrowVisible = (topRightArrow.css("display") == "block") ? true : false;;
  683 + var topArrow = null;
  684 + if (isTopLeftArrowVisible == true) { topArrow = topLeftArrow; }
  685 + if (isTopRightArrowVisible == true) { topArrow = topRightArrow; }
  686 +
  687 + if (topArrow != null) {
  688 + // Top position for top arrows is a relative vertical shift by an
  689 + // amount almost equal to the bubble height, but with an adjustment.
  690 + // For some reason, IE8 and Opera require custom positioning of the top arrows.
  691 + // Don't know which "support" item to check for so we check the browser.
  692 + var adjustment = -2;
  693 + if (typeof(WebBrowser) != "undefined") {
  694 + if ((WebBrowser.isIE() && (WebBrowser.getVersion() == 8))
  695 + || WebBrowser.isOpera()) {
  696 + adjustment = 3;
  697 + }
  698 + }
  699 + var bubble = $("#" + bubbleID);
  700 + topArrow.css("top", -(bubble.height() + adjustment) + "px");
  701 + }
  702 + }
  703 +
  704 +})(jQuery);
... ...
400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/SpeechBubble/css/bubble.css 0 → 100644
  View file @1ddf757
  1 +.BubbleDiv {
  2 + position:absolute;
  3 + width:20em;
  4 + z-index:99;
  5 +}
  6 +
  7 +.BubbleShadow {
  8 + background: #BBBBBB;
  9 + border: 1px solid #BBBBBB;
  10 + display: block;
  11 +}
  12 +
  13 +.Bubble {
  14 + position: relative;
  15 + padding: 0px;
  16 + left: -5px;
  17 + top: -5px;
  18 + background: #ffffff;
  19 + border: 1px solid #8c8f91;
  20 + font-weight: normal;
  21 +}
  22 +
  23 +.BubbleShadow, .Bubble {
  24 + border-radius: 5px;
  25 +}
  26 +
  27 +.Bubble .topLeftArrow,
  28 +.Bubble .topRightArrow {
  29 + margin: 0px;
  30 + width: 44px;
  31 + height: 15px;
  32 + position: relative;
  33 + display: none;
  34 +}
  35 +
  36 +.Bubble .bottomLeftArrow,
  37 +.Bubble .bottomRightArrow {
  38 + margin: 0px;
  39 + width: 53px;
  40 + height: 20px;
  41 + position: relative;
  42 + display:block;
  43 +}
  44 +
  45 +.Bubble .bottomLeftArrow {
  46 + top:0px;
  47 + left:5px;
  48 + float:left;
  49 + background-image: url(../images/bubble/bottomLeftArrow.png);
  50 +}
  51 +
  52 +.Bubble .bottomRightArrow {
  53 + top:0px;
  54 + left:-5px;
  55 + float:right;
  56 + background-image: url(../images/bubble/bottomRightArrow.png);
  57 +}
  58 +
  59 +.Bubble .topLeftArrow {
  60 + left:5px;
  61 + float:left;
  62 + background-image: url(../images/bubble/topLeftArrow.png);
  63 +}
  64 +
  65 +.Bubble .topRightArrow {
  66 + left:-5px;
  67 + float:right;
  68 + background-image: url(../images/bubble/topRightArrow.png);
  69 +}
  70 +
  71 +.BubbleHeader {
  72 + overflow: auto;
  73 + margin-right: 1px;
  74 + background-color: #e1e5e8;
  75 + border-bottom: 1px solid #8c8f91;
  76 +}
  77 +
  78 +.BubbleTitle {
  79 + float: left;
  80 + width: 75%;
  81 + padding: 0;
  82 + margin-top: 4px;
  83 + margin-bottom: 4px;
  84 + margin-left: 10px;
  85 + margin-right: 10px;
  86 + color: #36586f;
  87 + font-size: 1.0em;
  88 + font-weight: bold;
  89 +}
  90 +
  91 +.BubbleTitleEditor {
  92 + float: left;
  93 + width: 75%;
  94 + padding: 0;
  95 +}
  96 +
  97 +.BubbleCloseBtn, .NoBubbleCloseBtn {
  98 + float: right;
  99 + margin-top: 4px;
  100 + margin-bottom: 4px;
  101 + margin-right: 4px;
  102 + width: 15px;
  103 + height: 14px;
  104 +}
  105 +
  106 +.BubbleEditBtn {
  107 + float: right;
  108 + margin-top: 4px;
  109 + margin-bottom: 4px;
  110 + margin-right: 4px;
  111 + width: 15px;
  112 + height: 15px;
  113 +}
  114 +
  115 +.BubbleCloseBtn {
  116 + background-image: url(../images/bubble/dismiss_icon.png);
  117 +}
  118 +
  119 +.BubbleEditBtn {
  120 + background-image: url(../images/bubble/edit_icon.png);
  121 +}
  122 +
  123 +.NoBubbleCloseBtn {
  124 + background-image: url(../images/bubble/dot.gif);
  125 +}
  126 +
  127 +.BubbleContent {
  128 + margin:10px;
  129 + padding:1px; // in case of no content
  130 + clear: both;
  131 +}
  132 +
  133 +.BubbleContentEditor textarea {
  134 + resize: none;
  135 + width: 99%;
  136 + height: auto;
  137 +}
  138 +
  139 +.BubbleTitleEditor textarea {
  140 + resize: none;
  141 + height: auto;
  142 +}
... ...
400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/SpeechBubble/demo.js 0 → 100644
  View file @1ddf757
  1 +$(document).ready(function() {
  2 +
  3 + $("#target1, #target2, #target3")
  4 + .draggable()
  5 + .bubble({editable:true});
  6 +
  7 + $("#dynamic")
  8 + .draggable()
  9 + .bubble({
  10 + title: "Dynamic Content",
  11 + content: "Bubble markup not preset in HTML. Instead title and content are passed as options when the bubble widget is invoked."
  12 + });
  13 +
  14 + $("#dynamic2")
  15 + .draggable()
  16 + .bubble({
  17 + ajax: "example.json"
  18 + });
  19 +
  20 +});
... ...
400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/SpeechBubble/example.json 0 → 100644
  View file @1ddf757
  1 +{
  2 + "title": "Dynamic Content",
  3 + "content": "Bubble markup not preset in HTML. Instead title and content are retrieved via AJAX when the bubble widget is invoked."
  4 +}
... ...
400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/SpeechBubble/images/bubble/bottomLeftArrow.png 0 → 100644
View file @1ddf757

880 Bytes
400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/SpeechBubble/images/bubble/bottomLeftArrow123.png 0 → 100644
View file @1ddf757

778 Bytes
400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/SpeechBubble/images/bubble/bottomRightArrow.png 0 → 100644
View file @1ddf757

1.08 KB
400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/SpeechBubble/images/bubble/dismiss_icon.png 0 → 100644
View file @1ddf757

3.77 KB
400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/SpeechBubble/images/bubble/edit_icon.png 0 → 100644
View file @1ddf757

883 Bytes
400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/SpeechBubble/images/bubble/topLeftArrow.png 0 → 100644
View file @1ddf757

667 Bytes
400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/SpeechBubble/images/bubble/topRightArrow.png 0 → 100644
View file @1ddf757

588 Bytes
400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/SpeechBubble/images/other/dot.gif 0 → 100644
View file @1ddf757

43 Bytes
400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/SpeechBubble/index.html 0 → 100644
  View file @1ddf757
  1 +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 +<html xmlns="http://www.w3.org/1999/xhtml">
  3 +<head>
  4 + <meta content="text/html; charset=UTF-8" http-equiv="content-type">
  5 + <title>Examples of Bubble widget</title>
  6 + <link rel="stylesheet" type="text/css" href="css/bubble.css" />
  7 + <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  8 + <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
  9 + <script type="text/javascript" src="browser.js"></script>
  10 + <script type="text/javascript" src="bubble.js"></script>
  11 + <script type="text/javascript" src="demo.js"></script>
  12 +</head>
  13 +
  14 +<body>
  15 +
  16 +<p>Drag any of these boxes anywhere on the screen, and then mouse into it to see
  17 + Bubble position and info for that box. To dismiss the bubble, click anywhere outside the
  18 + bubble or click the bubble's dismiss icon. The bubble will auto-dismiss 2 seconds
  19 + after moving the mouse off the bubble or the associated target.</p>
  20 +<p>Bubbles that have the "editable" option set to true will show an edit icon in the header.
  21 + When clicked, the bubble title and content will each display in a textarea for editting.
  22 + Clicking the icon when in edit mode will returns the bubble to normal mode with the changes
  23 + applied. Changes from edit mode can be cancelled by dismissing the bubble via the dismiss
  24 + icon or clicking anywhere outside the bubble. The bubble title is text-only, the content
  25 + can be HTML markup.</p>
  26 +
  27 +<!-- This example shows a bubble that is specifically positioned and overrides the default
  28 + policy on positioning. Since the bubble container is a child of the target, it can be
  29 + positioned relative to the target.
  30 +-->
  31 +<div id="target1" data-bubbleid="target1Bubble"
  32 + style="position:absolute; margin-top:10px; left:500px; width:50px; height:50px; background-color:red; cursor:pointer">
  33 +
  34 + <!-- top-level bubble container used to position bubble -->
  35 + <div id="target1Bubble" class="BubbleDiv" style="display:none; top:55px; left:-5px;">
  36 + <div class="BubbleShadow">
  37 + <div class="Bubble">
  38 + <div class="BubbleHeader">
  39 + <div class="BubbleTitle">Specific Positioning</div>
  40 + <div class="BubbleCloseBtn"></div>
  41 + <div class="BubbleEditBtn"></div>
  42 + </div>
  43 + <div class="BubbleContent">
  44 + This bubble is specifically positioned via "style="top:55px; left:-5px; position:relative;"
  45 + to override the default positioning. When positioned in this manner, there will be no callout
  46 + arrows and no provisioning is made to ensure the bubble appears within the page boundaries.
  47 + </div>
  48 + <div class="bottomLeftArrow"></div>
  49 + <div class="bottomRightArrow"></div>
  50 + <div class="topLeftArrow"></div>
  51 + <div class="topRightArrow"></div>
  52 + </div>
  53 + </div>
  54 + </div>
  55 +
  56 +</div>
  57 +
  58 +<!-- This example shows the default bubble positioning above and to the right of the target.
  59 + No position information is specified in the bubble style attribute and the bubble is not
  60 + a child of the target.
  61 +-->
  62 +<div id="target2" data-bubbleid="target2Bubble"
  63 + style="position:absolute; top:120px; left:5px; width:50px; height:50px; background-color:blue; cursor:pointer">
  64 +</div>
  65 +
  66 +<div id="target2Bubble" class="BubbleDiv" style="display:none">
  67 + <div class="BubbleShadow">
  68 + <div class="Bubble">
  69 + <div class="BubbleHeader">
  70 + <div class="BubbleTitle">Bubble repositions to opposite side on browser boundaries</div>
  71 + <div class="BubbleCloseBtn"></div>
  72 + <div class="BubbleEditBtn"></div>
  73 + </div>
  74 + <div class="BubbleContent">
  75 + This bubble shows the default positioning of the bubble.<br/><br/>
  76 + The bubble will by default be positioned to the right and above the target.<br/>
  77 + If the bubble position will cause it to cross the right page boundary, then it is
  78 + repositioned to the left of the target.<br/>
  79 + If the bubble position will cause it to cross the top page boundary, then it is
  80 + repositioned below the target.
  81 + </div>
  82 + <div class="bottomLeftArrow"></div>
  83 + <div class="bottomRightArrow"></div>
  84 + <div class="topLeftArrow"></div>
  85 + <div class="topRightArrow"></div>
  86 + </div>
  87 + </div>
  88 +</div>
  89 +
  90 +
  91 +<!-- This example shows a bubble with default positioning relative to a target that itself
  92 + is positioned relative to it's parent container.
  93 + No position information is specified in the bubble style attribute and the bubble is not
  94 + a child of the target.
  95 +-->
  96 +<div id="foo" style="position:absolute; top:200px; left:5px; width:100px; height:100px; border: 1px solid black">
  97 + Parent container for the black square.
  98 + <div id="target3" data-bubbleid="target3Bubble"
  99 + style="position:relative; top:10px; left:10px; width:50px; height:50px; background-color:black; cursor:pointer">
  100 + </div>
  101 +</div>
  102 +
  103 +<div id="target3Bubble" class="BubbleDiv" style="display:none">
  104 + <div class="BubbleShadow">
  105 + <div class="Bubble">
  106 + <div class="BubbleHeader">
  107 + <div class="BubbleTitle">Relatively-positioned Target</div>
  108 + <div class="BubbleCloseBtn"></div>
  109 + <div class="BubbleEditBtn"></div>
  110 + </div>
  111 + <div class="BubbleContent">
  112 + This bubble tests correct placement of a bubble for a target that itself is positioned
  113 + relative to it's parent container. The parent container is the black hollow square.
  114 + </div>
  115 + <div class="bottomLeftArrow"></div>
  116 + <div class="bottomRightArrow"></div>
  117 + <div class="topLeftArrow"></div>
  118 + <div class="topRightArrow"></div>
  119 + </div>
  120 + </div>
  121 +</div>
  122 +
  123 +
  124 +<!-- This example shows an element with no pre-configured bubble, but one will be created for it
  125 + dynamically with title and content specified from javascript.
  126 +-->
  127 +<div id="dynamic" style="position:absolute; top:150px; left:300px; width:50px; height:50px; background-color:yellow; cursor:pointer"></div>
  128 +
  129 +<!-- This example shows an element with no pre-configured bubble, but one will be created for it
  130 + dynamically with title and content obtained via ajax.
  131 +-->
  132 +<div id="dynamic2" style="position:absolute; top:250px; left:300px; width:50px; height:50px; background-color:green; cursor:pointer"></div>
  133 +
  134 +
  135 +
  136 +</body>
  137 +</html>
... ...
400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/jsPanel/jspanel/jquery.jspanel.css
  View file @1ddf757
... ... @@ -650,3 +650,8 @@ h3.jsPanel-title{
650 650 [data-tips].left-tip:hover:before {
651 651 top: 7px;
652 652 }
  653 +
  654 +
  655 +span#min {
  656 + background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg);
  657 +}
653 658 \ No newline at end of file
... ...
400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/jsPanel/jspanel/jquery.jspanel.js
  View file @1ddf757
... ... @@ -43,14 +43,14 @@ if (!$.fn.jquery || !$.fn.uniqueId || !$.widget || !$.ui.mouse || !$.ui.draggabl
43 43 console.log("Error: jQuery or at least one jQuery UI component is not loaded! You need at least jQuery 1.9.1 and jQuery UI 1.9.2 (modules Core, Mouse, Widget, Draggable and Resizable).");
44 44 } else {
45 45 console.log("Loaded: jQuery " + $.fn.jquery + ", jQuery UI " + $.ui.version +
46   - "\nUI core: " + $.isFunction($.fn.uniqueId) + ", UI widget: " + $.isFunction($.widget) + ", UI mouse: " +$.isFunction($.ui.mouse) +
  46 + "\nUI core: " + $.isFunction($.fn.uniqueId) + ", UI widget: " + $.isFunction($.widget) + ", UI mouse: " + $.isFunction($.ui.mouse) +
47 47 ", UI draggable: " + $.isFunction($.ui.draggable) + ", UI resizable: " + $.isFunction($.ui.resizable));
48 48 }
49 49  
50 50 var jsPanel = {
51 51  
52 52 version: '2.6.0 2015-12-04 14:15',
53   - device: (function(){
  53 + device: (function () {
54 54 try {
55 55 var imported = document.createElement('script');
56 56 imported.src = '//vendor/mobile-detect.js';
... ... @@ -63,10 +63,10 @@ var jsPanel = {
63 63 tablet = md.tablet(),
64 64 os = md.os(),
65 65 userAgent = md.userAgent();
66   - return {mobile: mobile, tablet: tablet, phone: phone, os: os, userAgent: userAgent};
  66 + return { mobile: mobile, tablet: tablet, phone: phone, os: os, userAgent: userAgent };
67 67 } catch (e) {
68 68 console.log(e + "; Seems like mobile-detect.js is not loaded");
69   - return {mobile: undefined, tablet: undefined, phone: undefined, os: undefined, userAgent: undefined};
  69 + return { mobile: undefined, tablet: undefined, phone: undefined, os: undefined, userAgent: undefined };
70 70 }
71 71 })(),
72 72 ID: 0, // kind of a counter to add to automatically generated id attribute
... ... @@ -77,8 +77,10 @@ var jsPanel = {
77 77 '<div class="jsPanel-hdr-r">' +
78 78 '<div class="jsPanel-btn-close ng-click= openBodyView"><span class="jsglyph jsglyph-remove"></span></div>' +
79 79 '<div class="jsPanel-btn-max"><span class="jsglyph jsglyph-maximize"></span></div>' +
80   - '<div class="jsPanel-btn-norm"><span class="jsglyph jsglyph-normalize"></span></div>' +
81   - '<div class="jsPanel-btn-min"><span class="jsglyph jsglyph-minimize"></span></div>' +
  80 + '<div class="jsPanel-btn-norm"><span class="jsglyph jsglyph-normalize"></span></div>' +
  81 + '<div class="jsPanel-btn-min"><span class="fa fa-minus"></span></div>' +
  82 +
  83 + //'<div class="jsPanel-btn-min"><span class="jsglyph jsglyph-minimize"></span></div>' +
82 84 //'<div class="jsPanel-btn-small"><span class="jsglyph jsglyph-chevron-up"></span></div>' +
83 85 //'<div class="jsPanel-btn-smallrev"><span class="jsglyph jsglyph-chevron-down"></span></div>' +
84 86 '</div>' +
... ... @@ -93,7 +95,7 @@ var jsPanel = {
93 95 if (place === 'header') {
94 96 this.configToolbar(items, panel.header.toolbar, panel);
95 97 } else if (place === 'footer') {
96   - panel.footer.css({display: 'block'});
  98 + panel.footer.css({ display: 'block' });
97 99 this.configToolbar(items, panel.footer, panel);
98 100 }
99 101 // give toolbar the same font-family as title
... ... @@ -102,7 +104,7 @@ var jsPanel = {
102 104 },
103 105  
104 106 // loads content using jQuery.ajax();
105   - ajax: function(panel) {
  107 + ajax: function (panel) {
106 108 var oAjax = panel.option.ajax,
107 109 pc = panel.content;
108 110 $.ajax(oAjax)
... ... @@ -160,7 +162,7 @@ var jsPanel = {
160 162 // used in option.autoclose and checks prior use of .close() whether the panel is still there
161 163 autoclose: function (panel) {
162 164 window.setTimeout(function () {
163   - if(panel) {
  165 + if (panel) {
164 166 panel.fadeOut('slow', function () {
165 167 panel.close();
166 168 });
... ... @@ -260,11 +262,11 @@ var jsPanel = {
260 262 } else {
261 263 posT = ($(optSelector).outerHeight() / 2) - ((parseInt(optSize.height, 10) / 2));
262 264 }
263   - return {top: posT, left: posL};
  265 + return { top: posT, left: posL };
264 266 },
265 267  
266 268 // calculate position for maximized panels using option.controls.maxtoScreen (for devmondo)
267   - calcPosmaxtoScreen: function(panel) {
  269 + calcPosmaxtoScreen: function (panel) {
268 270 var offset = panel.offset();
269 271 return {
270 272 top: parseInt(panel.css('top')) - (offset.top - $(document).scrollTop()) + 5,
... ... @@ -308,7 +310,7 @@ var jsPanel = {
308 310 },
309 311  
310 312 // calculate final tooltip position
311   - calcToooltipPosition: function(jsPparent, option) {
  313 + calcToooltipPosition: function (jsPparent, option) {
312 314 return {
313 315 top: this.calcPosTooltipTop(jsPparent, option),
314 316 left: this.calcPosTooltipLeft(jsPparent, option)
... ... @@ -321,7 +323,7 @@ var jsPanel = {
321 323  
322 324 // closes a jsPanel and removes it from the DOM
323 325 close: function (panel) {
324   - // alert('jspanel closed')
  326 + // alert('jspanel closed')
325 327 // get parent-element of jsPanel
326 328 var context = panel.parent(),
327 329 panelID = panel.attr('id');
... ... @@ -383,7 +385,7 @@ var jsPanel = {
383 385 },
384 386  
385 387 // configure controls
386   - configControls: function(panel) {
  388 + configControls: function (panel) {
387 389 var controls = ["close", "maximize", "minimize", "normalize", "smallify"];
388 390 if (panel.option.controls.buttons === 'closeonly') {
389 391 $("div:not('.jsPanel-btn-close')", panel.header.controls).remove(); // change in 2.5.3
... ... @@ -393,13 +395,13 @@ var jsPanel = {
393 395 panel.header.title.css("width", "100%");
394 396 }
395 397 // disable controls individually
396   - controls.forEach(function(ctrl){
397   - if (panel.option.controls[ctrl]) {panel.control('disable', ctrl);}
  398 + controls.forEach(function (ctrl) {
  399 + if (panel.option.controls[ctrl]) { panel.control('disable', ctrl); }
398 400 });
399 401 },
400 402  
401 403 // configure iconfonts
402   - configIconfont: function(panel) {
  404 + configIconfont: function (panel) {
403 405 var controlsArray = ["close", "max", "norm", "min", "small", "smallrev"],
404 406 bootstrapArray = ["remove", "fullscreen", "resize-full", "minus", "chevron-up", "chevron-down"],
405 407 fontawesomeArray = ["times", "arrows-alt", "expand", "minus", "chevron-up", "chevron-down"],
... ... @@ -409,11 +411,11 @@ var jsPanel = {
409 411 $('*', controls).css('background-image', 'none');
410 412 // set icons
411 413 if (optIconfont === 'bootstrap') {
412   - controlsArray.forEach(function(item, i){
  414 + controlsArray.forEach(function (item, i) {
413 415 $('.jsPanel-btn-' + item, controls).empty().append('<span class="glyphicon glyphicon-' + bootstrapArray[i] + '"></span>');
414 416 });
415 417 } else if (optIconfont === 'font-awesome') {
416   - controlsArray.forEach(function(item, i){
  418 + controlsArray.forEach(function (item, i) {
417 419 $('.jsPanel-btn-' + item, controls).empty().append('<span class="fa fa-' + fontawesomeArray[i] + '"></span>');
418 420 });
419 421 }
... ... @@ -422,8 +424,8 @@ var jsPanel = {
422 424 // builds toolbar
423 425 configToolbar: function (toolbaritems, toolbarplace, panel) {
424 426 var el;
425   - toolbaritems.forEach(function(item){
426   - if(typeof item === "object") {
  427 + toolbaritems.forEach(function (item) {
  428 + if (typeof item === "object") {
427 429 el = $(item.item);
428 430 // add text to button
429 431 if (typeof item.btntext === 'string') {
... ... @@ -461,7 +463,7 @@ var jsPanel = {
461 463 controlbtn = $('.jsPanel-btn-small', controls);
462 464 }
463 465 // unbind handler and set styles
464   - controlbtn.off().css({opacity:0.5, cursor: 'default'});
  466 + controlbtn.off().css({ opacity: 0.5, cursor: 'default' });
465 467 } else if (arguments[1] === 'enable') {
466 468 if (btn === 'close') {
467 469 controlbtn = $('.jsPanel-btn-close', controls);
... ... @@ -478,7 +480,7 @@ var jsPanel = {
478 480 controlbtn.on('click', function (e) {
479 481 e.preventDefault();
480 482 panel[btn]();
481   - }).css({opacity: 1, cursor: 'pointer'});
  483 + }).css({ opacity: 1, cursor: 'pointer' });
482 484 }
483 485 }
484 486 return panel;
... ... @@ -500,11 +502,11 @@ var jsPanel = {
500 502 },
501 503  
502 504 // export a panel layout to localStorage and returns array with an object for each panel
503   - exportPanels: function() {
  505 + exportPanels: function () {
504 506 var elmtOffset, elmtPosition, elmtTop, elmtLeft, elmtWidth, elmtHeight, elmtStatus, panelParent,
505 507 panelArr = [], exportedPanel,
506 508 panels = $(".jsPanel").not(".jsPanel-tt, .jsPanel-hint, .jsPanel-modal");
507   - panels.each(function(index, elmt){
  509 + panels.each(function (index, elmt) {
508 510 exportedPanel = {
509 511 panelstatus: $(elmt).data("panelstatus"),
510 512 id: $(elmt).prop("id"),
... ... @@ -590,16 +592,16 @@ var jsPanel = {
590 592 },
591 593  
592 594 // imports panel layout from localStorage.jspanels and restores panels
593   - importPanels: function(predefinedConfigs) {
  595 + importPanels: function (predefinedConfigs) {
594 596 /* panelConfig needs to be an object with predefined configs.
595 597 * A config named "default" will be applied to ALL panels
596 598 *
597 599 * panelConfig = { default: { } [, config1 [, config2 [, configN ]]] };
598 600 */
599   - var savedPanels,restoredConfig, defaultConfig;
  601 + var savedPanels, restoredConfig, defaultConfig;
600 602 savedPanels = JSON.parse(localStorage.jspanels) || {};
601 603 defaultConfig = predefinedConfigs["default"] || {};
602   - savedPanels.forEach(function(savedconfig){
  604 + savedPanels.forEach(function (savedconfig) {
603 605 // safedconfig represents one item in safedPanels
604 606 if (typeof savedconfig.custom.config === "string") {
605 607 restoredConfig = $.extend(true, {}, defaultConfig, predefinedConfigs[savedconfig.custom.config], savedconfig);
... ... @@ -621,14 +623,14 @@ var jsPanel = {
621 623 },
622 624  
623 625 // calculate panel margins
624   - getMargins: function(panel) {
  626 + getMargins: function (panel) {
625 627 var off, elmtOff, mR, mL, mB, mT,
626 628 selector = panel.option.paneltype.shiftwithin,
627 629 winWidth = $(window).outerWidth(),
628 630 winHeight = $(window).outerHeight(),
629 631 panelWidth = panel.outerWidth(),
630 632 panelHeight = panel.outerHeight();
631   - if(!selector || selector === "body") {
  633 + if (!selector || selector === "body") {
632 634 // panel margins relative to browser viewport
633 635 off = panel.offset();
634 636 mR = winWidth - off.left - panelWidth + $(window).scrollLeft();
... ... @@ -644,7 +646,7 @@ var jsPanel = {
644 646 mB = $(selector).outerHeight() - (off.top - elmtOff.top) - parseInt(panel.css('height'));
645 647 mT = off.top - elmtOff.top;
646 648 }
647   - return {marginTop: parseInt(mT), marginRight: parseInt(mR), marginBottom: parseInt(mB), marginLeft: parseInt(mL)};
  649 + return { marginTop: parseInt(mT), marginRight: parseInt(mR), marginBottom: parseInt(mB), marginLeft: parseInt(mL) };
648 650 },
649 651  
650 652 // return max value of an array with numbers
... ... @@ -653,14 +655,14 @@ var jsPanel = {
653 655 },
654 656  
655 657 // calculate max horizontal and vertical tooltip shift
656   - getMaxpanelshift: function(panel) {
  658 + getMaxpanelshift: function (panel) {
657 659 var panelWidth = panel.outerWidth(),
658 660 panelHeight = panel.outerHeight(),
659   - horiz = parseInt( panelWidth/2 ) + parseInt( panel.parent().outerWidth()/2 ) - 20,
660   - vert = parseInt( panelHeight/2 ) + parseInt( panel.parent().outerHeight()/2 ) - 20,
661   - cornerHoriz = parseInt( panelWidth/2 ) - 16,
662   - cornerVert = parseInt( panelHeight/2 ) - 16;
663   - return {maxshiftH: horiz, maxshiftV: vert, maxCornerH: cornerHoriz, maxCornerV: cornerVert};
  661 + horiz = parseInt(panelWidth / 2) + parseInt(panel.parent().outerWidth() / 2) - 20,
  662 + vert = parseInt(panelHeight / 2) + parseInt(panel.parent().outerHeight() / 2) - 20,
  663 + cornerHoriz = parseInt(panelWidth / 2) - 16,
  664 + cornerVert = parseInt(panelHeight / 2) - 16;
  665 + return { maxshiftH: horiz, maxshiftV: vert, maxCornerH: cornerHoriz, maxCornerV: cornerVert };
664 666 },
665 667  
666 668 // hide controls specified by param "sel" of the jsPanel "panel"
... ... @@ -673,21 +675,21 @@ var jsPanel = {
673 675 // calculates option.position for hints using 'top left', 'top center' or 'top right'
674 676 hintTop: function (hintGroup) {
675 677 var hintH = 0;
676   - $("." + hintGroup).each(function(){
  678 + $("." + hintGroup).each(function () {
677 679 hintH += $(this).outerHeight(true);
678 680 });
679 681 if (hintGroup === "jsPanel-hint-tr") {
680   - return {top: hintH, right: 0};
  682 + return { top: hintH, right: 0 };
681 683 } else if (hintGroup === "jsPanel-hint-tl") {
682   - return {top: hintH, left: 0};
  684 + return { top: hintH, left: 0 };
683 685 } else if (hintGroup === "jsPanel-hint-tc") {
684   - return {top: hintH, left: 'center'};
  686 + return { top: hintH, left: 'center' };
685 687 }
686   - return {top: 0, left: 0};
  688 + return { top: 0, left: 0 };
687 689 },
688 690  
689 691 // loads content in an iFrame
690   - iframe: function(panel) {
  692 + iframe: function (panel) {
691 693 var iFrame = $("<iframe></iframe>");
692 694 // iframe content
693 695 if (panel.option.iframe.srcdoc) {
... ... @@ -753,7 +755,7 @@ var jsPanel = {
753 755 },
754 756  
755 757 // check whether a bootstrap compatible theme is used
756   - isBootstrapTheme: function(optionBootstrap) {
  758 + isBootstrapTheme: function (optionBootstrap) {
757 759 if ($.inArray(optionBootstrap, ["default", "primary", "info", "success", "warning", "danger"]) > -1) {
758 760 return optionBootstrap;
759 761 }
... ... @@ -761,7 +763,8 @@ var jsPanel = {
761 763 },
762 764  
763 765 // loads content using jQuery.load()
764   - load: function(panel) {
  766 + load: function (panel) {
  767 + // alert('pppp')
765 768 panel.content.load(panel.option.load.url, panel.option.load.data || undefined, function (responseText, textStatus, jqXHR) {
766 769 if ($.isFunction(panel.option.load.complete)) {
767 770 panel.option.load.complete.call(panel.content, responseText, textStatus, jqXHR, panel);
... ... @@ -776,6 +779,9 @@ var jsPanel = {
776 779 });
777 780 });
778 781 panel.data("loadURL", panel.option.load.url); // needed for exportPanels()
  782 +
  783 +
  784 +
779 785 },
780 786  
781 787 // maximizes a panel within the body element
... ... @@ -797,7 +803,7 @@ var jsPanel = {
797 803 //nikita
798 804 //newTop = $(window).scrollTop() + parseInt(panel.option.maximizedMargin.top);
799 805 //newLeft = $(window).scrollLeft() + parseInt(panel.option.maximizedMargin.left);
800   - newTop =70;
  806 + newTop = 70;
801 807 newLeft = 0;
802 808 //nikita
803 809 newRight = 15;
... ... @@ -814,14 +820,14 @@ var jsPanel = {
814 820 });
815 821 //nikita
816 822 if (panel.outerHeight() >= 435 && panel.outerWidth() >= 650) {
817   - // alert('if')
818   - $('#canvasDiv').css('height', panel.outerHeight() - 80)
  823 + // alert('if')
  824 + $('#canvasDiv').css('height', panel.outerHeight() - 75)
819 825 $('#canvasDiv').css('width', panel.outerWidth() - 100)
820 826 $('#canvasDiv').css('overflow', 'scroll')
821 827 }
822 828 else {
823 829 // alert('else')
824   - $('#canvasDiv').css('height', panel.outerHeight() - 115)
  830 + $('#canvasDiv').css('height', panel.outerHeight() - 110)
825 831 $('#canvasDiv').css('width', panel.outerWidth() - 90)
826 832 $('#canvasDiv').css('overflow', 'scroll')
827 833 }
... ... @@ -835,22 +841,39 @@ var jsPanel = {
835 841  
836 842 // maximizes a panel within an element other than body
837 843 maxWithinElement: function (panel) {
  844 + // debugger;
838 845 if ((panel.status !== "maximized" || panel.option.panelstatus !== "maximized") && panel.option.paneltype.mode !== 'default') {
839 846 // restore minimized panel to initial container if necessary
840 847 if (panel.status === "minimized" || panel.option.panelstatus === "minimized") {
841 848 this.restoreFromMinimized(panel);
842 849 }
843 850 panel.css({
844   - top: parseInt(panel.option.maximizedMargin.top),
  851 + top: parseInt(70),//panel.option.maximizedMargin.top),
845 852 left: parseInt(panel.option.maximizedMargin.left),
846 853 width: parseInt(panel.parent().outerWidth(), 10) - parseInt(panel.option.maximizedMargin.left) - parseInt(panel.option.maximizedMargin.right),
847   - height: parseInt(panel.parent().outerHeight(), 10) - parseInt(panel.option.maximizedMargin.top) - parseInt(panel.option.maximizedMargin.bottom)
  854 + height: parseInt(panel.parent().outerHeight()) - parseInt(panel.option.maximizedMargin.top) - parseInt(panel.option.maximizedMargin.bottom) - 65
848 855 });
849 856 }
  857 +
  858 + //nikita
  859 + if (panel.outerHeight() >= 435 && panel.outerWidth() >= 650) {
  860 + //alert('if')
  861 + $('#canvasDiv').css('height', panel.outerHeight() - 85)
  862 + $('#canvasDiv').css('width', panel.outerWidth() - 100)
  863 + $('#canvasDiv').css('overflow', 'scroll')
  864 + }
  865 + else {
  866 + // alert('else')
  867 + $('#canvasDiv').css('height', panel.outerHeight() - 105)
  868 + $('#canvasDiv').css('width', panel.outerWidth() - 90)
  869 + $('#canvasDiv').css('overflow', 'scroll')
  870 + }
  871 + //nikita
850 872 },
851 873  
852 874 // calls functions to maximize a jsPanel
853 875 maximize: function (panel) {
  876 + // debugger;
854 877 panel.trigger('jspanelbeforemaximize', panel.attr('id'));
855 878 if ($.isFunction(panel.option.onbeforemaximize)) {
856 879 var maximize = panel.option.onbeforemaximize.call(panel, panel);
... ... @@ -929,8 +952,8 @@ var jsPanel = {
929 952 opacity: 1
930 953 })
931 954 .appendTo('#jsPanel-min-container')
932   - .resizable({disabled: true})
933   - .draggable({disabled: true});
  955 + .resizable({ disabled: true })
  956 + .draggable({ disabled: true });
934 957 panel.trigger('jspanelminimized', panel.attr('id'));
935 958 panel.trigger('jspanelstatechange', panel.attr('id'));
936 959 }
... ... @@ -938,7 +961,7 @@ var jsPanel = {
938 961  
939 962 // restores a panel to its "normalized" (not minimized, maximized or smallified) position & size
940 963 normalize: function (panel) {
941   - // debugger;
  964 + // debugger;
942 965 var panelTop,
943 966 interactions = ["resizable", "draggable"];
944 967 panel.trigger('jspanelbeforenormalize', panel.attr('id'));
... ... @@ -962,16 +985,16 @@ var jsPanel = {
962 985 }
963 986 panel.css({
964 987 width: panel.option.size.width,
965   - height: panel.option.size.height+10,
  988 + height: panel.option.size.height + 10,
966 989 top: panelTop,
967 990 left: panel.option.position.left
968 991 });
969   - interactions.forEach(function(action){
  992 + interactions.forEach(function (action) {
970 993 if (panel.option[action] !== "disabled") {
971 994 panel[action]("enable");
972 995 // get resizer and cursor for resizable back
973   - $('.ui-icon-gripsmall-diagonal-se', panel).css({'background-image': 'none', 'text-indent': 0});
974   - $('.ui-resizable-handle', panel).css({'cursor': ''});
  996 + $('.ui-icon-gripsmall-diagonal-se', panel).css({ 'background-image': 'none', 'text-indent': 0 });
  997 + $('.ui-resizable-handle', panel).css({ 'cursor': '' });
975 998 }
976 999 });
977 1000 panel.trigger('jspanelnormalized', panel.attr('id'));
... ... @@ -1012,7 +1035,7 @@ var jsPanel = {
1012 1035 } else {
1013 1036 hintH = 0;
1014 1037 }
1015   - $("." + hintGroup).each(function(){
  1038 + $("." + hintGroup).each(function () {
1016 1039 $(this).animate({
1017 1040 top: hintH
1018 1041 });
... ... @@ -1021,7 +1044,7 @@ var jsPanel = {
1021 1044 },
1022 1045  
1023 1046 // reposition hints on window scroll
1024   - reposHintsScroll: function(panel) {
  1047 + reposHintsScroll: function (panel) {
1025 1048 var dif = panel.offset().top - $(window).scrollTop();
1026 1049 // with window.onscroll only the last added hint would stay in position
1027 1050 $(window).scroll(function () {
... ... @@ -1031,7 +1054,7 @@ var jsPanel = {
1031 1054  
1032 1055 // repositions a panel and optionally moves it to another container
1033 1056 reposition: function (panel, position, selector) {
1034   - alert('reposition')
  1057 + //alert('reposition')
1035 1058 if (selector && typeof selector === "string") {
1036 1059 panel.option.selector = selector;
1037 1060 panel.appendTo(selector);
... ... @@ -1042,7 +1065,7 @@ var jsPanel = {
1042 1065 // rewrite passed position to be a proper object
1043 1066 panel.option.position = jsPanel.rewriteOPosition(position);
1044 1067 // delete element styles concerning position, otherwise you might end up with left &right and/or top & bottom values
1045   - panel.css({top: "", right: "", bottom: "", left: ""});
  1068 + panel.css({ top: "", right: "", bottom: "", left: "" });
1046 1069 this.calcPanelposition(panel);
1047 1070 panel.verticalOffset = jsPanel.calcVerticalOffset(panel) || 0;
1048 1071 this.replaceCSSBottomRight(panel);
... ... @@ -1058,7 +1081,7 @@ var jsPanel = {
1058 1081  
1059 1082 // repositions minimized jsPanels
1060 1083 reposMinimized: function () {
1061   - $('.jsPanel', '#jsPanel-min-container').each(function(index, elmt){
  1084 + $('.jsPanel', '#jsPanel-min-container').each(function (index, elmt) {
1062 1085 $(elmt).animate({
1063 1086 left: (index * jsPanel.widthForMinimized)
1064 1087 });
... ... @@ -1067,20 +1090,21 @@ var jsPanel = {
1067 1090  
1068 1091 // resize exsisting jsPanel; resizes the full panel (not content section only)
1069 1092 resize: function (panel, width, height) {
  1093 + // debugger;
1070 1094 if (panel.option.panelstatus !== "minimized") { // v2.4.1 don't call resize() on minimized panels
1071   - if(width && width !== null) {
  1095 + if (width && width !== null) {
1072 1096 panel.css("width", width);
1073 1097 } else {
1074 1098 panel.css("width", panel.content.css("width"));
1075 1099 }
1076   - if(height && height !== null) {
  1100 + if (height && height !== null) {
1077 1101 panel.css("height", height);
1078 1102 }
1079 1103 this.resizeContent(panel);
1080 1104 this.resizeTitle(panel);
1081 1105 }
1082   - $('#canvasDiv').css('height', $(window).outerHeight() - 124)
1083   - $('#leftToolBar').css('height', $(window).outerHeight() - 124)
  1106 + $('#canvasDiv').css('height', $(window).outerHeight() - 120)
  1107 + $('#leftToolBar').css('height', $(window).outerHeight() - 120)
1084 1108 },
1085 1109  
1086 1110 // reset dimensions of content section after resize and so on
... ... @@ -1099,7 +1123,7 @@ var jsPanel = {
1099 1123 },
1100 1124  
1101 1125 // resize the title h3 to use full width minus controls width (and prevent being longer than panel)
1102   - resizeTitle: function(panel) {
  1126 + resizeTitle: function (panel) {
1103 1127 var titleWidth = (panel.outerWidth() - $(panel.header.controls).outerWidth() - 15);
1104 1128 panel.header.title.css('width', titleWidth);
1105 1129 },
... ... @@ -1111,12 +1135,12 @@ var jsPanel = {
1111 1135 if (panel.status === "minimized" || panel.option.panelstatus === "minimized") {
1112 1136 panel.appendTo(panel.option.selector);
1113 1137 }
1114   - interactions.forEach(function(action){
  1138 + interactions.forEach(function (action) {
1115 1139 if (panel.option[action] !== "disabled") {
1116 1140 panel[action]("enable");
1117 1141 // get resizer and cursor for resizable back
1118   - $('.ui-icon-gripsmall-diagonal-se', panel).css({'background-image': 'none', 'text-indent': 0});
1119   - $('.ui-resizable-handle', panel).css({'cursor': ''});
  1142 + $('.ui-icon-gripsmall-diagonal-se', panel).css({ 'background-image': 'none', 'text-indent': 0 });
  1143 + $('.ui-resizable-handle', panel).css({ 'cursor': '' });
1120 1144 }
1121 1145 });
1122 1146 // reposition minimized panels
... ... @@ -1127,13 +1151,13 @@ var jsPanel = {
1127 1151 rewriteOPaneltype: function (optionPaneltype) {
1128 1152 var op = optionPaneltype;
1129 1153 if (op === 'modal') {
1130   - return {type: 'modal', mode: 'default'};
  1154 + return { type: 'modal', mode: 'default' };
1131 1155 } else if (op === 'tooltip') {
1132   - return {type: 'tooltip', position: 'top'};
  1156 + return { type: 'tooltip', position: 'top' };
1133 1157 } else if (op === 'hint') {
1134   - return {type: 'hint'};
  1158 + return { type: 'hint' };
1135 1159 } else if (op.type === 'modal') {
1136   - return {type: 'modal', mode: op.mode || 'default'};
  1160 + return { type: 'modal', mode: op.mode || 'default' };
1137 1161 } else if (op.type === 'tooltip') {
1138 1162 return {
1139 1163 type: 'tooltip',
... ... @@ -1146,7 +1170,7 @@ var jsPanel = {
1146 1170 cornerOY: op.cornerOY || false
1147 1171 };
1148 1172 } else {
1149   - return {paneltype: false};
  1173 + return { paneltype: false };
1150 1174 }
1151 1175 },
1152 1176  
... ... @@ -1154,25 +1178,25 @@ var jsPanel = {
1154 1178 rewriteOPosition: function (optionPosition) {
1155 1179 var op = optionPosition;
1156 1180 if (op === 'center') {
1157   - return {top: 'center', left: 'center'};
  1181 + return { top: 'center', left: 'center' };
1158 1182 } else if (op === 'auto') {
1159   - return {top: 'auto', left: 'auto'};
  1183 + return { top: 'auto', left: 'auto' };
1160 1184 } else if (op === 'top left') {
1161   - return {top: '0', left: '0'};
  1185 + return { top: '0', left: '0' };
1162 1186 } else if (op === 'top center') {
1163   - return {top: '0', left: 'center'};
  1187 + return { top: '0', left: 'center' };
1164 1188 } else if (op === 'top right') {
1165   - return {top: '0', right: '0'};
  1189 + return { top: '0', right: '0' };
1166 1190 } else if (op === 'center right') {
1167   - return {top: 'center', right: '0'};
  1191 + return { top: 'center', right: '0' };
1168 1192 } else if (op === 'bottom right') {
1169   - return {bottom: '0', right: '0'};
  1193 + return { bottom: '0', right: '0' };
1170 1194 } else if (op === 'bottom center') {
1171   - return {bottom: '0', left: 'center'};
  1195 + return { bottom: '0', left: 'center' };
1172 1196 } else if (op === 'bottom left') {
1173   - return {bottom: '0', left: '0'};
  1197 + return { bottom: '0', left: '0' };
1174 1198 } else if (op === 'center left') {
1175   - return {top: 'center', left: '0'};
  1199 + return { top: 'center', left: '0' };
1176 1200 }
1177 1201 // if bottom and/or right is set to "center" change that to top and/or left set to "center"
1178 1202 if (op.bottom === "center") {
... ... @@ -1199,7 +1223,7 @@ var jsPanel = {
1199 1223 },
1200 1224  
1201 1225 // set default options for hints and add necessary classes
1202   - setHintDefaults: function(panel) {
  1226 + setHintDefaults: function (panel) {
1203 1227 panel.option.resizable = false;
1204 1228 panel.option.draggable = false;
1205 1229 panel.option.removeHeader = true;
... ... @@ -1227,8 +1251,8 @@ var jsPanel = {
1227 1251 panel.option.resizable = false;
1228 1252 panel.option.draggable = false;
1229 1253 panel.option.removeHeader = false;
1230   - panel.option.position = {top: 'center', left: 'center'};
1231   - panel.option.offset = {top: 0, left: 0};
  1254 + panel.option.position = { top: 'center', left: 'center' };
  1255 + panel.option.offset = { top: 0, left: 0 };
1232 1256 panel.option.controls.buttons = 'closeonly'; //do not delete else "modal" with no close button possible
1233 1257 $(".jsPanel-btn-min, .jsPanel-btn-norm, .jsPanel-btn-max, .jsPanel-btn-small, .jsPanel-btn-smallrev", panel).remove();
1234 1258 $(panel.header, panel.header.title, panel.footer).css('cursor', 'default');
... ... @@ -1237,9 +1261,9 @@ var jsPanel = {
1237 1261 },
1238 1262  
1239 1263 // set right-to-left text direction and language; set styles and reoorder controls for rtl
1240   - setRTL: function(panel) {
1241   - var elmts = [ panel.header.title, panel.content, panel.header.toolbar, panel.footer ];
1242   - elmts.forEach(function(item){
  1264 + setRTL: function (panel) {
  1265 + var elmts = [panel.header.title, panel.content, panel.header.toolbar, panel.footer];
  1266 + elmts.forEach(function (item) {
1243 1267 item.prop('dir', 'rtl');
1244 1268 if (panel.option.rtl.lang) {
1245 1269 item.prop('lang', panel.option.rtl.lang);
... ... @@ -1250,7 +1274,7 @@ var jsPanel = {
1250 1274 $('.jsPanel-btn-max', panel.header.controls).insertAfter($('.jsPanel-btn-min', panel.header.controls));
1251 1275 $('.jsPanel-btn-small', panel.header.controls).insertBefore($('.jsPanel-btn-min', panel.header.controls));
1252 1276 $('.jsPanel-btn-smallrev', panel.header.controls).insertBefore($('.jsPanel-btn-min', panel.header.controls));
1253   - $('.jsPanel-hdr-r', panel).css({left: '0px', right: '', position: 'relative', 'float': 'left'});
  1277 + $('.jsPanel-hdr-r', panel).css({ left: '0px', right: '', position: 'relative', 'float': 'left' });
1254 1278 $('.jsPanel-hint-close', panel).css('float', 'left');
1255 1279 $('.jsPanel-title', panel).css('float', 'right');
1256 1280 $('.jsPanel-ftr', panel).append('<div style="clear:both;height:0;"></div>');
... ... @@ -1258,7 +1282,7 @@ var jsPanel = {
1258 1282 },
1259 1283  
1260 1284 // set default options for tooltips
1261   - setTooltipDefaults: function(panel) {
  1285 + setTooltipDefaults: function (panel) {
1262 1286 panel.option.position = {};
1263 1287 panel.option.resizable = false;
1264 1288 panel.option.draggable = false;
... ... @@ -1278,7 +1302,7 @@ var jsPanel = {
1278 1302 jspanel = panel;
1279 1303 }
1280 1304 // build array with all z-index values
1281   - $(".jsPanel:not('.jsPanel-modal, .jsPanel-nofront')").each(function(i, elmt){
  1305 + $(".jsPanel:not('.jsPanel-modal, .jsPanel-nofront')").each(function (i, elmt) {
1282 1306 if (jspanel.attr("id") !== $(elmt).attr("id")) {
1283 1307 allZi.push($(elmt).css("z-index"));
1284 1308 }
... ... @@ -1290,7 +1314,7 @@ var jsPanel = {
1290 1314 },
1291 1315  
1292 1316 // shift tooltip left/right if it overflows window; when using horizontal offsets of panel and/or corner result might be not as expected
1293   - shiftTooltipHorizontal: function(panel){
  1317 + shiftTooltipHorizontal: function (panel) {
1294 1318 var margins = this.getMargins(panel),
1295 1319 leftShiftRequired,
1296 1320 maxShift = this.getMaxpanelshift(panel),
... ... @@ -1319,19 +1343,19 @@ var jsPanel = {
1319 1343 // shift panel
1320 1344 panel.animate({
1321 1345 "left": newPanelLeft
1322   - },{ queue: false /* to have both animation run simultaneously */ });
  1346 + }, { queue: false /* to have both animation run simultaneously */ });
1323 1347  
1324 1348 // shift corner if present
1325 1349 if ($('.jsPanel-corner', panel)) {
1326 1350 $('.jsPanel-corner', panel).animate({
1327 1351 "left": newCornerLeft
1328   - },{ queue: false /* to have both animation run simultaneously */ });
  1352 + }, { queue: false /* to have both animation run simultaneously */ });
1329 1353 }
1330 1354 }
1331 1355 },
1332 1356  
1333 1357 // shift tooltip up/down if it overflows window; when using vertical offsets of panel and/or corner result might be not as expected
1334   - shiftTooltipVertical: function(panel){
  1358 + shiftTooltipVertical: function (panel) {
1335 1359 //console.log( parseInt($('*:first-child', panel.parent()).css('margin-left')) );
1336 1360 var margins = this.getMargins(panel),
1337 1361 topShiftRequired,
... ... @@ -1361,18 +1385,18 @@ var jsPanel = {
1361 1385 // shift panel
1362 1386 panel.animate({
1363 1387 "top": newPanelTop
1364   - },{ queue: false /* to have both animation run simultaneously */ });
  1388 + }, { queue: false /* to have both animation run simultaneously */ });
1365 1389  
1366 1390 // shift corner if present
1367 1391 if ($('.jsPanel-corner', panel)) {
1368 1392 $('.jsPanel-corner', panel).animate({
1369 1393 "top": newCornerTop
1370   - },{ queue: false /* to have both animation run simultaneously */ });
  1394 + }, { queue: false /* to have both animation run simultaneously */ });
1371 1395 }
1372 1396 }
1373 1397 },
1374 1398  
1375   - smallify: function(panel) {
  1399 + smallify: function (panel) {
1376 1400 var statusNew;
1377 1401 if ((panel.status !== "smallified" || panel.option.panelstatus !== "smallified") && (panel.status !== "smallifiedMax" || panel.option.panelstatus !== "smallifiedMax")) {
1378 1402 if (panel.status === "maximized" || panel.option.panelstatus === "maximized") {
... ... @@ -1386,8 +1410,8 @@ var jsPanel = {
1386 1410 panel.panelfooterheight = panel.footer.outerHeight();
1387 1411 panel.panelcontentheight = panel.content.outerHeight();
1388 1412 panel.animate({
1389   - height: panel.panelheaderheight
1390   - },
  1413 + height: panel.panelheaderheight
  1414 + },
1391 1415 {
1392 1416 done: function () {
1393 1417 if (panel.status === 'maximized' || panel.option.panelstatus === 'maximized') {
... ... @@ -1403,10 +1427,10 @@ var jsPanel = {
1403 1427 }
1404 1428 },
1405 1429  
1406   - unsmallify: function(panel) {
  1430 + unsmallify: function (panel) {
1407 1431 panel.animate({
1408   - height: panel.smallify.height
1409   - },
  1432 + height: panel.smallify.height
  1433 + },
1410 1434 {
1411 1435 done: function () {
1412 1436 if (panel.status === 'smallified' || panel.option.panelstatus === 'smallified') {
... ... @@ -1426,7 +1450,7 @@ var jsPanel = {
1426 1450 },
1427 1451  
1428 1452 // updates option.position to hold actual values
1429   - updateOptionPosition: function(panel) {
  1453 + updateOptionPosition: function (panel) {
1430 1454 panel.option.position.top = panel.css('top');
1431 1455 panel.option.position.left = panel.css('left');
1432 1456 },
... ... @@ -1437,13 +1461,13 @@ var jsPanel = {
1437 1461 panel.option.size.height = $(".jsPanel-content", panel).css("height");
1438 1462 },
1439 1463  
1440   - updateCustomData: function(panel, key, val) {
  1464 + updateCustomData: function (panel, key, val) {
1441 1465 var custom = panel.data("custom");
1442 1466 custom[key] = val;
1443 1467 panel.data("custom", custom);
1444 1468 },
1445 1469  
1446   - updateStateProps: function(panel, status) {
  1470 + updateStateProps: function (panel, status) {
1447 1471 panel.status = status;
1448 1472 panel.option.panelstatus = status;
1449 1473 panel.data("panelstatus", status);
... ... @@ -1458,12 +1482,13 @@ var jsPanel = {
1458 1482  
1459 1483 console.log("jsPanel version: " + jsPanel.version);
1460 1484  
1461   -(function($){
  1485 +(function ($) {
1462 1486 $.jsPanel = function (config) {
1463 1487  
  1488 +
1464 1489 var jsP, template, id,
1465   - panelconfig = config || {},
1466   - optConfig = panelconfig.config || {};
  1490 + panelconfig = config || {},
  1491 + optConfig = panelconfig.config || {};
1467 1492  
1468 1493 // use custom jsPanel template if present else standard template
1469 1494 template = panelconfig.template || jsPanel.template;
... ... @@ -1518,13 +1543,13 @@ console.log(&quot;jsPanel version: &quot; + jsPanel.version);
1518 1543  
1519 1544 jsP.footer = $('.jsPanel-ftr', jsP);
1520 1545  
1521   - jsP.normalize = function() {
  1546 + jsP.normalize = function () {
1522 1547 jsPanel.normalize(jsP);
1523 1548 return jsP;
1524 1549 };
1525 1550  
1526 1551 jsP.close = function () {
1527   - // alert('1')
  1552 + // alert('1')
1528 1553 jsPanel.close(jsP);
1529 1554 // no need to return something
1530 1555 };
... ... @@ -1578,7 +1603,7 @@ console.log(&quot;jsPanel version: &quot; + jsPanel.version);
1578 1603 };
1579 1604  
1580 1605 jsP.resize = function (width, height) {
1581   - // alert('jsP.resize')
  1606 + // alert('jsP.resize')
1582 1607 // method resizes the full panel (not content section only)
1583 1608 jsPanel.resize(jsP, width, height);
1584 1609 return jsP;
... ... @@ -1589,7 +1614,7 @@ console.log(&quot;jsPanel version: &quot; + jsPanel.version);
1589 1614 return jsP;
1590 1615 };
1591 1616  
1592   - jsP.reloadContent = function() {
  1617 + jsP.reloadContent = function () {
1593 1618 if (jsP.option.content) {
1594 1619 jsP.content.empty().append(jsP.option.content);
1595 1620 } else if (jsP.option.load) {
... ... @@ -1604,7 +1629,7 @@ console.log(&quot;jsPanel version: &quot; + jsPanel.version);
1604 1629  
1605 1630 // handler to move panel to foreground on click
1606 1631 jsP.on('click', function (e) {
1607   - alert('1')
  1632 + //alert('1')
1608 1633 // use of e.preventDefault(); would prevent events from inside a panel from firing properly
1609 1634 if (!$(e.target).is("a[href], button, .jsPanel-nofront, .jsPanel-nofront *")) {
1610 1635 if (!jsP.hasClass("jsPanel-modal")) {
... ... @@ -1615,7 +1640,7 @@ console.log(&quot;jsPanel version: &quot; + jsPanel.version);
1615 1640  
1616 1641 // jsPanel close
1617 1642 $('.jsPanel-btn-close', jsP).on('click', function (e) {
1618   - // alert('2')
  1643 + // alert('2')
1619 1644 //e.preventDefault();
1620 1645 //if (!jsP.option.controls.confirmClose) {
1621 1646 // jsPanel.close(jsP, jsP.parentElmtTagname);
... ... @@ -1630,24 +1655,30 @@ console.log(&quot;jsPanel version: &quot; + jsPanel.version);
1630 1655 });
1631 1656  
1632 1657  
1633   -
  1658 +
1634 1659  
1635 1660 // jsPanel minimize
1636 1661 $('.jsPanel-btn-min', jsP).on('click', function (e) {
1637   - // alert('minimized')
  1662 + // alert('minimized')
1638 1663  
1639 1664 e.preventDefault();
1640 1665 jsPanel.minimize(jsP);
1641   - debugger;
  1666 + // debugger;
1642 1667 var headerTitle = $('.jsPanel-title');
1643 1668 var title = headerTitle[0].innerHTML;
1644 1669 var $scope = jsPanel.getScope('DAController');
1645 1670 $scope.setState('min', title);
  1671 +
  1672 + var canvasDiv = document.getElementById('canvasDiv');
  1673 + $scope.imageVerticalScrollPosition = canvasDiv.scrollTop;
  1674 + $scope.imageHorizontlScrollPosition = canvasDiv.scrollLeft;
  1675 +
1646 1676 $scope.$apply();
1647 1677 });
1648 1678  
1649 1679 // jsPanel maximize
1650 1680 $('.jsPanel-btn-max', jsP).on('click', function (e) {
  1681 + // debugger;
1651 1682 e.preventDefault();
1652 1683 jsPanel.maximize(jsP);
1653 1684  
... ... @@ -1660,8 +1691,17 @@ console.log(&quot;jsPanel version: &quot; + jsPanel.version);
1660 1691  
1661 1692 // jsPanel normalize
1662 1693 $('.jsPanel-btn-norm', jsP).on('click', function (e) {
  1694 + // debugger;
1663 1695 e.preventDefault();
1664 1696 jsPanel.normalize(jsP);
  1697 +
  1698 + var $scope = jsPanel.getScope('DAController');
  1699 +
  1700 +
  1701 + $('#canvasDiv').scrollLeft($scope.imageHorizontlScrollPosition)
  1702 + $('#canvasDiv').scrollTop($scope.imageVerticalScrollPosition)
  1703 +
  1704 + $scope.$apply();
1665 1705 });
1666 1706  
1667 1707 // jsPanel smallify
... ... @@ -1746,17 +1786,17 @@ console.log(&quot;jsPanel version: &quot; + jsPanel.version);
1746 1786 corner.addClass("jsPanel-corner " + cornerLoc).prependTo(jsP);
1747 1787 }
1748 1788 if (jsP.option.paneltype.position === "top") {
1749   - cornerPos = parseInt(jsP.option.size.width)/2 - 12 + (cornerOX) + "px";
1750   - corner.css({borderTopColor: cornerBG, left: cornerPos});
  1789 + cornerPos = parseInt(jsP.option.size.width) / 2 - 12 + (cornerOX) + "px";
  1790 + corner.css({ borderTopColor: cornerBG, left: cornerPos });
1751 1791 } else if (jsP.option.paneltype.position === "right") {
1752   - cornerPos = parseInt(jsP.option.size.height)/2 - 12 + (cornerOY) + "px";
1753   - corner.css({borderRightColor: cornerBG, left: "-22px", top: cornerPos});
  1792 + cornerPos = parseInt(jsP.option.size.height) / 2 - 12 + (cornerOY) + "px";
  1793 + corner.css({ borderRightColor: cornerBG, left: "-22px", top: cornerPos });
1754 1794 } else if (jsP.option.paneltype.position === "bottom") {
1755   - cornerPos = parseInt(jsP.option.size.width)/2 - 12 + (cornerOX) + "px";
1756   - corner.css({borderBottomColor: cornerBG, left: cornerPos, top: "-22px"});
  1795 + cornerPos = parseInt(jsP.option.size.width) / 2 - 12 + (cornerOX) + "px";
  1796 + corner.css({ borderBottomColor: cornerBG, left: cornerPos, top: "-22px" });
1757 1797 } else if (jsP.option.paneltype.position === "left") {
1758   - cornerPos = parseInt(jsP.option.size.height)/2 - 12 + (cornerOY) + "px";
1759   - corner.css({borderLeftColor: cornerBG, left: jsP.option.size.width, top: cornerPos});
  1798 + cornerPos = parseInt(jsP.option.size.height) / 2 - 12 + (cornerOY) + "px";
  1799 + corner.css({ borderLeftColor: cornerBG, left: jsP.option.size.width, top: cornerPos });
1760 1800 }
1761 1801 }
1762 1802 } else if (jsP.option.paneltype.type === 'hint') {
... ... @@ -1820,7 +1860,7 @@ console.log(&quot;jsPanel version: &quot; + jsPanel.version);
1820 1860 } else {
1821 1861 // activate normal non bootstrap themes
1822 1862 var components = [jsP, jsP.header, jsP.content, jsP.footer];
1823   - components.forEach(function(elmt){
  1863 + components.forEach(function (elmt) {
1824 1864 $(elmt).alterClass('jsPanel-theme-*', 'jsPanel-theme-' + jsP.option.theme);
1825 1865 });
1826 1866 }
... ... @@ -1907,8 +1947,8 @@ console.log(&quot;jsPanel version: &quot; + jsPanel.version);
1907 1947 } else if (jsP.option.resizable === 'disabled') {
1908 1948 // jquery ui resizable initialize disabled to allow to query status
1909 1949 jsP.resizable({ disabled: true });
1910   - $('.ui-icon-gripsmall-diagonal-se', jsP).css({'background-image': 'none', 'text-indent': -9999});
1911   - $('.ui-resizable-handle', jsP).css({'cursor': 'inherit'});
  1950 + $('.ui-icon-gripsmall-diagonal-se', jsP).css({ 'background-image': 'none', 'text-indent': -9999 });
  1951 + $('.ui-resizable-handle', jsP).css({ 'cursor': 'inherit' });
1912 1952 }
1913 1953  
1914 1954 /* option.content ------------------------------------------------------------------------------------------- */
... ... @@ -1935,7 +1975,7 @@ console.log(&quot;jsPanel version: &quot; + jsPanel.version);
1935 1975 });
1936 1976  
1937 1977 // Important! limit title width; final adjustment follows later; otherwise title might be longer than panel width
1938   - jsP.header.title.css('width', jsP.content.width()-90);
  1978 + jsP.header.title.css('width', jsP.content.width() - 90);
1939 1979  
1940 1980 /* option.iframe -------------------------------------------------------------------------------------------- */
1941 1981 // implemented after option.size because option.size.width/height are either "auto" or pixel values already
... ... @@ -2018,7 +2058,7 @@ console.log(&quot;jsPanel version: &quot; + jsPanel.version);
2018 2058 opacity: 1
2019 2059 });
2020 2060 $(jsP).addClass(jsP.option.show);
2021   - $(jsP) .trigger('jspanelloaded', jsP.attr('id'));
  2061 + $(jsP).trigger('jspanelloaded', jsP.attr('id'));
2022 2062 $(jsP).trigger('jspanelstatechange', jsP.attr('id'));
2023 2063 jsP.option.size = {
2024 2064 width: jsP.outerWidth(),
... ... @@ -2055,13 +2095,14 @@ console.log(&quot;jsPanel version: &quot; + jsPanel.version);
2055 2095 });
2056 2096  
2057 2097 $(jsP).on("resize", function () {
  2098 + // debugger;
2058 2099 // jquery ui resize event is also fired when panel is maximized or normalized (on request of Gareth Bult)
2059 2100 jsPanel.resizeContent(jsP);
2060 2101 jsPanel.resizeTitle(jsP);
2061 2102 });
2062 2103  
2063 2104 $(jsP).on("resizestop", function () {
2064   -
  2105 +
2065 2106 //alert('resized')
2066 2107 jsP.option.size = {
2067 2108 width: jsP.outerWidth(),
... ... @@ -2069,18 +2110,18 @@ console.log(&quot;jsPanel version: &quot; + jsPanel.version);
2069 2110 };
2070 2111 //nikita
2071 2112 if (jsP.outerHeight() >= 435 && jsP.outerWidth() >= 650) {
2072   - // alert('resizestop')
2073   - $('#canvasDiv').css('height', jsP.outerHeight()-90)
2074   - $('#canvasDiv').css('width', jsP.outerWidth() - 100)
2075   - $('#canvasDiv').css('overflow', 'scroll')
  2113 + // alert('resizestop')
  2114 + $('#canvasDiv').css('height', jsP.outerHeight() - 85)
  2115 + $('#canvasDiv').css('width', jsP.outerWidth() - 95)
  2116 + $('#canvasDiv').css('overflow', 'scroll')
2076 2117 }
2077 2118 else {
2078   - $('#canvasDiv').css('height', jsP.outerHeight() - 115)
2079   - $('#canvasDiv').css('width', jsP.outerWidth() - 90)
  2119 + $('#canvasDiv').css('height', jsP.outerHeight() - 110)
  2120 + $('#canvasDiv').css('width', jsP.outerWidth() - 85)
2080 2121 $('#canvasDiv').css('overflow', 'scroll')
2081 2122 }
2082 2123 //nikita
2083   - // $('#leftToolBar').css('height', jsP.outerWidth())
  2124 + // $('#leftToolBar').css('height', jsP.outerWidth())
2084 2125  
2085 2126 jsPanel.updateStateProps(jsP, "normalized");
2086 2127 $(jsP).trigger('jspanelnormalized', jsP.attr('id'));
... ... @@ -2092,7 +2133,7 @@ console.log(&quot;jsPanel version: &quot; + jsPanel.version);
2092 2133  
2093 2134 $(jsP).on("dragstart", function () {
2094 2135 // alert("dragstart")
2095   - // debugger;
  2136 + // debugger;
2096 2137 // remove window.scroll handler, is added again on dragstop
2097 2138 $(window).off('scroll', jsP.jsPanelfixPos);
2098 2139 if (jsP.option.paneltype.mode === 'extended') {
... ... @@ -2101,8 +2142,8 @@ console.log(&quot;jsPanel version: &quot; + jsPanel.version);
2101 2142 });
2102 2143  
2103 2144 $(jsP).on("dragstop", function () {
2104   - // alert("dragstop")
2105   - // debugger;
  2145 + // alert("dragstop")
  2146 + // debugger;
2106 2147 jsP.option.position = {
2107 2148 top: jsP.css('top'),
2108 2149 left: jsP.css('left')
... ... @@ -2113,13 +2154,14 @@ console.log(&quot;jsPanel version: &quot; + jsPanel.version);
2113 2154 }
2114 2155 });
2115 2156  
2116   - $(jsP).on( "jspanelminimized", function(){
  2157 + $(jsP).on("jspanelminimized", function () {
2117 2158 jsPanel.hideControls(".jsPanel-btn-min, .jsPanel-btn-small, .jsPanel-btn-smallrev, .jsPanel-btn-hide", jsP);
2118 2159 jsPanel.updateStateProps(jsP, "minimized");
2119 2160 $(window).off('scroll', jsP.jsPanelfixPos);
2120 2161 });
2121 2162  
2122   - $(jsP).on( "jspanelmaximized", function(){
  2163 + $(jsP).on("jspanelmaximized", function () {
  2164 + // debugger;
2123 2165 jsPanel.resizeContent(jsP);
2124 2166 jsPanel.resizeTitle(jsP);
2125 2167 jsPanel.hideControls(".jsPanel-btn-max, .jsPanel-btn-smallrev", jsP);
... ... @@ -2128,7 +2170,7 @@ console.log(&quot;jsPanel version: &quot; + jsPanel.version);
2128 2170 jsP.trigger("resize");
2129 2171 });
2130 2172  
2131   - $(jsP).on( "jspanelnormalized", function(){
  2173 + $(jsP).on("jspanelnormalized", function () {
2132 2174 jsPanel.hideControls(".jsPanel-btn-norm, .jsPanel-btn-smallrev", jsP);
2133 2175 jsPanel.resizeTitle(jsP);
2134 2176 jsPanel.resizeContent(jsP);
... ... @@ -2176,13 +2218,14 @@ console.log(&quot;jsPanel version: &quot; + jsPanel.version);
2176 2218 if ($.isFunction(jsP.option.callback)) {
2177 2219 jsP.option.callback.call(jsP, jsP);
2178 2220 } else if ($.isArray(jsP.option.callback)) {
2179   - jsP.option.callback.forEach(function(item){
  2221 + jsP.option.callback.forEach(function (item) {
2180 2222 if ($.isFunction(item)) {
2181 2223 item.call(jsP, jsP);
2182 2224 }
2183 2225 });
2184 2226 }
2185 2227  
  2228 +
2186 2229 return jsP;
2187 2230 };
2188 2231  
... ... @@ -2265,8 +2308,11 @@ console.log(&quot;jsPanel version: &quot; + jsPanel.version);
2265 2308 "title": 'jsPanel',
2266 2309 "toolbarFooter": false,
2267 2310 "toolbarHeader": false
  2311 +
  2312 +
2268 2313 };
2269 2314  
  2315 +
2270 2316 /*
2271 2317 * jQuery alterClass plugin
2272 2318 * Remove element classes with wildcard matching. Optionally add classes:
... ... @@ -2275,6 +2321,7 @@ console.log(&quot;jsPanel version: &quot; + jsPanel.version);
2275 2321 * Free under terms of the MIT license: http://www.opensource.org/licenses/mit-license.php
2276 2322 */
2277 2323 $.fn.alterClass = function (removals, additions) {
  2324 +
2278 2325 var self = this,
2279 2326 patt;
2280 2327 if (removals.indexOf('*') === -1) {
... ... @@ -2298,7 +2345,7 @@ console.log(&quot;jsPanel version: &quot; + jsPanel.version);
2298 2345 /* body click handler: remove all tooltips on click in body except click is inside tooltip */
2299 2346 $('body').click(function (e) {
2300 2347 var pID,
2301   - isTT = $(e.target).closest('.jsPanel-tt' ).length;
  2348 + isTT = $(e.target).closest('.jsPanel-tt').length;
2302 2349 if (isTT < 1) {
2303 2350 $('.jsPanel-tt').each(function () {
2304 2351 pID = $(this).attr('id');
... ... @@ -2309,6 +2356,9 @@ console.log(&quot;jsPanel version: &quot; + jsPanel.version);
2309 2356 }
2310 2357 });
2311 2358  
  2359 +
  2360 +
  2361 +
2312 2362 }(jQuery));
2313 2363  
2314 2364 /*
... ... @@ -2320,4 +2370,4 @@ if (!Number.isInteger) {
2320 2370 "use strict";
2321 2371 return typeof nVal === 'number' && isFinite(nVal) && nVal > -9007199254740992 && nVal < 9007199254740992 && Math.floor(nVal) === nVal;
2322 2372 };
2323   -}
  2373 +}
2324 2374 \ No newline at end of file
... ...
400-SOURCECODE/AIAHTML5.Web/login.html
  View file @1ddf757
1   -<!DOCTYPE html>
2   -<html lang="en">
3   -<head>
4   - <base href="/AIAHTML5/" />
5   -<meta charset="utf-8">
6   -<meta http-equiv="X-UA-Compatible" content="IE=edge">
7   -<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
8   -<title>A.D.A.M. Interactive Anatomy</title>
9   -<!--<link href="css/bootstrap.css" rel="stylesheet">-->
10   -
11   - <link href="themes/default/css/bootstrap/3.3.6/bootstrap.css" rel="stylesheet" />
12   - <!--NOT AVAILABLE IN PROTOTYPE-->
13   -<!--<link href="css/bootswatch.css" rel="stylesheet">-->
14   - <link href="content/css/main.css" rel="stylesheet" />
15   -<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,800,700,600,400italic">
16   -<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
17   -<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
18   -<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
19   -<!--[if lt IE 9]>
20   - <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
21   - <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
22   - <![endif]-->
23   -</head>
24   -<body ng-cloak ng-app="AIA">
25   - <div class="container-fluid loginBg">
26   - <div class="row">
27   - <div class="col-xs-12 text-center">
28   -
29   - <a href="index.html" class="loginLogo"><img src="content/images/logo-large.png" class="img-responsive" alt=""></a>
30   - <div class="headerBand row">
31   - <div class="col-xs-12">
32   - <h1>A.D.A.M. Interactive Anatomy</h1>
33   - <p>The most compresive online interactive anatomy learning resource</p>
34   - </div>
35   - </div>
36   - </div>
37   - <!--LOGIN PANEL-->
38   - <div class="col-xs-12 loginPanel">
39   - <div class="loginBox clearfix">
40   - <div class="col-xs-12">
41   - <!--<strong>Login</strong>-->
42   - <form>
43   - <div class="form-group">
44   - <!--<label for="">User ID</label>-->
45   - <!--input type="email" class="form-control" placeholder="User ID">
46   - <span class="help-block text-right small"><a href="#" class="color-white">Forgot User ID?</a></span>-->
47   -
48   -
49   - <div class="input-group">
50   - <span class="input-group-addon"><i class="fa fa-user"></i></span>
51   - <input type="text" class="form-control" placeholder="Username">
52   - </div>
53   - <span class="help-block text-right small"><a href="#" class="color-white">Forgot User ID?</a></span>
54   -
55   -
56   - </div>
57   - <div class="form-group">
58   - <!--<label for="">Password</label>-->
59   - <!--<input type="password" class="form-control" placeholder="Password">
60   - <span class="help-block text-right small "><a href="#" class="color-white">Forgot Password?</a></span>-->
61   - <div class="input-group">
62   - <span class="input-group-addon"><i class="fa fa-key"></i></span>
63   - <input type="password" class="form-control" placeholder="Password">
64   - </div>
65   - <span class="help-block text-right small "><a href="#" class="color-white">Forgot Password?</a></span>
66   - </div>
67   - <div id="loginDiv" class="form-group" ng-controller="AuthenticationController">
68   - <button id="btnlogin" class="btn btn-primary pull-right" ng-click="login()">Log In</button>
69   - </div>
70   - </form>
71   - </div>
72   - </div>
73   - <div class="loginExBtn">
74   - <a href="#" class="btn btn-primary">Subscribe Now</a>
75   - <a href="#" class="btn btn-primary pull-right">Learn More</a>
76   - </div>
77   - </div>
78   - </div>
79   - </div>
80   -
81   - <!-- Footer -->
82   - <footer class="dark">
83   - <div class="container-fluid text-center">Copyright &copy; 2016 Ebix Inc. All rights reserved.</div>
84   - </footer>
85   -
86   -
87   - <script src="libs/jquery/1.11.3/jquery.min.js"></script>
88   - <script src="themes/default/scripts/bootstrap/3.3.5/bootstrap.js"></script>
89   -
90   -
91   - <script src="libs/angular/1.4.9/angular.min.js"></script>
92   -
93   -
94   - <script src="libs/angular/1.4.9/angular-route.min.js"></script>
95   - <script src="libs/angular/1.4.9/angular-sanitize.min.js"></script>
96   - <script src="content/js/custom/main.js"></script>
97   -
98   - <script src="app/main/AIA.js"></script>
99   - <script src="app/services/AuthenticationService.js"></script>
100   - <script src="app/controllers/AuthenticationController.js"></script>
101   -</body>
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <base href="/AIAHTML5/" />
  5 + <meta charset="utf-8">
  6 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 + <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  8 + <title>A.D.A.M. Interactive Anatomy</title>
  9 + <!--<link href="css/bootstrap.css" rel="stylesheet">-->
  10 +
  11 + <link href="themes/default/css/bootstrap/3.3.6/bootstrap.css" rel="stylesheet" />
  12 + <!--NOT AVAILABLE IN PROTOTYPE-->
  13 + <!--<link href="css/bootswatch.css" rel="stylesheet">-->
  14 + <link href="content/css/main.css" rel="stylesheet" />
  15 + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,800,700,600,400italic">
  16 + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  17 + <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  18 + <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  19 + <!--[if lt IE 9]>
  20 + <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  21 + <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  22 + <![endif]-->
  23 +</head>
  24 +<body ng-cloak ng-app="AIA">
  25 + <div class="container-fluid loginBg">
  26 + <div class="row">
  27 + <div class="col-xs-12 text-center">
  28 +
  29 + <a href="index.html" class="loginLogo"><img src="content/images/logo-large.png" class="img-responsive" alt=""></a>
  30 + <div class="headerBand row">
  31 + <div class="col-xs-12">
  32 + <h1>A.D.A.M. Interactive Anatomy</h1>
  33 + <p>The most compresive online interactive anatomy learning resource</p>
  34 + </div>
  35 + </div>
  36 + </div>
  37 + <!--LOGIN PANEL-->
  38 + <div class="col-xs-12 loginPanel">
  39 + <div class="loginBox clearfix">
  40 + <div class="col-xs-12">
  41 + <!--<strong>Login</strong>-->
  42 + <form>
  43 + <div class="form-group">
  44 + <!--<label for="">User ID</label>-->
  45 + <!--input type="email" class="form-control" placeholder="User ID">
  46 + <span class="help-block text-right small"><a href="#" class="color-white">Forgot User ID?</a></span>-->
  47 +
  48 +
  49 + <div class="input-group">
  50 + <span class="input-group-addon"><i class="fa fa-user"></i></span>
  51 + <input type="text" class="form-control" placeholder="Username">
  52 + </div>
  53 + <span class="help-block text-right small"><a href="#" class="color-white">Forgot User ID?</a></span>
  54 +
  55 +
  56 + </div>
  57 + <div class="form-group">
  58 + <!--<label for="">Password</label>-->
  59 + <!--<input type="password" class="form-control" placeholder="Password">
  60 + <span class="help-block text-right small "><a href="#" class="color-white">Forgot Password?</a></span>-->
  61 + <div class="input-group">
  62 + <span class="input-group-addon"><i class="fa fa-key"></i></span>
  63 + <input type="password" class="form-control" placeholder="Password">
  64 + </div>
  65 + <span class="help-block text-right small "><a href="#" class="color-white">Forgot Password?</a></span>
  66 + </div>
  67 + <div id="loginDiv" class="form-group" ng-controller="AuthenticationController">
  68 + <button id="btnlogin" class="btn btn-primary pull-right" ng-click="login()">Log In</button>
  69 + </div>
  70 + </form>
  71 + </div>
  72 + </div>
  73 + <div class="loginExBtn">
  74 + <a href="#" class="btn btn-primary">Subscribe Now</a>
  75 + <a href="#" class="btn btn-primary pull-right">Learn More</a>
  76 + </div>
  77 + </div>
  78 + </div>
  79 + </div>
  80 +
  81 + <!-- Footer -->
  82 + <footer class="dark">
  83 + <div class="container-fluid text-center">Copyright &copy; 2016 Ebix Inc. All rights reserved.</div>
  84 + </footer>
  85 +
  86 +
  87 + <script src="libs/jquery/1.11.3/jquery.min.js"></script>
  88 + <script src="themes/default/scripts/bootstrap/3.3.5/bootstrap.js"></script>
  89 +
  90 +
  91 + <script src="libs/angular/1.4.9/angular.min.js"></script>
  92 +
  93 +
  94 + <script src="libs/angular/1.4.9/angular-route.min.js"></script>
  95 + <script src="libs/angular/1.4.9/angular-sanitize.min.js"></script>
  96 + <script src="content/js/custom/main.js"></script>
  97 +
  98 + <script src="app/main/AIA.js"></script>
  99 + <script src="app/services/AuthenticationService.js"></script>
  100 + <script src="app/controllers/AuthenticationController.js"></script>
  101 +</body>
102 102 </html>
103 103 \ No newline at end of file
... ...