JavaScript - How To Make This Array Work With Firefox?

<script type="text/javascript">
<!--
NS4 = (document.layers) ? true : false;
function launchVsee2() {
    try {
        location='vsee:';
    } catch (err) {
        location='http://www.vsee.com';
        return true
    }
}
//-->
</script>

<div id="avatar_form" width="95" height="141">
</div>


<div id="avatar_stack">
<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Extras]" type="radio" value="blank" <? if($prof[base]==blank) echo("checked='checked'");?> />
</p>


<p>
<img src="hs/news/Upload/images/skin1.gif" alt="" /><input name="avatar[Skin Tone]" type="radio" value="body1" <? if($prof[skin]==body1) echo('checked="checked"');?> <? if($prof[skin]==blank) echo("checked='checked'");?>  />
</p>

<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Hair]" type="radio" value="blank" <? if($prof[hair]==blank) echo("checked='checked'");?>  />
</p>

<p>
<img src="hs/news/Upload/images/girlface.gif" alt="" /><input name="avatar[Face]" type="radio" value="girlface" <? if($prof[face]==girlface) echo("checked='checked'");?>  />
</p>

<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Hand Item]" type="radio" value="blank" <? if($prof[handitem]==blank) echo("checked='checked'");?> />
</p>

<p>
<img src="hs/news/Upload/images/shirt6.gif" alt="" /><input name="avatar[Shirt]" type="radio" value="shirt6" <? if($prof[shirt]==shirt6) echo("checked='checked'");?> />
</p>

<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Hat]" type="radio" value="blank" <? if($prof[hat]==blank) echo("checked='checked'");?> />
</p>

<p>
<img src="hs/news/Upload/images/pants7.gif" alt="" /><input name="avatar[Pants]" type="radio" value="pants7" <? if($prof[pants]==pants7) echo("checked='checked'");?> />
</p>

<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Shoes]" type="radio" value="blank" <? if($prof[shoes]==blank) echo("checked='checked' checked");?> />
</p>

<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Accessories]" type="radio" value="blank" <? if($prof[accessory]==blank) echo("checked='checked' checked");?> />
</p>



<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Costume]" type="radio" value="blank" <? if($prof[costume]==blank) echo("checked='checked' checked");?> />
</p>
</div>


<BR><BR><BR>

<script type="text/javascript">
var avatar_layers = new Array('Extras', 'Skin Tone', 'Hair', 'Face', 'Hand Item', 'Shirt', 'Hat', 'Pants', 'Shoes', 'Accessories', 'Costume')
var layer_colours = new Array('#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff')
var inactive_tab_background_colour = '#fff'
var inactive_tab_bottom_border_colour = '#fff'
var stack_height = 1
var on_top = 0
var key = null

onload = layout

function layout()
{
 if(!document.getElementById('avatar_section')) return
 document.onkeydown = keyhit
 tabs()
 hide_radio_buttons(document.getElementById('avatar_stack'))
 StackImageHolders('avatar_stack');
 P = document.getElementById('avatar_stack').getElementsByTagName('p')[on_top]
 P.style.backgroundColor = layer_colours[on_top]
 P.style.zIndex = stack_height++
 LIs = document.getElementById('avatar_section').getElementsByTagName('li')
 for(i=0; i<LIs.length; i++)
 {
  LIs[i].style.backgroundColor = inactive_tab_background_colour
  LIs[i].style.borderBottomColor = inactive_tab_bottom_border_colour
  
 }
 LIs[on_top].style.backgroundColor = layer_colours[on_top]
 LIs[on_top].style.borderBottomColor = layer_colours[on_top]
 LIs[on_top].focus()
 IMGs = document.getElementById('avatar_stack').getElementsByTagName('img')
 for(i=0; i<IMGs.length; i++)
 {
  IMGs[i].className = 'black_border'
  IMGs[i].style.cursor = 'pointer'
  IMGs[i].onclick=function(){ChangeGarment(this)}
 }
 avatar_preview_and_hotkey_text()
 update_avatar(document.getElementById('avatar_stack').firstChild)
 /* I added the following two lines because Internet Explorer 
 wasn't updating the display properly after loading */
 document.getElementsByTagName('body')[0].style.width='95';
 document.getElementsByTagName('body')[0].style.width='95';
}

function keyhit(e)
{
 thisKey = e ? e.which : window.event.keyCode
 alt_key_down = e ? e.altKey : window.event.altKey
 ctrl_key_down = e ? e.ctrlKey : window.event.ctrlKey
 shift_key_down = e ? e.shiftKey : window.event.shiftKey
 switch (thisKey) {
  case 37: key = 'LEFT'
   break
  case 39: key = 'RIGHT'
   break
  default: key = null
 }
 if(key && alt_key_down && ctrl_key_down)
 {
  IMGs = document.getElementById('avatar_stack').getElementsByTagName('p')[on_top].getElementsByTagName('img')
  for(i=0; i<IMGs.length; i++)
  {
   if(IMGs[i].className == 'red_border')
   {
    if((key == 'LEFT') && (i > 0))
    {
     i--
     ChangeGarment(IMGs[i])
     return
    }
    if((key == 'RIGHT') && (i < (IMGs.length - 1)))
    {
     i++
     ChangeGarment(IMGs[i])
     return
    }
   }
  }
 }
 else if(key && alt_key_down && shift_key_down)
 {
  LIs = document.getElementById('avatar_section').getElementsByTagName('li')
  if((key == 'LEFT') && (on_top > 0))
  {
   on_top--
   bring_to_the_top(LIs[on_top])
   return
  }
  if((key == 'RIGHT') && (on_top < (LIs.length - 1)))
  {
   on_top++
   bring_to_the_top(LIs[on_top])
   return
  }
 }
}

function tabs()
{
 list = document.createElement('ul')
 for(i=0; i<avatar_layers.length; i++)
 {
  list_item = document.createElement('li')
  list_item.appendChild(document.createTextNode(avatar_layers[i]))
  list_item.onmouseover=function(){this.className='mouse'}
  list_item.onmouseout=function(){this.className=''}
  list_item.tab_number=i;//faux attributes to "stick" the indexes i and j values
  list_item.onclick=function(){
   bring_to_the_top(this)
  }
  list_item.onfocus=function(){
   bring_to_the_top(this)
  }
  list.appendChild(list_item)
  }
  document.getElementById('avatar_section').insertBefore(list, document.getElementById('avatar_stack'))
}

function hide_radio_buttons(caller)
{
 INPUTs = caller.getElementsByTagName('input')
 for(i=0; i<INPUTs.length; i++)
 {
  if(INPUTs[i].type == 'radio')
  {
   INPUTs[i].style.display = 'none';
  }
 }
}

function StackImageHolders(caller)
{
 Ps = document.getElementById(caller).getElementsByTagName('p')
 for(i=0; i<Ps.length; i++)
 {
  Ps[i].className = 'stack'
 }
}

function avatar_preview_and_hotkey_text()
{
 for(i=0; i<avatar_layers.length; i++)
 {
  preview = document.createElement('img')
  preview.id = avatar_layers[i]
  preview.className = 'preview'
  preview.width = '95px'
  preview.height = '141px'
  preview.alt = 'avatar preview image'
  document.getElementById('avatar_stack').appendChild(preview)
 }

 hotkey_text = document.createElement(' ')
 hotkey_text.className = 'hotkeys'
 hotkey_text.appendChild(document.createTextNode(''))
 document.getElementById('avatar_stack').appendChild(hotkey_text)
}

function update_avatar(caller)
{
 INPUTs = caller.parentNode.getElementsByTagName('input')
 for(i=0; i<INPUTs.length; i++)
 {
  if(INPUTs[i].type == 'radio')
  {
   if(INPUTs[i].checked)
   {
    document.getElementById(INPUTs[i].name.match(/^.*[(.*)]$/)[1]).src='hs/news/Upload/images/' + INPUTs[i].value + '.gif'
    INPUTs[i].previousSibling.className = 'red_border'
   }
   else
   {
    INPUTs[i].previousSibling.className = 'black_border'
   }
  }
 }
}

function ChangeGarment(caller)
{
 inputs = caller.parentNode.getElementsByTagName('input')
 for(i=0;i<inputs.length;i++)
 {
  inputs[i].checked=false 
 }
 caller.nextSibling.checked=true
 update_avatar(caller)
}

function bring_to_the_top(caller)
{
 tabs = document.getElementById('avatar_section').getElementsByTagName('li')
 for(i=0; i<tabs.length; i++)
 {
  tabs[i].style.backgroundColor = inactive_tab_background_colour
  tabs[i].style.borderBottomColor = inactive_tab_bottom_border_colour
 }
 on_top = caller.tab_number
 caller.style.backgroundColor = layer_colours[caller.tab_number]
 caller.style.borderBottomColor = layer_colours[caller.tab_number]
 put_on_top = document.getElementById('avatar_stack').getElementsByTagName('p')[caller.tab_number]
 put_on_top.style.zIndex = stack_height++
 put_on_top.style.backgroundColor = layer_colours[caller.tab_number] 
}
</script>