/**
 * Sinewave
 * 
 * Kevin Roast 16/06/09
 */

var RAD = Math.PI/180.0;

var HEIGHT;
var WIDTH;
var g_main;
var g_interval;
var g_canvas

var g_img = new Image();


/**
 * Global window onload handler
 */
function onloadHandler()
{
   g_img.src = 'images/peppers.png';
   
   g_canvas = document.getElementById('canvas');
   HEIGHT = g_canvas.height;
   WIDTH = g_canvas.width;
   
   g_main = new SineWave();
   
   waitLoadImages();
}

function waitLoadImages()
{
   if (!g_img.complete)
   {
      setTimeout("waitLoadImages()", 100);
   }
   else
   {
      g_interval = setInterval("g_main.loop();", 30);
   }
}


(function()
{
   SineWave = function()
   {
   };
   
   SineWave.prototype =
   {
      frameoffset: 0,
      xmultiplier: 64,
      ymultiplier: 128,
      xmultoffset: 4,
      ymultoffset: 2,
      
      loop: function loop()
      {
         var ctx = document.getElementById('buffer1').getContext('2d');
         ctx.drawImage(g_img, 0, 0, 390, 480, 0, 0, 390, 480);
         
         var ctx = g_canvas.getContext('2d');
         ctx.globalCompositeOperation = "copy";
         var buffer1 = document.getElementById('buffer1').getContext('2d');
         buffer1.globalCompositeOperation = "copy";
         var buffer2 = document.getElementById('buffer2').getContext('2d');
         buffer2.globalCompositeOperation = "copy";
         
         // pull data from the first buffer and apply to the second
         // apply sinwave to the y coordinate
         var nleft = (WIDTH-390) / 2;
         
         var noffset = this.frameoffset;
         var mult = this.xmultiplier;
         for (var x=0, y, img; x<390; x++)
         {
            img = buffer1.getImageData(x, 0, 1, 480);
            y = (Math.sin(noffset) * RAD) * mult;
            buffer2.putImageData(img, x, y + 16);
            noffset += 0.1;
         }
         
         // transform data in the second buffer and apply to canvas
         // apply coswave to the x ccordinate
         noffset = this.frameoffset;
         mult = this.ymultiplier;
         for (var x, y=0, img; y<512; y++)
         {
            img = buffer2.getImageData(0, y, 390, 1);
            x = (Math.cos(noffset) * RAD) * mult;
            ctx.putImageData(img, nleft + x, y);
            noffset += 0.1;
         }
         
         this.frameoffset += 0.1;
         
         this.xmultiplier += this.xmultoffset;
         if (this.xmultiplier === 64 || this.xmultiplier === 512)
         {
            this.xmultoffset *= -1;
         }
         this.ymultiplier += this.ymultoffset;
         if (this.ymultiplier === 32 || this.ymultiplier === 256)
         {
            this.ymultoffset *= -1;
         }
      }
   };
})();