var minipopup = {
  serial : 0,

  /*
   * <a href="#" onclick="minipopup.show(this, '<b>Hi there</b>', 100, 40)">Click me</a>
   * return: popup_id
   */
  show : function(e, html, width, height) {
    minipopup.serial+= 1;
    e = $(e);
    var d = new Element('div');
    d.innerHTML = "" +
    "<div class='minipopup_left minipopup_top'></div><div class='minipopup_top minipopup_width'></div><div class='minipopup_right minipopup_top'></div>" +
    "<div class='minipopup_left minipopup_height'></div><div class='minipopup_height minipopup_width minipopup_body'>&nbsp;</div><div class='minipopup_right minipopup_height'></div>" +
    "<div class='minipopup_left minipopup_bottom'></div><div class='minipopup_bottom minipopup_width'></div><div class='minipopup_right minipopup_bottom'></div>" +
    "";
    d.id = "minipopup_" + minipopup.serial;
    d.className = "minipopup";
    document.body.appendChild(d);
    while (html.indexOf('__minipopup_id__') >= 0) html = html.replace("__minipopup_id__", d.id);
    $$('#' + d.id + ' .minipopup_body')[0].innerHTML = html;
    var dim = e.getDimensions(), w = dim.width - 40, h = dim.height - 40;
    if (w < 0) w = 0;
    if (h < 0) h = 0;
    d.style.width = w + 40 + 'px';
    d.style.height = h + 40 + 'px';
    $$('#' + d.id + ' .minipopup_width').each(function(e){e.style.width = w + 'px'});
    $$('#' + d.id + ' .minipopup_height').each(function(e){e.style.height = h + 'px'});
    //
    var p = e.cumulativeOffset(); //Prototype.Browser.IE ? e.positionedOffset() : e.cumulativeOffset();
    d.style.position = 'absolute';
    d.style.left = p[0] - (Prototype.Browser.IE ? 200 : 0) - (w + 40 - dim.width)/2 + 'px';
    d.style.top = p[1] - (h + 40 - dim.height)/2 + 'px';
    d.style.zIndex = '10000';
    //
    setTimeout("minipopup.scale_down('" + d.id + "'," + width + "," + height + "," + width + "," + height + ")", 100);
    return d.id;
  },

  hide: function(popup_id) {
    var d = $(popup_id);
    if (!d) return;
    d.id+= "_closing";
    var dim = d.getDimensions(), w = dim.width - 40, h = dim.height - 40;
    setTimeout("minipopup.scale_down('" + d.id + "'," + w + "," + h + ", 0, 0, true)", 100);
  },

  resize: function(popup_id, width, height) {
    var d = $(popup_id);
    var dim = d.getDimensions(), w = dim.width - 40, h = dim.height - 40;
    setTimeout("minipopup.scale_down('" + d.id + "'," + width + "," + height + "," + width + "," + height + ")", 100);
  },

  /*
   * Private
   */
  scale_down : function(d, width, height, to_width, to_height, with_remove) {
    d = $(d);
    var dim = d.getDimensions(), w = dim.width - 40, h = dim.height - 40;
    if (w == to_width) dw = 0; else dw = to_width - w;
    if (h == to_height) dh = 0; else dh = to_height - h;
    var finished = (Math.abs(dw) < 8 && Math.abs(dh) < 8);
    if (finished && with_remove) {
      d.remove();
    }
    var deltaw = dw < 0 ? 3 : 2, deltah = dh < 0 ? 3 : 2;
    if (!finished) {
      w+= dw / deltaw;
      h+= dh / deltah;
    } else {
      w = to_width;
      h = to_height;
    }
    d.style.width = w + 40 + 'px';
    d.style.height = h + 40 + 'px';
    $$('#' + d.id + ' .minipopup_width').each(function(e){e.style.width = w + 'px'});
    $$('#' + d.id + ' .minipopup_height').each(function(e){e.style.height = h + 'px'});
    //
    var p = Prototype.Browser.IE ? d.positionedOffset() : d.cumulativeOffset();
    if (dw > 0 && document.body.scrollWidth - 4 < p[0] + w) d.style.left = p[0] - dw / deltaw + 'px';
    else if (dw < 0 || (p[0] - dw / 3 > 4 && dw > 0)) d.style.left = p[0] - dw / (deltaw*2) + 'px';
    if (document.body.scrollHeight - 4 < p[0] + h) d.style.top = p[1] - dh / deltah + 'px';
    else if (p[1] - dh / 3 > 4) d.style.top = p[1] - dh / (deltah*2) + 'px';
    //
    Element.setOpacity(d, 0.9*(w/width) * (h/height));
    if (!finished) setTimeout("minipopup.scale_down('" + d.id + "'," + width + "," + height + "," + to_width + "," + to_height + "," + (with_remove ? 'true' : 'false') + ")", 100);
  }
}