animated buttons with 5 actions

hi everyone!

i am looking for help with animated button actions. At the bottom is a link to the file

on my buttons, i have the 3 below actions:

1. mouseover: the yellow highlight rectangle animates in (below is the code on the action)

                    sym.play("onHover");

2. mouseout: the yellow highlight rectangle animates in reverse

                    sym.playReverse("out");

3. click: rectangles move into position in the scroll (note: scrollTop changes with each rectangle)

                    sym.$("Rectangle").animate({scrollTop:400},1500);

what i need help with are the following 2 things:

A- i would now like the yellow highlight rectangle that animates in to stay in position when the mouse is clicked & not animate out on mouseout. It should animate out when the next button is clicked.

I used "mousedown: but it doesn't work- must conflict with click

                              sym.play("on");

B- in addition, i would like the yellow highlight to be "on" when the page first opens

please correct my clumsy code on numbers 1-3. It is buggy & I'm sure there is a much better way to do this!!!!!

here's the link to my file: https://www.yousendit.com/download/UVJpQ3QrUzc5NVZ2TzhUQw

thank you all so much for your help!!!

-sharon