var bubble = {

  bubble_id: "bubble_univ",
  ground_id: "ground_univ",
  timer : 0,
  bubble_vis : true,

  create : function(){
     if (!document.getElementById(this.ground_id)) {
          var el1 = document.createElement("DIV");
          el1.id = this.ground_id;
          el1.style.position = "absolute";
          el1.style.display = "none";
          document.body.appendChild(el1);
     }
     if (!document.getElementById(this.bubble_id)) {
          var el2 = document.createElement("DIV");
          el2.id = this.bubble_id;
          el2.style.position = "absolute";
          el2.style.display = "none";
          //el2.onload = bubble.setBubbleVisible();
          document.body.appendChild(el2);
     }
  },

  show : function(){
   if (!this.timer){
     this.updateBubble();
     this.show_ground();
     this.show_bubble();
     this.hideSelectBoxes();
     this.timer = window.setInterval('bubble.updateBubble();',10);
   }
  },

  hide : function(){
     this.showSelectBoxes();
     if (gr = document.getElementById(this.ground_id)){
       gr.style.display = 'none';
     }
     if (bb = document.getElementById(this.bubble_id)){
       bb.style.display = 'none';
       bb.innerHTML = '';
     }
     clearInterval(this.timer);
     this.timer = 0;
  },

  loadContent : function(id){
      if (bb = document.getElementById(this.bubble_id)){
        if (tmp = document.getElementById(id)){
          bb.innerHTML = tmp.innerHTML;
        }
      }
  },

  show_ground : function (){
     if (gr = document.getElementById(this.ground_id)){
        gr.style.top = "0px";
        gr.style.left = "0px";
        gr.style.backgroundColor = '#222222';
        gr.style.width = document.body.clientWidth + "px";
        gr.style.height = document.body.clientHeight + "px";
        gr.style.display = "block";
        this.setOpacity(gr, 50);
     }
  },

  show_bubble : function(){
     if (bb = document.getElementById(this.bubble_id)){
        bb.style.top = "100px";
        bb.style.left = "100px";
        bb.style.display = "block";
     }
  },

  updateBubble : function(){
     if (gr = document.getElementById(this.ground_id)){
        gr.style.height = this.getElementY('end') + "px";
        gr.style.width  = document.body.clientWidth + "px";
     }
     if ((bb = document.getElementById(this.bubble_id)) && this.bubble_vis){
        size = this.getBrowserSize(); 
        if (bb.offsetHeight > size[1]){
          bb.style.top = "50px"; 
          bb.style.left = (size[0] - bb.offsetWidth)/2 + "px";
        } else {
          bb.style.top =  this.getScrollbarY() + (size[1] - bb.offsetHeight)/2 + "px";
          bb.style.left = (size[0] - bb.offsetWidth)/2 + "px";
        }
     }
  },

  setBubbleVisible : function(){
    this.bubble_vis = true;
  },

  setBubbleUnvisible : function(){
    this.bubble_vis = false;
  },


  setOpacity: function (obj, opacity) {
   opacity = (opacity == 100)?99.999:opacity;
   obj.style.filter = "alpha(opacity:"+opacity+")";
   obj.style.KHTMLOpacity = opacity/100;
   obj.style.MozOpacity = opacity/100;
   obj.style.opacity = opacity/100;
  },

  getElementY : function(imgElem) {
   if (!document.getElementById(imgElem)) return 0;
   yPos = document.getElementById(imgElem).offsetTop;
   tempEl = document.getElementById(imgElem).offsetParent;
     while (tempEl != null) {
      yPos += tempEl.offsetTop;
      tempEl = tempEl.offsetParent;
     }
   if (yPos < document.body.clientHeight) {
    	 yPos = document.body.clientHeight;
   }
   return yPos;
  },

  getScrollbarY : function(){
      if (window.pageYOffset){
      scrollbarY=window.pageYOffset;
    }else if (document.documentElement && document.documentElement.scrollTop){
      scrollbarY=document.documentElement.scrollTop;
    }else if (document.body){
      scrollbarY=document.body.scrollTop;
    }
    return scrollbarY;
  },

  getBrowserSize : function() {
     var myWidth = 0, myHeight = 0;
     if( typeof( window.innerWidth ) == 'number' ) {
       //Non-IE
       myWidth = window.innerWidth;
       myHeight = window.innerHeight;

     } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
       //IE 6+ in 'standards compliant mode'

       myWidth = document.documentElement.clientWidth;
       myHeight = document.documentElement.clientHeight;

     } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
       //IE 4 compatible
       myWidth = document.body.clientWidth;
       myHeight = document.body.clientHeight;
     }
     return [myWidth, myHeight];
  },

  showSelectBoxes : function(){ 
    selects = document.getElementsByTagName("select");   
    for (i = 0; i != selects.length; i++) {      
    selects[i].style.visibility = "visible";   }
    selects = document.getElementsByTagName("object");   
    for (i = 0; i != selects.length; i++) {      
      selects[i].style.visibility = "visible";   
    }
    selects = document.getElementsByTagName("embed");   
    for (i = 0; i != selects.length; i++) {      
      selects[i].style.visibility = "visible";   
    }
  },
    
  hideSelectBoxes : function(){   
    selects = document.getElementsByTagName("select");   
    for (i = 0; i != selects.length; i++) {
    selects[i].style.visibility = "hidden";   
    }
    selects = document.getElementsByTagName("object");   
    for (i = 0; i != selects.length; i++) {
      selects[i].style.visibility = "hidden";   
    }
    selects = document.getElementsByTagName("embed");   
    for (i = 0; i != selects.length; i++) {
      selects[i].style.visibility = "hidden";   
    }
  } 


}