Попытка подгонки под ревизию 12606. 3-й кусочек.)
[cswowd.git] / js / mapper.js
blobccefe13870e8bb271d438349f4ec3667b4f33f5a
1 function cacheMap(url)\r
2 {\r
3         var mapper = $('mapper');\r
4         ajaxCacheHtml(mapper,url);\r
5 }\r
6 \r
7 function areaSelect(element)\r
8 {\r
9         var mapper = $('mapper');\r
10         var url = 'ajax.php'+element.value;\r
11         if (!my_AJAX.isCached(url))\r
12                 outLoadingText('mapperarea');\r
13         my_AJAX.GETupload(url, function (text) {mapper.innerHTML = text;});\r
14 }\r
16 // Объявим функцию для определения координат мыши\r
17 function defPosition(event) {\r
18         var x = y = 0;\r
19         if (document.attachEvent != null) { // Internet Explorer & Opera\r
20                 x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;\r
21                 y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;\r
22         }\r
23         if (!document.attachEvent && document.addEventListener) { // Gecko\r
24                 x = event.clientX + window.scrollX;\r
25                 y = event.clientY + window.scrollY;\r
26         }\r
27         return {x:x, y:y};\r
28 }\r
30 function outText(out)\r
31 {\r
32         return '<div style=\"position: absolute; left: -1px; top: -1px; white-space: nowrap; color: black;">' + out + '</div>' +\r
33                 '<div style=\"position: absolute; left: -1px; top:  0px; white-space: nowrap; color: black;">' + out + '</div>' +\r
34                 '<div style=\"position: absolute; left: -1px; top:  1px; white-space: nowrap; color: black;">' + out + '</div>' +\r
35                 '<div style=\"position: absolute; left:  0px; top: -1px; white-space: nowrap; color: black;">' + out + '</div>' +\r
36                 '<div style=\"position: absolute; left:  0px; top:  1px; white-space: nowrap; color: black;">' + out + '</div>' +\r
37                 '<div style=\"position: absolute; left:  1px; top: -1px; white-space: nowrap; color: black;">' + out + '</div>' +\r
38                 '<div style=\"position: absolute; left:  1px; top:  0px; white-space: nowrap; color: black;">' + out + '</div>' +\r
39                 '<div style=\"position: absolute; left:  1px; top:  1px; white-space: nowrap; color: black;">' + out + '</div>' +\r
40                 '<div style=\"position: absolute; left:  0px; top:  0px; white-space: nowrap; color: white;">' + out + '</div>';\r
41 }\r
43 function outLoadingText(div_id)\r
44 {\r
45         var txt = $(div_id);\r
46         if (txt)\r
47         {\r
48             var div = insertElement(txt, 'DIV', 'loading');\r
49         var s = div.style;\r
50                 s.position='absolute';\r
51         s.left= (txt.offsetWidth/2 - 30) + 'px';\r
52         s.top = '10px';\r
53                 div.innerHTML = outText('Loading...');\r
54         }\r
55 }\r
57 function outMouseCoords(div, event, field)\r
58 {\r
59         var mpos = defPosition(event || window.event);\r
60         var vbound = getBounds(div);\r
61         var x = 100 * (mpos.x - vbound.left) / vbound.width;\r
62         var y = 100 * (mpos.y - vbound.top) / vbound.height;\r
64         var txt = $(field);\r
65         if (txt)\r
66                 txt.innerHTML = outText("(" + x.toFixed(1) + ", " + y.toFixed(1) + ")");\r
67 }\r
69 function cleanMouseCoords(field)\r
70 {\r
71         $(field).innerHTML = "";\r
72 }\r
74 /*\r
75  * New mapper functions\r
76  */\r
78 var mapData=0;\r
79 var scale = 1;\r
80 var lastsel = 0;\r
81 var lastId  = 0;\r
83 function setMapData(newData)\r
84 {\r
85   mapData = newData;\r
86 }\r
88 function setScale(newscale)\r
89 {\r
90   scale = newscale;\r
91 }\r
93 function changeSelect(newsel)\r
94 {\r
95         if (newsel == lastsel)\r
96                 return false;\r
97         renderInstance(lastId, newsel);\r
98         return false;\r
99 }\r
101 function changeScale(newscale)\r
103         if (scale == newscale)\r
104                 return false;\r
105         scale = newscale;\r
106         renderInstance(lastId, lastsel);\r
107         return false;\r
109 function setBestScale(width)\r
111         var bestScale = 640 / width;\r
112         if      (bestScale > 0.00 && bestScale < 0.40) scale = 0.25;\r
113         else if (bestScale > 0.40 && bestScale < 0.62) scale = 0.50;\r
114         else if (bestScale > 0.62 && bestScale < 0.87) scale = 0.75;\r
115         else if (bestScale > 0.87 && bestScale < 1.5)  scale = 1.00;\r
116         else scale = 2.00;\r
118 function renderInstance(elementid, selected)\r
120         lastId  = elementid;\r
121         lastsel = selected;\r
123         var mapper = $(elementid);\r
124         if (mapper == 0)\r
125                 return;\r
126         var text;\r
127         var map = eval(mapData);\r
129         map.width  = map.imageX*scale;\r
130         var rect = getBounds(mapper.offsetParent);\r
131         map.height = map.imageY*scale;\r
132         var rect = getBounds(mapper.offsetParent);\r
133         text =\r
134         '<table class="map" border=1 width=' + (map.width + 10) + 'px>' +\r
135         '<tbody><tr><td class=mapname id=mappername>' + map.header +'</td></tr>' +\r
136         '<tr><td width=' + map.width + 'px height=' + (map.height + 4) + 'px align=left valign=top>' +\r
137         '<div id=mapperarea style="font-size: 10px; position: relative; left: 0px; top: 0px;">' +\r
138         '<img src=' + map.image + ' width=' + map.width + 'px height=' + map.height + 'px>\n';\r
140         var count = 0;\r
141         if (map.points)\r
142                 count = map.points.length;\r
143         for (var i = 0; i < count; i++)\r
144         {\r
145                 var img  = map.points[i].image;\r
146                 var imgX = map.points[i].icenterx;\r
147                 var imgY = map.points[i].icentery;\r
148                 if (map.points[i].id == selected)\r
149                 {\r
150                         img  = map.selImg;\r
151                         imgX = map.selImgX;\r
152                         imgY = map.selImgY;\r
153                 }\r
154                 else if (img == 0)\r
155                 {\r
156                         img  = map.defImg;\r
157                         imgX = map.defImgX;\r
158                         imgY = map.defImgY;\r
159                 }\r
160                 var x = map.points[i].x * map.width / 100 - imgX;\r
161                 var y = map.points[i].y * map.height / 100 - imgY;\r
162                 var tip = '';\r
163                 if (map.points[i].tooltip!=0)\r
164                         tip = 'onmouseover = "Tip(\'' + map.points[i].tooltip + '\')"';\r
165                 if (map.points[i].href!=0)\r
166                         text +='<a href=' + map.points[i].href + '>';\r
167                 text +='<img src="' + img + '" style="position: absolute; border: 0px; left: ' + x.toFixed(0) + 'px; top: ' + y.toFixed(0) + 'px;" ' + tip + '>\n';\r
168                 if (map.points[i].href)\r
169                         text +='</a>';\r
170         }\r
171         text+=\r
172         '<div class=m_scale>' +\r
173         outText('25%<br>50%<br>75%<br>100%<br>200%') +\r
174         '<div style=\"position: absolute; left:  0px; top:  0px; white-space: nowrap;">' +\r
175         '<a href=# onclick="return changeScale(0.25);">25%</a><br>' +\r
176         '<a href=# onclick="return changeScale(0.50);">50%</a><br>' +\r
177         '<a href=# onclick="return changeScale(0.75);">75%</a><br>' +\r
178         '<a href=# onclick="return changeScale(1.00);">100%</a><br>' +\r
179         '<a href=# onclick="return changeScale(2.00);">200%</a></div>' +\r
180         '</div>' +\r
181         '</div>' +\r
182         '</td></tr></tbody>' +\r
183         '</table>';\r
184         mapper.innerHTML = text;\r