var overlay = [];
var overlayCount = 0;
var animDataArray;


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

   //preload the background image
   //set the background image
   if(typeof bgFileName === 'undefined')      
      bgFileName = "bg.jpg";
   bg.className = addPreloader(bgFileName); 


   bg.style.height = imageHeight;
   bgBox.style.maxWidth = imageWidth;

   parseScript(scriptText);

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

   resizePage();
}

function handleAnimationAjaxResponse()
{
   /*
   readyState
   0: request not initialized
   1: server connection established
   2: request received
   3: processing request
   4: request finished and response is ready
   */

   if(this.readyState != 4)
   {
      return;
   }
   if(this.status != 200)
   {
      console.log("ERROR: bad http status " + this.status);
      return;
   }

   //console.log("handleAnimationAjaxResponse() - " + this.responseText);
   parseScript(this.responseText);
}

function parseScript(script)
{
   //create and condition the data array
   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;
      }
   }   

   //create overlay objects
   for (var i = 0; i < animDataArray.length; i++) 
   {
      //console.log(i + ": " + animDataArray[i]);
      var word = animDataArray[i].split(" ");
      animDataArray[i] = word; //storing the split data so we don't have to call split hundreds of times a second later on
      switch(word[0])
      {
         case "OVERLAY":
            //end previous overlay object
            if(overlayCount > 0)
            {
               overlay[overlayCount - 1].end = i - 1;
            }

            overlay[overlayCount] = new Object();
            overlay[overlayCount].start = i;
            overlay[overlayCount].currPos = i;
            overlay[overlayCount].x = word[1];
            overlay[overlayCount].y = word[2];
            overlay[overlayCount].w = word[3];
            overlay[overlayCount].h = word[4];
            overlay[overlayCount].name = word[5];
            overlay[overlayCount].jump = []; //associative array of jump locations
            overlay[overlayCount].frame = []; //array of all frame names, so we can add subframes
            overlay[overlayCount].nextFrameTime = 0;
            overlay[overlayCount].frameTime = 100;

            overlay[overlayCount].sub = []; //array of sub overlays
            overlay[overlayCount].subCount = 0;

            overlayCount++;
            break;
         
         case "CLICKADVANCE":
            var idx = overlayCount - 1;
            overlay[idx].onclick = clickAdvButton;
            //console.log("added clickadvance " + overlay[idx].onclick);
            break;

         case "SUB":
            // a sub overlay
            // these are the same size as the parent overlay 
            // and sync to the parents animations, but with a sub frame suffix appended to the filename
            // used for things like adding alternate expressions at any point in the primary animation
            var idx = overlayCount - 1;
            var subIdx = overlay[idx].subCount;
            overlay[idx].sub[subIdx] = new Object();
            overlay[idx].sub[subIdx].jump = []; //associative array of jump locations

            //if there's one word, the width and height match the parent overlay
            // if there are more words, then different width/height is specified
            if(word.length == 2)
            {
               //console.log("2 word sub");
               overlay[idx].sub[subIdx].x = overlay[idx].x;
               overlay[idx].sub[subIdx].y = overlay[idx].y;
               overlay[idx].sub[subIdx].w = overlay[idx].w;
               overlay[idx].sub[subIdx].h = overlay[idx].h;
               overlay[idx].sub[subIdx].name = word[1];
            }
            else
            {
               //console.log("5 word sub");
               overlay[idx].sub[subIdx].x = word[1];
               overlay[idx].sub[subIdx].y = word[2];
               overlay[idx].sub[subIdx].w = word[3];
               overlay[idx].sub[subIdx].h = word[4];
               overlay[idx].sub[subIdx].name = word[5];
            }
               
            overlay[idx].sub[subIdx].start = i;
            overlay[idx].sub[subIdx].currPos = i;
            overlay[idx].sub[subIdx].nextFrameTime = 0;
            overlay[idx].sub[subIdx].currFrame = "NULL";
            overlay[idx].sub[subIdx].frameTime = 100;       
            overlay[idx].subCount++;
            break;

         case "TIME":
            //this sets our default frame time
            //filter out the "ms" from the time, just get the number               
            overlay[overlayCount - 1].frameTime = word[1].replace("ms", "");
            if(overlay[overlayCount - 1].frameTime < 0)
               overlay[overlayCount - 1].frameTime = Number.MAX_SAFE_INTEGER;
            break;

         case "SUBTIME":
            var idx = overlayCount - 1;
            var subIdx = overlay[idx].subCount - 1;
            overlay[idx].sub[subIdx].frameTime = word[1].replace("ms", "");
            //overlay[overlayCount - 1].subFrameTime = word[1].replace("ms", "");
            break;

         case "FRAME":
            //start preloading this image
            if(word[1] != "NULL")
            {
               addPreloader(word[1]);
               var frameIdx = overlay[overlayCount - 1].frame.length;
               overlay[overlayCount - 1].frame[frameIdx] = word[1];
            }
            break;

         case "SUBFRAME":
            if(word[1] == "NULL")
               break;

            //go through all existing frames, preload the subframe version
            for(var j = 0; j < overlay[overlayCount - 1].frame.length; j++)
            {
               var baseName = getBaseName(overlay[overlayCount - 1].frame[j]);
               
               //console.log("adding subframe " + baseName + word[1] );
               addPreloader(baseName + word[1]);
            }
            
            if(overlay[overlayCount - 1].currSubPos == 0)
               overlay[overlayCount - 1].currSubPos = i;
            break;
         
         case "BUTTONADV":
            var overlayName = word[1];
            var text = word[2];

            createAdvButton(overlayName, text);
            break;

         case "BUTTONRANDOM":
            createButtonRandom();
            break;

         default:
            //ignore blank lines, should have been removed above
            if(word[0].length <= 0)
               continue;

            //if last character is a ":", this is a named jump point
            if(word[0].lastIndexOf(":") == word[0].length - 1)
            {
               word[0] = word[0].replace(":", "");
               //console.log("  found a label! - " + word[0]);
               overlay[(overlayCount - 1)].jump[word[0]] = i;

               //also store sub-specific jumps
               // this allows us to have one button control multiple subs
               var subIdx = overlay[(overlayCount - 1)].subCount - 1;
               if(subIdx >= 0)
               {
                  overlay[(overlayCount - 1)].sub[subIdx].jump[word[0]] = i;
               }
            }
            break;
      }
   }
   //terminate dangling overlay
   overlay[overlayCount - 1].end = i - 1;

   //create overlay objects
   for(var i = 0 ; i < overlayCount; i++)
   {
      //console.log("Activating overlay " + i + " - " + overlay[i].start + " to " + overlay[i].end);

      //create the overlay div
      var o = document.createElement("div");
      o.id = "overlay-" + i;
      var scale = bg.offsetWidth / imageWidth;
      o.style.height = overlay[i].h * scale;
      o.style.width  = overlay[i].w * scale;
      o.style.left   = overlay[i].x * scale;
      o.style.top    = overlay[i].y * scale;      
      o.style.position = "absolute";
      o.style.backgroundSize = "100%";
      o.onclick = overlay[i].onclick;
      bg.appendChild(o);

      //create sub overlays
      for(var j = 0; j < overlay[i].subCount; j++)
      {
         var o = document.createElement("div");
         o.id = "overlay-" + i + overlay[i].sub[j].name;
         var scale = bg.offsetWidth / imageWidth;
         o.style.height = overlay[i].sub[j].h * scale;
         o.style.width  = overlay[i].sub[j].w * scale;
         o.style.left   = overlay[i].sub[j].x * scale;
         o.style.top    = overlay[i].sub[j].y * scale;      
         o.style.position = "absolute";
         o.style.backgroundSize = "100%";
         bg.appendChild(o);
      }        
   }

   //fire 'em up
   // we do this in a seperate loop in case there is a small delay from creating html objects
   for(var i = 0; i < overlayCount; i++)
   {         
      var frameState = {idx: i}
      window.requestAnimationFrame(processOverlay.bind(frameState));
   }
}

function processOverlay(timeStamp)
{
   var idx = this.idx;
   var done = false;
   
   for(var subIdx = 0; subIdx < overlay[idx].subCount; subIdx++)
   {
      if(overlay[idx].sub[subIdx].nextFrameTime <= timeStamp)
      {
         done = false;
         while(!done)
         {
            var word = animDataArray[overlay[idx].sub[subIdx].currPos]; 
            var safety = 0;
            var tempFrameTime = overlay[idx].sub[subIdx].frameTime;
               
            switch(word[0])
            {
               case "FRAME":
                  //shouldn't happen
                  console.log("ERROR: overlay[" + idx + "].sub[" + subIdx + "] encountered FRAME tag at position " + overlay[idx].sub[subIdx].currPos);
                  done = true;
                  break;

               case "SUBFRAME":
                  overlay[idx].sub[subIdx].currFrame = getBaseName(word[1]);               
                  done = true;

                  //update frame time if present
                  if(word.length > 2)
                  {
                     tempFrameTime = word[2].replace("ms", "");
                  }
                  break;

               case "OPACITY":
                  var s = document.getElementById("overlay-" + idx + overlay[idx].sub[subIdx].name);

                  if(word[1][0] == '+' || word[1][0] == '-')
                     s.style.opacity = +s.style.opacity + (word[1] / 100);
                  else
                     s.style.opacity = word[1] / 100;
                  
                  if(s.style.opacity > 1.0)
                     s.style.opacity = 1.0;
                  if(s.style.opacity < 0)
                     s.style.opacity = 0;
                  
                  //just setting opacity doesn't end the the frame cycle
                  // since we might want to change opacity and frame at the same time
                  // so if we just change opacity in a loop, we have to manually stop
                  if(word[2] == "DONE")
                     done = true;

                  break;

               case "DONE":
                  //might want to manually do nothing, like when we're holding a frame for a random period of time
                  done = true;
                  break;
               
               case "GOTO":
                  overlay[idx].sub[subIdx].currPos = overlay[idx].sub[subIdx].jump[word[1]]; //sub specific jump
                  break;
                  
               case "RANDOM":
                  //RANDOM <odds> time <odds> time, etc
                  //add up total odds values
                  var totalOdds = 0;
                  for(var i = 1; i < word.length; i += 2)
                  {
                     //console.log("adding " + word[i]);
                     totalOdds += Math.floor(word[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 pick value
                  // then chose label before that
                  totalOdds = 0;
                  for(var i = 1; i < word.length; i += 2)
                  {
                     totalOdds += Math.floor(word[i]);
                     if(pick <= totalOdds)
                     {
                        if(typeof(overlay[idx].jump[word[i+1]]) == "undefined" ||
                           typeof(overlay[idx].jump[word[i+1]]) == "NaN" )
                        {
                           console.log("ERROR: invalid jump target '" + word[i+1] + "'" + " on line '" +  animDataArray[overlay[idx].sub[subIdx].currPos] + "'");
                           break;
                        }
                        //console.log(" jumping to " + word[i+1] + " - " + overlay[idx].jump[word[i+1]]);
                        overlay[idx].sub[subIdx].currPos = overlay[idx].jump[word[i+1]];
                        //console.log("  jumped to " + overlay[idx].currPos);
                        break;
                     }
                  }
                  break;
               case "BUTTONBRANCH":
                  //jump to a label based on what button is selected
                  if(word[1] == "*")
                  {
                     //jump to any highlighted button branchWord if it exists
                     var bbox = document.getElementById("buttonBox");
                     for (var i = 0; i < bbox.children.length; i++) 
                     {
                        var branchWord = bbox.children[i].id.replace("button-", "");
                        if(!isButtonOn(branchWord))
                           continue;                     
                        
                        if(overlay[idx].jump[branchWord] == undefined)
                           continue;

                        //we're making the jump, so turn the button from clicked to active
                        bbox.children[i].className = "branchButton bbActive";

                        overlay[idx].sub[subIdx].currPos = overlay[idx].jump[branchWord];   
                        break;
                     }
                  }
                  else
                  {
                     for(var i = 1; i < word.length; i++)
                     {
                        //console.log("checking button on " + word[i] + overlay[idx].sub[subIdx].name);
                        if(isButtonOn(word[i]))
                        {
                           //make sure jump label exists
                           if(overlay[idx].sub[subIdx].jump[word[i]] == undefined)
                           {
                              console.log("invalid buttonBranch label '" + word[i] + "' on line " + overlay[idx].sub[subIdx].currPos)
                              break;
                           }
                              
                           overlay[idx].sub[subIdx].currPos = overlay[idx].sub[subIdx].jump[word[i]];   //sub specific jump
                           console.log(overlay[idx].sub[subIdx].name + " jumped to " + overlay[idx].sub[subIdx].currPos);
                           break;
                        }  
                     }
                  }
                  break;

               case "BUTTONWAIT":
                  //hang out until the button is pressed
                  for(var i = 1; i < word.length; i++)
                  {
                     //console.log("checking button wait sub " + word[i] + overlay[idx].sub[subIdx].name);
                     if(isButtonOn(word[i]))
                     {
                        //
                        deselectButton(word[i]);
                     }  
                     else
                     {
                        tempFrameTime = 30;
                        overlay[idx].sub[subIdx].currPos--;
                        done = true;
                     }
                  }
                  break;
            } //end switch

            //goto next line, wrap around
            overlay[idx].sub[subIdx].currPos++;
            if(overlay[idx].sub[subIdx].currPos > overlay[idx].end)
               overlay[idx].sub[subIdx].currPos = overlay[idx].sub[subIdx].start;

            //safety counter
            safety++;
            if(safety > 1000)
            {
               console.log("INFINITE LOOP stopped in processOverlay(" + idx + ")");
               return;
            }

         } //end while loop

         overlay[idx].sub[subIdx].nextFrameTime = Math.floor(timeStamp) + Math.floor(tempFrameTime);

      } //end timeStamp check

   } //end subloop
   
   
   //process primary animation
   done = false;
   if(overlay[idx].nextFrameTime <= timeStamp)
   {
      while(!done)
      {
         var word = animDataArray[overlay[idx].currPos]; 

         var safety = 0;
         var tempFrameTime = overlay[idx].frameTime;

         //console.log("processOverlay(" + idx + ")");
         //console.log(word);

         if(word == undefined)
         {
            //console.log("null word - ran off the end of animDataArray?");
            debugger;
            //break;
         }

         switch(word[0])
         {
            case "FRAME":             
               overlay[idx].currFrame = getBaseName(word[1]);

               //update frame time if present
               if(word.length > 2)
               {
                  //console.log("frametime = " + word[2]);
                  tempFrameTime = word[2].replace("ms", "");
                  if(tempFrameTime < 0)
                  {
                     tempFrameTime = Number.MAX_SAFE_INTEGER;
                     //update button text?
                     var targetButton = document.getElementById("buttonAdv-" + overlay[idx].name);
                     if(targetButton)
                     {                        
                        targetButton.innerHTML = overlay[idx].currFrame;
                     }
                  }
               }
               
               done = true;
               break;

            case "OPACITY":
                  var s = document.getElementById("overlay-" + idx);
                  
                  if(word[1][0] == '+' || word[1][0] == '-')
                     s.style.opacity = +s.style.opacity + (word[1] / 100);
                  else
                     s.style.opacity = word[1] / 100;
                  
                  if(s.style.opacity > 1.0)
                     s.style.opacity = 1.0;
                  if(s.style.opacity < 0)
                     s.style.opacity = 0;
                  
                  //just setting opacity doesn't end the the frame cycle
                  // since we might want to change opacity and frame at the same time
                  // so if we just change opacity in a loop, we have to manually stop
                  if(word[2] == "DONE")
                     done = true;

                  break;

            case "SUBOPACITY":
               //set opacity on the given sub animation 
               // ie so we can reset blush fading
               
               //first find sub animation by name
               for(var opacSubIdx = 0; opacSubIdx < overlay[idx].subCount; opacSubIdx++)
               {
                  if(overlay[idx].sub[opacSubIdx].name != word[1])
                     continue;
                     
                  //get sub element, set opacity
                  var s = document.getElementById("overlay-" + idx + overlay[idx].sub[opacSubIdx].name);

                  if(word[2][0] == '+' || word[2][0] == '-')
                     s.style.opacity = +s.style.opacity + (word[2] / 100);
                  else
                     s.style.opacity = word[2] / 100;
                  
                  if(s.style.opacity > 1.0)
                     s.style.opacity = 1.0;
                  if(s.style.opacity < 0)
                     s.style.opacity = 0;
                  
                  //just setting opacity doesn't end the the frame cycle
                  // since we might want to change opacity and frame at the same time
                  // so if we just change opacity in a loop, we have to manually stop
                  if(word[3] == "DONE")
                     done = true;
               }
               break;

            case "DONE":
               //might want to manually do nothing, like when we're holding a frame for a random period of time
               done = true;
               break;
            
            case "GOTO":
               overlay[idx].currPos = overlay[idx].jump[word[1]];
               break;
               
            case "RANDOM":
               //RANDOM <odds> time <odds> time, etc
               //add up total odds values
               var totalOdds = 0;
               for(var i = 1; i < word.length; i += 2)
               {
                  //console.log("adding " + word[i]);
                  totalOdds += Math.floor(word[i]); //lol if you don't do math.floor it appends them as strings
               }
               
               //pick a random number between 0 and totalodds
               var pick = Math.floor(Math.random() * totalOdds);
               //console.log("picked " + pick + " / " + totalOdds); 

               //walk along until we go past pick value
               // then chose label before that
               totalOdds = 0;
               for(var i = 1; i < word.length; i += 2)
               {
                  totalOdds += Math.floor(word[i]);
                  if(pick <= totalOdds)
                  {
                     if(typeof(overlay[idx].jump[word[i+1]]) == "undefined" ||
                        typeof(overlay[idx].jump[word[i+1]]) == "NaN" )
                     {
                        console.log("ERROR: invalid jump target '" + word[i+1] + "'");
                        done = true;
                        break;
                     }
                     //console.log(" jumping to " + word[i+1] + " - " + overlay[idx].jump[word[i+1]]);
                     overlay[idx].currPos = overlay[idx].jump[word[i+1]];
                     //console.log("  jumped to " + overlay[idx].currPos);
                     break;
                  }
               }
               break;
            
            case "RANDOMTIME":
               //add up total odds values
               var totalOdds = 0;
               for(var i = 1; i < word.length; i += 2)
               {
                  //console.log("adding " + word[i]);
                  totalOdds += Math.floor(word[i]); //lol if you don't do math.floor it appends them as strings
               }
               
               //pick a random number between 0 and totalodds
               var pick = Math.floor(Math.random() * totalOdds);
               //console.log("picked " + pick + " / " + totalOdds); 

               //walk along until we go past pick value
               // then chose label before that
               totalOdds = 0;
               for(var i = 1; i < word.length; i += 2)
               {
                  totalOdds += Math.floor(word[i]);
                  if(pick <= totalOdds)
                  {
                     if(word[i+1] == "SAME")
                        break;

                     overlay[idx].frameTime = word[i+1].replace("ms", "");
                     //console.log("new frame time " + overlay[idx].frameTime);
                     break;
                  }
               }
               break;

            case "TIME":
               //update frame time mid animation
               overlay[idx].frameTime = word[1].replace("ms", "");

               if(overlay[idx].frameTime < 0)
                  overlay[idx].frameTime = Number.MAX_SAFE_INTEGER;

               break;
            
            case "BUTTONCLEAR":
               clearButtons();
               break;

            case "BUTTON":
               //create a button
               //BUTTON <buttonSet> <branchWord> buttonText
               // buttonSet - a radio button group number, only one of the set can be selected at a time
               // branchWord - the label we will jump to
               // buttonText - words to put in the button, used for display only
               var buttonSet = Math.floor(word[1]);
               var branchWord = word[2];
               var text = word[3];
               for(var i = 4; i < word.length; i++)
               {
                  text += " " + word[i];
               }
               
               //don't create duplicate buttons
               if(buttonExists(branchWord, text))
                  break;

               createButton(buttonSet, branchWord, text);               
               break;
            
            
            
            case "SELECTBUTTON":
               //used for selecting a default activated button
               var branchWord = word[1];
               selectButton(branchWord);
               break;

            case "BUTTONBRANCH":
               console.log("buttonbranch" + word[1]);
               //jump to a label based on what button is selected
               if(word[1] == "*")
               {
                  //jump to any highlighted button branchWord if it exists
                  var bbox = document.getElementById("buttonBox");
                  for (var i = 0; i < bbox.children.length; i++) 
                  {
                     var branchWord = bbox.children[i].id.replace("button-", "");
                     if(!isButtonOn(branchWord))
                        continue;                     
                     
                     if(overlay[idx].jump[branchWord] == undefined)
                        continue;

                     //we're making the jump, so turn the button from clicked to active
                     bbox.children[i].className = "branchButton bbActive";

                     overlay[idx].currPos = overlay[idx].jump[branchWord];   
                     break;
                  }
               }
               else
               {
                  for(var i = 1; i < word.length; i++)
                  {
                     //console.log("checking button on " + word[i]);
                     if(isButtonOn(word[i]))
                     {
                        //make sure jump label exists
                        if(overlay[idx].jump[word[i]] == undefined)
                        {
                           console.log("invalid buttonBranch label '" + word[i] + "' on line " + overlay[idx].currPos)
                           break;
                        }
                           
                        overlay[idx].currPos = overlay[idx].jump[word[i]];   
                        //console.log("  jumped to " + overlay[idx].currPos);
                        break;
                     }  
                  }
               }
               break;


            case "BUTTONWAIT":
               //hang out until the button is pressed
               for(var i = 1; i < word.length; i++)
               {
                  //console.log("checking button wait " + word[i] + overlay[idx].name);
                  if(isButtonOn(word[i]))
                  {
                     //
                     deselectButton(word[i]);
                  }  
                  else
                  {
                     tempFrameTime = 30;
                     overlay[idx].currPos--;
                     done = true;
                  }
               }
               break;


            default:
               //ignore lines by default
               // advancing to next line handled below
               break;
         }

         //goto next line, wrap around
         overlay[idx].currPos++;
         if(overlay[idx].currPos > overlay[idx].end)
            overlay[idx].currPos = overlay[idx].start;

         //safety counter
         safety++;
         if(safety > 1000)
         {
            console.log("INFINITE LOOP stopped in processOverlay(" + idx + ")");
            return;
         }

         if(done)
         {
            //schedule next thing
            //console.log("scheduling frame time " + tempFrameTime);
            //window.setTimeout("processOverlay(" + idx + ")", tempFrameTime);
            //return;

            //welcome to javascript, where 2 + 2 = "22" unless you use math.floor
            overlay[idx].nextFrameTime = Math.floor(tempFrameTime) + Math.floor(timeStamp);
            
            break;
            //return;
         }

      } //end while loop

   } //end timeStamp check


   //apply current frame/subframe 
   var o = document.getElementById("overlay-" + idx);
   o.className = "preload-" + overlay[idx].currFrame;

   for(var i = 0; i < overlay[idx].subCount; i++)
   {
      var s = document.getElementById("overlay-" + idx + overlay[idx].sub[i].name);
      s.className = "preload-" + overlay[idx].currFrame + overlay[idx].sub[i].currFrame;
   }

   //schedule next animation update
   window.requestAnimationFrame(processOverlay.bind(this));
}

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

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

   //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';
   
   //hack for loading from .patreon folder
   style.innerHTML = ".preload-" + baseName +  "{ background: url('" + folder + "/" + preloadName + "')  no-repeat; width:1px; height:1px; }";
   //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 resizePage()
{
   //console.log("resizing");
   var scale = bg.offsetWidth / imageWidth;
   bg.style.height = scale * imageHeight;


   for(var i = 0; i < overlayCount; i++)
   {
      var o = document.getElementById("overlay-" + i);
      o.style.height = overlay[i].h * scale;
      o.style.width  = overlay[i].w * scale;
      o.style.left   = overlay[i].x * scale;
      o.style.top    = overlay[i].y * scale;    
      
      for(var j = 0; j < overlay[i].subCount; j++)
      {
         var s = document.getElementById("overlay-" + i + overlay[i].sub[j].name);
         s.style.height = overlay[i].sub[j].h * scale;
         s.style.width  = overlay[i].sub[j].w * scale;
         s.style.left   = overlay[i].sub[j].x * scale;
         s.style.top    = overlay[i].sub[j].y * scale;    
      }
   }
}


/////////////////////////////
// Branch Button functions //
/////////////////////////////
function createButton(buttonSet, branchWord, text)
{
   var bbox = document.getElementById("buttonBox");
   var b = document.createElement("div");
   b.id = "button-" + branchWord;
   b.innerHTML = text;
   b.className = "branchButton";
   b.onclick = clickBranchButton;
   b.buttonSet = buttonSet;
   bbox.appendChild(b);
}

function createAdvButton(overlayName, text)
{
   //a button that advances the given overlay to the next frame
   // used for simple dressup items
   //console.log("createAdvButton(" + overlayName + ", " + text + ")" );

   var bbox = document.getElementById("buttonBox");
   var b = document.createElement("div");
   b.id = "buttonAdv-" + overlayName;
   b.innerHTML = text;
   b.className = "branchButton";
   b.onclick = clickAdvButton;
   b.overlayName = overlayName;
   bbox.appendChild(b);
}

function createButtonRandom()
{
   //a button that randomizes all stopped overlays 
   // for dressup items
   var bbox = document.getElementById("buttonBox");
   var b = document.createElement("div");
   b.id = "buttonRandom";
   b.innerHTML = "Random";
   b.className = "branchButton";
   b.onclick = clickButtonRandom;
   bbox.appendChild(b);
}

function buttonExists(branchWord, text)
{
   //button should match keyword and text
   var b = document.getElementById("button-" + branchWord);
   if(b)
   {
      if(b.innerHTML == text)
         return true;
      else
         return false;
   }
   else
   {
      return false;
   }
}

function clearButtons()
{
   //remove all existing buttons
   document.getElementById("buttonBox").innerHTML = "";
}

function clickBranchButton(event)
{
   //called when we click the button

   //iterate over buttons, pop all that match this set
   var bbox = document.getElementById("buttonBox");
   for (var i = 0; i < bbox.children.length; i++) 
   {
      if(bbox.children[i].buttonSet != event.srcElement.buttonSet)
         continue;

      bbox.children[i].className = "branchButton";
   }

   //push in the one we clicked
   event.srcElement.className = "branchButton bbClicked";
}

function clickButtonRandom(event)
{
   for(var i = 0; i < overlayCount; i++)
   {      
      if(overlay[i].nextFrameTime <= Number.MAX_SAFE_INTEGER)
         continue;
      
      var frameIdx = Math.floor(Math.random() * overlay[i].frame.length);
      overlay[i].currFrame = getBaseName(overlay[i].frame[frameIdx]);

      //apply current frame/subframe 
      var o = document.getElementById("overlay-" + i);
      o.className = "preload-" + overlay[i].currFrame;

      for(var j = 0; j < overlay[i].subCount; j++)
      {
         var s = document.getElementById("overlay-" + i + overlay[i].sub[j].name);
         s.className = "preload-" + overlay[i].currFrame + overlay[i].sub[j].currFrame;
      }

      //update button text
      var button = document.getElementById("buttonAdv-" + overlay[i].name);
      if(button)
      {
         button.innerHTML = overlay[i].currFrame;
      }
   }
}

function clickAdvButton(event)
{   
   for(var i = 0; i < overlayCount; i++)
   {
      //can click a button at the bottom or the overlay image itself
      if(overlay[i].name == event.srcElement.overlayName ||
         "overlay-" + i == event.srcElement.id)
      {      
         overlay[i].nextFrameTime = 0;      
         break;
      }
   }   
}

function selectButton(branchWord)
{
   var b = document.getElementById("button-" + branchWord);
   if(!b)
      return;

   //pop all buttons in the target button's set
   var bbox = document.getElementById("buttonBox");
   for (var i = 0; i < bbox.children.length; i++) 
   {
      if(bbox.children[i].buttonSet != b.buttonSet)
         continue;
   
      bbox.children[i].className = "branchButton";
   }
   
   //select target button
   b.className = "branchButton bbClicked";
}

function deselectButton(branchWord)
{
   var b = document.getElementById("button-" + branchWord)
   if(!b)
      return false;

   b.className = "branchButton";
}

function isButtonOn(branchWord)
{
   var b = document.getElementById("button-" + branchWord)
   if(!b)
      return false;

   if(b.className.includes("bbClicked"))
      return true;
   
   if(b.className.includes("bbActive"))
      return true;

   return false;
}


function getBaseName(inputString)
{
   inputString = inputString.replace(".jpg", "");
   inputString = inputString.replace(".png", "");
   inputString = inputString.replace(".gif", "");
   inputString = inputString.replace(".", "-");
   return inputString;
}

//debug function to move overlays around with WASD
var currDebugOverlay;
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 "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);
   }
}  

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