function Fruity() {

  this.VERSION = '0.2.1';
  
  // get path
  var s = document.getElementsByTagName('script');  
  for (var i=0; i<s.length; i++) {
    if (s[i].src.match(/Fruity\.js(\?.*)?$/)) {
      this.FRUITY_PATH = s[i].src.replace(/\/Fruity\.js(\?.*)?$/,'');
    }
  }
  
  ////////////////////////////////// FUNCTIONS (CORE) ////////////////////////////////////////////////////////////////////////////////////////////////

  // posX
  this.posX = function (handle) {
    var obj = typeof(handle) == 'string' ? $(handle) : handle;
    var curleft = 0;
    if(obj.offsetParent)
    while(1) 
    {
    curleft += obj.offsetLeft;
    if(!obj.offsetParent)
    break;
    obj = obj.offsetParent;
    }
    else if(obj.x)
    curleft += obj.x;
    return curleft;
  };
  
  // posY
  this.posY = function(handle) {
    var obj = typeof(handle) == 'string' ? $(handle) : handle;
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  };
  
  // setOpacity - http://brainerror.net/scripts/javascript/blendtrans/  
  this.setOpacity = function(object, myOpacity) {
      if (object != null) {
        if (object.style.opacity) object.style.opacity = myOpacity;
        if (object.style.MozOpacity) object.style.MozOpacity = (myOpacity / 100);
        if (object.style.KhtmlOpacity) object.style.KhtmlOpacity = (myOpacity / 100);
        if (object.style.filter) object.style.filter = 'alpha(opacity=' + myOpacity + ')';
      } else {
        return;
      }
  }
  
  // getViewportSize
  this.getViewportSize = function() {
    var size = [0, 0];
    if (typeof window.innerWidth != 'undefined')
    {
    size = [
    window.innerWidth,
    window.innerHeight
    ];
    }
    else if (typeof document.documentElement != 'undefined'
    && typeof document.documentElement.clientWidth !=
    'undefined' && document.documentElement.clientWidth != 0)
    {
    size = [
    document.documentElement.clientWidth,
    document.documentElement.clientHeight
    ];
    }
    else
    {
    size = [
    document.getElementsByTagName('body')[0].clientWidth,
    document.getElementsByTagName('body')[0].clientHeight
    ];
    }
    return size;
  };
  
  // getScrolledX
  this.getScrolledX = function() {
    var scrOfX = 0;
    if( typeof( window.pageXOffset ) == 'number' ) {
      //Netscape compliant
      scrOfX = window.pageXOffset;
    } else if(document.body && document.body.scrollLeft) {
      //DOM compliant
      scrOfX = document.body.scrollLeft;
    } else if (document.documentElement && document.documentElement.scrollLeft) {
      //IE6 standards compliant mode
      scrOfX = document.documentElement.scrollLeft;
    }
    return scrOfX;
  }
  
  // getScrolledY
  this.getScrolledY = function() {
    var scrOfY = 0;
    if( typeof( window.pageYOffset ) == 'number' ) {
      //Netscape compliant
      scrOfY = window.pageYOffset;
    } else if(document.body && document.body.scrollTop) {
      //DOM compliant
      scrOfY = document.body.scrollTop;
    } else if (document.documentElement && document.documentElement.scrollTop) {
      //IE6 standards compliant mode
      scrOfY = document.documentElement.scrollTop;
    }
    return scrOfY;
  }
  
  // isMouseLeaveOrEnter
  this.isMouseLeaveOrEnter = function(e, handler) {
  	if (!e) var e = window.event;
    if (e.type != 'mouseout' && e.type != 'mouseover') return false; 
    var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement; 
    while (reltg && reltg != handler) reltg = reltg.parentNode; 
    return (reltg != handler); 
  };
  
  // getClickX
  this.getClickX = function(e) {
    var posX = 0;
    if (!e) var e = window.event;
    if (e.pageX) posX = e.pageX;
    else if (e.clientX) posX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    return posX;
  };
  
  // getClickY
  this.getClickY = function(e) {
    var posY = 0;
    if (!e) var e = window.event;
    if (e.pageY) posY = e.pageY;
    else if (e.clientY) posY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    return posY;
  };
  
  // createXMLHttpRequest
  this.createXMLHttpRequest = function() {
    var xmlHttp;
    if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest();
    else if (window.ActiveXObject) xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
    return xmlHttp;
  };  
    
  // encodeUTF8 - http://www.webtoolkit.info
  this.encodeUTF8 = function(string) {
    string = string.replace(/\r\n/g,"\n");
    var utftext = "";
    for (var n = 0; n < string.length; n++) {
        var c = string.charCodeAt(n);
        if (c < 128) {
            utftext += String.fromCharCode(c);
        }
        else if((c > 127) && (c < 2048)) {
            utftext += String.fromCharCode((c >> 6) | 192);
            utftext += String.fromCharCode((c & 63) | 128);
        }
        else {
            utftext += String.fromCharCode((c >> 12) | 224);
            utftext += String.fromCharCode(((c >> 6) & 63) | 128);
            utftext += String.fromCharCode((c & 63) | 128);
        }
    }
    return utftext;
  }
  
  // decodeUTF8 - http://www.webtoolkit.info
  this.decodeUTF8 = function(utftext) {
    var string = "";
    var i = 0;
    var i = 0;
    var c = 0;
    var c1 = 0;
    var c2 = 0;
    while ( i < utftext.length ) {
        c = utftext.charCodeAt(i);
        if (c < 128) {
            string += String.fromCharCode(c);
            i++;
        }
        else if((c > 191) && (c < 224)) {
            c2 = utftext.charCodeAt(i+1);
            string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
            i += 2;
        }
        else {
            c2 = utftext.charCodeAt(i+1);
            c3 = utftext.charCodeAt(i+2);
            string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
            i += 3;
        }
    }
    return string;
  } 
  
  ////////////////////////////////// FUNCTIONS (CORE) ////////////////////////////////////////////////////////////////////////////////////////////////
  
  // imagePopup
  this.imagePopup = function(myimage) {
    var html = '';
    html += '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"';
    html += "\n";
    html += '"http://www.w3.org/TR/html4/strict.dtd">';
    html += '<html>';
    html += '<body style="margin: 0;">';
    html += '<img id="the_image" src="' + myimage + '" onload="window.resizeTo((document.getElementById(\'the_image\').width), (document.getElementById(\'the_image\').height))">';
    html += "</body></html>";
    
    var popup = window.open ('','image','toolbar=0,location=no,directories=0,menuBar=0,scrollbars=0,resizable=1, width=300,height=300');
    popup.moveTo(0,0);
    popup.document.open();
    popup.document.write(html);
    popup.document.close();
    return;
  }  
  
  ////////////////////////////////// CORNER MESSAGE ////////////////////////////////////////////////////////////////////////////////////////////////    
  
  // CornerMessage
  this.CornerMessage = function(msg) {
    var theDiv = document.createElement('div');
    theDiv.style.backgroundColor = '#ffff99';
    theDiv.style.color = '#333';
    theDiv.style.padding = '4px';
    theDiv.style.position = 'absolute';
    theDiv.style.top = 5 + window.Fruity.getScrolledY() + 'px';
    theDiv.style.right = '5px';
    theDiv.style.zIndex = 999;
    theDiv.style.display = 'none';
    var msgObj = document.createTextNode(msg);
    theDiv.appendChild(msgObj);    
    theDiv.setAttribute('id', 'fruity-cornerMessage'); // used to retrieve DIV later on   
    document.body.appendChild(theDiv); 
    new Effect.Appear(theDiv, {duration: 0.3});  
    // hide
    this.hide = function() {
      new Effect.Fade('fruity-cornerMessage', {duration: 0.3});
      window.setTimeout("document.body.removeChild($('fruity-cornerMessage'))", 300);
    };
  };
  
  ////////////////////////////////// OVERLAY ///////////////////////////////////////////////////////////////////////////////////////////////////////// 
  
  // Overlay
  this.Overlay = function() {
    var opacityEnd = 75; // how opaque
    
    // create element
    var myOverlay = document.createElement("div");
    myOverlay.setAttribute('id', 'fruity-myOverlay');
    myOverlay.style.width = '100%';
    myOverlay.style.height = '100%';
    myOverlay.style.position = 'absolute';
    myOverlay.style.top = 0;
    myOverlay.style.left = 0;
    myOverlay.style.backgroundColor = '#000';
    myOverlay.style.zIndex = 1;
    myOverlay.style.display = 'none';
    
    document.body.appendChild(myOverlay);
    window.Fruity.setOpacity(myOverlay, opacityEnd);
    new Effect.Appear(myOverlay, {duration: 0.4});
    
    this.hide = function() {
      new Effect.Fade('fruity-myOverlay', {duration: 0.3});
      window.setTimeout("document.body.removeChild($('fruity-myOverlay'))", 300);
    }
  }
  
  ////////////////////////////////// BUBBLE TIP /////////////////////////////////////////////////////////////////////////////////////////////////////  
  
  this.BubbleTip = function(obj, text) {
  
    this.obj = obj;
    this.id = 'BubbleTip_' + (Math.ceil(Math.random() * 100));
    this.text = text;
    this.path = window.Fruity.FRUITY_PATH + '/images';
    this.ratio = 7/6;
    
    this.show = function () {
    
      // hide onclick
    var onclickAction= "if ($('" + this.id + "') == null) return;" +                        
                         "if (window.ActiveXObject) {" + 
                            "$('" + this.id + "-top-left').style.backgroundImage = 'url(" + this.path + "BubbleTip-top-left-noshadow.gif)';" + 
                            "$('" + this.id + "-top-center').style.backgroundImage = 'url(" + this.path + "BubbleTip-top-center-noshadow.gif)';" + 
                            "$('" + this.id + "-top-right').style.backgroundImage = 'url(" + this.path + "BubbleTip-top-right-noshadow.gif)';" + 
                            "$('" + this.id + "-middle-left').style.backgroundImage = 'url(" + this.path + "BubbleTip-middle-left-noshadow.gif)';" + 
                            "$('" + this.id + "-middle-right').style.backgroundImage = 'url(" + this.path + "BubbleTip-middle-right-noshadow.gif)';" + 
                            "$('" + this.id + "-bottom-left').style.backgroundImage = 'url(" + this.path + "BubbleTip-bottom-left-noshadow.gif)';" + 
                            "$('" + this.id + "-bottom-center').style.backgroundImage = 'url(" + this.path + "BubbleTip-bottom-center-noshadow.gif)';" + 
                            "$('" + this.id + "-bottom-right').style.backgroundImage = 'url(" + this.path + "BubbleTip-bottom-right-noshadow.gif)';" + 
                          "}" + 
                            "new Effect.Parallel([" + 
                              "new Effect.Move($('" + this.id + "'), {sync: true, x: 0, y: -45, mode: 'relative'})," + 
                              "new Effect.Opacity($('" + this.id + "'), {sync: true, from: 1, to: 0})" +  
                            "], {" + 
                              "duration: 0.7," + 
                              "delay: 0" + 
                            "});" + 
                            // following - removing the object, is not working (FF3)                         
                            // "if ($('" + this.id + "') != null)" + 
                            // "window.setTimeout(\"$('" + this.id + "').parentNode.removeChild($('" + this.id + "'));\", 800);" + 
                            "";
    
      // build HTML
      var html = '';
      html += '<table style="cursor: pointer;" onclick="' + onclickAction + '" width="100%" height="100%" id="' + this.id + '-table" cellspacing="0" cellpadding="0" border="0">';
      html += '<tr><td id="' + this.id + '-top-left"></td><td id="' + this.id + '-top-center"></td><td id="' + this.id + '-top-right"></td></tr>';
      html += '<tr><td id="' + this.id + '-middle-left"></td><td id="' + this.id + '-middle-center" align="left" valign="top" style="color: #666;"></td><td id="' + this.id + '-middle-right"></td></tr>';
      html += '<tr><td id="' + this.id + '-bottom-left"></td><td id="' + this.id + '-bottom-center"></td><td id="' + this.id + '-bottom-right"></td></tr>';
      html += '</table>';
    
      // create div
      var div = document.createElement('div');
      div.setAttribute('id', this.id);
      div.style.width = '50px';
      div.style.height = 'auto';
      div.style.display = 'none';
      // add table to div
      div.innerHTML = html;
      
      // insert div
      document.body.appendChild(div);
          
      // style table (except for background images)
      $(this.id + '-top-left').style.width = '20px';
      $(this.id + '-top-left').style.height = '20px';
      $(this.id + '-top-center').style.width = 'auto';
      $(this.id + '-top-center').style.height = '20px';
      $(this.id + '-top-center').style.backgroundRepeat = 'repeat-x';
      $(this.id + '-top-right').style.width = '20px';
      $(this.id + '-top-right').style.height = '20px';
      $(this.id + '-top-right').style.backgroundPosition = 'top right';
      $(this.id + '-middle-left').style.width = '20px';
      $(this.id + '-middle-left').style.height = 'auto';
      $(this.id + '-middle-left').style.backgroundRepeat = 'repeat-y';
      $(this.id + '-middle-center').style.width = 'auto';
      $(this.id + '-middle-center').style.height = 'auto';
      $(this.id + '-middle-center').style.backgroundColor = '#fff';
      $(this.id + '-middle-right').style.width = '20px';
      $(this.id + '-middle-right').style.height = 'auto';
      $(this.id + '-middle-right').style.backgroundPosition = 'top right';
      $(this.id + '-middle-right').style.backgroundRepeat = 'repeat-y';
      $(this.id + '-bottom-left').style.width = '20px';
      $(this.id + '-bottom-left').style.height = '24px';
      $(this.id + '-bottom-center').style.width = 'auto';
      $(this.id + '-bottom-center').style.height = '24px';
      $(this.id + '-bottom-center').style.backgroundPosition = 'top center';
      $(this.id + '-bottom-right').style.width = '20px';
      $(this.id + '-bottom-right').style.height = '24px';
      $(this.id + '-bottom-right').style.backgroundPosition = 'top right';
      
      if (window.ActiveXObject) {
        // hide shadow before effect (IE rendering prob workaround)
        $(this.id + '-top-left').style.backgroundImage = 'url(' + this.path + '/BubbleTip-top-left-noshadow.gif)';
        $(this.id + '-top-center').style.backgroundImage = 'url(' + this.path + '/BubbleTip-top-center-noshadow.gif)';
        $(this.id + '-top-right').style.backgroundImage = 'url(' + this.path + '/BubbleTip-top-right-noshadow.gif)';
        $(this.id + '-middle-left').style.backgroundImage = 'url(' + this.path + '/BubbleTip-middle-left-noshadow.gif)';
        $(this.id + '-middle-right').style.backgroundImage = 'url(' + this.path + '/BubbleTip-middle-right-noshadow.gif)';
        $(this.id + '-bottom-left').style.backgroundImage = 'url(' + this.path + '/BubbleTip-bottom-left-noshadow.gif)';
        $(this.id + '-bottom-center').style.backgroundImage = 'url(' + this.path + '/BubbleTip-bottom-center-noshadow.gif)';
        $(this.id + '-bottom-right').style.backgroundImage = 'url(' + this.path + '/BubbleTip-bottom-right-noshadow.gif)';
      } else {
        // if non-IE, show shadow
        $(this.id + '-top-left').style.backgroundImage = 'url(' + this.path + '/BubbleTip-top-left.png)';
        $(this.id + '-top-center').style.backgroundImage = 'url(' + this.path + '/BubbleTip-top-center.png)';
        $(this.id + '-top-right').style.backgroundImage = 'url(' + this.path + '/BubbleTip-top-right.png)';
        $(this.id + '-middle-left').style.backgroundImage = 'url(' + this.path + '/BubbleTip-middle-left.png)';
        $(this.id + '-middle-right').style.backgroundImage = 'url(' + this.path + '/BubbleTip-middle-right.png)';
        $(this.id + '-bottom-left').style.backgroundImage = 'url(' + this.path + '/BubbleTip-bottom-left.png)';
        $(this.id + '-bottom-center').style.backgroundImage = 'url(' + this.path + '/BubbleTip-bottom-center.png)';
        $(this.id + '-bottom-right').style.backgroundImage = 'url(' + this.path + '/BubbleTip-bottom-right.png)';
      }
      
      // add content
      $(this.id + '-middle-center').innerHTML = this.text;
      
      // adjust dimensions
      while ($(this.id).getWidth()/$(this.id).getHeight() <= this.ratio) {
        $(this.id).style.width = parseInt($(this.id).style.width) + 5 + 'px';
      }
      
      // position BubbleTip
      var pos = Element.extend(this.obj).cumulativeOffset();
      var posX = pos[0];
      var posY = pos[1];
      $(this.id).style.position = 'absolute';
      $(this.id).style.zIndex = '9999';
      $(this.id).style.left = posX - (parseInt($(this.id).style.width)/2) + (this.obj.getWidth()/2) + 'px';  
      $(this.id).style.top = posY - $(this.id).getHeight() + 10 + 'px'; 
      
      // show BubbleTip
      new Effect.Appear($(this.id), {duration: 0.3});
      
      // show shadow right after effect (IE rendering prob workaround)
      if (window.ActiveXObject) {
         window.setTimeout("" + 
                           "$(this.id + '-top-left').style.backgroundImage = 'url(" + this.path + "BubbleTip-top-left.png)';" + 
                           "$(this.id + '-top-center').style.backgroundImage = 'url(" + this.path + "BubbleTip-top-center.png)';" + 
                           "$(this.id + '-top-right').style.backgroundImage = 'url(" + this.path + "BubbleTip-top-right.png)';" + 
                           "$(this.id + '-middle-left').style.backgroundImage = 'url(" + this.path + "BubbleTip-middle-left.png)';" + 
                           "$(this.id + '-middle-right').style.backgroundImage = 'url(" + this.path + "BubbleTip-middle-right.png)';" + 
                           "$(this.id + '-bottom-left').style.backgroundImage = 'url(" + this.path + "BubbleTip-bottom-left.png)';" + 
                           "$(this.id + '-bottom-center').style.backgroundImage = 'url(" + this.path + "BubbleTip-bottom-center.png)';" + 
                           "$(this.id + '-bottom-right').style.backgroundImage = 'url(" + this.path + "BubbleTip-bottom-right.png)';" +
                           "", 300);
      }
    }
    
    this.hide = function() {
      // make sure object is there
      if ($(this.id) == null) return;
      // hide shadow before effect (IE rendering prob workaround)
      if (window.ActiveXObject) {
        $(this.id + '-top-left').style.backgroundImage = 'url(' + this.path + '/BubbleTip-top-left-noshadow.gif)';
        $(this.id + '-top-center').style.backgroundImage = 'url(' + this.path + '/BubbleTip-top-center-noshadow.gif)';
        $(this.id + '-top-right').style.backgroundImage = 'url(' + this.path + '/BubbleTip-top-right-noshadow.gif)';
        $(this.id + '-middle-left').style.backgroundImage = 'url(' + this.path + '/BubbleTip-middle-left-noshadow.gif)';
        $(this.id + '-middle-right').style.backgroundImage = 'url(' + this.path + '/BubbleTip-middle-right-noshadow.gif)';
        $(this.id + '-bottom-left').style.backgroundImage = 'url(' + this.path + '/BubbleTip-bottom-left-noshadow.gif)';
        $(this.id + '-bottom-center').style.backgroundImage = 'url(' + this.path + '/BubbleTip-bottom-center-noshadow.gif)';
        $(this.id + '-bottom-right').style.backgroundImage = 'url(' + this.path + '/BubbleTip-bottom-right-noshadow.gif)';
      }
        new Effect.Parallel([
          new Effect.Move($(this.id), {sync: true, x: 0, y: -45, mode: 'relative'}), 
          new Effect.Opacity($(this.id), { sync: true, from: 1, to: 0 }) 
        ], { 
          duration: 0.7,
          delay: 0
        });
        if ($(this.id) != null) window.setTimeout("$('" + this.id + "').parentNode.removeChild($('" + this.id + "'));", 800);
      return;
    }
    
    // show tip
    this.show();    
  }  
  
  ////////////////////////////////// BUBBLE DIALOG ////////////////////////////////////////////////////////////////////////////////////////////////  
  
  this.BubbleDialog = function(refObj, text) {
    // $('debug').value = '';
    // ref object
    this.refObj = Element.extend(refObj);
    this.refObjWidth = 0;
    this.refObjHeight = 0;
    this.refObjPos = [0,0];
    this.refObjPosX = 0;
    this.refObjPosY = 0;
    // bubble data
    this.id = 'BubbleDialog_' + Math.ceil(Math.random() * 100);
    this.text = text;
    this.imageFolder = window.Fruity.FRUITY_PATH + '/images';
    this.bubbleHTML = '';
    this.currWidth = 0;
    this.currHeight = 0;
    this.resizeToWidth = 0;
    this.resizeToHeight = 0;
    this.bubblePos = [0,0];
    this.bubblePosX = 0;
    this.bubblePosY = 0;
    
    this.open = function () {  
  
      // build HTML
      bubbleHTML = '';
      bubbleHTML += '<table id="BubbleDialog-table" style="padding: 0; margin: 0;width: 1%; height: 1%;" cellspacing="0" cellpadding="0" border="0">';
      bubbleHTML += '<tr>';
      bubbleHTML += '<td id="BubbleDialog-top-left">';
            // hack: IE has probs showing left column, add spacer div to solve the problem
            bubbleHTML += '<div style="width: 20px;height:20px;margin: 0;padding: 0;">';
      bubbleHTML += '</td>';
      bubbleHTML += '<td id="BubbleDialog-top-center"></td>';
      bubbleHTML += '<td id="BubbleDialog-top-right">';
        bubbleHTML += '<a style="margin:0;padding:0;"href="javascript:void(0);" onclick="window.BubbleDialogCloseById(\'' + this.id + '\');">';
        bubbleHTML += '<img src="' + this.imageFolder + '/BubbleDialog-close-button-trans.png" style="border: 0;">';
        bubbleHTML += '</a>';
      bubbleHTML += '</td>';
      bubbleHTML += '</tr>';
      bubbleHTML += '<tr>';
      bubbleHTML += '<td id="BubbleDialog-middle-left"></td>';
      bubbleHTML += '<td id="BubbleDialog-middle-center" align="left" valign="top"></td>';
      bubbleHTML += '<td id="BubbleDialog-middle-right"></td>';
      bubbleHTML += '</tr>';
      bubbleHTML += '<tr>';
      bubbleHTML += '<td id="BubbleDialog-bottom-left"></td>';
      bubbleHTML += '<td id="BubbleDialog-bottom-center"></td>';
      bubbleHTML += '<td id="BubbleDialog-bottom-right"></td>';
      bubbleHTML += '</tr>';
      bubbleHTML += '</table>';
    
      // create div
      var div = document.createElement('div');
      div.setAttribute('id', this.id);
      div.style.width = 'auto';
      div.style.height = 'auto';
      div.style.position = 'absolute';
      div.style.top = 0;
      div.style.left = 0;
      div.style.display = 'none';
      // div.style.border = '1px dotted red';
      // add table to div
      div.innerHTML = bubbleHTML;
      
      // insert div
      document.body.appendChild(div);
          
      // style table (except for background images)
      $('BubbleDialog-top-left').style.width = '20px';
      $('BubbleDialog-top-left').style.height = '20px';
      $('BubbleDialog-top-center').style.width = 'auto';
      $('BubbleDialog-top-center').style.height = '20px';
      $('BubbleDialog-top-center').style.backgroundPosition = 'top center';
      $('BubbleDialog-top-right').style.width = '20px';
      $('BubbleDialog-top-right').style.height = '20px';
      $('BubbleDialog-top-right').style.backgroundPosition = 'top right';
      $('BubbleDialog-middle-left').style.width = '20px';
      $('BubbleDialog-middle-left').style.height = 'auto';
      $('BubbleDialog-middle-left').style.backgroundPosition = 'top left';
      $('BubbleDialog-middle-left').style.backgroundRepeat = 'repeat-y';
      $('BubbleDialog-middle-center').style.width = 'auto';
      $('BubbleDialog-middle-center').style.height = 'auto';
      $('BubbleDialog-middle-center').style.backgroundColor = '#fff';
      $('BubbleDialog-middle-right').style.width = '20px';
      $('BubbleDialog-middle-right').style.height = 'auto';
      $('BubbleDialog-middle-right').style.backgroundPosition = 'top right';
      $('BubbleDialog-middle-right').style.backgroundRepeat = 'repeat-y';
      $('BubbleDialog-bottom-left').style.width = '20px';
      $('BubbleDialog-bottom-left').style.height = '24px';
      $('BubbleDialog-bottom-center').style.width = 'auto';
      $('BubbleDialog-bottom-center').style.height = '24px';
      $('BubbleDialog-bottom-center').style.backgroundPosition = 'top center';
      $('BubbleDialog-bottom-right').style.width = '20px';
      $('BubbleDialog-bottom-right').style.height = '24px';
      $('BubbleDialog-bottom-right').style.backgroundPosition = 'top right';
      
      if (window.ActiveXObject) {
        // hide shadow before effect (IE rendering prob workaround)
        $('BubbleDialog-top-left').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-top-left-noshadow.gif)';
        $('BubbleDialog-top-center').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-top-center-noshadow.gif)';
        $('BubbleDialog-top-right').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-top-right-noshadow.gif)';
        $('BubbleDialog-middle-left').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-middle-left-noshadow.gif)';
        $('BubbleDialog-middle-right').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-middle-right-noshadow.gif)';
        $('BubbleDialog-bottom-left').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-bottom-left-noshadow.gif)';
        $('BubbleDialog-bottom-center').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-bottom-center-noshadow.gif)';
        $('BubbleDialog-bottom-right').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-bottom-right-noshadow.gif)';
      } else {
        // if non-IE, show shadow
        $('BubbleDialog-top-left').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-top-left.png)';
        $('BubbleDialog-top-center').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-top-center.png)';
        $('BubbleDialog-top-right').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-top-right.png)';
        $('BubbleDialog-middle-left').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-middle-left.png)';
        $('BubbleDialog-middle-right').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-middle-right.png)';
        $('BubbleDialog-bottom-left').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-bottom-left.png)';
        $('BubbleDialog-bottom-center').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-bottom-center.png)';
        $('BubbleDialog-bottom-right').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-bottom-right.png)';
      }
      
      // add content
      $('BubbleDialog-middle-center').innerHTML += this.text;
      
      // get dimesions
      this.currWidth = $(this.id).getWidth();
      this.currHeight = $(this.id).getHeight();
      this.refObjWidth = this.refObj.getWidth();
      this.refObjHeight = this.refObj.getHeight();
      
      // specify div dimensions (IE)
      $(this.id).style.width = this.currWidth + 'px';
      $(this.id).style.height = this.currHeight + 'px';
      // give table exact size (IE)
      $('BubbleDialog-table').style.width = '100%';
      $('BubbleDialog-table').style.height = '100%';
       
      // get positions
      this.refObjPos = this.refObj.cumulativeOffset();
      this.refObjPosX = this.refObjPos[0];
      this.refObjPosY = this.refObjPos[1];
      this.bubblePosX = this.refObjPosX - this.currWidth/2 + this.refObjWidth/2;
      this.bubblePosY = this.refObjPosY - this.currHeight - 2;
      
      // position bubble
      if (Element.getOffsetParent(refObj).getStyle('position') == 'fixed') {
        // if position of first positioned block element is 'fixed', set bubble position as fixed, too.
        $(this.id).style.position = 'fixed';
      } else {
        $(this.id).style.position = 'absolute';
      }
      $(this.id).style.zIndex = '9999';
      $(this.id).style.left = this.bubblePosX + 'px';  
      $(this.id).style.top =  this.bubblePosY + 5 +'px'; 
      
      // show shadow right after effect (IE rendering prob workaround)
      if (window.ActiveXObject) {
         window.setTimeout("" + 
                           "$('BubbleDialog-top-left').style.backgroundImage = 'url(" + this.imageFolder + "BubbleDialog-top-left.png)';" + 
                           "$('BubbleDialog-top-center').style.backgroundImage = 'url(" + this.imageFolder + "BubbleDialog-top-center.png)';" + 
                           "$('BubbleDialog-top-right').style.backgroundImage = 'url(" + this.imageFolder + "BubbleDialog-top-right.png)';" + 
                           "$('BubbleDialog-middle-left').style.backgroundImage = 'url(" + this.imageFolder + "BubbleDialog-middle-left.png)';" + 
                           "$('BubbleDialog-middle-right').style.backgroundImage = 'url(" + this.imageFolder + "BubbleDialog-middle-right.png)';" + 
                           "$('BubbleDialog-bottom-left').style.backgroundImage = 'url(" + this.imageFolder + "BubbleDialog-bottom-left.png)';" + 
                           "$('BubbleDialog-bottom-center').style.backgroundImage = 'url(" + this.imageFolder + "BubbleDialog-bottom-center.png)';" + 
                           "$('BubbleDialog-bottom-right').style.backgroundImage = 'url(" + this.imageFolder + "BubbleDialog-bottom-right.png)';" +
                           "", 300);
      }
      new Effect.Appear($(this.id));
    };
     
    
    this.resizeX = function(newSize) {
      alert('not implemented');
    };
    
    this.resizeY = function(newHeight) {
      this.resizeToHeight = newHeight;
      // get updated data
      // // $('debug').value += "\n" + 'Need bubblePos.';
      // // $('debug').value += "\n" + '--> bubble (object): ' + $(this.id);
      // // $('debug').value += "\n" + '--> bubble (style.position): ' + $(this.id).style.position;    
      // // $('debug').value += "\n" + 'Trying to get bubble position with Prototype...';
      this.bubblePos = $(this.id).cumulativeOffset();
      // // $('debug').value += "\n" + '--> bubblePos: ' + this.bubblePos;
      this.bubblePosY = this.bubblePos[1];
      
      // // $('debug').value += "\n" + 'Trying to get bubble position with Fruity...';
      this.bubblePosY = window.Fruity.posY($(this.id));
      // // $('debug').value += "\n" + '--> bubblePosY: ' + this.bubblePosY;
      
      this.currHeight = $(this.id).getHeight();
      
      // CALCULATE DATA
      // size
      ratio = Math.ceil((this.resizeToHeight/this.currHeight) * 100);
      if (ratio == 100) {
        // $('debug').value += "\n" + 'no change in ratio...';
        return;
      } 
      // position
      // $('debug').value += "\n" + 'YES change in ratio';
      var moveBy = 0;
      // $('debug').value += "\n" + 'resizeToHeight: ' + this.resizeToHeight;
      // $('debug').value += "\n" + 'refObjPosY: ' + this.refObjPosY;
      if (this.resizeToHeight > this.refObjPosY) {
      // dialog WILL NOT fit
        // $('debug').value += "\n" + 'Dialog will NOT fit';
        moveBy = 25 - document.viewport.getScrollOffsets()[1] - this.bubblePosY;
      } else {
        // dialog WILL fit
        // $('debug').value += "\n" + 'Dialog WILL fit';
        // // $('debug').value += "\n" + 'getting moveBy...';
        // // $('debug').value += "\n" + '--> this is what I\'ll exec: (' + this.refObjPosY + '-'  + this.resizeToHeight + '- 2) - ' + this.bubblePosY;
        moveBy = this.refObjPosY - this.resizeToHeight - 2 - this.bubblePosY;
      }
      
      // MOVE/RESIZE    
       
      this.resizeBefore = function () {
        // hide arrow 
        $('BubbleDialog-bottom-center').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-bottom-center-noarrow.png)';
        // resize it if content is a frame
        var frame = $('BubbleDialog-middle-center').getElementsByTagName('iframe')[0];      
        if (frame !== null) {
          Element.extend(frame); 
          // hide scrollbars
          frame.scrolling = 'no';
          // $('debug').value += "\n" + 'current frame height: ' + frame.getHeight();
          if (frame.getHeight() > this.resizeToHeight) {
            // $('debug').value += "\n" + 'resizing frame BEFORE animation';
            // $('debug').value += "\n" + 'TD is ' + $('BubbleDialog-middle-center').getHeight() + ' tall.';
            frame.height = this.resizeToHeight-44 + 'px';
          }
        }
      };
      
      this.resizeAfter = function (imageFolder, resizeToHeight, refObjPosY) {
        // alert('--> path: ' + imageFolder);
        // resize it if content is a frame
        var frame = $('BubbleDialog-middle-center').getElementsByTagName('iframe')[0];      
        if (frame !== null) {
          Element.extend(frame); 
          if (frame.getHeight() < resizeToHeight) {
            // $('debug').value += "\n" + 'resizing frame AFTER animation';
            // $('debug').value += "\n" + 'TD is ' + $('BubbleDialog-middle-center').getHeight() + ' tall.';
            frame.height = $('BubbleDialog-middle-center').getHeight() + 'px';
            // un-hide scrollbars
            frame.scrolling = 'auto';
          }
        }
        
        // show arrow again (if not too tall)
        if (resizeToHeight < refObjPosY) {
          $('BubbleDialog-bottom-center').style.backgroundImage = 'url(' + imageFolder + 'BubbleDialog-bottom-center.png)';
          hideOverlay();
        } else {
        // show overlay if taller
        showOverlay();
        }
      };
       
      // RESIZE
      this.resizeBefore();
      new Effect.Parallel([
                           new Effect.Move($(this.id), {sync: true, x: 0, y: moveBy, mode: 'relative'}), 
                           new Effect.Scale($(this.id), ratio, {
                                             sync: true, 
                                             scaleX: false, 
                                             scaleY: true
                                             }) 
      ], { 
        duration: 0.7,
        delay: 0
      });    
      // Scriptaculous afterFinish is not working, using setTimeout
      window.bubbleDialogresizeAfter = this.resizeAfter;
      window.setTimeout("bubbleDialogresizeAfter('" + this.imageFolder + "', " + this.resizeToHeight + ", " + this.refObjPosY + ");", 700);
  
    };
    
    this.close = function() {
        // hide shadow before effect (IE rendering prob workaround)
        if (window.ActiveXObject) {
          $('BubbleDialog-top-left').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-top-left-noshadow.gif)';
          $('BubbleDialog-top-center').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-top-center-noshadow.gif)';
          $('BubbleDialog-top-right').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-top-right-noshadow.gif)';
          $('BubbleDialog-middle-left').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-middle-left-noshadow.gif)';
          $('BubbleDialog-middle-right').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-middle-right-noshadow.gif)';
          $('BubbleDialog-bottom-left').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-bottom-left-noshadow.gif)';
          $('BubbleDialog-bottom-center').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-bottom-center-noshadow.gif)';
          $('BubbleDialog-bottom-right').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-bottom-right-noshadow.gif)';
        }
          new Effect.Parallel([
            new Effect.Move($(this.id), {sync: true, x: 0, y: -45, mode: 'relative'}), 
            new Effect.Opacity($(this.id), { sync: true, from: 1, to: 0 }) 
          ], { 
            duration: 0.7,
            delay: 0
          });        
      window.setTimeout("$(this.id).parentNode.removeChild($(this.id));", 800);
      hideOverlay();
      return;
    };
    
      this.closeById = function(bubbleId) {
        // hide shadow before effect (IE rendering prob workaround)
        if (window.ActiveXObject) {
          $('BubbleDialog-top-left').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-top-left-noshadow.gif)';
          $('BubbleDialog-top-center').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-top-center-noshadow.gif)';
          $('BubbleDialog-top-right').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-top-right-noshadow.gif)';
          $('BubbleDialog-middle-left').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-middle-left-noshadow.gif)';
          $('BubbleDialog-middle-right').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-middle-right-noshadow.gif)';
          $('BubbleDialog-bottom-left').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-bottom-left-noshadow.gif)';
          $('BubbleDialog-bottom-center').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-bottom-center-noshadow.gif)';
          $('BubbleDialog-bottom-right').style.backgroundImage = 'url(' + this.imageFolder + '/BubbleDialog-bottom-right-noshadow.gif)';
        }
          new Effect.Parallel([
            new Effect.Move($(bubbleId), {sync: true, x: 0, y: -45, mode: 'relative'}), 
            new Effect.Opacity($(bubbleId), { sync: true, from: 1, to: 0 }) 
          ], { 
            duration: 0.7,
            delay: 0
          });        
      window.setTimeout("$('" + bubbleId + "').parentNode.removeChild($('" + bubbleId + "'));", 800);
      hideOverlay();
      return;
    };
    
    window.BubbleDialogCloseById = this.closeById;
    
    // open right away
    this.open();
  }  
  
  ////////////////////////////////// BUBBLE FRAME /////////////////////////////////////////////////////////////////////////////////////////////// 
  
  this.BubbleFrame = function(frameSrc, frameWidth, frameHeight) {
    // $('debug').value = '';
    // bubble data
    this.id = 'BubbleFrame_' + Math.ceil(Math.random() * 100);
    this.frameSrc = frameSrc;
    this.bubbleHTML = '';
    this.currWidth = 0;
    this.currHeight = 0;
    this.resizeToWidth = 0;
    this.resizeToHeight = 0;
    this.bubblePos = [0,0];
    this.bubblePosX = 0;
    this.bubblePosY = 0;
    
    this.open = function () {  
  
      // build HTML
      bubbleHTML = '';
      bubbleHTML += '<table id="BubbleFrame-table" style="padding: 0; margin: 0;width: 1%; height: 1%;" cellspacing="0" cellpadding="0" border="0">';
      bubbleHTML += '<tr>';
      bubbleHTML += '<td id="BubbleFrame-top-left">';
      // hack: IE has probs showing left column, add spacer div to solve the problem
      bubbleHTML += '<div style="width: 20px;height:20px;margin: 0;padding: 0;">';
      bubbleHTML += '</td>';
      bubbleHTML += '<td id="BubbleFrame-top-center"></td>';
      bubbleHTML += '<td id="BubbleFrame-top-right">';
      bubbleHTML += '<a style="margin:0;padding:0;"href="javascript:void(0);" onclick="window.BubbleFrameCloseById(\'' + this.id + '\');">';
      bubbleHTML += '<img src="' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-close-button-trans.png" style="border: 0;">';
      bubbleHTML += '</a>';
      bubbleHTML += '</td>';
      bubbleHTML += '</tr>';
      bubbleHTML += '<tr>';
      bubbleHTML += '<td id="BubbleFrame-middle-left"></td>';
      bubbleHTML += '<td id="BubbleFrame-middle-center" align="left" valign="top"></td>';
      bubbleHTML += '<td id="BubbleFrame-middle-right"></td>';
      bubbleHTML += '</tr>';
      bubbleHTML += '<tr>';
      bubbleHTML += '<td id="BubbleFrame-bottom-left"></td>';
      bubbleHTML += '<td id="BubbleFrame-bottom-center"></td>';
      bubbleHTML += '<td id="BubbleFrame-bottom-right"></td>';
      bubbleHTML += '</tr>';
      bubbleHTML += '</table>';
    
      // create div
      var div = document.createElement('div');
      div.setAttribute('id', this.id);
      div.style.width = 'auto';
      div.style.height = 'auto';
      div.style.position = 'absolute';
      div.style.top = 0;
      div.style.left = 0;
      div.style.display = 'none';
      // div.style.border = '1px dotted red';
      // add table to div
      div.innerHTML = bubbleHTML;
      
      // insert div
      document.body.appendChild(div);
          
      // style table (except for background images)
      $('BubbleFrame-top-left').style.width = '20px';
      $('BubbleFrame-top-left').style.height = '20px';
      $('BubbleFrame-top-center').style.width = 'auto';
      $('BubbleFrame-top-center').style.height = '20px';
      $('BubbleFrame-top-center').style.backgroundPosition = 'top center';
      $('BubbleFrame-top-right').style.width = '20px';
      $('BubbleFrame-top-right').style.height = '20px';
      $('BubbleFrame-top-right').style.backgroundPosition = 'top right';
      $('BubbleFrame-middle-left').style.width = '20px';
      $('BubbleFrame-middle-left').style.height = 'auto';
      $('BubbleFrame-middle-left').style.backgroundPosition = 'top left';
      $('BubbleFrame-middle-left').style.backgroundRepeat = 'repeat-y';
      $('BubbleFrame-middle-center').style.width = 'auto';
      $('BubbleFrame-middle-center').style.height = 'auto';
      $('BubbleFrame-middle-center').style.backgroundColor = '#fff';
      $('BubbleFrame-middle-right').style.width = '20px';
      $('BubbleFrame-middle-right').style.height = 'auto';
      $('BubbleFrame-middle-right').style.backgroundPosition = 'top right';
      $('BubbleFrame-middle-right').style.backgroundRepeat = 'repeat-y';
      $('BubbleFrame-bottom-left').style.width = '20px';
      $('BubbleFrame-bottom-left').style.height = '20px';
      $('BubbleFrame-bottom-center').style.width = 'auto';
      $('BubbleFrame-bottom-center').style.height = '20px';
      $('BubbleFrame-bottom-center').style.backgroundPosition = 'top center';
      $('BubbleFrame-bottom-right').style.width = '20px';
      $('BubbleFrame-bottom-right').style.height = '20px';
      $('BubbleFrame-bottom-right').style.backgroundPosition = 'top right';
      
      if (window.ActiveXObject) {
        // hide shadow before effect (IE rendering prob workaround)
        $('BubbleFrame-top-left').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-top-left-noshadow.gif)';
        $('BubbleFrame-top-center').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-top-center-noshadow.gif)';
        $('BubbleFrame-top-right').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-top-right-noshadow.gif)';
        $('BubbleFrame-middle-left').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-middle-left-noshadow.gif)';
        $('BubbleFrame-middle-right').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-middle-right-noshadow.gif)';
        $('BubbleFrame-bottom-left').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-bottom-left-noshadow.gif)';
        $('BubbleFrame-bottom-center').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-bottom-center-noarrow-noshadow.gif)';
        $('BubbleFrame-bottom-right').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-bottom-right-noshadow.gif)';
      } else {
        // if non-IE, show shadow
        $('BubbleFrame-top-left').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-top-left.png)';
        $('BubbleFrame-top-center').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-top-center.png)';
        $('BubbleFrame-top-right').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-top-right.png)';
        $('BubbleFrame-middle-left').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-middle-left.png)';
        $('BubbleFrame-middle-right').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-middle-right.png)';
        $('BubbleFrame-bottom-left').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-bottom-left.png)';
        $('BubbleFrame-bottom-center').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-bottom-center-noarrow.png)';
        $('BubbleFrame-bottom-right').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-bottom-right.png)';
      }
      
      // add content
      var myFrame = document.createElement('iframe');      
      myFrame.style.border = 0;
      myFrame.style.width = frameWidth + 'px';
      myFrame.style.height = frameHeight + 'px';
      myFrame.src = this.frameSrc;
      $('BubbleFrame-middle-center').appendChild(myFrame);
      
      // get dimensions
      this.currWidth = frameWidth + 20*2;
      this.currHeight = frameHeight + 20*2;
      
      // specify div dimensions (IE)
      $(this.id).style.width = this.currWidth + 'px';
      $(this.id).style.height = this.currHeight + 'px';
      // give table exact size (IE)
      $('BubbleFrame-table').style.width = '100%';
      $('BubbleFrame-table').style.height = '100%';
      
      // position bubble
      $(this.id).style.zIndex = '9999';
      $(this.id).style.left = window.Fruity.getViewportSize()[0]/2 - this.currWidth/2 + 'px';  
      $(this.id).style.top =  window.Fruity.getViewportSize()[1]/2 - this.currHeight/2 + 'px'; 
      
      // show shadow right after effect (IE rendering prob workaround)
      if (window.ActiveXObject) {
         window.setTimeout("" + 
                           "$('BubbleFrame-top-left').style.backgroundImage = 'url(" + this.imageFolder + "BubbleFrame-top-left.png)';" + 
                           "$('BubbleFrame-top-center').style.backgroundImage = 'url(" + this.imageFolder + "BubbleFrame-top-center.png)';" + 
                           "$('BubbleFrame-top-right').style.backgroundImage = 'url(" + this.imageFolder + "BubbleFrame-top-right.png)';" + 
                           "$('BubbleFrame-middle-left').style.backgroundImage = 'url(" + this.imageFolder + "BubbleFrame-middle-left.png)';" + 
                           "$('BubbleFrame-middle-right').style.backgroundImage = 'url(" + this.imageFolder + "BubbleFrame-middle-right.png)';" + 
                           "$('BubbleFrame-bottom-left').style.backgroundImage = 'url(" + this.imageFolder + "BubbleFrame-bottom-left.png)';" + 
                           "$('BubbleFrame-bottom-center').style.backgroundImage = 'url(" + this.imageFolder + "BubbleFrame-bottom-center.png)';" + 
                           "$('BubbleFrame-bottom-right').style.backgroundImage = 'url(" + this.imageFolder + "BubbleFrame-bottom-right.png)';" +
                           "", 300);
      }
      new Effect.Appear($(this.id));
    };
     
    
    this.resizeX = function(newSize) {
      alert('not implemented');
    };
    
    this.resizeY = function(newHeight) {
      this.resizeToHeight = newHeight;
      // get updated data
      // // $('debug').value += "\n" + 'Need bubblePos.';
      // // $('debug').value += "\n" + '--> bubble (object): ' + $(this.id);
      // // $('debug').value += "\n" + '--> bubble (style.position): ' + $(this.id).style.position;    
      // // $('debug').value += "\n" + 'Trying to get bubble position with Prototype...';
      this.bubblePos = $(this.id).cumulativeOffset();
      // // $('debug').value += "\n" + '--> bubblePos: ' + this.bubblePos;
      this.bubblePosY = this.bubblePos[1];
      
      // // $('debug').value += "\n" + 'Trying to get bubble position with Fruity...';
      this.bubblePosY = window.Fruity.posY($(this.id));
      // // $('debug').value += "\n" + '--> bubblePosY: ' + this.bubblePosY;
      
      this.currHeight = $(this.id).getHeight();
      
      // CALCULATE DATA
      // size
      ratio = Math.ceil((this.resizeToHeight/this.currHeight) * 100);
      if (ratio == 100) {
        // $('debug').value += "\n" + 'no change in ratio...';
        return;
      } 
      // position
      // $('debug').value += "\n" + 'YES change in ratio';
      var moveBy = 0;
      // $('debug').value += "\n" + 'resizeToHeight: ' + this.resizeToHeight;
      // $('debug').value += "\n" + 'refObjPosY: ' + this.refObjPosY;
      if (this.resizeToHeight > this.refObjPosY) {
      // dialog WILL NOT fit
        // $('debug').value += "\n" + 'Dialog will NOT fit';
        moveBy = 25 - document.viewport.getScrollOffsets()[1] - this.bubblePosY;
      } else {
        // dialog WILL fit
        // $('debug').value += "\n" + 'Dialog WILL fit';
        // // $('debug').value += "\n" + 'getting moveBy...';
        // // $('debug').value += "\n" + '--> this is what I\'ll exec: (' + this.refObjPosY + '-'  + this.resizeToHeight + '- 2) - ' + this.bubblePosY;
        moveBy = this.refObjPosY - this.resizeToHeight - 2 - this.bubblePosY;
      }
      
      // MOVE/RESIZE    
       
      this.resizeBefore = function () {
        // hide arrow 
        $('BubbleFrame-bottom-center').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-bottom-center-noarrow.png)';
        // resize it if content is a frame
        var frame = $('BubbleFrame-middle-center').getElementsByTagName('iframe')[0];      
        if (frame !== null) {
          Element.extend(frame); 
          // hide scrollbars
          frame.scrolling = 'no';
          // $('debug').value += "\n" + 'current frame height: ' + frame.getHeight();
          if (frame.getHeight() > this.resizeToHeight) {
            // $('debug').value += "\n" + 'resizing frame BEFORE animation';
            // $('debug').value += "\n" + 'TD is ' + $('BubbleFrame-middle-center').getHeight() + ' tall.';
            frame.height = this.resizeToHeight-44 + 'px';
          }
        }
      };
      
      this.resizeAfter = function (imageFolder, resizeToHeight, refObjPosY) {
        // alert('--> path: ' + imageFolder);
        // resize it if content is a frame
        var frame = $('BubbleFrame-middle-center').getElementsByTagName('iframe')[0];      
        if (frame !== null) {
          Element.extend(frame); 
          if (frame.getHeight() < resizeToHeight) {
            // $('debug').value += "\n" + 'resizing frame AFTER animation';
            // $('debug').value += "\n" + 'TD is ' + $('BubbleFrame-middle-center').getHeight() + ' tall.';
            frame.height = $('BubbleFrame-middle-center').getHeight() + 'px';
            // un-hide scrollbars
            frame.scrolling = 'auto';
          }
        }
        
        // show arrow again (if not too tall)
        if (resizeToHeight < refObjPosY) {
          $('BubbleFrame-bottom-center').style.backgroundImage = 'url(' + imageFolder + 'BubbleFrame-bottom-center.png)';
          hideOverlay();
        } else {
        // show overlay if taller
        showOverlay();
        }
      };
       
      // RESIZE
      this.resizeBefore();
      new Effect.Parallel([
                           new Effect.Move($(this.id), {sync: true, x: 0, y: moveBy, mode: 'relative'}), 
                           new Effect.Scale($(this.id), ratio, {
                                             sync: true, 
                                             scaleX: false, 
                                             scaleY: true
                                             }) 
      ], { 
        duration: 0.7,
        delay: 0
      });    
      // Scriptaculous afterFinish is not working, using setTimeout
      window.BubbleFrameresizeAfter = this.resizeAfter;
      window.setTimeout("BubbleFrameresizeAfter('" + this.imageFolder + "', " + this.resizeToHeight + ", " + this.refObjPosY + ");", 700);
  
    };
    
    this.close = function() {
        // hide shadow before effect (IE rendering prob workaround)
        if (window.ActiveXObject) {
          $('BubbleFrame-top-left').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-top-left-noshadow.gif)';
          $('BubbleFrame-top-center').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-top-center-noshadow.gif)';
          $('BubbleFrame-top-right').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-top-right-noshadow.gif)';
          $('BubbleFrame-middle-left').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-middle-left-noshadow.gif)';
          $('BubbleFrame-middle-right').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-middle-right-noshadow.gif)';
          $('BubbleFrame-bottom-left').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-bottom-left-noshadow.gif)';
          $('BubbleFrame-bottom-center').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-bottom-center-noshadow.gif)';
          $('BubbleFrame-bottom-right').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-bottom-right-noshadow.gif)';
        }
          new Effect.SwitchOff(bubbleId);       
      window.setTimeout("$(this.id).parentNode.removeChild($(this.id));", 800);
      hideOverlay();
      return;
    };
    
      this.closeById = function(bubbleId) {
        // hide shadow before effect (IE rendering prob workaround)
        if (window.ActiveXObject) {
          $('BubbleFrame-top-left').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-top-left-noshadow.gif)';
          $('BubbleFrame-top-center').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-top-center-noshadow.gif)';
          $('BubbleFrame-top-right').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-top-right-noshadow.gif)';
          $('BubbleFrame-middle-left').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-middle-left-noshadow.gif)';
          $('BubbleFrame-middle-right').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-middle-right-noshadow.gif)';
          $('BubbleFrame-bottom-left').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-bottom-left-noshadow.gif)';
          $('BubbleFrame-bottom-center').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-bottom-center-noshadow.gif)';
          $('BubbleFrame-bottom-right').style.backgroundImage = 'url(' + window.Fruity.FRUITY_PATH + '/images/BubbleFrame-bottom-right-noshadow.gif)';
        }
          new Effect.SwitchOff(bubbleId);        
      window.setTimeout("$('" + bubbleId + "').parentNode.removeChild($('" + bubbleId + "'));", 800);
      hideOverlay();
      return;
    };
    
    window.BubbleFrameCloseById = this.closeById;
    
    // open right away
    this.open();
  }    
  

  
}