var screenWidth = document.body.clientWidth;


function Wave(id, phaseAngle, hspeed, color, maxHeight, rootOffset)
{
 // Variables
 this.bgPosition = 0;
 this.id = id;
 this.phaseAngle = phaseAngle;
 this.fullCircle = 2*Math.PI;
 this.maxHeight = maxHeight * 1.3;
 this.wave = null;
 this.crest = null;
 this.horizontalSpeed=hspeed * 5;
 // Methods
 this.flow = flow;
 this.setZIndex = setZIndex;
 this.getZIndex = getZIndex;

 var waveid = 'wave' + this.id;
 var crestid = 'crest' + this.id;

var wstr='';
wstr+=' <div id="wave';
wstr+= this.id; 
wstr+='"';
wstr+='     style="position: absolute; top:-900px; left:0px;';
wstr+='            height: 400px; background-color: rgb(91,144,255);';
wstr+='              width:' 
wstr+= screenWidth;
wstr+='px;" >';
wstr+='  <div id="crest';
wstr+= this.id; 
wstr+='"';
wstr+='       style="height: 50px; position:absolute; bottom:-50px; left:0px;';
wstr+='              width:' 
wstr+= screenWidth;
wstr+='px; ';
wstr+='              background-repeat: repeat-x;';
wstr+='              background-position: 0px 0px;';
wstr+='              background-image: url(';
wstr+=rootOffset;
wstr+='template_files\/imgs\/wave.png);">';
wstr+='  <\/div>';
wstr+='<\/div>';

//alert(wstr);

document.write(wstr);

this.wave = document.getElementById(waveid);
this.crest = document.getElementById(crestid);

//alert('waveid' +  this.wave);
}

function setZIndex(zIndex)
{ 
 this.wave.style.zIndex = zIndex;
}

function getZIndex()
{
 return parseInt(this.wave.style.zIndex);
}

function flow()
{
 var screenWidth = document.body.clientWidth + 20;

 if (screenWidth < 1000)
 {
  screenWidth = 1000;
 }

 var waveBottom = (this.maxHeight * Math.sin(this.phaseAngle)) + (this.maxHeight);
 this.bgPosition = this.bgPosition >= 3500 ? this.bgPosition = 0 : this.bgPosition = this.bgPosition + this.horizontalSpeed;

 this.crest.style.backgroundPosition = this.bgPosition + 'px' + ' 0px';
 this.wave.style.height = Math.abs(Math.round(waveBottom)) + 'px';
 this.wave.style.width = screenWidth + 'px';
 this.crest.style.width = screenWidth + 'px';
 this.phaseAngle -= (Math.PI / 150);
}

function rotZOrders()
{
 for (var i=0; i<waves.length; i++)
 {
  var zIdx = waves[i].getZIndex();
  if (zIdx == 0)
  {
   waves[i].setZIndex(waves.length-1);  
  } 
  else
  {
   waves[i].setZIndex(zIdx-1);
  }
 }
}

function flowWaves()
{
 var zOrder = 0;

 for (var i=0; i<waves.length; i++)
 {
  waves[i].flow();

  if (waves[i].phaseAngle <= -Math.PI/2)
  {
   rotZOrders();
   waves[i].phaseAngle += 2*Math.PI;
   }
 }
 setTimeout('flowWaves();', 150);
}