How to calculate the rate of one field based on another rate.

i m using a rating system by star.

performance: terms: team: overall:

for overall, i need to calculate it automatically, based on another three rating.

here is my code. view:--- <table >               <tr>                 <td>Performance</td>                 <td><%= render :partial => "rating" , :locals => {:rate => 'performance'}%>                   <%= hidden_field_tag(:rating_performance) %>                 </td>               </tr>               <tr>                 <td>Team</td>                 <td> <%= render :partial => "rating" , :locals => {:rate =>'Team'} %>                   <%= hidden_field_tag(:rating_Team) %>                 </td>               </tr>               <tr>                 <td>Strategy</td>                 <td><%= render :partial => "rating" , :locals => {:rate =>'strategy'} %>                   <%= hidden_field_tag(:rating_strategy) %>                 </td>               </tr><tr>                 <td>Terms</td>                 <td><%= render :partial => "rating" ,:locals => {:rate => 'terms'}%>                   <%= hidden_field_tag(:rating_terms) %>                 </td>               </tr>               <tr>                 <td>Overall</td>                 <td>                   <%= render :partial => "rating" ,:locals => {:rate => 'overall'}%>                   <%= hidden_field_tag(:rating_overall) %>                 </td>               </tr>           </table>

partial_rating-----

<script type="text/javascript">   function setRating(value,rate) {     document.getElementById('current-star- rating-'+rate).style.backgroundImage = "documenturl(/images/stars/ stars_"+value+"0.gif)";     document.getElementById('rating_'+rate).value = value; overall=parseInt(document.getElementById('rating_performance').value) +parseInt(document.getElementById('rating_team').value) + parseInt (document.getElementById('rating_terms').value )+ parseInt (document.getElementById('rating_strategy').value) document.getElementById('rating_overall').value = overall     document.getElementById('current-star-rating- overall').style.backgroundImage = "documenturl(/images/stars/ stars_"+overall+"0.gif)";*/   } </script>

<div class="reviewrating" style="width:620px">   <div style="float:left;padding-top:2px;"></div>   <div style="float:left;padding-left:2px;">     <ul id="current-star-rating-<%=rate%>" class="star-rating" style="background-image:url('/images/stars/stars_00.gif')">       <li><a class="one-star" href="#" onclick="setRating('1','<%=rate %>'); return false">1</a></li>       <li><a class="two-stars" href="#" onclick="setRating('2','<%=rate %>'); return false">2</a></li>       <li><a class="three-stars" href="#" onclick="setRating('3','< %=rate%>'); return false">3</a></li>       <li><a class="four-stars" href="#" onclick="setRating('4','< %=rate%>'); return false">4</a></li>       <li><a class="five-stars" href="#" onclick="setRating('5','< %=rate%>'); return false">5</a></li>   </ul></div>

</div>

but it is not working fine. The star of overall is not highlight automatically.

could u plz help me as soon as possible as soon as possible.

Thanks,