Changes 5/24/14 (Bonus!)

jQuery:

• Script visible at http://students.gctaa.net/~ahirschberg/, actual script here.  Note that these may change.
• Got my script working; image elements fade in and out at random locations.
• Now the elements actually get removed correctly, instead of sitting invisible and slowing down the browser
• I implemented an id delegation system which I had originally written for the movable window project I was working on.  I then improved it by allowing for ids to be deassigned and "recycled".  I ran into some interesting problems.
• For example, look at code snippet 1. Substituting $(this).attr("id") for ele_id in the timeoutManager.addElement(...); line should be the same thing, right?  The .attr("id") method just pulls the id out of the element being created, which had its id set to ele_id.  There SHOULD be no difference between them.  However, these two are NOT necessarily the same.  Javascript is super weird, and when I was testing I entered into the console a for loop which would call generateMLGElement() many times with no delay, and I found that the function itself would fully execute, but queue the .load() statements, which would be executed later (So if you ran generateMLGElement() 4 times extremely rapidly, it would execute all the code in the body excluding the stuff in .load() 4 times, then execute the stuff within .load() for each element after all that was completed).  This caused the ele_id to always be set to the id of the greatest element created for every single element.  So if the four elements were created, the ele_id accessed by every .load() function would be 4, regardless of what the id was supposed to be.  I worked around this by pulling the id out of the element itself rather than relying on the element id.
• If you couldn't quite understand what I was talking about, try modifying mlg.js so that the timeoutManager is sent ele_id rather than than .attr("id") in its addElement method (the one shown in the code snippet).  If you enter into the console a for loop such as for (var i = 0; i <=5; i++) {generateMLGElement();}, you will see that the elements with ids 0 through 4 will not be removed but instead remain on the page (faded, but still there), because the id 5 will have been removed and registered for every element.

 Code:

1. function generateMLGElement() {

     ...

     ele_id = ID_PREFIX + idManager.assign()

     element = 

       $('<img class="mlg" src="'+ imagesrc +'" ' + 'id="' + ele_id + '">').load(function() {

         ... 

         timeoutManager.addElement($(this).attr("id"), 2000);

       }) 

     ...

   }