photoshop does the job

[phpfspot.git] / bubble.js

diff --git a/bubble.js b/bubble.js
index 39ae03e407bf9d3c3a9c5008f77f3aa90582f104..600407bd5af36bc464664d4cb3c539cc6f0376b6 100644 (file)
--- a/bubble.js
+++ b/bubble.js
@@ -6,7 +6,8 @@
 */\r
 \r
 // Point this variable to the correct location of the bg.png file\r
-var bubbleImagePath = 'resources/bubble_bg.png';\r
+var bubbleImageUp = 'resources/bubble_up.png';\r
+var bubbleImageDown = 'resources/bubble_down.png';\r
 \r
 if(typeof Array.prototype.push!="function"){\r
    Array.prototype.push=ArrayPush;\r
@@ -57,12 +58,27 @@ function attachBubble(_b){
    }\r
 \r
    var _d=_c.href;\r
-   var _e=findPos(_c)[0]+5;\r
-   var _f=findPos(_c)[1]+17;\r
    var _10=document.createElement("div");\r
    document.getElementsByTagName("body")[0].appendChild(_10);\r
    _10.className="bubble";\r
 \r
+   var _e=findPos(_c)[0]+5;\r
+   var cur_height = findPos(_c)[1]-get_scroll_position() + 283;\r
+\r
+   // should the bubble be displayed above or below the object\r
+   if(cur_height >= get_page_height()) {\r
+      var _f=findPos(_c)[1]-283;\r
+      var _mT=16;\r
+      var _mL=12;\r
+      bubbleImage = bubbleImageUp;\r
+   }\r
+   else {\r
+      var _f=findPos(_c)[1]+17;\r
+      var _mT=27;\r
+      var _mL=12;\r
+      bubbleImage = bubbleImageDown;\r
+   }\r
+\r
    if (BrowserDetect.browser == 'Explorer') {\r
       _10.style.width="240px";\r
       _10.style.position="absolute";\r
@@ -79,16 +95,16 @@ function attachBubble(_b){
       _10.style.marginLeft="0";\r
       _10.style.marginBottom="0";\r
       _10.style.marginRight="0";\r
-      _10.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + bubbleImagePath + "',sizingMethod='image')";\r
+      _10.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + bubbleImage + "',sizingMethod='image')";\r
    } else {\r
-      _10.setAttribute("style","text-align: center; z-index: 99999; position: absolute; top: "+_f+"px ; left: "+_e+"px ; background: url("+ bubbleImagePath +") no-repeat; width: 240px; height: 190px; padding: 0; margin: 0;");\r
+      _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
    }\r
 \r
    if (BrowserDetect.browser == 'Safari' || BrowserDetect.browser == 'Konqueror' ) {\r
 \r
       var _height = _f;\r
     \r
-      _10.setAttribute("style","text-align: center; z-index: 99999; position: absolute; top: "+ _height +"px ; left: "+_e+"px ; background: url("+ bubbleImagePath +") no-repeat; width: 240px; height: 190px; padding: 0; margin: 0;");\r
+      _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
     \r
    }\r
 \r
@@ -101,8 +117,8 @@ function attachBubble(_b){
       img.style.paddingBottom="0";\r
       img.style.paddingRight="0";\r
       img.style.margin="auto";\r
-      img.style.marginTop="27px";\r
-      img.style.marginLeft="25px";\r
+      img.style.marginTop=_mT;\r
+      img.style.marginLeft=_mL;\r
       img.style.marginBottom="0";\r
       img.style.marginRight="0";\r
       img.style.borderTop="0";\r
@@ -110,7 +126,7 @@ function attachBubble(_b){
       img.style.borderBottom="0";\r
       img.style.borderRight="0";\r
    } else {\r
-      img.setAttribute("style","padding-top: 0; padding-left: 0; padding-right: 0; padding-bottom: 0; margin-top: 27px; margin-left: 12px; margin-bottom: 0; margin-right: 0; border: 0");\r
+      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
    }\r
    img.setAttribute("src","phpfspot_img.php?idx=" + _c.id + "&width=200");\r
    img.setAttribute("width",202);\r
@@ -257,5 +273,35 @@ function var_dump(obj) {
    }\r
 }//end function var_dump\r
 \r
+function get_page_height()\r
+{\r
+   var myHeight = 0;\r
+   if( typeof( window.innerHeight ) == 'number' ) {\r
+      //Non-IE\r
+      myHeight = window.innerHeight;\r
+   } else if( document.documentElement && document.documentElement.clientHeight  ) {\r
+      //IE 6+ in 'standards compliant mode'\r
+      myHeight = document.documentElement.clientHeight;\r
+   } else if( document.body &&  document.body.clientHeight ) {\r
+      //IE 4 compatible\r
+      myHeight = document.body.clientHeight;\r
+   }\r
+\r
+   return myHeight;\r
+}\r
+\r
+function get_scroll_position()\r
+{\r
+\r
+  if (typeof window.pageYOffset != 'undefined')\r
+    return window.pageYOffset;\r
+  else\r
+    if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')\r
+      return window.scrollTop;\r
+    else\r
+      if (typeof document.body != 'undefined')\r
+        return document.body.scrollTop;\r
+\r
+}\r
 \r
 BrowserDetect.init();\r