/* Author: Sarah Kuehnle 
*/
var cloudposx = 500;
var cloudposy = 270;
var position = "absolute";
    
var cloudarr = new Array();
var exparr = new Array();

// constants
var CLOUDWIDTH = 222;
var CLOUDHEIGHT = 98;
var MAXPOSY = 290;
var MINPOSY = 270;
var YRANGE = MAXPOSY - MINPOSY;
var MAXPOSX = 520;
var MINPOSX = 480;
var XRANGE = MAXPOSX - MINPOSX;
var TIMER_MS = 100;
var VELOCITY_MAX = 15.0;

addAsset = function(src, type) {        
  img = new Image(CLOUDWIDTH,CLOUDHEIGHT);
  img.src = src;
  if (type == "cloud") {
    cloudarr.push(img);
  } else if (type == "exp") {
    exparr.push(img);
  }
  return img;
}

cloud1 = addAsset("img/cloud_blue.png", "cloud");
cloud2 = addAsset("img/cloud_green.png", "cloud");
cloud3 = addAsset("img/cloud_orange.png", "cloud");
cloud4 = addAsset("img/cloud_pink.png", "cloud");
cloud5 = addAsset("img/cloud_purple.png", "cloud");
cloud6 = addAsset("img/cloud_red.png", "cloud");
cloud7 = addAsset("img/cloud_yellow.png", "cloud");
exp1 = addAsset("img/face_blah.png", "exp");
exp2 = addAsset("img/face_blotto.png", "exp");
exp3 = addAsset("img/face_frown.png", "exp");
exp4 = addAsset("img/face_frown2.png", "exp");
exp5 = addAsset("img/face_smile.png", "exp");
exp6 = addAsset("img/face_smile2.png", "exp");
exp7 = addAsset("img/face_wink.png", "exp");

animationLoop = function() {
  var localtime = Date.now();
  var deltat = localtime - lasttime;
  lasttime = localtime;
  
  if (deltat > 1000) deltat = 1000;
  
  var yoffset = cloudposy - MINPOSY;
  var yscalepos = (yoffset/YRANGE - 0.5);  // now it's a value between -0.5 and +0.5
  yvelocity += -yscalepos * Math.random() * VELOCITY_MAX; // this creates a spring because the acceleration lags the velocity
  if (yvelocity > VELOCITY_MAX) yvelocity = VELOCITY_MAX;
  
  var xoffset = cloudposx - MINPOSX;
  var xscalepos = (xoffset/XRANGE - 0.5);  // now it's a value between -0.5 and +0.5
  xvelocity += -xscalepos * Math.random() * VELOCITY_MAX; // this creates a spring because the acceleration lags the velocity
  if (xvelocity > VELOCITY_MAX) xvelocity = VELOCITY_MAX;

  // phigure out the physics
  //if ( ((cloudposy > MAXPOSY) && (velocity > 0)) || ((cloudposy < MINPOSY) && (velocity < 0))) {
  //  velocity = velocity * -1;
  //} 
  cloudposy = cloudposy + yvelocity * deltat/1000;
  cloudposx = cloudposx + xvelocity * deltat/1000;
  
  // animate the cloud
  var cloud = document.getElementById("cloudy").firstChild;
  var express = document.getElementById("cloudy").childNodes[1];
  cloud.style.left=cloudposx+"px";
  express.style.left = cloudposx + "px";
  cloud.style.top=cloudposy+"px";
  express.style.top = cloudposy + "px";
}

init = function() {
  //pick a random velocity in either direction
  xvelocity = 2.0 * (Math.random() - 0.5) * VELOCITY_MAX;
  yvelocity = 2.0 * (Math.random() - 0.5) * VELOCITY_MAX;
  lasttime = Date.now();
  
  // select a cloud and expression
  var cloudindex = Math.floor(Math.random()*cloudarr.length);
  var expindex = Math.floor(Math.random()*exparr.length);
  
  // draw the cloud
  var cloud = document.createElement("img");
  cloud.style.width=CLOUDWIDTH+"px";
  cloud.style.height=CLOUDHEIGHT+"px";
  cloud.src=cloudarr[cloudindex].src;
  cloud.style.position="absolute";
  cloud.style.left="500px";
  cloud.style.top="280px";      
  document.getElementById("cloudy").appendChild(cloud);
  
  // draw an expression
  var express = document.createElement("img");
  express.style.width = CLOUDWIDTH + "px";
  express.style.height = CLOUDHEIGHT + "px";
  express.src = exparr[expindex].src;
  express.style.position = "absolute";
  express.style.left = "500px";
  express.style.top = "280px";
  document.getElementById("cloudy").appendChild(express);
  
  setInterval("animationLoop()", TIMER_MS);
}

window.onload = function() {
  init();
}