Getting current image by active class

I'm modifying demo 1 and trying to get a unique identifier corresponding to the currently shown image by finding the <li> that is set 'active' and showing it in an input that I call "testbox".  This seems to work when I click the current image to go to the next one (my box will change values 1, 2, 3 etc.), but the 'active' class doesn't seem to be set when I click the thumbnails directly (if it was 1, it stays at 1 even if i click on the 5th thumbnail).

I modified the HTML adding inputs to the <li> tags as follows:
<div id = "demo" class="demo">
<div id="main_image"></div>
<ul class="gallery_demo_unstyled">
    <li><img src="img/flowing-rock.jpg" alt="Flowing Rock" title="Flowing Rock Caption"><input value="1"></li>
...

And I'm displaying the the identifier in my box using the following:
function toggleCallFrame() {
        var lis = document.getElementById('demo').getElementsByTagName('li');
        var testbox = document.getElementById("testbox");
        for (var j = 0; j < lis.length; j++) {
            if(lis[j].className == "active") {
                var hf = lis[j].getElementsByTagName('input')[0].value;
                testbox.value = hf;
            }
        }
    }

I also modified the onImage() call to call toggleCallFrame() at the end.
Any suggestions on getting this to work would be appreciated... or an alternate method to finding the currently shown image.  Thanks!