1 /**
  2  * @projectDescription infoTip
  3  * @author Sathya Prasad
  4  * @version 1.0
  5  */
  6 /** 
  7  * @classDescription This class creates a new infoTip
  8  * @param {String} id - string to create the infoTip div
  9  * @param {String} className - Space delimited CSS class names
 10  * @param {Object} pos - Map.position to indicate the map offset
 11  * @param {Boolean} animation - set infotip animation to true or false
 12  * @constructor
 13  */
 14 function infoTip(id, className, pos, animation) {
 15     /**
 16      * Helper object to choose the position of the infoTip
 17      */
 18     this.LOCATION = {
 19         "left": "left",
 20         "right": "right",
 21         "top": "top",
 22         "bottom": "bottom"
 23     };
 24     this._isShowing = false;
 25     this._coords = null;
 26     this._height = 0;
 27     this._width = 0;
 28     this._location = "top";
 29     this._padding = 15;
 30     this._xOffset = pos.x;
 31     this._yOffset = pos.y;
 32     this._id = id;
 33     this._animationRef = null;
 34     this._animation = animation;
 35     
 36     var _div = dojo.doc.createElement("div");
 37     dojo.attr(_div, {
 38         id: id,
 39         "class": className,
 40         style: "display:none"
 41     });
 42     dojo.doc.body.appendChild(_div);
 43     /**
 44      * Returns the id of the infoTip div element
 45      * @alias getId
 46      * @return {String}
 47      */
 48     this.getId = function() {
 49         return this._id
 50     };
 51     /**
 52      * Use to override the default padding between mouse location and infoTip location
 53      * @alias setPadding
 54      * @param {Number}
 55      */
 56     this.setPadding = function(val) {
 57         this._padding = val;
 58     };
 59     
 60     /**
 61      * Use to set the location of the infoTip. Possible values (left,right,top,bottom) or use the enum LOCATION
 62      * @alias setLocation
 63      * @param {String}
 64      */
 65     this.setLocation = function(val) {
 66         this._location = val;
 67     };
 68     /**
 69      * Use to set a fixed size. This will override the default auto width/height behavior
 70      * @alias setSize
 71      * @param {Number} w width in pixels
 72      * @param {Number} h height in pixels
 73      */
 74     this.setSize = function(w, h) {
 75         dojo.style(this._id, {
 76             height: h + "px",
 77             width: w + "px"
 78         });
 79     };
 80     
 81     /**
 82      * Use to set the HTML content to be show inside of the infoTip
 83      * @alias setContent
 84      * @param {String} content
 85      */
 86     this.setContent = function(content) {
 87         dojo.byId(this._id).innerHTML = content;
 88         dojo.style(this._id,"display","");
 89     };
 90     /**
 91      * Use to set the CSS Class(es) for the infoTip styling
 92      * @alias setClass
 93      * @param {String}
 94      */
 95     this.setClass = function(val) {
 96         dojo.byId(this._id).className = val;
 97     };
 98     /**
 99      * Use to show the infoTip instance
100      * @alias show
101      * @param {Object} p screen location p.x,p.y in pixels
102      */
103     this.show = function(p) {
104         this._coords = dojo.coords(this._id);
105         this._height = this._coords.h;
106         this._width = this._coords.w;
107         var top_style, left_style;
108         switch (this._location) {
109             case "left":
110                 top_style = p.y + this._yOffset - (this._height / 2) + "px";
111                 left_style = p.x + this._xOffset - this._width - this._padding + "px";
112                 break;
113             case "right":
114                 top_style = p.y + this._yOffset - (this._height / 2) + "px";
115                 left_style = p.x + this._xOffset + this._padding + "px";
116                 break;
117             case "bottom":
118                 top_style = p.y + this._yOffset + this._padding + "px";
119                 left_style = p.x + this._xOffset - (this._width / 2) + "px";
120                 break;
121             case "top":
122                 top_style = p.y + this._yOffset - this._height - this._padding + "px";
123                 left_style = p.x + this._xOffset - (this._width / 2) + "px";
124                 break;
125         }
126         
127         dojo.style(this._id, {
128             left: left_style,
129             top: top_style,
130             //height: this._height + "px",
131             //width: this._width + "px",
132             display: ""
133         });
134         
135         if (this._animation) {
136             if (this._animationRef != null) 
137                 this._animationRef.stop();
138             this._animationRef = dojo.fadeIn({
139                 node: this._id,
140                 duration: 1000
141             }).play();
142         }
143         this._isShowing = true;
144     };
145     /**
146      * Use to hide the infoTip instance (hides only if showing)
147      */
148     this.hide = function() {
149         if (!this._isShowing) 
150             return;
151         if (this._animation) {
152             this._animationRef = dojo.fadeOut({
153                 node: this._id,
154                 duration: 800,
155                 onEnd: function() {
156                     this.node.style.display = "none";
157                 }
158             }).play();
159         } else {
160             dojo.style(this._id,"display","none");
161         }
162         this._isShowing = false;
163     };
164     
165     /**
166      * Use to check if the infoTip instance is visible or not
167      * @return {boolean}
168      */
169     this.isShowing = function() {
170         return this._isShowing
171     };
172 }
173