create an image by css

I'm trying to do the next thing in css:

when the user over on all of the image with his mouse,

the css would be changed to:

in image number 2 and 3, I have to enable him to press the small circles. I enabled it.

I didn't succeed to start the blue line from the small circle (like in image 1):

this blue line can go to the left or to the right by a given input (100 will color all the right gray shape. -100 will color all the left gray shape. in this example, I assume the user inserts the parameter: 25. and then quarter of the right gray shape was colored)

can someone help me with that please?

the blue line is in the class PersonaCanvasMini and it exactly like PersonaCanvas

any help appreciated!

here's my jsfiddle:

http://jsfiddle.net/kyfha/74/

this is my html:

<div id="goalDetails" onmouseOver="addDetails();" onmouseout="removeDetails();">

    <div class="PersonaCanvas">
        <div class="smallCircle" onclick="showProjection();"></div>
        <div id="smallestCircle" style="display: none" onclick="showBurnRate();"></div>
    </div>

    <div id="details" style="display: none">
        <div id="dolarsDetails">77$</div>
        <div id="projOrBurn">Projection</div>
    </div>

    <div id="mainShape" class="bigCircle">
        <div id="cpaDetails">7.03</div>
    </div>

    <div class="PersonaCanvasMini"></div>
    <div id="mainLine" style="display:none"></div>
    <div id="secondaryLine" style="display:none"></div>
</div>

and my css is in the jsfiddle.