OK, I'm nearly there with a javascript command but am having problems with the last step.

Basically, I have a media player where a user can create clips within certain times. The html behind the player is:

<input type="hidden" id="startCode_1" value="0:00" >
<input type="hidden" id="endCode_1" value="0:01" >

<input type="hidden" id="startCode_2" value="0:03" >
<input type="hidden" id="endCode_2" value="0:04" >

<input type="hidden" id="startCode_3" value="0:00" >
<input type="hidden" id="endCode_3" value="0:06" >


What I want is that between a clip's start and end time, the annotations for that clip are highlighted. I have managed to do this for clips that do not overlap using the below javascript. BUT I need two clips to be highlighted when they overlap - any ideas?! The blue section is the bit where the important code is. Thanks!

function updateTimeCode(id)
{
var player = document.FLVClipEditor;
var timeInput = document.getElementById("timeCode");
var stateInput = document.getElementById("state");

if (player && timeInput && stateInput)
{
timeInput.value = player.getCurrentTimeCode();
stateInput.value = player.getState();
var count = document.getElementById("count").value;
var timeInputValue = document.getElementById("timeCode").value;

for(i=1;i<=count;i++){
var start = "startCode_" + i;
var end = "endCode_" + i;
var startcode = document.getElementById(start).value;
var endcode = document.getElementById(end).value;
var annotationContainer= "annotation_container_" + i;
var filled = document.getElementById(annotationContainer);
if(timeInputValue == startcode) {
filled.style.backgroundColor = '#ffffff';
filled.style.color = '#000000';
filled.parentNode.scrollTop=filled.offsetTop;
} else {
filled.style.backgroundColor = '#cccccc';
filled.style.color = '#646464';
}
}

}
}