/*
  Fly + Parallax scrolling effect
    (Inspired by Eric Stone's Fly background effect at: http://ericjamesstone.com/blog/archives/000062.html)
  author: Thomas Ballard (thomas2003*esqsoft^om antibot: *=@, ^=.c)
  © 2003 ESQ Software
  More scripts and usage requirements: http://esqsoft.com
*/

/*
  Problems:
    1. Browser Caching...
    Developers tend to turn off their browser caching... this condition can result 
    in pounding the server for graphics each time modifications to an image object 
    (yes backgrounds too) are made... ie every 50 milliseconds another GET for 
    "graph1.gif" shows up in the access log on the server.  Check for this before 
    you burn up your bandwidth or upset your sys admins!  Suggestions for resolutions 
    to this problem are welcome (please don't suggest pre-caching unless you can 
    demonstrate that your method actually works)

    2. Nested Form...
    Cant use the start/stop button in this example within a preexisting form context
    unless you first remove the built in form
*/


//define Objects for each layer
window.getObj = function(mName,multiplier){
  var obj = new Object()

  if(!document || !document.getElementById) return 0
  obj.HTML = document.getElementById(mName)
  if(!obj.HTML) return 0

  obj.x = 0
  obj.y = 0
  obj.xx = 0
  obj.yy = 0
  obj.multiplier = multiplier || 0
  return obj
}


window.setObjBK = function(obj){
  eval('obj.HTML.style.backgroundPosition="'+obj.x+' '+obj.y+'"')
}


window.setObjMove = function(obj){
  obj.x += (obj.xx * obj.multiplier)
  obj.y += (obj.yy * obj.multiplier)
}


window.handleDirection = function(mObj){
  switch(currentVector){
    case 1: mObj.xx = -1; mObj.yy = -1; break
    case 2: mObj.xx = 0;  mObj.yy = -1; break
    case 3: mObj.xx = 1;  mObj.yy = -1; break
    case 4: mObj.xx = 1;  mObj.yy = 0;  break
    case 5: mObj.xx = 1;  mObj.yy = 1;  break
    case 6: mObj.xx = 0;  mObj.yy = 1;  break
    case 7: mObj.xx = -1; mObj.yy = 1;  break
    case 8: mObj.xx = -1; mObj.yy = 0;  break
  }
}


window.animLoop = function(mLayers){
  //expecting an array of objects, each with a ref to a style container
  if(typeof(mLayers[0]) != 'object'){  
    alert('Error: mLayers didn\'t connect correctly')
    return
  }

  if(!window.mReadyState){

    window.mReadyState = 1

    //set props of optional start/stop button
    if(document.ivnForm && document.ivnForm.ivnButton) document.ivnForm.ivnButton.value="<u>S</u>top"
  }

  //need a persistent reference to mLayers for return trips into this function... (otherwise we have to compromise this function by assuming it's implemetation will always be the same...not good in OOP)
  if(!window.init_mLayers) window.init_mLayers = mLayers

  if(!window.init_ttl) window.init_ttl = ttl

  //safety valve
  if(--ttl<0){
    clearInterval(mTimer)
    mTimer = 0

    //set props of optional start/stop button
    if(document.ivnForm && document.ivnForm.ivnButton) document.ivnForm.ivnButton.value="<u>S</u>tart"
    return
  }

  //is it time to change the direction of movement?
  if(!window.init_timetochange) window.init_timetochange = timetochange
  if(--timetochange<0){
    currentVector=parseInt(Math.random()*8); //random method
    //++currentVector; //incremental method
    timetochange = init_timetochange
    for(var i=0; i<mLayers.length; i++){
      handleDirection(mLayers[i])
    }
  }

  //loop through the objects and set the updated vectors
  for(var i=0; i<mLayers.length; i++){
    setObjMove(mLayers[i])
    setObjBK(mLayers[i])
  }

  //need to trigger the initial directional evaluation (and yet still allow all the ttl stuff to have it's initial state recorded)
  if(!window.init_firstrun){
    window.init_firstrun = 1;
    timetochange = 0
  }

  if(!mTimer) mTimer = setInterval('window.animLoop(window.init_mLayers)',50)
}


window.createHTML = function(){
  var mHTML = ''
  +'<!-- start: fly background -->'
  +'<table id="layer1" class="layer1"><tr><td></td></tr></table>'
  +'<table id="layer2" class="layer2"><tr><td></td></tr></table>'
  +'<table id="layer3" class="layer3"><tr><td></td></tr></table>'
  +'<!-- end: fly background -->'

  +'<!-- start: button -->'
  +'<table class="content" cellpadding="0" align="right">'
  +'  <tr>'
  +'    <td id="ivnDynamo">'
  +'    </td><td>'
  +'      <form name="ivnForm" style="display:inline;"'
  +'      ><button name="ivnButton" accesskey="s"'
  +'        onfocus="blur()"'
  +'        onclick="'
  +'          if(!window.mReadyState) return false;'
  +'          if(window.ttl>0){'
  +'            ttl = 0;'
  +'            this.value=\'<u>S</u>tart\';'
  +'            window.animLoop(layers);'
  +'          } else {'
  +'            ttl = window.init_ttl;'
  +'            timetochange = 0;'
  +'            this.value=\'<u>S</u>top\';'
  +'            window.animLoop(layers);'
  +'          }'
  +'        "'
  +'      ></button'
  +'      ></form>'
  +'    </td>'
  +'  </tr>'
  +'</table>'
  +'<!-- end: button -->'

  document.write(mHTML)
}


window.main = function(){
  window.mReadyState = 0
  if(document.readyState && document.readyState != 'complete'){
    setTimeout('window.main()', 1000)
    return
  }

  window.animLoop(layers)
}




// main

//attempt to pre-cache background images
  imgPreCache1 = new Image(); imgPreCache1.src="space1.gif";
  imgPreCache2 = new Image(); imgPreCache2.src="space2.gif";
  imgPreCache3 = new Image(); imgPreCache3.src="space3.gif";


window.createHTML()


//instantiate Objects for each layer
  var layers = new Array()
  var tmp=getObj('layer1',1); if(tmp) layers[layers.length] = tmp
  var tmp=getObj('layer2',3); if(tmp) layers[layers.length] = tmp
  var tmp=getObj('layer3',5); if(tmp) layers[layers.length] = tmp


//set some globals
  var ttl = 400;            // how many loops to run before exitting (time to live)
  var timetochange = 25;    // how many loops to go before picking a new vector
  var mTimer = 0;           // for the main animation loop
  var currentVector = 0;    // direction between timetochange triggers


document.onload = main()