// JavaScript Document
function Viewport(anId)
{
  this.id=anId;
  this.height=0;
  this.width=0;
  this.zIndex=50;
  this.backgroundImg='img/red_dot.jpg';
  this.topOffset=300;
}

Viewport.prototype.setSize=function(aWidth, aHeight)
{
  this.width=aWidth;
  this.height=aHeight;
  
}

Viewport.prototype.setBackgroundImg=function(aImgUrl)
{
  this.backgroundImg=aImgUrl;
}

Viewport.prototype.write=function()
{
  var theDivElement = new DIVElement();
  theDivElement.addStyle('position:absolute');
  theDivElement.addStyle('top:0px');
  theDivElement.addStyle('left:0px');
  theDivElement.addStyle('visibility:visible');
  theDivElement.addStyle('z-index:'+this.zIndex);
  theDivElement.addAttribute('id', this.id);
    
  var theTopBorder=new DIVElement();
  theTopBorder.addStyle('position:absolute');
  theTopBorder.addStyle('top:-'+this.topOffset+'px');
  theTopBorder.addStyle('left:-'+this.topOffset+'px');
  theTopBorder.addStyle('height:'+this.topOffset+'px');
  theTopBorder.addStyle('width:'+(this.width+(2*+this.topOffset))+'px');
  theTopBorder.addStyle('background-image:url('+this.backgroundImg+')');
  
  theDivElement.addElement(theTopBorder);

  var theLeftBorder=new DIVElement();
  theLeftBorder.addStyle('position:absolute');
  theLeftBorder.addStyle('top:0px');
  theLeftBorder.addStyle('left:-'+this.topOffset+'px');
  theLeftBorder.addStyle('height:'+this.height+'px');
  theLeftBorder.addStyle('width:'+this.topOffset+'px');
  theLeftBorder.addStyle('background-image:url('+this.backgroundImg+')');
  
  
  theDivElement.addElement(theLeftBorder);
  
  var theBottomBorder=new DIVElement();
  theBottomBorder.addStyle('position:absolute');
  theBottomBorder.addStyle('top:'+this.height+'px');
  theBottomBorder.addStyle('left:-'+this.topOffset+'px');
  theBottomBorder.addStyle('height:'+this.topOffset+'px');
  theBottomBorder.addStyle('width:'+(this.width+(2*+this.topOffset))+'px');
  theBottomBorder.addStyle('background-image:url('+this.backgroundImg+')');
  
  theDivElement.addElement(theBottomBorder);
  
  
  var theRightBorder=new DIVElement();
  theRightBorder.addStyle('position:absolute');
  theRightBorder.addStyle('top:0px');
  theRightBorder.addStyle('left:'+this.width+'px');
  theRightBorder.addStyle('height:'+this.height+'px');
  theRightBorder.addStyle('width:'+this.topOffset+'px');
  theRightBorder.addStyle('background-image:url('+this.backgroundImg+')');

  theDivElement.addElement(theRightBorder);
  
   
  return theDivElement.write();
}