js/mapper.js

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