From 1f8f27b4ac3afc282c9d7aecd91953498a40f8ee Mon Sep 17 00:00:00 2001
From: Andreas Unterkircher <unki@netshadow.at>
Date: Thu, 7 Jun 2007 09:23:36 +0000
Subject: 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
---
 bubble.js | 34 +++++++++++++++++++++++++---------
 1 file changed, 25 insertions(+), 9 deletions(-)

(limited to 'bubble.js')

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);
-- 
cgit v1.2.3-18-g5258