Get ratio of two array using jquery

Question

I am trying to develop a score bar where user can see his scores and also see the progress towards the top prize he could win.

The problem is in this bar there are 8 prizes and every prize has different prize points. You could win the small prize by collecting only 200 points, or you could win a trip by collecting 50000 points.

Now the problem is I have to show all the eight prize milestone on the bar and each one has the same difference space between all prize milestones

As you can see the picture user win 7800 points he achieve the milestone of 7500 now the main problem is I have to get the ratio of between these points to place the bottle on accurate place which I failed to do :( I tried so hard but nothig happend

You can see fiddle here: http://jsfiddle.net/Udwq9/2/

HTML

<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

<div class="barCont">
      <div class="innerLight"></div>
      <div class="innerDark"> </div>
      <div class="seek">
        <div class="youRhere">
          <p>You are here:<br />
            <span id="Points">7800 Points</span></p>
          <br />
        </div>
        <img src="data:image/jpeg;base64,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" width="17" height="74" alt=" " /> </div>
      <div class="mileStone" style="">200

      </div>
      <div class="mileStone" style="">300

      </div>
      <div class="mileStone" style="">450

      </div><div class="mileStone" style="">750

      </div>
      <div class="mileStone" style="">7500

      </div>
      <div class="mileStone" style="">15000

      </div>
      <div class="mileStone" style="">20000

      </div><div class="mileStone" style="">50000

      </div>
    </div>

SCRIPT

var TopScore = 50000;
    var MileStone = new Array("200", "300", "450", "750", "7500", "15000", "20000", "50000");
    var barWidth = $('.innerLight').width();
    var ArrayLength = MileStone.length;
    var milestonepos = barWidth/ArrayLength;
    var milestoneposMain = milestonepos/ArrayLength;
    var Points = $('#Points').text();
    var yourPoints = parseInt(Points);
    var pos = 0;
    var bottlePos = 0;
    var posTwo = 0;
    var posTwoMain = 0;

    for(var i=0; i <= ArrayLength; i++){    
        var pos = pos + milestonepos;
        $('.mileStone').eq(i).animate({ left: '' + pos + 'px' });
        //alert(pos)        
        }
    var pos = 0;
    for(var j=0; j<= ArrayLength; j++){
        if(yourPoints >= MileStone[j])
        {   

        var pos = pos + milestonepos;

             /*var step1 = yourPoints - MileStone[j];
             var step2 = MileStone[j+1] - yourPoints;
             var step3 = step2/step1;
             var step4 = step3*100;*/
            // var pointsRatio = yourPoints - posRatio;
             //var posTwoMain = parseFloat(posTwo.style.width)
             //alert(parseInt(posRatio));
             //alert(parseInt(pointsRatio));
            // var pos = pos + pointsRatio;
            }

        }
        $('.seek').animate({ left: '' + parseInt(pos) + 'px' }, 1000);

Answer 1

It doesn't seem too difficult, but 7800 is a bad value to test with, because it's next to nothing from 7500 on a scale of 7500 to 15000. (So in the JSfiddle I changed it to 12700)

http://jsfiddle.net/Udwq9/9/

I modified to second for-loop to break once the milestones are larger than the user's score.

for(var j=0; j < ArrayLength; j++)
{
    if(yourPoints >= MileStone[j])
    {   
        pos = pos + milestonepos;
    }
    else
    {
        prevMilestone = j ? MileStone[j-1] : 0;
        pos += parseInt( (yourPoints-prevMilestone)/(MileStone[j]-prevMilestone) * milestonepos);
        break;
    }
}

Answer 2

Use following loop to count needed offset (looping from the end of the array):

var pos2 = 0;

for(var j=ArrayLength-1; j >= 0; j--){
     var currentMilestone = parseInt( MileStone[j]);

    //reaching "full" milestone
    if(yourPoints >= currentMilestone)
    {   
        pos2 = milestonepos * (j+1);

        var diff = yourPoints - currentMilestone;
        console.log("diff: " + diff);

        //counting offset to move forward from "full" milestone
        if(j < ArrayLength - 1) {
            var nextMilestone = MileStone[j+1];
            var diffInPoints =  nextMilestone - currentMilestone;
            var subDiff = (milestonepos * diff) / diffInPoints;
            pos2 += subDiff;
        }
        break;
    }
}

console.log("pos2: " + pos2);
$('.seek').animate({ left: '' + parseInt(pos2) + 'px' }, 1000);

Here is the Demo