Проблемма с className
 

Здравствуйте, помогите доделать функцию... при щелке на элементе должен меняться его фон и цвет текста... при повторном щелчке на нем становиться прежним, при щелчке на новом элементе старый должен должен принять прежний вид(цвет текста)

цвет текста который был до выделения элемента не возвращается....

<style>
  .green_blue1 { color: #08e8de; }
  .orange1     { color: #FFA500; }
  .purple1     { color: #A020F0; }
  .bluee1      { color: #66CCFF; }
</style>

<script>
var ubc;
 function mark_user(id, color) {               
  if(ubc == id) {                   
     document.getElementById(id).style.backgroundColor='#eeeeee';     
     document.getElementById(id).className=color;     
     id_user_color=id;              
     ubc='';  
     return;                  
  }   
if(!ubc || ubc != id) { 
     document.getElementById(id).style.backgroundColor='#ff7d00';  
     document.getElementById(id).style.color='#ffffff';     
   if(ubc) {         
      document.getElementById(id).className=color;   
      document.getElementById(ubc).style.backgroundColor='#ffffff';          
    }        
}
  ubc=id; 
} 
</script>

<div id='users'>
	<div id='uname1' class="green_blue1" onClick="mark_user('uname1','green_blue1')">123</div>
	<div id='uname2' class="orange1"     onClick="mark_user('uname2','orange1')">123</div>
	<div id='uname3' class="purple1"     onClick="mark_user('uname3','purple1')">123</div>
        <div id='uname4' class="bluee1"      onClick="mark_user('uname4','bluee1')">123</div>
</div>