Half Star Rating in jQuery Plug in

I recently used jQuery Star Rating in a site, in that I faced a issue regarding the half star rating, for Eg. If the rating is 2 than it can be shown easily but if it is 2.5 it is a little bit difficult to show the correct rating on the plug in. Here is the code if you are facing this type of issue-

Here is the VF page code & apex class code. In this the calculate method is most important to show the half star rating.

Apex Class

===============================================

public with sharing class StarRatingController {

public decimal selctedAverage{get;set;}

public decimal averageStar{get;set;}

public List getSkillOptionsStar() {

List skillOptions = new List();

decimal dOption= 1.0;

string val= '';

for(integer i=0; i<>

{

val = string.valueOf(dOption);

skillOptions.add(new Selectoption(val,val)) ;

dOption += 0.5;

}

return skillOptions;

}

public List getSkillOptions() {

List skillOptions = new List();

decimal dOption= 1.0;

string val= '';

for(integer i=0; i<>

{

val = string.valueOf(dOption);

skillOptions.add(new Selectoption(val,val)) ;

dOption += 0.1;

}

return skillOptions;

}

public void calculate(){

string str = string.valueOf(selctedAverage);

decimal tempAvg = 0;

if(str.indexOf('.') > -1)

{

str = str.substring(0, str.indexOf('.') + 2);

}

if(str.indexOf('.5') > -1)

{

tempAvg = Double.valueOf(str);

}

else

{

tempAvg = Double.valueOf(str);

tempAvg = tempAvg.round();

}

averageStar = tempAvg + 0.5;

}

public StarRatingController(){

selctedAverage = 1;

averageStar = 1.5;

}

}

VF Code

=============================================

<table cellspacing="5" cellpadding="0" border="0"><tr>

<td>Select average rating :</td>

<td>

<apex:selectList value="{!selctedAverage}" size="1" id="listSelect" onchange="calculate()">

<apex:selectOptions value="{!SkillOptions}"/>

</apex:selectList>

</td>

</tr>

<tr>

<td>Rating :</td>

<td valign="top">

<apex:outputPanel id="pnlResult">

<div id="divStarRating">

<apex:selectList value="{!averageStar}" size="1">

<apex:selectOptions value="{!SkillOptionsStar}"/>

</apex:selectList>

</div>

<script type="text/javascript">

$(document).ready(function(){

$("#divStarRating").stars({

inputType: "select",

split: 2,

cancelShow: false,

disabled : true,

starWidth: 17

});

});

</script>

<br/>

<br/>

<apex:outputLabel value="selected value==> {!selctedAverage}" /> <br/>

<br/>

<apex:outputLabel value="calculated value==> {!averageStar}" />

</apex:outputPanel>

</td>

</tr>

</table>

<apex:actionFunction name="calculate" action="{!calculate}" rerender="pnlResult" status="calStatus"/>

<apex:actionStatus startText="Please wait..." id="calStatus"/>

view demo