Translation update done using Pootle.
[phpmyadmin-themes.git] / js / pMap.js
blobb63221cdc0a7520a09acfcf225540ff3d21d0a28
1 /**
2  * Holds the definition and the creation of the imageMap object
3  * @author Martynas Mickevicius <mmartynas@gmail.com>
4  * @package phpMyAdmin
5  */
7 /**
8  * responsible for showing tooltips above the image chart
9  */
10 var imageMap = {
11     'mouseMoved': function(event, cont) {
12         // return if no imageMap set
13         // this can happen if server has no json
14         if (!this.imageMap) {
15             return;
16         }
17         
18         // get mouse coordinated relative to image
19         var mouseX = event.pageX - cont.offsetLeft;
20         var mouseY = event.pageY - cont.offsetTop;
22         //console.log("X: " + mouseX + ", Y: " + mouseY);
24         /* Check if we are flying over a map zone
25         * Lets use the following method to check if a given
26         * point is in any convex polygon.
27         * http://www.programmingforums.org/post168124-3.html
28         */
29         var found = false;
30         for (var key = 0; key < this.imageMap.length; key++)
31         {
32             var seriesName = this.imageMap[key]['n'];
33             var seriesValue = this.imageMap[key]['v'];
35             var signSum = 0;
36             for (var i = 0; i < this.imageMap[key]['p'].length; i++)
37             {
38                 var index1;
39                 var index2;
41                 if (i == this.imageMap[key]['p'].length - 1)
42                 {
43                     index1 = i;
44                     index2 = 0;
45                 }
46                 else
47                 {
48                     index1 = i;
49                     index2 = i+1;
50                 }
51                 var result = this.getDeterminant(
52                     this.imageMap[key]['p'][index1][0],
53                     this.imageMap[key]['p'][index1][1],
54                     this.imageMap[key]['p'][index2][0],
55                     this.imageMap[key]['p'][index2][1],
56                     mouseX,
57                     mouseY
58                 );
59                 if (result > 0) { signSum += 1; } else { signSum += -1; }
60             }
61             
62             if (Math.abs(signSum) == this.imageMap[key]['p'].length)
63             {
64                 found = true;
65                 if (this.currentKey != key)
66                 {
67                     this.tooltip.show();
68                     this.tooltip.title(seriesName);
69                     this.tooltip.text(seriesValue);
70                     this.currentKey = key;
71                 }
72                 this.tooltip.move(mouseX + 20, mouseY + 20);
73             }
74         }
75         if (!found && this.currentKey != -1 )
76         {
77             this.tooltip.hide();
78             this.currentKey = -1;
79         }
80     },
82     'getDeterminant': function (X1, Y1, X2, Y2, X3, Y3) {
83         return (X2*Y3 - X3*Y2) - (X1*Y3 - X3*Y1) + (X1*Y2 - X2*Y1);
84     },
86     'loadImageMap': function(map) {
87         this.imageMap = JSON.parse(map);
88         for (key in this.imageMap)
89         {
90             // FIXME
91             // without this loop image map does not work
92             // on IE8 in the status page
93         }
94     },
96     'init': function() {
97         this.tooltip.init();
99         $("div#chart").bind('mousemove',function(e) {
100             imageMap.mouseMoved(e, this);
101         });
103         this.tooltip.attach("div#chart");
105         this.currentKey = -1;
106     },
108     'tooltip': {
109         'init': function () {
110             this.el = $('<div></div>');
111             this.el.css('position', 'absolute');
112             this.el.css('font-family', 'tahoma');
113             this.el.css('background-color', '#373737');
114             this.el.css('color', '#BEBEBE');
115             this.el.css('padding', '3px');
117             var title = $('<p></p>');
118             title.attr('id', 'title');
119             title.css('margin', '0px');
120             title.css('padding', '3px');
121             title.css('background-color', '#606060');
122             title.css('text-align', 'center');
123             title.html('Title');
124             this.el.append(title);
126             var text = $('<p></p>');
127             text.attr('id', 'text');
128             text.css('margin', '0');
129             text.html('Text');
130             this.el.append(text);
131             
132             this.hide();
133         },
135         'attach': function (element) {
136             $(element).prepend(this.el);
137         },
139         'move': function (x, y) {
140             this.el.css('margin-left', x);
141             this.el.css('margin-top', y);
142         },
144         'hide': function () {
145             this.el.css('display', 'none');
146         },
148         'show': function () {
149             this.el.css('display', 'block');
150         },
152         'title': function (title) {
153             this.el.find("p#title").html(title);
154         },
156         'text': function (text) {
157             this.el.find("p#text").html(text.replace(/;/g, "<br />"));
158         }
159     }
162 $(document).ready(function() {
163     imageMap.init();