var avatar_layers = new Array('background', 'body', 'hair', 'shirt', 'arms', 'legs', 'feet', 'weapon')
var layer_colours = new Array('#ffffc3', '#c0e0ff', '#ccffcc', '#ffccbb', '#ffffc3', '#c0e0ff', '#ccffcc', '#ffccbb')
var inactive_tab_background_colour = '#dddddd'
var inactive_tab_bottom_border_colour = '#888888'
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='99%';
 document.getElementsByTagName('body')[0].style.width='auto';
}

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 = '61'
  preview.height = '100'
  preview.alt = 'avatar preview image'
  document.getElementById('avatar_stack').appendChild(preview)
 }
 hotkey_text = document.createElement('div')
 hotkey_text.className = 'hotkeys'
 hotkey_text.appendChild(document.createTextNode('HotKeys: Shft + Alt + L/R, Ctrl + Alt + L/R'))
 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='avatars/' + INPUTs[i].value + '.png'
    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] 
}