msBoxContainer = Class.create();
msBoxContainer.prototype =
{
  initialize: function (id)
  {  
    this.id = id;
    this.values = 
    {
       p_value: 'Box title', 
       div_value: 'Box content',
       input_id: 0,
       box_id: 0
    };
    this.visible = false;
    this.timer = false;
    this.build();
  },  
  
  build: function() {
    this.boxContainer = new Element('div', {'class': 'msr-modal', id: this.id + 'container' });    
      this.box1 = new Element('div', {'class': 'msr-modal-box-1'});    
        this.divContent = new Element('div', {'class': 'msr-modal-content'});   
          this.p = new Element('p', {'class': 'msr-modal-p-1'});   
          this.p.innerHTML = this.values.p_value;
          this.divContent.appendChild(this.p);
          this.div = new Element('div', {'class': 'msr-modal-div-1'});   
          this.div.innerHTML = this.values.div_value;
          this.divContent.appendChild(this.div);
        this.box1.appendChild(this.divContent);
      this.boxContainer.appendChild(this.box1);
      
      this.box2 = new Element('div', {'class': 'msr-modal-box-2'});
        var empty2 = new Element('div');      
        this.box2.appendChild(empty2);
      this.boxContainer.appendChild(this.box2);
    $('msr-ribbon').appendChild(this.boxContainer);
    
    Event.observe(this.boxContainer, 'mouseout', this.handleMouseout.bindAsEventListener( this, { 'container_id': this.id  }));
    Event.observe(this.boxContainer, 'mouseover', this.handleMouseover.bindAsEventListener( this, { 'container_id': this.id }));
    
    this.boxContainer.hide();
  },
  
  handleMouseout: function(event, ci) {    
    if (!this.visible) {
      this.boxContainer.hide();
      this.visible = true;
      clearTimeout(this.timer);
      return;
    }
    
    this.visible = false;
    Obj = this;
    this.timer = setTimeout(function() { Obj.handleMouseout(this, ci )}, 3000);
  },
  
  handleMouseover: function(event, ci) {    
    this.visible = true;
    clearTimeout(this.timer);
  },
  
  populateBox: function(values) {
      
    this.values = 
    {
       p_value: values[0],
       div_value: values[1],
       input_id: values[2],
       box_id: values[3]
    };
    Object.extend(this.values, values || {});        
    
    if (this.boxContainer.visible())
    {
      this.boxContainer.hide();
    }
    else
    {
      this.boxContainer.show();
      
      if ($$('#' + this.values.box_id + ' div.msr-modal-box-1')[0] != "undefined")
      {
        $$('#' + this.values.box_id + ' p.msr-modal-p-1')[0].innerHTML = this.values.p_value;
        if($$('#' + this.values.box_id + ' div.msr-modal-div-1').length) {
          Element.remove($$('#' + this.values.box_id + ' div.msr-modal-div-1')[0]);
          $$('#' + this.values.box_id + ' div.msr-modal-content')[0].appendChild(this.values.div_value);
        }
      }
    }
    
    availableWidth = $('msr-ribbon').getWidth();    

    // there is a bug here
    // left is now the left of the toolbar, not the button
    // perhaps caused by removing the explicit widths of the toolbars
    
    inputDimensions = $(this.values.input_id).cumulativeOffset();
    
    inputLeft = inputDimensions['left']; 
    inputTop = inputDimensions['top'];
    inputHeight = $(this.values.input_id).getHeight();
    inputWidth = $(this.values.input_id).getWidth();
    
    neededWidth = inputLeft + this.boxContainer.getWidth();
    if ( availableWidth < neededWidth) {
      inputLeft = (inputLeft + inputWidth) - this.boxContainer.getWidth() + 6;
    }

    this.boxContainer.setStyle( { position: 'absolute', top: (inputTop + inputHeight) + 'px', left: inputLeft + 'px' } );
  }
}