//store game variables in an associative array
var storage = [];

function isNumber(value)
{
   return (!isNaN(value));
}

function sleep(milliseconds) 
{
  const date = Date.now();
  let currentDate = null;
  do {
    currentDate = Date.now();
  } while (currentDate - date < milliseconds);
}

class Action
{
   constructor()
   {
      this.arg = [];
      this.argCount = 0;
      this.weight = 0;
      this.idx = -1;
      this.bag = [];
      this.lastBagIdx = -1;
   }

   dump(pad)
   {
      console.log(pad + this.arg[0]);
      for(var i = 1; i < this.argCount; i++)
      {
         console.log(pad + "  '" + this.arg[i] + "'");
      }
   }
}

class Point2I
{
   constructor()
   {
      this.x = 0;
      this.y = 0;
   }

   normalize(len)
   {
      var factor = len / Math.sqrt(this.x*this.x + this.y*this.y);
      this.x *= factor;   
      this.y *= factor; 
   }
}

class Overlay
{
   constructor()
   {
      this.origin = new Point2I();
      this.pos = new Point2I();
      this.w = 0;
      this.h = 0;
      this.opacity = 100;
      this.action = [];
      this.actionCount = 0;
      this.actionIdx = 0;
      this.name = "";
      this.parent = "";      //
      this.frameParent = ""; //overlay which we get our subframe prefix from
      this.subFrame = "";    //name of current subframe
      this.scene = "";

      this.frameTime = 0;
      this.nextFrameTime = 1;

      this.clickAction = new Action();

      //position tweening
      this.posA = new Point2I();
      this.posB = new Point2I();
      this.posStartTime = 0;
      this.posEndTime = 0;
      this.posEaseType = "inOutQuad";
      this.posEaseDecay = 10.0;
      this.posEaseBounce = 5;

      //opacity tweening
      this.opacA = 0;
      this.opacB = 0;
      this.opacStartTime = 0;
      this.opacEndTime = 0;
      this.opacEaseType = "inOutQuad";

      //blur tweening
      this.blurA = 0;
      this.blurB = 0;
      this.blurStartTime = 0;
      this.blurEndTime = 0;
      this.blurEaseType = "inOutQuad";

      //stack
      this.stack = [];
   }

   addAction(word)
   {
      this.action[this.actionCount] = new Action();
      for(var i = 0; i < word.length; i++)
      {
         this.action[this.actionCount].arg[i] = word[i];
         this.action[this.actionCount].argCount++;
      }
      this.action[this.actionCount].idx = this.actionCount;
      this.actionCount++;
   }

   addRandAction(word)
   {
      this.action[this.actionCount] = new Action();
      this.action[this.actionCount].weight = word[0];
      for(var i = 1; i < word.length; i++)
      {
         this.action[this.actionCount].arg[i-1] = word[i];
         this.action[this.actionCount].argCount++;
      }
      this.action[this.actionCount].idx = this.actionCount;
      this.actionCount++;
   }

   dump(pad)
   {
      console.log(pad + "OVERLAY " + this.pos.x + " " + this.pos.y + " " + this.w + " " + this.h + " " + this.name);
      console.log(pad + "  frameTime " + this.frameTime);
      console.log(pad + "  nextFrameTime " + this.nextFrameTime);

      if(this.clickAction.argCount > 0)
      {
         this.clickAction.dump(pad + "  CLICK->");
      }

      for(var i = 0; i < this.actionCount; i++)
      {
         if(this.actionIdx == i)
            this.action[i].dump(pad + " >");
         else
            this.action[i].dump(pad + "  ");
      }
   }

   create()
   {
      //reset to initial condition
      this.pos.x = this.origin.x;
      this.pos.y = this.origin.y;
      this.opacity = 1.0;
      this.posStartTime = 0;
      this.posEndTime = 0;
      this.opacStartTime = 0;
      this.opacEndTime = 0;
      this.blur = 0;
      this.blurA = 0;
      this.blurB = 0;
      this.blurStartTime = 0;
      this.blurEndTime = 0;
      this.blurEaseType = "inOutQuad";

      //create an image object on the page
      var o = document.createElement("div");
      o.id = "overlay-" + this.name;
      //console.log("Creating overlay ", o.id);
      o.style.height = this.h * gScale;
      o.style.width  = this.w * gScale;
      o.style.left   = "0px"; //this.pos.x * gScale;
      o.style.top    = "0px"; //this.pos.y * gScale;      
      o.style.transform = "translate(" + (this.pos.x * gScale) + "px," + this.pos.y * gScale + "px)";
      o.style.position = "absolute";
      o.style.backgroundSize = "100%";
      o.onclick = clickHandler;
      o.onmousedown = selectionPreventer;

      if(this.parent)
      {
         var p = scene[currSceneIdx].getDivByName(this.parent);
         if(p)
         {
            p.appendChild(o);
         }
         else
         {
            console.log("ERROR: cannot find parent '" + this.parent + "'");
            playArea.appendChild(o);
         }
      }
      else
      {
         playArea.appendChild(o);
      }
      this.div = o;
      
      this.actionIdx = -1;
      this.nextFrameTime = gTimeStamp;
      //this.doNextAction();

      //where we're putting stuff (for relative positioning)
      this.cursor = new Point2I();
   }

   preload()
   {
      //create a preloader object
      //TODO: maximum number of pre-loader objects, cycle out the old ones

      //create a preloader object for all frames
      for(var i = 0; i < this.actionCount; i++)
      {
         switch(this.action[i].arg[0])
         {
            case "FRAME":
               addPreloader(this.action[i].arg[1]);
               break;            
            case "OFRAME":
               addPreloader(this.action[i].arg[2]);
               break;

            case "SUBFRAME":
               //add variations of preloader for all of the parentFrame's frames
               if(!this.frameParent)
                  console.log("ERROR: preload SUBFRAME without FRAME_PARENT");

               this.scene.getOverlayByName(this.frameParent).preloadSubFrame(this.action[i].arg[1]);
               break;

            case "SOUND":               
               preloadSound(this.action[i].arg[1]);
               setSoundLoop(this.action[i].arg[1], false);
               setSoundVolume(this.action[i].arg[1], 1.0);
               setSoundChannel(this.action[i].arg[1], -1);

               for(var j = 2; j < this.action[i].arg.length; j++)
               {  
                  var soundName = this.action[i].arg[1];
                  if(this.action[i].arg[j] == "LOOP")
                  {
                     setSoundLoop(soundName, true);
                     continue;
                  }
                  if(this.action[i].arg[j] == "VOL")
                  {  
                     j++;
                     setSoundVolume(soundName, this.action[i].arg[j]);
                  }
                  if(this.action[i].arg[j] == "CH")
                  {  
                     j++;
                     setSoundChannel(soundName, this.action[i].arg[j]);
                  }
               }
               break;
         }
      }
   }

   preloadSubFrame(subFrameSuffix)
   {
      for(var i = 0; i < this.actionCount; i++)
      {
         switch(this.action[i].arg[0])
         {
            case "FRAME":
               var imgName = this.action[i].arg[1];
               imgName = getBaseName(imgName);
               imgName += subFrameSuffix;
               console.log("Preloading subframe " + imgName);
               addPreloader(imgName);
               break;            
         }
      }
   }

   onClick()
   {  
      //console.log(gTimeStamp + " clicked on overlay " + this.name);
      if(this.clickAction.argCount > 0)
      {
         //can't click if we're in a transition
         var inTransition = false;
         if(this.actionIdx >= 0)
         {
            if(this.action[this.actionIdx].arg[0] == "WAIT" && this.nextFrameTime != 0)
               inTransition = true;       
         }

         if(!inTransition)
         {
            this.doAction(this.clickAction);
         }
      }
   }

   jumpTo(labelName)
   {
      //varaible lookup
      if(labelName.charAt(0) == "$")
         labelName = storage[labelName];
      
      if(labelName == "NEXT")
      {
         this.doNextAction();
         return;
      }

      for(var i = 0; i < this.actionCount; i++)
      {
         if(this.action[i].arg[0] != "LABEL")
            continue;

         if(this.action[i].arg[1] != labelName)
            continue;

         this.actionIdx = i;
         this.doNextAction();
         return;
      }
      console.log("ERROR: could not find jump label '" + labelName + "'");
   }

   doNextAction()
   {
      if(this.actionCount <= 0)
         return;

      this.actionIdx++;
      this.actionIdx %= this.actionCount;
      this.doAction(this.action[this.actionIdx]);
   }

   updateSubFrame()
   {
      //get frame prefix from frameParent overlay
      var p = this.scene.getDivByName(this.frameParent);
      var prefix = p.className.substr("preload-".length, 999);

      //assemble subframe name
      this.div.className = "preload-" + prefix + getBaseName(this.subFrame);
   }

   doAction(action)
   {  
      if(typeof action === 'undefined')  
         return;
   
      /*
      if(action.argCount == 1)
         console.log(gTimeStamp + " " + this.name + " " + action.arg[0] );
      else
         console.log(gTimeStamp + " " + this.name + " " + action.arg[0] + " " + action.arg[1]  + " " + action.arg[2] + " " + action.arg[3]);
         */

      switch(action.arg[0])
      {
         case "FRAME":
            //images are loaded into preloader boxes, just set the class
            this.div.className = "preload-" + getBaseName(action.arg[1]);

            if(action.argCount == 2)
            {
               //blank = wait forever
               this.nextFrameTime = 0;
            }
            else if(action.argCount == 3)
            {
               if(action.arg[2] == "")
               {
                  //blank = wait forever
                  this.nextFrameTime = 0;
               }
               else if(action.arg[2] == 0)
               {
                  //0 = advance immediately
               }
               else
               {
                  //all others treated as a hold time
                  //this.nextFrameTime = gTimeStamp + parseInt(action.arg[2]);

                  //this.nextFrameTime += parseInt(action.arg[2]); //this will have more accurate timing, but has problems with OGOTO lines
      
                  if(action.arg[2].charAt(0) == "$")
                     this.nextFrameTime += parseInt(storage[action.arg[2]]);
                  else
                     this.nextFrameTime += parseInt(action.arg[2]);
               }  
            }
            else
            {
               console.log("ERROR: FRAME command has unknown argument count");
            }

            this.scene.updateSubFrames(this.name);
            break;

         case "OFRAME":
            //set the frame on a different overlay
            var o = document.getElementById("overlay-" + action.arg[1]);
            o.className = "preload-" + getBaseName(action.arg[2]);

            if(action.argCount == 3)
            {
               //blank = wait forever
               this.nextFrameTime = 0;
            }
            else if(action.argCount == 3)
            {
               if(action.arg[2] == "")
               {
                  //blank = wait forever
                  this.nextFrameTime = 0;
               }
               else if(action.arg[2] == 0)
               {
                  //0 = advance immediately
               }
               else
               {
                  //all others treated as a hold time
                  //this.nextFrameTime = gTimeStamp + parseInt(action.arg[2]);

                  //this.nextFrameTime += parseInt(action.arg[2]); //this will have more accurate timing, but has problems with OGOTO lines
      
                  if(action.arg[2].charAt(0) == "$")
                     this.nextFrameTime += parseInt(storage[action.arg[2]]);
                  else
                     this.nextFrameTime += parseInt(action.arg[2]);
               }  
            }

            //this.doNextAction();
            break;
         
         case "SUBFRAME":
            if(!this.frameParent)
            {
               console.log("ERROR: overlay '" + this.name + "' has SUBFRAME op without FRAME_PARENT");
               break;
            }
            
            //save the subframe suffix name
            this.subFrame = action.arg[1];   
            this.updateSubFrame();        
            
            if(action.arg[2] == "")
            {
               //blank = wait forever
               this.nextFrameTime = 0;
            }
            else if(action.arg[2] == 0)
            {
               //zero = immediately continue (do multiple actions at once)
               //this.doNextAction();
            }
            else
            {
               //all others treated as a hold time
               this.nextFrameTime += parseInt(action.arg[2]); //this will have more accurate timing, but has problems with OGOTO lines
            }
            break;

         case "NEXT":
            //console.log("doing next");
            this.nextFrameTime = gTimeStamp;
            this.doNextAction();
            break;

         case "SETSCENE":
            this.nextFrameTime = 0;
            setScene(action.arg[1]);
            break;

         case "WAIT":
            if(action.argCount == 1)
            {
               //no arguments, wait forever
               this.nextFrameTime = 0;
            }
            else if(action.argCount == 2)
            {  
               //one argument, want that amount
               if(action.arg[1].charAt(0) == "$")
                  this.nextFrameTime = gTimeStamp + parseInt(storage[action.arg[1]]);
               else
                  this.nextFrameTime = gTimeStamp + parseInt(action.arg[1]);
            }
            else if(action.argCount == 3)
            {
               //two arguments, use as random range
               var low = action.arg[1];
               var high = action.arg[2];

               if(low.charAt(0) == "$")
                  low = storage[low];
               if(high.charAt(0) == "$")
                  high = storage[high];

               var time = rand(parseInt(low), parseInt(high));
               this.nextFrameTime = gTimeStamp + parseInt(time);
            }
            else
            {
               console.log("ERROR: bad agument count (" + action.argCount + ") on WAIT");
            }
            break;

         case "GOTO":
            if(action.argCount == 2)
            {
               //just a label, assume this overlay
               this.jumpTo(action.arg[1]);
            }
            else if(action.argCount == 3)
            {
               //overlay name and label provided
               this.scene.overlayJumpTo(action.arg[1], action.arg[2]);
               //this.doNextAction();
            }            
            else
            {
               console.log("ERROR: bad number of arguments on GOTO");
            }            
            break;
      
         case "CALL":
            //like goto except we set the stack pointer
            if(action.argCount == 2)
            {
               //just a label, use this overlay
               this.stack.push(this.actionIdx);
               this.jumpTo(action.arg[1]);
            }
            else if(action.argCount == 3)
            {
               //overlay name and label provided
               this.scene.overlayCall(action.arg[1], action.arg[2]);
               //this.doNextAction();
            }            
            else
            {
               console.log("ERROR: bad number of arguments on CALL");
            }                        
            break;

         case "RETURN":
            //jump to the saved stack pointer
            this.actionIdx = this.stack.pop();
            this.doNextAction();
            break;

         case "LABEL":
            //this.doNextAction();
            this.nextFrameTime = gTimeStamp;
            break;
         
         case "RANDOM":
            /*
            //randomly jump to one of the given labels
            //add up total odds
            var totalOdds = 0;
            for(var i = 1; i < action.argCount; i += 2)
            {
               //console.log("adding " + word[i]);
               totalOdds += Math.floor(action.arg[i]); //lol if you don't do math.floor it appends them as strings
            }

            //pick a random number between 1 and totalodds
            var pick = Math.floor(Math.random() * totalOdds) + 1;
            //console.log("picked " + pick + " / " + totalOdds); 
            
            //walk along until we go past picked value
            // then chose label before that
            totalOdds = 0;
            for(var i = 1; i < action.argCount; i += 2)
            {
               totalOdds += Math.floor(action.arg[i]);
               if(pick <= totalOdds)
               {
                  this.jumpTo(action.arg[i+1]);
                  break;
               }
            }
            */
            
            //actions between here and end_random should have weights
            var totalOdds = 0;
            var walkIdx = action.idx + 1;
            var endIdx = 0;
            while(1)
            {
               if(this.action[walkIdx].arg[0] == "END_RANDOM")
               {
                  endIdx = walkIdx;
                  break;
               }
               if(this.action[walkIdx].weight <= 0)
               {
                  console.log("ERROR: RANDOM without END_RANDOM?");
                  break
               }

               totalOdds += Math.floor(this.action[walkIdx].weight);
               walkIdx++;
            }

            //pick a random number between 1 and totalodds
            var pick = Math.floor(Math.random() * totalOdds) + 1;
            //console.log("picked " + pick + " / " + totalOdds); 

            //walk along until we go past picked value
            // then chose label before that
            totalOdds = 0;
            var walkIdx = action.idx + 1;
            while(1)
            {
               if(this.action[walkIdx].weight <= 0) 
               {
                  console.log("RAN OFF RANDOM LIST");
                  this.actionIdx = walkIdx-2;
                  //this.doNextAction();
                  break; 
               }

               totalOdds += Math.floor(this.action[walkIdx].weight);
               //console.log("WALK " + totalOdds + " " + pick);
               if(pick <= totalOdds)
               {
                  this.actionIdx = endIdx;
                  this.doAction(this.action[walkIdx]);
                  //this.doNextAction();
                  return;
               }

               walkIdx++;
            }         

            break;

         case "END_RANDOM":
            //this.doNextAction();
            break;

         
         case "RANDOM_BAG":
            //like random, except no repeats
            //actions between here and end_random should have weights
            var totalOdds = 0;
            var walkIdx = action.idx + 1;
            var endIdx = 0;
            while(1)
            {
               if(this.action[walkIdx].arg[0] == "END_RANDOM")
               {
                  endIdx = walkIdx;
                  break;
               }
               if(this.action[walkIdx].weight <= 0)
               {
                  console.log("ERROR: RANDOM_BAG without END_RANDOM?");
                  break;
               }
               
               //skip items already picked in this bag, and the last item picked in the previous bag
               if(action.bag[walkIdx] !== 1 && walkIdx !== action.lastBagIdx)
                  totalOdds += Math.floor(this.action[walkIdx].weight);
               walkIdx++;
            }
            
            if(totalOdds == 0)
            {
               //bag full, start a new one
               action.bag = []; //gabage collected
               
               //add odds again
               totalOdds = 0;
               walkIdx = action.idx + 1;
               endIdx = 0;
               while(1)
               {
                  if(this.action[walkIdx].arg[0] == "END_RANDOM")
                  {
                     endIdx = walkIdx;
                     break;
                  }
                  if(this.action[walkIdx].weight <= 0)
                  {
                     console.log("ERROR: RANDOM_BAG without END_RANDOM?");
                     break;
                  }
                  
                  //skip items already picked in this bag, and the last item picked in the previous bag
                  if(action.bag[walkIdx] !== 1 && walkIdx !== action.lastBagIdx)
                     totalOdds += Math.floor(this.action[walkIdx].weight);
                  walkIdx++;
               }
               
               if(totalOdds == 0)
               {
                  console.log("ERROR: Failed to add odds after random_bag reset");
                  break;
               }
            }

            //pick a random number between 1 and totalodds
            var pick = Math.floor(Math.random() * totalOdds) + 1;

            //walk along until we go past picked value
            // then chose label before that
            totalOdds = 0;
            var walkIdx = action.idx + 1;
            while(1)
            {
               if(this.action[walkIdx].weight <= 0) 
               {
                  console.log("RAN OFF RANDOM LIST");
                  this.actionIdx = walkIdx-2;
                  //this.doNextAction();
                  break; 
               }
               
               if(action.bag[walkIdx] !== 1 && walkIdx !== action.lastBagItem)
                  totalOdds += Math.floor(this.action[walkIdx].weight);

               //console.log("WALK " + totalOdds + " " + pick);
               if(pick <= totalOdds)
               {
                  this.actionIdx = endIdx;
                  action.lastBagIdx = walkIdx;
                  action.bag[walkIdx] = 1;
                  //console.log("Bag item " + walkIdx);
                  this.doAction(this.action[walkIdx]);
                  //this.doNextAction();
                  return;
               }

               walkIdx++;
            }

            break;


         case "POS":
            //update position target
            if(action.argCount == 3)
            {
               //POS, x, y
               this.pos.x = parseInt(action.arg[1]);
               this.pos.y = parseInt(action.arg[2]);

               //cancel position animation
               this.posStartTime = 0;
               this.posEndTime = 0;

               this.resize();               
            }
            else if(action.argCount >= 4)
            {
               //POS, x, y, time, (easeType)
               this.posA.x = this.pos.x;
               this.posA.y = this.pos.y;

               this.posB.x = parseInt(action.arg[1]);
               this.posB.y = parseInt(action.arg[2]);
               
               this.posStartTime = gTimeStamp;
               this.posEndTime = gTimeStamp + parseInt(action.arg[3]);

               if(action.argCount == 7)
               {
                  this.posEaseType = action.arg[4];
                  this.posEaseBounce = parseFloat(action.arg[5]);
                  this.posEaseDecay = parseFloat(action.arg[6]);                  
               }   
               else if(action.argCount == 5)
               {
                  this.posEaseType = action.arg[4];
                  this.posEaseDecay = 10.0;
                  this.posEaseBounce = 5;
               }
               else
               {
                  this.posEaseType = "inOutQuad";
               }
            }
            //this.doNextAction();
            break;

         case "POS+":
            //update position target
            if(action.argCount == 3)
            {
               //POS+, x, y
               this.pos.x = parseInt(this.pos.x) + parseInt(action.arg[1]);
               this.pos.y = parseInt(this.pos.y) + parseInt(action.arg[2]);

               //cancel position animation
               this.posStartTime = 0;
               this.posEndTime = 0;

               this.resize();               
            }
            else if(action.argCount >= 4)
            {
               //POS+, x, y, time, (easeType)
               if(this.posEndTime > 0)
               {
                  //currently an animation in progress, start at the end of it
                  this.posA.x = this.posB.x;
                  this.posA.y = this.posB.y;
               }
               else
               {
                  this.posA.x = this.pos.x;
                  this.posA.y = this.pos.y;
               }

               this.posB.x = parseInt(this.posA.x) + parseInt(action.arg[1]);
               this.posB.y = parseInt(this.posA.y) + parseInt(action.arg[2]);
               
               this.posStartTime = gTimeStamp;
               this.posEndTime = gTimeStamp + parseInt(action.arg[3]);

               if(action.argCount == 7)
               {
                  //console.log("seven args");
                  this.posEaseType = action.arg[4];
                  this.posEaseBounce = parseFloat(action.arg[5]);
                  this.posEaseDecay = parseFloat(action.arg[6]);                  
               }   
               else if(action.argCount == 5)
               {
                  this.posEaseType = action.arg[4];
                  this.posEaseDecay = 10.0;
                  this.posEaseBounce = 5;
               }
               else
               {
                  this.posEaseType = "inOutQuad";
               }
            }
            //this.doNextAction();

            break;

         case "OPAC":
            //update opacity target
            if(action.argCount == 2)
            {
               //no time given, apply immediately
               this.opacity = parseFloat(action.arg[1]);
               this.opacStartTime = 0;
               this.opacEndTime = 0;
               //console.log("setting opacity " + this.name, this.opacity);
            }
            else if(action.argCount == 3 || action.argCount == 4)
            {
               //time given, set target
               this.opacA = parseFloat(this.opacity);
               this.opacB = parseFloat(action.arg[1]);
               
               this.opacStartTime = gTimeStamp;
               this.opacEndTime = gTimeStamp + parseInt(action.arg[2]);

               if(action.argCount == 4)
                  this.opacEaseType = action.arg[3];
               else
                  this.opacEaseType = "inOutQuad";

               //console.log("setting opacity " + this.name, this.opacB);
            }

            this.div.style.opacity = parseFloat(this.opacity);

            //this.doNextAction();
            break;

         case "FLIP":
            if(action.argCount == 2)
            {
               if(action.arg[1] == 1)
                  this.div.style.scale = "1 -1";
               else
                  this.div.style.scale = "1 1";
            }
            else
            {
               //scale is magic and if you set it to "1 1", it becomes "1"
               // this should just be two variables or a type with .x and .y
               // css/javascript is fucking retarded
               var xScale = 1;
               var yScale = 1;
               if(this.div.style.scale != "1" && this.div.style.scale != "")
               {
                  xScale = this.div.style.scale.split(' ')[0];
                  yScale = this.div.style.scale.split(' ')[1];
               }   

               yScale *= -1;
               this.div.style.scale = xScale + " " + yScale;
            }
            
            break;

         case "SOUND":
            //set sound defaults
            //setSoundLoop(action.arg[1], false);
            //setSoundVolume(action.arg[1], 1.0);
            //setSoundChannel(action.arg[1], -1);

            for(var i = 2; i < action.arg.length; i++)
            {
               if(action.arg[i] == "LOOP")
               {
                  setSoundLoop(action.arg[1], true);
                  continue;
               }
               if(action.arg[i] == "VOL")
               {  
                  i++;
                  setSoundVolume(action.arg[1], action.arg[i]);
               }
               if(action.arg[i] == "CH")
               {  
                  i++;
                  setSoundChannel(action.arg[1], action.arg[i]);
               }                    
            }
            

            if(action.arg[3] == "LOOP")
               setSoundLoop(action.arg[1], true);
            else
               

            playSound(action.arg[1]);
            
            //this.doNextAction();
            break;
         
         case "BLUR":
            if(action.argCount == 2)
            {
               //instant
               this.blur = action.arg[1];
               this.div.style.filter = "blur(" + this.blur + "px)";
               //this.doNextAction();
            }
            else if(action.argCount == 3)
            {               
               //time target
               this.blurA = this.blur;
               this.blurB = action.arg[1];
               this.blurStartTime = gTimeStamp;
               this.blurEndTime = gTimeStamp + parseInt(action.arg[2]);
               this.blurEaseType = "inOutQuad";
            }     
            else if(action.argCount == 4)
            {
               //time target + ease type
               this.blurA = this.blur;
               this.blurB = action.arg[1];
               this.blurStartTime = gTimeStamp;
               this.blurEndTime = gTimeStamp + parseInt(action.arg[2]);
               this.blurEaseType = action.arg[3];
            }

            break;

         case "PRELOAD":
            this.resize();
            if(isPreloadComplete())
            {
               //this.doNextAction();
               //this.div.innerHTML = "Loaded!";
               //this.div.className = "loadingText"; //in case of instant preload
               this.div.innerHTML = getPreloadString() + "<br>Click to play";
               this.div.className = "loadingText noSelect";
               //this.nextFrameTime = 0;

               //this.actionIdx--;
               this.nextFrameTime = gTimeStamp + 30;

               resizePage();               
            }
            else
            {
               //preload overlay
               this.div.innerHTML = getPreloadString();
               this.div.className = "loadingText";

               //check again in a little bit
               this.actionIdx--;
               this.nextFrameTime = gTimeStamp + 30;

               resizePage();
            }
            break;

         case "FILL":
            this.div.style.backgroundColor = action.arg[1];
            break;

         case "TEXT":
            //create text object
            //console.log("TEXT " + action.arg[4]);
            var d = document.createElement("div");
            d.innerHTML = action.arg[4];
            d.className = action.arg[1].replaceAll(",", " ") + " " + "noSelect";
            d.origin = new Point2I();

            //position may be relative to previous text box (makes moving things easier)
            var relative = false;
            if(action.arg[2].charAt(0) == "+")
               relative = true;
            if(action.arg[3].charAt(0) == "+")
               relative = true;

            if(relative)
            {
               d.origin.x = this.cursor.x + parseInt(action.arg[2]);
               d.origin.y = this.cursor.y + parseInt(action.arg[3]);
            }
            else             
            {
               d.origin.x = parseInt(action.arg[2]);
               d.origin.y = parseInt(action.arg[3]);
            }               

            this.cursor.x = d.origin.x;
            this.cursor.y = d.origin.y;

            d.style.left = (parseFloat(d.origin.x) / parseFloat(imageWidth) * 100.0) + "%";
            d.style.top = (parseFloat(d.origin.y) / parseFloat(imageHeight) * 100.0) + "%";
            this.div.appendChild(d);
            //foo = d;
            d.addEventListener("mousedown", onMouseDownText);
            d.addEventListener("mousemove", onMouseMoveText);
            d.addEventListener("mouseup",   onMouseUpText);
            d.addEventListener("click",     onClickText);
            d.overlay = this;
                     
            //this.doNextAction();
            this.resize();
            break;

         case "ONCLICKTEXT":
            //set a click event for the latest text object
            this.div.lastChild.clickAction = new Action();
            if(action.arg[1].charAt(0) == "$")
            {
               //variable assignments start with $
               this.div.lastChild.clickAction.arg[0] = "VAR-OP";
               this.div.lastChild.clickAction.argCount++;
               
               for(var a = 1; a < action.argCount; a++)
               {       
                  this.div.lastChild.clickAction.arg[a] = action.arg[a];
                  this.div.lastChild.clickAction.argCount++;
               }
            }   
            else
            {
               for(var a = 1; a < action.argCount; a++)
               {       
                  this.div.lastChild.clickAction.arg[a-1] = action.arg[a];
                  this.div.lastChild.clickAction.argCount++;
               }
            }
            break;

         case "CLEARTEXT":
            //clear all text objects
            while (this.div.firstChild) 
            {
               this.div.removeChild(this.div.firstChild);
            }
            //this.doNextAction();
            break;

         case "TAIL":
            var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
            var polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
            svg.appendChild(polygon);
            makeTail(polygon, action.arg[1], action.arg[2], action.arg[3], action.arg[4])
           
         
            svg.style.top = 0;
            svg.style.left = 0;
            svg.style.position = "absolute";
            svg.style.width = "100%";
            svg.style.height = "100%";
            svg.setAttribute("viewBox", "0 0 " + imageWidth + " " + imageHeight); 
            polygon.style.stroke = action.arg[5];
            polygon.style.fill = action.arg[5];
            //svg.onclick = clickHandler;
            svg.style.pointerEvents = "none";
            this.div.appendChild(svg);

            currDebugTail = polygon;
            
            //this.doNextAction();
            break;

         case "PARENT":
            //this.doNextAction();
            break;

         case "FRAME_PARENT":
            //this.doNextAction();
            break;

         case "TRANSITION":            
            this.scene.transitionType              = action.arg[1]; // fade/scrubLeft/etc
            this.scene.transitionDirection         = action.arg[2]; // in/out
            this.scene.fader.style.backgroundColor = action.arg[3]; // hex color
            this.scene.transitionStartTime = gTimeStamp;
            var time = action.arg[4];
            if(time.charAt(0) == "$")
               time = parseInt(storage[time]);
            else
               time = parseInt(time);
            this.scene.transitionEndTime = gTimeStamp + time;
            if(action.arg[5])
               this.scene.transitionEaseType = action.arg[5];
            else
               this.scene.transitionEaseType = "inOutQuad";
            
            this.scene.fader.style.opacity = 0.0;
            this.scene.fader.style.left = "0px;";
            this.scene.fader.style.right = "";               
            this.scene.fader.style.width = "100%";
            this.scene.fader.style.height = "100%";

            //this.doNextAction();
            break;

         case "PLAYALLSOUND":
            //hack for iOS, which will only play a sound in response to user input
            playAllSound();
            //this.doNextAction();
            break;

         case "STOPALLSOUND":
            //hack for iOS, which will only play a sound in response to user input
            stopAllSound(action.arg[1]);
            //this.doNextAction();
            break;

         case "CHVOLUME":
            //sound channel volume animation
            //CHVOLUME <channel> <volume> <time>
            setSoundChannelVolume(action.arg[1], action.arg[2], action.arg[3]);
            //this.doNextAction();
            break;

         case "VAR-OP":
            //console.log("VAR-OP");
            //console.log(action);

            var varName = action.arg[1];            
            switch(action.arg.length - 1)
            {
               case 1:
                  //must be ++/--
                  if( word[0].charAt(word[0].length-1) == "+" &&
                      word[0].charAt(word[0].length-2) == "+" )
                  {
                     varName = varName.substring(0, varName.length-2);
                     storage[varName]++;  
                  }
                  else if( word[0].charAt(word[0].length-1) == "-" &&
                           word[0].charAt(word[0].length-2) == "-" )
                  {
                     //varName = varName.substring(0, varName.length-2);
                     //storage[varName]--;
                  }
                  else
                  {
                     console.log("ERROR: VAR-OP bad unary operation");
                  }
                  break;

               case 3:
                  //assignment style
                  switch(action.arg[2])
                  {
                     case "=":
                        if(action.arg[3].charAt(0) == "$")
                           storage[varName] = storage[action.arg[3]];
                        else
                           storage[varName] = action.arg[3];
                        break;

                     case "+=":
                        if(action.arg[3].charAt(0) == "$")
                           storage[varName] += storage[action.arg[3]];
                        else
                           storage[varName] += action.arg[3];
                        break;

                     case "-=":
                        if(action.arg[3].charAt(0) == "$")
                           storage[varName] -= storage[action.arg[3]];
                        else
                           storage[varName] -= action.arg[3];
                        break;
                  }
                  break;

               case 5:
                  //a = b + c
                  console.log("TODO");
                  break;      

               default:
                  console.log("ERROR: VAR-OP - unsupported argument count " + action.arg.length);
                  break;
            }
            
            //this.doNextAction();
            break;
      }
   }

   resize()
   {
      this.div.style.height = this.h * gScale;
      this.div.style.width  = this.w * gScale;
      //this.div.style.left   = this.pos.x * gScale;
      //this.div.style.top    = this.pos.y * gScale;
      this.div.style.transform = "translate(" + (this.pos.x * gScale) + "px," + this.pos.y * gScale + "px)";

      //if this is a text overlay, recalculate font size
      //console.log("resizing " + this.name);
      if(this.div.className != "")
      {
         //console.log("resizing " + this.div.className);
         var classFontSize = "16px";

         //check sheets in reverse order for last one that has a font size set
         var sheetArray = this.div.className.split(' ');
         
         for(var i = sheetArray.length-1; i >= 0; i--) 
         {
            const sheet = styleBySelector[sheetArray[i]];   
            if(!sheet)
               continue;

            if(!sheet.fontSize)
               continue;

            classFontSize = sheet.fontSize;
            break;
         }
         
         this.div.style.fontSize = parseInt(classFontSize) * gScale;
      }

      //text box children
      for (var i = 0; i < this.div.children.length; i++) 
      {
         var child = this.div.children[i];

         if(child.tagName != "DIV")
            continue;
         
         //check sheets in reverse order for last one that has a font size set
         var sheetArray = child.className.split(' ');
         for(var j = sheetArray.length-1; j >= 0; j--) 
         {
            const sheet = styleBySelector[sheetArray[j]];
            if(!sheet)
               continue;
            if(!sheet.fontSize)
               continue;

            child.style.fontSize = parseInt(sheet.fontSize) * gScale;
            break;
         }
         for(var j = sheetArray.length-1; j >= 0; j--) 
         {
            const sheet = styleBySelector[sheetArray[j]];
            if(!sheet)
               continue;
            if(!sheet.padding)
               continue;

            var word = sheet.padding.split(" ");
            child.style.padding = (parseInt(word[0]) * gScale) 
            if(word[1])
                child.style.padding += " " + (parseInt(word[1]) * gScale);           
            break;
         }

         if(child.origin)
         {
            child.style.left = (parseFloat(child.origin.x) / parseFloat(imageWidth) * 100.0) + "%";
            child.style.top = (parseFloat(child.origin.y) / parseFloat(imageHeight) * 100.0) + "%";
         }
      }
   }

   animate()
   {
      //console.log("animate" + gTimeStamp + " > " + this.nextFrameTime);
      if(this.nextFrameTime > 0 && gTimeStamp > this.nextFrameTime)
      {
         var oldNFT = this.nextFrameTime; 
         
         var safety = 0;
         while(this.nextFrameTime > 0 && gTimeStamp > this.nextFrameTime)
         {            
            this.doNextAction();
            safety++;
            if(safety > 1000)
            {
               console.log("animate() - doNextAction infinite loop safety"); 
               this.nextFrammeTime = 0;
               break;
            }
         }

         //allows us to keep good global timing, but reset if we get too far behind (or when we load a new scene)
         if(this.nextFrameTime > 0 && this.nextFrameTime < gTimeStamp)
         {
            //console.log("time catchup");
            var delta = this.nextFrameTime - oldNFT;
            this.nextFrameTime = gTimeStamp + delta;
         }
      }

      //update smooth animations
      if(this.posEndTime > 0)
      {         
         if(gTimeStamp < this.posEndTime)
         {
            //calculate new x/y
            this.pos.x = ease(this.posEaseType, this.posStartTime, this.posEndTime, this.posA.x, this.posB.x, this.posEaseBounce, this.posEaseDecay);
            this.pos.y = ease(this.posEaseType, this.posStartTime, this.posEndTime, this.posA.y, this.posB.y, this.posEaseBounce, this.posEaseDecay);
         }            
         else
         {
            this.pos.x = this.posB.x;
            this.pos.y = this.posB.y;
            this.posStartTime = 0;
            this.posEndTime = 0;
         }

         //move the overlay
         //this.div.style.left   = this.pos.x * gScale;
         //this.div.style.top    = this.pos.y * gScale;  
         this.div.style.transform = "translate(" + (this.pos.x * gScale) + "px," + (this.pos.y * gScale) + "px)";
      }

      if(this.opacEndTime > 0)
      {
         if(gTimeStamp < this.opacEndTime)
         {
            //calculate new x/y
            this.opacity = ease(this.opacEaseType, this.opacStartTime, this.opacEndTime, this.opacA, this.opacB);
         }            
         else
         {
            this.opacity = this.opacB;
            this.opacStartTime = 0;
            this.opacEndTime = 0;
         }

         //console.log("opacity " + this.opacity);

         //move the overlay
         this.div.style.opacity = this.opacity;
      }

      if(this.blurEndTime > 0)
      {
         //console.log("animating blur " + this.blur);
         if(gTimeStamp < this.blurEndTime)
         {
            //calculate new x/y
            this.blur = ease(this.blurEaseType, this.blurStartTime, this.blurEndTime, this.blurA, this.blurB);
         }            
         else
         {
            this.blur = this.blurB;
            this.blurStartTime = 0;
            this.blurEndTime = 0;
         }

         //move the overlay
         this.div.style.filter = "blur(" + this.blur + "px)";
      }
   }
}

class Scene
{  
   constructor()
   {
      this.overlay = [];
      this.overlayCount = 0;
      this.name = "";
         
      this.transitionColor = "#FF00FF";
      this.transitionType = "fade";
      this.transitionDirection = "out";
      this.transitionStartTime = 0;
      this.transitionEndTime = 0;
      this.transitionEaseType = "inOutQuad";
   }

   newOverlay()
   {
      this.overlay[this.overlayCount] = new Overlay();
      this.overlay[this.overlayCount].scene = this;
      this.overlayCount++;
      return this.overlay[this.overlayCount-1];
   }

   resizeOverlays()
   {
      console.log("Scene " + this.name + " resizing " + this.overlayCount + " overlays!");
   }

   dump(pad)
   {
      console.log(pad + "SCENE " + this.name);
      for(var i = 0; i < this.overlayCount; i++)
      {
         this.overlay[i].dump(pad + "  ");
      }
   }

   preload()
   {
      for(var i = 0; i < this.overlayCount; i++)
      {
         this.overlay[i].preload();
      }
   }

   create()
   {
      console.log("----------- Creating scene '" + this.name + "'");

      //remember how many old children there are
      var oldChildCount = playArea.children.length;

      //create new stuff
      for(var i = 0; i < this.overlayCount; i++)
      {
         this.overlay[i].create();
      }
      
      //create a global overlay (for fadeouts)
      /*
      var o = document.createElement("div");
      o.id = "fader";
      o.onmousedown = selectionPreventer; //clicks fall through
      if(this.fader)
      {
         //copy style of old fader to avoid one frame flicker
         o.style = this.fader.style;
      }
      else
      {
         //default style
         o.style.height = "100%";
         o.style.width = "100%";
         o.style.left = 0;
         o.style.top = 0;
         o.style.position = "absolute";
         o.style.pointerEvents = "none";
      }
      playArea.appendChild(o);
      */
      this.fader = document.getElementById("fader");
      

      //delete old children from underneath (this prevents some flickering)
      for(var i = 0; i < oldChildCount; i++)
      {
         playArea.removeChild(playArea.firstChild);
      }

   }

   copyOverlaysFrom(otherScene)
   {
      //copy all overlays from the other scene to ourselves
      for(var i = 0; i < otherScene.overlayCount; i++)
      {
         this.newOverlay();
         var idx = this.overlayCount - 1;
   
         //none of this shit works.  javascript is fucking retarded.
         //this.overlay[idx] = JSON.parse(JSON.stringify(otherScene.overlay[i]));
         //this.overlay[idx] = Object.assign({}, otherScene.overlay[i]);
         //this.overlay[idx] = otherScene.overlay[i];
         //this.overlay[idx].scene = this;
      
         //deep copy important values
         // other properties are state machine stuff and don't need to be copied
         // huge PITA without assignment operator overloads
         this.overlay[idx].name        = otherScene.overlay[i].name;
         this.overlay[idx].frameParent = otherScene.overlay[i].frameParent;
         this.overlay[idx].parent      = otherScene.overlay[i].parent;
         this.overlay[idx].clickAction = JSON.parse(JSON.stringify(otherScene.overlay[i].clickAction));
         this.overlay[idx].action      = JSON.parse(JSON.stringify(otherScene.overlay[i].action));                
         this.overlay[idx].actionCount = otherScene.overlay[i].actionCount;        
         this.overlay[idx].origin.x    = otherScene.overlay[i].origin.x;        
         this.overlay[idx].origin.y    = otherScene.overlay[i].origin.y; 
         this.overlay[idx].w           = otherScene.overlay[i].w;
         this.overlay[idx].h           = otherScene.overlay[i].h;         
         
         //debug
         //console.log(otherScene.overlay[i]);
         //console.log(this.overlay[idx]);
      }
   }

   onClick(overlayName)
   {
      for(var i = 0; i < this.overlayCount; i++)
      {
         if(this.overlay[i].name != overlayName)
            continue;

         this.overlay[i].onClick();
         break;
      }
   }

   resize()
   {
      for(var i = 0; i < this.overlayCount; i++)
      {
         this.overlay[i].resize();
      }
   }

   animate()
   {
      for(var i = 0; i < this.overlayCount; i++)
      {
         this.overlay[i].animate();
      }

      //animate global transition
      if(this.transitionEndTime > 0)
      {
         if(this.transitionDirection == "out")
         {
            //fade out to color
            switch(this.transitionType)
            {
               case "fade":
                  this.fader.style.opacity = ease(this.transitionEaseType, this.transitionStartTime, this.transitionEndTime, 0.0, 1.0);
                  break;
        
               case "scrubLeft":
                  this.fader.style.opacity = 1.0;
                  this.fader.style.left  = "0px";
                  this.fader.style.right = "";
                  this.fader.style.width = ease(this.transitionEaseType, this.transitionStartTime, this.transitionEndTime, 0, 100) + "%";
                  break;

               case "scrubRight":
                  this.fader.style.opacity = 1.0;
                  this.fader.style.left  = "";
                  this.fader.style.right = "0px";
                  this.fader.style.width = ease(this.transitionEaseType, this.transitionStartTime, this.transitionEndTime, 0, 100) + "%";
                  break;

               case "scrubUp":
                  this.fader.style.opacity = 1.0;
                  this.fader.style.top  = "0px";
                  this.fader.style.bottom = "";
                  this.fader.style.height = ease(this.transitionEaseType, this.transitionStartTime, this.transitionEndTime, 0, 100) + "%";
                  break;
            
               case "scrubDown":
                  this.fader.style.opacity = 1.0;
                  this.fader.style.top  = "";
                  this.fader.style.bottom = "0px";
                  this.fader.style.height = ease(this.transitionEaseType, this.transitionStartTime, this.transitionEndTime, 0, 100) + "%";
                  break;
            }
         }
         else if(this.transitionDirection == "in")
         {
            //fade in to scene
            switch(this.transitionType)
            {
               case "fade":
                  this.fader.style.opacity = ease(this.transitionEaseType, this.transitionStartTime, this.transitionEndTime, 1.0, 0.0);
                  //console.log("fade in " + this.fader.style.opacity); 
                  break;

               case "scrubLeft":
                  this.fader.style.opacity = 1.0;
                  this.fader.style.left  = "";
                  this.fader.style.right = "0px";
                  this.fader.style.width = ease(this.transitionEaseType, this.transitionStartTime, this.transitionEndTime, 100, 0) + "%";
                  break;

               case "scrubRight":
                  this.fader.style.opacity = 1.0;
                  this.fader.style.left  = "0px";
                  this.fader.style.right = "";
                  this.fader.style.width = ease(this.transitionEaseType, this.transitionStartTime, this.transitionEndTime, 100, 0) + "%";
                  break;

               case "scrubUp":
                  this.fader.style.opacity = 1.0;
                  this.fader.style.top  = "";
                  this.fader.style.bottom = "0px";
                  this.fader.style.height = ease(this.transitionEaseType, this.transitionStartTime, this.transitionEndTime, 100, 0) + "%";
                  break;

               case "scrubDown":
                  this.fader.style.opacity = 1.0;
                  this.fader.style.top = "0px";
                  this.fader.style.bottom = "";
                  this.fader.style.height = ease(this.transitionEaseType, this.transitionStartTime, this.transitionEndTime, 100, 0) + "%";
                  break;
            }
         }
         


         if(gTimeStamp > this.transitionEndTime)
         {
            //console.log("end transition");
            this.transitionEndTime = 0;
         }
      }
   }

   overlayJumpTo(overlayName, labelName)
   {
      for(var i = 0; i < this.overlayCount; i++)
      {
         if(this.overlay[i].name != overlayName)
            continue;

         this.overlay[i].nextFrameTime = gTimeStamp;
         this.overlay[i].jumpTo(labelName);
         this.nextFrameTime = gTimeStamp;
         return;
      }

      console.log("ERROR: could not find overlay '" + overlayName + "' to JUMP to label '" + labelName + "'");
   }

   overlayCall(overlayName, labelName)
   {
      for(var i = 0; i < this.overlayCount; i++)
      {
         if(this.overlay[i].name != overlayName)
            continue;

         this.overlay[i].nextFrameTime = gTimeStamp;
         this.overlay[i].stack.push(this.overlay[i].actionIdx-1);
         this.overlay[i].jumpTo(labelName);
         return;
      }

      console.log("ERROR: could not find overlay '" + overlayName + "' to CALL to label '" + labelName + "'");
   }

   getDivByName(overlayName)
   {
      for(var i = 0; i < this.overlayCount; i++)
      {
         if(this.overlay[i].name != overlayName)
            continue;

         return(this.overlay[i].div);
      }
   }  

   getOverlayByName(overlayName)
   {
      for(var i = 0; i < this.overlayCount; i++)
      {
         if(this.overlay[i].name != overlayName)
            continue;

         return(this.overlay[i]);
      }

      console.log("ERROR: Could not get overlay by name '" + overlayName + "'");
   }

   updateSubFrames(targetFrameParent)
   {
      for(var i = 0; i < this.overlayCount; i++)
      {
         if(this.overlay[i].frameParent != targetFrameParent)
            continue;

         this.overlay[i].updateSubFrame();
      }
   }
}


var scene = [];
var sceneCount = 0;
var currSceneIdx = 0;
var gTimeStamp = 1;
var gScale = 1.0;

var sound = [];
var soundCount = 0;

var foo;
function init()
{ 
   buildStyleList();

   document.body.style.margin = "0px";

   if(typeof scriptText === 'undefined')  
   {
      console.log("scriptText undefined");
      return;
   }

   if(window.location.href.indexOf("file") > -1 )
   {
      //local host, use relative path
   }
   else
   {
      folder = "/img/" + folder;
   }

   //fix fontface urls
   /*
   var pathPrefix = folder + "/";
   if(window.location.href.indexOf("patreon.php") > -1 || window.location.href.indexOf("bonus.php") > -1 )
   {
      pathPrefix = "/img/" + folder + "/";
   }

   for (var j = 0; j < document.styleSheets.length; j++)  
   {
      var styleList = document.styleSheets[j].rules || document.styleSheets[j].cssRules;
      for (var i = 0; i < styleList.length; i++)
      {
         var key = styleList[i].selectorText;
         if(!key)
         {
            foo = styleList[i];
            console.log("src = " + styleList[i].style.src);
         }
      }
   }*/

   /*
   var newStyle = document.createElement('style');
   newStyle.appendChild(document.createTextNode("\
   @font-face {\
       font-family: blambotCasual;\
       src: url('LTM/Blambot Casual.ttf');\
   }\
   "));
   document.head.appendChild(newStyle);
   */

   //remove "javascript required" notice
   playArea.innerHTML = "";   

   parseScript(scriptText);   

   preloadBox.style.position = "absolute";
   preloadBox.style.top = "0px";
   preloadBox.style.left = "0px";

   //preload all scenes for now
   // TODO: preload only scenes we might goto next
   for(var i = 0; i < sceneCount; i++)
   {
      scene[i].preload();
   }

   scene[currSceneIdx].create();

   resizePage();

   window.requestAnimationFrame(animate);

   playArea.addEventListener("mousemove", onMouseMoveBG);
}

function resizePage()
{
   //console.log("resizePage");

   var areaWidth = playBox.offsetWidth;

   //cap width if we're not in element fullscreen mode
   if(!document.fullscreenElement)
   {
      if(typeof(imagePreScale) == 'undefined')
         areaWidth = Math.min(areaWidth, imageWidth);
      else
         areaWidth = Math.min(areaWidth, imageWidth / imagePreScale);
   }
   
   var areaHeight = areaWidth / imageWidth * imageHeight;   
   gScale = areaWidth / imageWidth;

   console.log("areaWidth = " + areaWidth);
   
   if(imageHeight / imageWidth < 2.5)
   {
      if(areaHeight > window.screen.height) //availheight is wrong on win10/firefox, excludes taskbar area
      {
         areaHeight = window.screen.availHeight;
         areaWidth = areaHeight / imageHeight * imageWidth;
         gScale = areaHeight / imageHeight;
      }
   }

   areaHeight = Math.round(areaHeight);
   areaWidth = Math.round(areaWidth);

   playArea.style.width = areaWidth;
   playArea.style.height = areaHeight;     
   
   buttonBox.style.maxWidth = areaWidth;
   buttonBox.style.marginLeft = "auto";
   buttonBox.style.marginRight = "auto";

   scene[currSceneIdx].resize();
}

function getBaseName(inputString)
{
   //console.log("getbasename " + inputString);
   var pos = inputString.lastIndexOf("/");
   if(pos > 0)
   {
      inputString = inputString.substring(pos+1, inputString.length);
   }

   var pos = inputString.lastIndexOf(".");
   if(pos > 0)
   {
      inputString = inputString.substring(0, pos);
   }
   /*
   inputString = inputString.replace(".jpg", "");
   inputString = inputString.replace(".png", "");
   inputString = inputString.replace(".gif", "");
   */
   inputString = inputString.replace(".", "-");
   return inputString;
}


function parseScript(script)
{
   //create and condition the data array
   var animDataArray = script.split("\n"); 
   for (var i = 0; i < animDataArray.length; i++) 
   {
      //trim white space
      animDataArray[i] = animDataArray[i].trim();

      //remove blank lines
      if(animDataArray[i].length <= 0)
      {
         animDataArray.splice(i, 1);
         i--;
         continue;
      }
   }   

   //convert script lines into object hierarchy
   //A scene is the top level container, things that happen in a scene can only effect things in that scene
   //Overlay is an image
      // it has a size and position
      // it has a list of actions that it steps through
      // actions are things like FRAME to change the image, OPACITY
         //these could be extended to change the frame/opacity of another overlay
         //position and opacity settings could be changed to ease functions and smooth updating independent of other animations
      // overlay can also have a click action (and later a mouse over action)
      // some actions can have control functionality, like jumping to a different step


   //iterate over line array
   for (var i = 0; i < animDataArray.length; i++) 
   {
      //split each line into a word array
      var word = animDataArray[i].split(" ");
      //console.log(animDataArray[i]);

      var currScene;
      var currOverlay;

      //parse the words
      switch(word[0])
      { 
         case "SCENE":
            //create a new scene object
            var idx = sceneCount;
            scene[idx] = new Scene();            
            scene[idx].name = word[1];
            sceneCount++;

            //remember it for easy reference
            currScene = scene[idx];

            //console.log("Adding scene " + word[1]);
            
            break;

         case "OVERLAY":
            //create a new overlay object inside the current scene
            currOverlay = currScene.newOverlay();

            if(word.length == 2)
            {
               //no size specified, assume full screen
               currOverlay.origin.x = 0;
               currOverlay.origin.y = 0;      
               currOverlay.w = imageWidth;
               currOverlay.h = imageHeight;
               currOverlay.name = word[1];               
            }
            else if(word.length == 6)
            {
               //position and size specified
               currOverlay.origin.x = parseInt(word[1]);
               currOverlay.origin.y = parseInt(word[2]);            
               currOverlay.w = word[3];
               currOverlay.h = word[4];
               currOverlay.name = word[5];
            }
            else
            {
               console.log("ERROR: overlay - bad number of arguments (" + word.length + ") line " + i);
            }


            currOverlay.action = [];
            currOverlay.actionCount = 0;
            break;

         case "PASTESCENE":
            pasteScene(currScene, word[1]);
            break;

         case "PARENT":
            currOverlay.parent = word[1];
            break;

         case "FRAME_PARENT":
            currOverlay.frameParent = word[1];
            break;

         case "FONT":
            var path = folder + "/" + word[1];
            if(window.location.href.indexOf("patreon.php") > -1 || window.location.href.indexOf("bonus.php") > -1 )
            {
               path = "/img/" + folder + "/" + word[1];
            }
            var fontFamily = getBaseName(word[1]);
            fontFamily = fontFamily.replace("-bold", "");
            fontFamily = fontFamily.replace("-italic", "");

            var newStyle = document.createElement('style');

            if(word[2] == "bold")
            {
               newStyle.appendChild(document.createTextNode("\
               @font-face {\
                   font-family: " + fontFamily + ";\
                   font-weight: bold \
                   src: url('" + path + "');\
               }\
               "));
            }
            else if(word[2] == "italic")
            {
               newStyle.appendChild(document.createTextNode("\
               @font-face {\
                   font-family: " + fontFamily + ";\
                   font-style: italic \
                   src: url('" + path + "');\
               }\
               "));
            }
            else
            {
               newStyle.appendChild(document.createTextNode("\
               @font-face {\
                   font-family: " + fontFamily + ";\
                   src: url('" + path + "');\
               }\
               "));
            }

            document.head.appendChild(newStyle);

            break;

         case "TEXT":
            //TEXT <classname> <x> <y> <arbitrary text>
            currOverlay.action[currOverlay.actionCount] = new Action();
            currOverlay.action[currOverlay.actionCount].arg[0] = "TEXT";
            currOverlay.action[currOverlay.actionCount].arg[1] = word[1]; //classname
            currOverlay.action[currOverlay.actionCount].arg[2] = word[2]; //x
            currOverlay.action[currOverlay.actionCount].arg[3] = word[3]; //y
            currOverlay.action[currOverlay.actionCount].arg[4] = word[4]; //text

            //remaining words are combined text
            for(var j = 5; j < word.length; j++)
            {
               currOverlay.action[currOverlay.actionCount].arg[4] += " " + word[j];
            }
            currOverlay.actionCount++;
            break;

         case "FRAME":
         case "SUBFRAME":
         case "SETSCENE":
         case "WAIT": 
         case "GOTO":
         case "CALL":
         case "RETURN":
         case "RANDOM":
         case "RANDOM_BAG":
         case "END_RANDOM":
         case "OFRAME":
         case "POS":
         case "POS+":
         case "OPAC":
         case "SOUND":
         case "BLUR":
         case "PRELOAD":
         case "FILL":
         case "CLEARTEXT":
         case "TAIL":
         case "TRANSITION":
         case "PLAYALLSOUND":
         case "STOPALLSOUND":
         case "PASTESCENE":
         case "CHVOLUME":
         case "ONCLICKTEXT":
         case "FLIP":
            //generically copy the line into argument array
            // TODO: validate argument counts and types

            //create new action object in current overlay
            currOverlay.addAction(word);            
            break;

         case "CLICK":
            //special action that occurs when we click on the overlay
            if(word[1].charAt(0) == "$")
            {
               //variable assignments start with $
               currOverlay.clickAction.arg[0] = "VAR-OP";
               currOverlay.clickAction.argCount++;
               
               for(var a = 1; a < word.length; a++)
               {       
                  currOverlay.clickAction.arg[a] = word[a];
                  currOverlay.clickAction.argCount++;
               }
            }   
            else
            {
               for(var a = 1; a < word.length; a++)
               {       
                  //console.log(currOverlay);
                  currOverlay.clickAction.arg[a-1] = word[a];
                  currOverlay.clickAction.argCount++;
               }
            }
            break;

         default:
            //jump labels are arbitrary words that end with a :
            if(word[0].charAt(word[0].length-1) == ":")
            {
               //console.log("label " + word[0].substring(0, word[0].length-1));
               var tempWord = [];
               tempWord[0] = "LABEL";
               tempWord[1] = word[0].substring(0, word[0].length-1);
               currOverlay.addAction(tempWord); 
            }
            else if(isNumber(word[0]))
            {
               //random entries start with a weighting number

               //handle variable assignments within a random statement
               // this should probably be handled within addRandAction?
               if(word[1].charAt(0) == "$")
               {
                  //variable assignments start with $
                  var tempWord = [];
                  tempWord[0] = word[0];
                  tempWord[1] = "VAR-OP";
                  for(var j = 1; j < word.length; j++)
                  {
                     tempWord[j+1] = word[j];
                  }                  
                  currOverlay.addRandAction(tempWord); 
               }
               else
               {
                  currOverlay.addRandAction(word);  
               }
            }
            else if(word[0].charAt(0) == "$")
            {
               //variable assignments start with $
               var tempWord = [];
               tempWord[0] = "VAR-OP";
               for(var j = 0; j < word.length; j++)
               {
                  tempWord[j+1] = word[j];
               }                  
               currOverlay.addAction(tempWord); 
            }
            else
            {
               console.log("ERROR: unknown label '" + word[0] + "'");
            }
            break;
      }
   }

}


var preloadImage = [];
var preloadImageCount = 0;

function onLoadPreloadImage()
{
   var idx = this.idx;   

   var baseName = getBaseName(preloadImage[idx].src);
   //console.log("baseName = " + baseName);
   console.log("preload completed " + idx, preloadImage[idx].path);

   //create a css class
   var style = document.createElement('style');
   style.type = 'text/css';     
   style.innerHTML = ".preload-" + baseName +  "{ background: url('" + preloadImage[idx].src + "')  no-repeat; width:1px; height:1px; }";
   //console.log("style innerhtml = " + style.innerHTML);   
   document.getElementsByTagName('head')[0].appendChild(style);

   //create an actual image element on the page
   // firefox in particular won't actually allocate the image until it used, leading to a flicker on first play through
   // we could do this on scene transition, just for the images that will be used in the next scene
   var d = document.createElement("div");
   d.className = "preload-" + baseName;
   preloadBox.appendChild(d);
}

function isPreloadComplete()
{
   for(var i = 0; i < preloadImageCount; i++)
   {
      if(!preloadImage[i].complete)
         return false;
      if(preloadImage[i].naturalHeight == 0)
         return false;
   }
   
   //iterate over associative array
   for(var key in sound)
   {
      //console.log(sound[key]);
      //removing this for iphone as well, just a shot in the dark
      /*
      if(!sound[key].buffered)
         return false;
      */

      //iphone has no length
      /*
      if(sound[key].buffered.length == 0)
         return false;
      */
   }

   return true;
}

function dumpPreload()
{
   for(var i = 0; i < preloadImageCount; i++)
   {
      if(!preloadImage[i].complete)
      {
         console.log("Incomplete: " + preloadImage[i].src);
         continue;
      }
      if(preloadImage[i].naturalHeight == 0)
      {
         console.log("No Height: " + preloadImage[i].src);
         continue;
      }
   }

   //iterate over associative array
   for(var key in sound)
   {
      //console.log(sound[key]);
      if(!sound[key].buffered)
      {
         console.log("Unbuffered: " + key);
         continue;
      }
      if(sound[key].buffered.length == 0)
      {
         console.log("Length 0: " + key);
         continue;
      }
   }
}

function getPreloadString()
{
   var str = "Loading ";
   if(isPreloadComplete())
   {
      str = "Loaded!";
   }
   else
   {
      switch(parseInt(gTimeStamp / 200) % 4)
      {  
         /*
         case 0: str += "#----"; break;
         case 1: str += "-#---"; break;
         case 2: str += "--#--"; break;
         case 3: str += "---#-"; break;
         case 4: str += "----#"; break;
         case 5: str += "---#-"; break;
         case 6: str += "--#--"; break;
         case 7: str += "-#---"; break;
         */

         case 0: str += ""; break;
         case 1: str += "."; break;
         case 2: str += ".."; break;
         case 3: str += "..."; break;
      }      
   }
   str += "<br>";
    
   var c = 0;
   for(var i = 0; i < preloadImageCount; i++)
   {      
      if(c > 0 && c % 15 == 0)
         str += "<BR>";
      c++;

      if(!preloadImage[i].complete)
      {
         str += "&#9744;"; //empty box
         continue;
      }
      if(preloadImage[i].naturalHeight == 0)
      {
         str += "&#9744;"; //empty box
         continue;
      }

      str += "&#9745;"; //checked box
      continue;      
   }

   //iterate over associative array
   for(var key in sound)
   {
      if(c > 0 && c % 15 == 0)
         str += "<BR>";
      c++;
      
      //removing this for iphone as well, just a shot in the dark
      /*
      if(!sound[key].buffered)
      {
         str += "&#9744;"; //empty box
         continue;
      }
      */
      
      //iphone has no length
      /*
      if(sound[key].buffered.length == 0)
      {
         str += "&#9744;"; //empty box
         continue;
      }
      */

      str += "&#9745;"; //checked box
      continue;  
   }

   //console.log(str);
   return str;
}

function onErrorPreloadImage()
{
   var idx = this.idx;
   console.log("ERROR: Failed to preload image " + preloadImage[idx].src);
}

function addPreloader(preloadName)
{
   //filter filename down to base name
   var baseName = getBaseName(preloadName);

   //console.log("preloadName = " + preloadName);

   var path = folder + "/" + preloadName;
   if(window.location.href.indexOf("patreon.php") > -1 || window.location.href.indexOf("bonus.php") > -1 )
      path = "/img/" + folder + "/" + preloadName;

   if(1)
   {
      //check if already loading
      for(var i = 0; i < preloadImageCount; i++)
      {
         //console.log("  " + preloadImage[i].src, path);      
         if(preloadImage[i].path == path)
            return;
      }

      //javascript image object preload
      var idx = preloadImageCount;
      preloadImage[idx] = new Image();
      var pState = {idx: idx};
      preloadImage[idx].onload = onLoadPreloadImage.bind(pState);
      preloadImage[idx].onerror = onErrorPreloadImage.bind(pState);
      preloadImage[idx].src = path; //this will get corrected do a full URL
      preloadImage[idx].path = path; // so we save it here too for easy checking
      preloadImageCount++;      
   }

   if(0)
   {
      //css + small div preload

      //if preloader already exists, we're done
      if(document.getElementsByClassName("preload-" + baseName)[0] != undefined)
      {
         //console.log("Preloader 'preload-" + baseName  + "' already defined, skipping");
         return "preload-" + baseName;
      }

      //create a css class
      var style = document.createElement('style');
      style.type = 'text/css';     
      style.innerHTML = ".preload-" + baseName +  "{ background: url('" + path + "')  no-repeat; width:10px; height:10px; }";
      //console.log("style innerhtml = " + style.innerHTML);   
      document.getElementsByTagName('head')[0].appendChild(style);
      

      //create a prefetch head element
      /*
      var link = document.createElement('link');
      link.rel = 'preload';
      link.href = "/img/" + folder + "/" + preloadName;
      link.as = 'image';
      document.getElementsByTagName('head')[0].appendChild(link);
      */

      //create a div with that class
      var d = document.createElement("div");
      d.className = "preload-" + baseName;
      preloadBox.appendChild(d);
      return "preload-" + baseName;
   }
}

function preloadSound(soundName)
{
   if(typeof(sound[soundName]) == "undefined")
   {
      var path = folder + "/" + soundName;
      if(window.location.href.indexOf("patreon.php") > -1 ||
         window.location.href.indexOf("bonus.php")   > -1 )
      {
         path = "/img/" + folder + "/" + soundName;
      }

      //console.log("preloading audio " + path);

      sound[soundName] = new Audio(path);  
   }  
}

function playAllSound()
{
   //iterate over associative array
   for(var key in sound)
   {
      //console.log("playing " + key);
      sound[key].play();
      sound[key].pause();
      sound[key].currentTime = 0;
      //sleep(200);
   }
}

function stopAllSound(channel)
{
   for(var key in sound)
   {
      //if we've specified a channel to stop, sound must match that channel
      if(channel !== "")
      {
         if(sound[key].channel != channel)
            continue;
      }

      sound[key].pause();
      sound[key].currentTime = 0;
   }
}

function setSoundVolume(soundName, volume)
{
   if(!sound[soundName])
      return;
    
   //don't fuck up volume animations
   if(sound[soundName].animStartTime)
      return;

   sound[soundName].volume = volume;
}

function setSoundChannel(soundName, channel)
{
   if(!sound[soundName])
      return;
    
   sound[soundName].channel = channel;
}

function setSoundLoop(soundName, loop)
{
   if(!sound[soundName])
      return;
    
   sound[soundName].loop = loop;
}

function setSoundChannelVolume(targetChannel, targetVolume, time)
{
   for(var key in sound)
   {
      if(sound[key].channel != targetChannel)
         continue;
      
      sound[key].animVolA = sound[key].volume;
      sound[key].animVolB = targetVolume;

      if(time == 0)
      {
         sound[key].volume = targetVolume;
      }
      else
      {
         sound[key].animStartTime = gTimeStamp;
         sound[key].animEndTime = gTimeStamp + parseInt(time); // the ol' 2+2 = 22 javascript special
      }
   }
}

function animateSoundVolume()
{
   for(var key in sound)
   {      
      if(!sound[key].animStartTime)
         continue;
    
      //console.log(sound[key].animStartTime + " => " + sound[key].animEndTime); 
      //console.log(ease("linear", sound[key].animStartTime, sound[key].animEndTime, sound[key].animVolA, sound[key].animVolB));

      sound[key].volume = ease("linear", sound[key].animStartTime, sound[key].animEndTime, sound[key].animVolA, sound[key].animVolB);   
      if(gTimeStamp > sound[key].animEndTime)
      {
         sound[key].animStartTime = 0;
         sound[key].animEndTime = 0;
      }
   }
}

function playSound(soundName)
{
   if(sound[soundName].channel != -1)
   {
      stopAllSound(sound[soundName].channel);  
   }

   sound[soundName].play();
}

function setScene(sceneName)
{
   //clear the preloadbox (having lots of images on top hurts performance on chrome)
   //clearing here in the hopes that firefox will do whatever 
   preloadBox.innerHTML = "";

   if(sceneName == "NEXT")
   {
      currSceneIdx++;
      currSceneIdx %= sceneCount;
      scene[currSceneIdx].create();
      return;
   }

   if(sceneName == "PREV")
   {
      currSceneIdx--;
      if(currSceneIdx < 0)
         currSceneIdx = sceneCount-1;
      scene[currSceneIdx].create();
      return;
   }

   //variable lookup
   if(sceneName.charAt(0) == "$")
   {
      sceneName = storage[sceneName];
   }

   for(var i = 0; i < sceneCount; i++)
   {
      if(scene[i].name != sceneName)
         continue;

      currSceneIdx = i;
      scene[i].create();
      return;
   }

   console.log("ERROR: Could not find scene '" + sceneName + "'");  
}

function pasteScene(currScene, targetSceneName)
{
   //find the target scene
   for(var i = 0; i < sceneCount; i++)
   {
      if(scene[i].name != targetSceneName)
         continue;

      currScene.copyOverlaysFrom(scene[i]);
      return true;
   }

   console.log("ERROR: pasteScene() - could not find target scene '" + targetSceneName + "'");
   return false;
}

function dumpScenes()
{
   //iterate and print for debugging
   for (var i = 0; i < sceneCount; i++) 
   {
      scene[i].dump("");
   }
}

function dumpCurrScene()
{
   scene[currSceneIdx].dump("");
}  

var mouseDownObj;
var clickIgnore;
function onMouseDownText(e)
{
   //console.log("mousedown text");
   if(currDebugMode == "dragText")
   {
      mouseDownObj = e.srcElement;
      clickIgnore = 2;
   }
}
function onMouseMoveText(e)
{
   //console.log("mousemove text ");
   //console.log(e.movementX);
   
   if(mouseDownObj)
   {
      mouseDownObj.origin.x += parseInt(parseInt(e.movementX) / gScale);
      mouseDownObj.origin.y += parseInt(parseInt(e.movementY) / gScale);
      //console.log("xy ", e.srcElement.origin.x, e.srcElement.origin.y);
      mouseDownObj.style.left = (parseFloat(mouseDownObj.origin.x) / parseFloat(imageWidth) * 100.0) + "%";
      mouseDownObj.style.top = (parseFloat(mouseDownObj.origin.y) / parseFloat(imageHeight) * 100.0) + "%";
   }
}
function onMouseUpText(e)
{
   //console.log("mouseuptext");
   if(mouseDownObj)
   {
      console.log("TEXT ", mouseDownObj.origin.x, mouseDownObj.origin.y);
   }
   mouseDownObj = "";
}

function onClickText(e)
{
   //console.log();

   e.srcElement.overlay.doAction(e.srcElement.clickAction);
}


//debug function to move overlays around with WASD
var currDebugOverlay;
var currDebugTail;
var currDebugMode;
function onKeyPress(e)
{
   e = e || window.event;


   var top = 0;
   var left = 0;

   if(currDebugOverlay)
   {
      //top = currDebugOverlay.style.top.replace("px", "");
      //left = currDebugOverlay.style.left.replace("px", "");

   }

   switch(e.key)
   {
      case "e":
         if(currDebugMode == "tailEnd")
         {
            currDebugMode = "";
            if(currDebugTail)
               console.log("TAIL", currDebugTail.start.x, currDebugTail.start.y, currDebugTail.end.x, currDebugTail.end.y, currDebugTail.style.fill);
         }
         else
         {
            currDebugMode = "tailEnd";    
         }
         break;
      case "s":
         if(currDebugMode == "tailStart")
         {
            currDebugMode = "";
            if(currDebugTail)
               console.log("TAIL", currDebugTail.start.x, currDebugTail.start.y, currDebugTail.end.x, currDebugTail.end.y, currDebugTail.style.fill);
         }
         else
         {
            currDebugMode = "tailStart";    
         }
         break;
      case "t": 
         currDebugMode = "dragText";   
         break;      
   }

   /*
   switch(e.key)
   {
      case "1":
      case "2":
      case "3":
      case "4":
      case "5":
      case "6":
      case "7":
      case "8":
      case "9":
      case "0":
         currDebugOverlay = document.getElementById("overlay-" + e.key);
         if(currDebugOverlay)
         {
            console.log("Selected overlay " + e.key);  
            currDebugOverlay.style.opacity = 0.5;
         }
         return;
         break;

      case "w":         
         top--;         
         break;
      
      case "a":
         left--;
         break;
      
      case "s":
         top++;
         break;

      case "d":
         left++;
         break;


      //javascript number handling is fucking ludicrous
      // using the += operator concatenates them as strings, so we jump through the math.floor hoop
      case "W":         
         top = Math.floor(top) - 10;         
         break;
      
      case "A":
         left = Math.floor(left) - 10;        
         break;
      
      case "S":
         top = Math.floor(top) + 10;        
         break;

      case "D":
         left = Math.floor(left) + 10;        
         break;
   }
   */

   if(currDebugOverlay)
   {
      currDebugOverlay.style.top = top + "px";
      currDebugOverlay.style.left = left + "px";
      console.log("Overlay moved to " + currDebugOverlay.style.left + ", " + currDebugOverlay.style.top);
   }
}  


function selectionPreventer(e)
{
   //bound to mousedown, prevents text selection via double/triple click
   if (e.detail > 1)
   {
      e.preventDefault();
   }
}

function clickHandler(e)
{
   //console.log("click handler");
   //console.log(e.srcElement);
   //e.preventDefault();

   //clicks on text boxes are falling through to parent
   if(clickIgnore > 0)
   {
      clickIgnore--;
      return;
   }

   
   //foo = e.srcElement;
   
   var overlayName = e.srcElement.id;

   //for SVG child overlay
   // svg element will have no id, but it's immediate parent will
   if(overlayName == "")
   {
      if(e.srcElement.parentElement)
         overlayName = e.srcElement.parentElement.id;
   }

   overlayName = overlayName.replace("overlay-", "");
   scene[currSceneIdx].onClick(overlayName);
}

function animate(timeStamp)
{
   //console.log("animate " + timeStamp);
   gTimeStamp = parseInt(timeStamp);
   scene[currSceneIdx].animate();  
   animateSoundVolume();

   //queue up next animation frame
   window.requestAnimationFrame(animate);
}


function rand(min, max) 
{
  return Math.floor(Math.random() * (max - min + 1) + min);
}


//t: current time
//b: start value
//c: change in value (overall distance to travel)
//d: duration

function ease(easeType, startTime, endTime, startVal, endVal, bounce, decay) 
{
   var t = parseFloat(gTimeStamp) - parseFloat(startTime);
   var b = parseFloat(startVal);
   var c = parseFloat(endVal) - parseFloat(b);
   var d = parseFloat(endTime) - parseFloat(startTime);

   if(t > d)
      t = d;

   switch(easeType)
   {
      case "linear":        return easeLinear(t,b,c,d); 
		case "inQuad":        return easeInQuad(t,b,c,d); 
		case "outQuad":       return easeOutQuad(t,b,c,d); 
		case "inOutQuad":     return easeInOutQuad(t,b,c,d); 
		case "inCubic":       return easeInCubic(t,b,c,d); 
		case "outCubic":      return easeOutCubic(t,b,c,d); 
		case "inOutCubic":    return easeInOutCubic(t,b,c,d); 
		case "inQuart":       return easeInQuart(t,b,c,d); 
		case "outQuart":      return easeOutQuart(t,b,c,d); 
		case "inOutQuart":    return easeInOutQuart(t,b,c,d); 
		case "inQuint":       return easeInQuint(t,b,c,d); 
		case "outQuint":      return easeOutQuint(t,b,c,d); 
		case "inOutQuint":    return easeInOutQuint(t,b,c,d); 
		case "inSine":        return easeInSine(t,b,c,d); 
		case "outSine":       return easeOutSine(t,b,c,d); 
		case "inOutSine":     return easeInOutSine(t,b,c,d); 
		case "inExpo":        return easeInExpo(t,b,c,d); 
		case "outExpo":       return easeOutExpo(t,b,c,d); 
		case "inOutExpo":     return easeInOutExpo(t,b,c,d); 
		case "inCirc":        return easeInCirc(t,b,c,d); 
		case "outCirc":       return easeOutCirc(t,b,c,d); 
		case "inOutCirc":     return easeInOutCirc(t,b,c,d); 
      case "elastic":    return easeOutElastic(t,b,c,d,bounce,decay);
      case "expBounce":  return easeOutBounce(t,b,c,d);
      case "bounce":     return easeOutBounce(t,b,c,d,bounce,decay);
      default:
         console.log("ERROR: invalid easeType '" + easeType + "'");
         return easeInOutQuad(t,b,c,d);
   }  
}

function easeLinear(t, b, c, d) 
{
	return c*t/d + b;
}
		
// quadratic easing in - accelerating from zero velocity
function easeInQuad(t, b, c, d) 
{
	t /= d;
	return c*t*t + b;
}		

// quadratic easing out - decelerating to zero velocity
function easeOutQuad(t, b, c, d) 
{
	t /= d;
	return -c * t*(t-2) + b;
}

// quadratic easing in/out - acceleration until halfway, then deceleration
function easeInOutQuad(t, b, c, d) 
{
	t /= d/2;
	if (t < 1) return c/2*t*t + b;
	t--;
	return -c/2 * (t*(t-2) - 1) + b;
}

// cubic easing in - accelerating from zero velocity
function easeInCubic(t, b, c, d) 
{
	t /= d;
	return c*t*t*t + b;
}

// cubic easing out - decelerating to zero velocity
function easeOutCubic(t, b, c, d) 
{
	t /= d;
	t--;
	return c*(t*t*t + 1) + b;
}

// cubic easing in/out - acceleration until halfway, then deceleration
function easeInOutCubic(t, b, c, d) 
{
	t /= d/2;
	if (t < 1) return c/2*t*t*t + b;
	t -= 2;
	return c/2*(t*t*t + 2) + b;
}
	
// quartic easing in - accelerating from zero velocity
function easeInQuart(t, b, c, d) 
{
	t /= d;
	return c*t*t*t*t + b;
}		

// quartic easing out - decelerating to zero velocity
function easeOutQuart(t, b, c, d) 
{
	t /= d;
	t--;
	return -c * (t*t*t*t - 1) + b;
}
	
// quartic easing in/out - acceleration until halfway, then deceleration
function easeInOutQuart(t, b, c, d) 
{
	t /= d/2;
	if (t < 1) return c/2*t*t*t*t + b;
	t -= 2;
	return -c/2 * (t*t*t*t - 2) + b;
}

// quintic easing in - accelerating from zero velocity
function easeInQuint(t, b, c, d) 
{
	t /= d;
	return c*t*t*t*t*t + b;
}
		
// quintic easing out - decelerating to zero velocity
function easeOutQuint(t, b, c, d) 
{
	t /= d;
	t--;
	return c*(t*t*t*t*t + 1) + b;
}
		
// quintic easing in/out - acceleration until halfway, then deceleration
function easeInOutQuint(t, b, c, d) 
{
	t /= d/2;
	if (t < 1) return c/2*t*t*t*t*t + b;
	t -= 2;
	return c/2*(t*t*t*t*t + 2) + b;
}
		
// sinusoidal easing in - accelerating from zero velocity
function easeInSine(t, b, c, d) 
{
	return parseFloat(-c * Math.cos(t/d * (Math.PI/2)) + c + b);
}

// sinusoidal easing out - decelerating to zero velocity
function easeOutSine(t, b, c, d) 
{
	return parseFloat(c * Math.sin(t/d * (Math.PI/2)) + b);
}

// sinusoidal easing in/out - accelerating until halfway, then decelerating
function easeInOutSine(t, b, c, d) 
{
	return parseFloat(-c/2 * (Math.cos(Math.PI*t/d) - 1) + b);
}

// exponential easing in - accelerating from zero velocity
function easeInExpo(t, b, c, d) 
{
	return c * Math.pow(2.0, 10.0 * (t/d - 1)) + b;

}

// exponential easing out - decelerating to zero velocity
function easeOutExpo(t, b, c, d) 
{
	return c * -Math.pow(2.0, -10.0 * t/d) + 1 + b;
}
		
// exponential easing in/out - accelerating until halfway, then decelerating
function easeInOutExpo(t, b, c, d) 
{
	t /= d/2;
	if (t < 1) return c/2 * Math.pow(2.0, 10.0 * (t - 1)) + b;
	t--;
	return c/2 * -Math.pow(2.0, -10.0 * t) + 2 + b;
}
		
// circular easing in - accelerating from zero velocity
function easeInCirc(t, b, c, d) 
{
	t /= d;
	return -c * Math.sqrt(1 - t*t) - 1 + b;
}

// circular easing out - decelerating to zero velocity
function easeOutCirc(t, b, c, d) 
{
	t /= d;
	t--;
	return c * Math.sqrt(1.0 - t*t) + b;
}

// circular easing in/out - acceleration until halfway, then deceleration
function easeInOutCirc(t, b, c, d) 
{
	t /= d/2;
	if (t < 1) return -c/2 * Math.sqrt(1.0 - t*t - 1) + b;
	t -= 2;
	return c/2 * Math.sqrt(1.0 - t*t) + 1 + b;
}

function easeOutElastic(t,b,c,d, bounce, decay)
{
   //t: current time
   //b: start value
   //c: change in value (overall distance to travel)
   //d: duration

   if(c == 0)
      return b;
   if(t >= d)
      return b + c;

   var t = t / d;

   bounce = (parseFloat(bounce) + 0.5) * Math.PI;
   var pow = Math.exp(-decay * t);
   var cos = Math.cos(bounce * t);
   var ratio = 1.0 - (pow * cos);
   
   return b + (c * ratio);
}

function easeOutBounce(t,b,c,d, bounce, decay)
{
   if(c == 0)
      return b;
   if(t >= d)
      return b + c;

   var t = t / d;
   bounce = (parseFloat(bounce) + 0.5) * Math.PI;
   var ratio = 1 - (Math.exp(-t * decay) * Math.abs(Math.cos(bounce * t)));
   //console.log(t + ", " + b + ", " + c + ", " + d + " => " + ratio);

   return b + (c * ratio); 

}

function easeOutExpBounce(t,b,c,d)
{
   if(c == 0)
      return b;
   if(t >= d)
      return b + c;

   //exponential decay
   const n1 = 7.5625;
   const d1 = 2.75;

   var t = t / d;
   var ratio = 0.0;

   if (t < 1 / d1) {
       ratio = n1 * t * t;
   } else if (t < 2 / d1) {
       ratio = n1 * (t -= 1.5 / d1) * t + 0.75;
   } else if (t < 2.5 / d1) {
       ratio = n1 * (t -= 2.25 / d1) * t + 0.9375;
   } else {
       ratio = n1 * (t -= 2.625 / d1) * t + 0.984375;
   }
   return b + (c * ratio); 
}





function onFullscreenChange(e)
{
   resizePage();
}

function enableFullscreen()
{
   var elem = document.getElementById("playBox"); 
   if (elem.requestFullscreen)
   {
      elem.requestFullscreen();
   } 
   else if (elem.webkitRequestFullscreen) /* Safari */
   {
      elem.webkitRequestFullscreen();
   }
   else if(elem.msRequestFullscreen) /* IE11 */
   {
      elem.msRequestFullscreen();
   }   

   resizePage();
}


//generate an array of style sheets, indexed by classname
var styleBySelector = {};
function buildStyleList()
{   
   for (var j = 0; j < document.styleSheets.length; j++)  
   {
      var styleList = document.styleSheets[j].rules || document.styleSheets[j].cssRules;
      for (var i = 0; i < styleList.length; i++)
      {
         var key = styleList[i].selectorText;
         if(key)
         {
            key = key.substring(1, 9999); //remove leading "."
            styleBySelector[key] = styleList[i].style;
         }
         else
         {
            console.log(styleList[i]);
         }
      }
   }

   //console.log(styleBySelector);
}

function makeTail(polygon, startX, startY, endX, endY)
{
   //makes a wordbubble tail
   var svg = polygon.parentElement;

   polygon.start = new Point2I();
   polygon.start.x = parseInt(startX);
   polygon.start.y = parseInt(startY);
   polygon.end = new Point2I();
   polygon.end.x = parseInt(endX);
   polygon.end.y = parseInt(endY);
   
   var width = 20 * imagePreScale;

   var delta = new Point2I();
   delta.x = polygon.end.x - polygon.start.x;
   delta.y = polygon.end.y - polygon.start.y;
   delta.normalize(width / 2);

   polygon.points.clear();
   
   var point;

   point = svg.createSVGPoint();      
   point.x = polygon.start.x - delta.y;
   point.y = polygon.start.y + delta.x; 
   polygon.points.appendItem(point);     
         
   point = svg.createSVGPoint();      
   point.x = polygon.start.x + delta.y;
   point.y = polygon.start.y - delta.x;
   polygon.points.appendItem(point);                  

   point = svg.createSVGPoint();      
   point.x = polygon.end.x;
   point.y = polygon.end.y;
   polygon.points.appendItem(point); 
}

function onMouseMoveBG(e)
{
   //console.log("mousemove bg", e);

   var rect = playArea.getBoundingClientRect();
   var x = e.x - rect.left;
   var y = e.y - rect.top;

   switch(currDebugMode)
   {
      case "tailEnd":
         if(currDebugTail)
         {
            makeTail(currDebugTail,currDebugTail.start.x, currDebugTail.start.y, x / gScale, y / gScale);            
         }
         break;

     case "tailStart":
         if(currDebugTail)
         {
            makeTail(currDebugTail, x / gScale, y / gScale, currDebugTail.end.x, currDebugTail.end.y);
         }
         break;
      
      default:
         break;
   }
}



window.addEventListener("resize", resizePage);
window.addEventListener("load", init);
window.addEventListener("keypress", onKeyPress);




document.addEventListener('fullscreenchange', onFullscreenChange);
document.addEventListener('mozfullscreenchange', onFullscreenChange);
document.addEventListener('MSFullscreenChange', onFullscreenChange);
document.addEventListener('webkitfullscreenchange', onFullscreenChange);