Javascript - id's are timestamps, if more than 10 then delete the oldest one
<p>A bit of a tricky one, at least for me.  Here is the scenario:</p>

<pre><code>&lt;div id="gifs"&gt; 
&lt;img src="gif/1.jpg" alt="" &gt;
&lt;img src="gif/10.jpg" alt="" &gt;
&lt;img src="gif/15.jpg" alt="" &gt;
&lt;img src="gif/20.jpg" alt="" &gt;
&lt;img src="gif/5.jpg" alt="" &gt;
&lt;/div&gt; 
</code></pre>

<p>Everytime a user clicks on an image, the image changes to a gif and the id is set with a timestamp.<br>
The issues is, I don't want more than 4 gifs at a time.  Which means that, if there are 4 gifs, next time a user clicks, the older one goes back to being a jpg.  HOW CAN I DO THAT?</p>

<p>Here is my jquery so far:</p>

<pre><code>$("#gifs img").click(function () { 
        var original = $(this).attr("src"); 
        var newsrc = original.replace('jpg','gif');
        if(!$(this).hasClass('on')){
            $(this).attr("src" , '');
            $(this).attr("src", newsrc );
            $(this).addClass('on');

            var t = new Date();
            var time = t.getTime(); 

            $(this).attr('id' , time);

            // HELP MOSTLY HERE, IN THE EACH FUNCTION.  NEED TO STORE TIMESTAMP INSIDE AN ARRAY...
            $('.on').each(function(e){

                //dif[] = $(e).attr('id');

            });

            /*var oldest = dif.min();

            var oldestsrc = $('#'+oldest).attr("src"); 
            var oldestnewsrc = oldestsrc.replace('gif','jpg');
             $('#'+oldest).attr("src",oldestnewsrc); */
        }
});
</code></pre>

<p>Help much appreciated.</p>
