display different bubbles if above or below is not enough place to display
[phpfspot.git] / bubble.js
1 /*\r
2     WebSnapr - Preview Bubble Javascript\r
3     Written by Juan Xavier Larrea \r
4     http://www.websnapr.com - xavier@websnapr.com   \r
5     \r
6 */\r
7 \r
8 // Point this variable to the correct location of the bg.png file\r
9 var bubbleImageUp = 'resources/bubble_up.png';\r
10 var bubbleImageDown = 'resources/bubble_down.png';\r
11 \r
12 if(typeof Array.prototype.push!="function"){\r
13    Array.prototype.push=ArrayPush;\r
14 \r
15    function ArrayPush(_1){\r
16       this[this.length]=_1;\r
17    }\r
18 }\r
19 \r
20 function WSR_getElementsByClassName(_2,_3,_4){\r
21 \r
22    var _5=(_3=="*"&&_2.all)?_2.all:_2.getElementsByTagName(_3);\r
23    var _6=new Array();\r
24    _4=_4.replace(/\-/g,"\\-");\r
25    var _7=new RegExp("(^|\\s)"+_4+"(\\s|$)");\r
26    var _8;\r
27    for(var i=0;i<_5.length;i++){\r
28       _8=_5[i];\r
29       if(_7.test(_8.className)){\r
30          _6.push(_8);\r
31       }\r
32    }\r
33    return (_6);\r
34 }\r
35 \r
36 function bindBubbles(e){\r
37    lbActions=WSR_getElementsByClassName(document,"a","bubble");\r
38    for(i=0;i<lbActions.length;i++){\r
39       if(window.addEventListener){\r
40          lbActions[i].addEventListener("mouseover",attachBubble,false);\r
41          lbActions[i].addEventListener("mouseout",detachBubble,false);\r
42       }else{\r
43          lbActions[i].attachEvent("onmouseover",attachBubble);\r
44          lbActions[i].attachEvent("onmouseout",detachBubble);\r
45       }\r
46    }\r
47 }\r
48 \r
49 function attachBubble(_b){\r
50    var _c;\r
51    if(_b["srcElement"]){\r
52       _c=_b["srcElement"];\r
53    }else{\r
54       _c=_b["target"];\r
55    }\r
56    if (_c.href == undefined){\r
57       _c=_c.parentNode;\r
58    }\r
59 \r
60    var _d=_c.href;\r
61    var _10=document.createElement("div");\r
62    document.getElementsByTagName("body")[0].appendChild(_10);\r
63    _10.className="bubble";\r
64 \r
65    _iH = window.innerHeight;\r
66    var _e=findPos(_c)[0]+5;\r
67 \r
68    // should the bubble be displayed above or below the object\r
69    if(findPos(_c)[1] + 240 >= _iH) {\r
70       var _f=findPos(_c)[1]-283;\r
71       var _mT=16;\r
72       var _mL=12;\r
73       bubbleImage = bubbleImageUp;\r
74    }\r
75    else {\r
76       var _f=findPos(_c)[1]+17;\r
77       var _mT=27;\r
78       var _mL=12;\r
79       bubbleImage = bubbleImageDown;\r
80    }\r
81 \r
82    if (BrowserDetect.browser == 'Explorer') {\r
83       _10.style.width="240px";\r
84       _10.style.position="absolute";\r
85       _10.style.top=_f;\r
86       _10.style.zIndex=99999;\r
87       _10.style.left=_e;\r
88       _10.style.textAlign="left";\r
89       _10.style.height="190px";\r
90       _10.style.paddingTop="0";\r
91       _10.style.paddingLeft="0";\r
92       _10.style.paddingBottom="0";\r
93       _10.style.paddingRight="0";\r
94       _10.style.marginTop="0";\r
95       _10.style.marginLeft="0";\r
96       _10.style.marginBottom="0";\r
97       _10.style.marginRight="0";\r
98       _10.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + bubbleImage + "',sizingMethod='image')";\r
99    } else {\r
100       _10.setAttribute("style","text-align: center; z-index: 99999; position: absolute; top: "+_f+"px ; left: "+_e+"px ; background: url("+ bubbleImage +") no-repeat; width: 240px; height: 190px; padding: 0; margin: 0;");\r
101    }\r
102 \r
103    if (BrowserDetect.browser == 'Safari' || BrowserDetect.browser == 'Konqueror' ) {\r
104 \r
105       var _height = _f;\r
106     \r
107       _10.setAttribute("style","text-align: center; z-index: 99999; position: absolute; top: "+ _height +"px ; left: "+_e+"px ; background: url("+ bubbleImage +") no-repeat; width: 240px; height: 190px; padding: 0; margin: 0;");\r
108     \r
109    }\r
110 \r
111    var img=document.createElement("img");\r
112    _10.appendChild(img);\r
113 \r
114    if (BrowserDetect.browser == 'Explorer') {\r
115       img.style.paddingTop="0";\r
116       img.style.paddingLeft="0";\r
117       img.style.paddingBottom="0";\r
118       img.style.paddingRight="0";\r
119       img.style.margin="auto";\r
120       img.style.marginTop=_mT;\r
121       img.style.marginLeft=_mL;\r
122       img.style.marginBottom="0";\r
123       img.style.marginRight="0";\r
124       img.style.borderTop="0";\r
125       img.style.borderLeft="0";\r
126       img.style.borderBottom="0";\r
127       img.style.borderRight="0";\r
128    } else {\r
129       img.setAttribute("style","padding-top: 0; padding-left: 0; padding-right: 0; padding-bottom: 0; margin-top: " + _mT +"px; margin-left: " + _mL +"px; margin-bottom: 0; margin-right: 0; border: 0");\r
130    }\r
131    img.setAttribute("src","phpfspot_img.php?idx=" + _c.id + "&width=200");\r
132    img.setAttribute("width",202);\r
133    img.setAttribute("height",152);\r
134    img.setAttribute("alt","Snapshot");\r
135 }\r
136 \r
137 function detachBubble(_12){\r
138    lbActions=WSR_getElementsByClassName(document,"div","bubble");\r
139    for(i=0;i<lbActions.length;i++){\r
140       lbActions[i].parentNode.removeChild(lbActions[i]);\r
141    }\r
142 }\r
143 \r
144 /*if(window.addEventListener){\r
145    addEventListener("load",bindBubbles,false);\r
146 }else{\r
147    attachEvent("onload",bindBubbles);\r
148 }*/\r
149 \r
150 function findPos(obj){\r
151    var _14=curtop=0;\r
152    if(obj.offsetParent){\r
153       _14=obj.offsetLeft;\r
154       curtop=obj.offsetTop;\r
155       while(obj=obj.offsetParent){\r
156          _14+=obj.offsetLeft;\r
157          curtop+=obj.offsetTop;\r
158       }\r
159    }\r
160    return [_14,curtop];\r
161 }\r
162 \r
163 var BrowserDetect = {\r
164         init: function () {\r
165                 this.browser = this.searchString(this.dataBrowser) || "An unknown browser";\r
166                 this.version = this.searchVersion(navigator.userAgent)\r
167                         || this.searchVersion(navigator.appVersion)\r
168                         || "an unknown version";\r
169                 this.OS = this.searchString(this.dataOS) || "an unknown OS";\r
170         },\r
171         searchString: function (data) {\r
172                 for (var i=0;i<data.length;i++) {\r
173                         var dataString = data[i].string;\r
174                         var dataProp = data[i].prop;\r
175                         this.versionSearchString = data[i].versionSearch || data[i].identity;\r
176                         if (dataString) {\r
177                                 if (dataString.indexOf(data[i].subString) != -1)\r
178                                         return data[i].identity;\r
179                         }\r
180                         else if (dataProp)\r
181                                 return data[i].identity;\r
182                 }\r
183         },\r
184         searchVersion: function (dataString) {\r
185                 var index = dataString.indexOf(this.versionSearchString);\r
186                 if (index == -1) return;\r
187                 return parseFloat(dataString.substring(index+this.versionSearchString.length+1));\r
188         },\r
189         dataBrowser: [\r
190                 {       string: navigator.userAgent,\r
191                         subString: "OmniWeb",\r
192                         versionSearch: "OmniWeb/",\r
193                         identity: "OmniWeb"\r
194                 },\r
195                 {\r
196                         string: navigator.vendor,\r
197                         subString: "Apple",\r
198                         identity: "Safari"\r
199                 },\r
200                 {\r
201                         prop: window.opera,\r
202                         identity: "Opera"\r
203                 },\r
204                 {\r
205                         string: navigator.vendor,\r
206                         subString: "iCab",\r
207                         identity: "iCab"\r
208                 },\r
209                 {\r
210                         string: navigator.vendor,\r
211                         subString: "KDE",\r
212                         identity: "Konqueror"\r
213                 },\r
214                 {\r
215                         string: navigator.userAgent,\r
216                         subString: "Firefox",\r
217                         identity: "Firefox"\r
218                 },\r
219                 {\r
220                         string: navigator.vendor,\r
221                         subString: "Camino",\r
222                         identity: "Camino"\r
223                 },\r
224                 {               // for newer Netscapes (6+)\r
225                         string: navigator.userAgent,\r
226                         subString: "Netscape",\r
227                         identity: "Netscape"\r
228                 },\r
229                 {\r
230                         string: navigator.userAgent,\r
231                         subString: "MSIE",\r
232                         identity: "Explorer",\r
233                         versionSearch: "MSIE"\r
234                 },\r
235                 {\r
236                         string: navigator.userAgent,\r
237                         subString: "Gecko",\r
238                         identity: "Mozilla",\r
239                         versionSearch: "rv"\r
240                 },\r
241                 {               // for older Netscapes (4-)\r
242                         string: navigator.userAgent,\r
243                         subString: "Mozilla",\r
244                         identity: "Netscape",\r
245                         versionSearch: "Mozilla"\r
246                 }\r
247         ],\r
248         dataOS : [\r
249                 {\r
250                         string: navigator.platform,\r
251                         subString: "Win",\r
252                         identity: "Windows"\r
253                 },\r
254                 {\r
255                         string: navigator.platform,\r
256                         subString: "Mac",\r
257                         identity: "Mac"\r
258                 },\r
259                 {\r
260                         string: navigator.platform,\r
261                         subString: "Linux",\r
262                         identity: "Linux"\r
263                 }\r
264         ]\r
265 \r
266 };\r
267 \r
268 function var_dump(obj) {\r
269    if(typeof obj == "object") {\r
270       return "Type: "+typeof(obj)+((obj.constructor) ? "\nConstructor: "+obj.constructor : "")+"\nValue: " + obj;\r
271    } else {\r
272       return "Type: "+typeof(obj)+"\nValue: "+obj;\r
273    }\r
274 }//end function var_dump\r
275 \r
276 \r
277 BrowserDetect.init();\r