display different bubbles if above or below is not enough place to display

git-svn-id: file:///var/lib/svn/phpfspot/trunk@35 fa6a889d-dae6-447d-9e79-4ba9a3039384

1 files changed, 25 insertions, 9 deletions

diff --git a/bubble.js b/bubble.js
index 39ae03e..74ad460 100644
--- a/bubble.js
+++ b/bubble.js
@@ -6,7 +6,8 @@
 */

 

 // Point this variable to the correct location of the bg.png file

-var bubbleImagePath = 'resources/bubble_bg.png';

+var bubbleImageUp = 'resources/bubble_up.png';

+var bubbleImageDown = 'resources/bubble_down.png';

 

 if(typeof Array.prototype.push!="function"){

    Array.prototype.push=ArrayPush;

@@ -57,12 +58,27 @@ function attachBubble(_b){
    }

 

    var _d=_c.href;

-   var _e=findPos(_c)[0]+5;

-   var _f=findPos(_c)[1]+17;

    var _10=document.createElement("div");

    document.getElementsByTagName("body")[0].appendChild(_10);

    _10.className="bubble";

 

+   _iH = window.innerHeight;

+   var _e=findPos(_c)[0]+5;

+

+   // should the bubble be displayed above or below the object

+   if(findPos(_c)[1] + 240 >= _iH) {

+      var _f=findPos(_c)[1]-283;

+      var _mT=16;

+      var _mL=12;

+      bubbleImage = bubbleImageUp;

+   }

+   else {

+      var _f=findPos(_c)[1]+17;

+      var _mT=27;

+      var _mL=12;

+      bubbleImage = bubbleImageDown;

+   }

+

    if (BrowserDetect.browser == 'Explorer') {

       _10.style.width="240px";

       _10.style.position="absolute";

@@ -79,16 +95,16 @@ function attachBubble(_b){
       _10.style.marginLeft="0";

       _10.style.marginBottom="0";

       _10.style.marginRight="0";

-      _10.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + bubbleImagePath + "',sizingMethod='image')";

+      _10.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + bubbleImage + "',sizingMethod='image')";

    } else {

-      _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;");

+      _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;");

    }

 

    if (BrowserDetect.browser == 'Safari' || BrowserDetect.browser == 'Konqueror' ) {

 

       var _height = _f;

     

-      _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;");

+      _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;");

     

    }

 

@@ -101,8 +117,8 @@ function attachBubble(_b){
       img.style.paddingBottom="0";

       img.style.paddingRight="0";

       img.style.margin="auto";

-      img.style.marginTop="27px";

-      img.style.marginLeft="25px";

+      img.style.marginTop=_mT;

+      img.style.marginLeft=_mL;

       img.style.marginBottom="0";

       img.style.marginRight="0";

       img.style.borderTop="0";

@@ -110,7 +126,7 @@ function attachBubble(_b){
       img.style.borderBottom="0";

       img.style.borderRight="0";

    } else {

-      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");

+      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");

    }

    img.setAttribute("src","phpfspot_img.php?idx=" + _c.id + "&width=200");

    img.setAttribute("width",202);