Animation using JavaScript

Question

Hi,
I have created an animation exercise for an eLearning lesson in a program that uses JavaScript as the scripting for a Windows executable. A retired social worker who creates these eLearning materials as give-away's to help people in the community improve health, it would be a big help to reaching more people if instead of a Windows executable version, the animation could be developed in a web page. A lot more people could view the eLearning and try this exercise which trains people in pacing their breathing.
The animation has a 300X300 circle on the canvas with a couple of text input boxes and a start button. The JS < 50 lines of script, but since it was not developed for a web page, it has no tags and it depends on objects like the circle or button (or 2 audio files to craete the inhale/exhale sounds) that were already placed on the canvas in the Windows executable program.
I'm not very skilled using Dreamweaver CS5, but with help, reading, references can try to convert this JS into a web version, if it's possible. Not sure how to do this and would appreciate any help.
I am adding a screenshot of the interface and the JS functions that are called by the start button.
//JS: ( bar1 is the variable entered by the use as breaths per minute-BPM; time1 is the exercise length; the variables initially are set as follows: time1=15, //volume=100)
var time1
function minuteTimer()
breakLoop = false
stopLoop = false
fork (calcBreathing)
for (var i=0;i<time1;i++)
    wait(60)
    breakLoop = true
    Submit.Show()
    Text122.Show()
    Text12.Show()
    TextInput22.Show()
    TextInput2.Show()
    Submit2.Hide()
    TextInput2.SetTransparency(0,false)
    TextInput22.SetTransparency(0,false)
    Text12.SetTransparency(0,false)
    Text122.SetTransparency(0,false)
    Text5.SetTransparency(0,false)
    Frame12.SetTransparency(0,false)
    Submit.SetTransparency(0,false)
    TextInput2.Enable(true)
    TextInput22.Enable(true)
    Debug.trace("\n minutes elapsed "+(i+1)+"\n")
stopLoop = true   
function calcBreathing()
    var bar2 = 60/bar1
    for (loop = 0;loop<bar1;loop++)
        mySound.Play(1,volume)
        Vector8.Scale(.5,.5, bar2*.3)
        mySound.Stop()
        wait (bar2*.05)
        mySound2.Play(1,volume)
        Vector8.Scale(-.5,-.5,bar2*.6)
        mySound2.Stop()
        wait (bar2*.05)
        if (breakLoop) break
    breakLoop = false
    if (bar1 > 6) bar1--
    if (!stopLoop) calcBreathing()
Any help appreciated. Thanks very much.
Kind Regards,
saratogacoach

Answer 1

joel pau thank you for all the support.
now i will explain the anwer if anyone else will be stuck with the same problem.
first of all in edge animate need to mark all the things that created and "convert to symbol"(mark all and right click).
second:
in the top of your html file you got the script to the edge_preLoad.js .....
so now in your js code:
lets say we use append to add new div to our code and now we got <div id="new"</div>.
$.Edge.getComposition("yourCompositionID").createSymbolChild("yourSymbolThatCreatedInStepO ne","#new");
like this you can get new animation of the same composition.
if you want to conroll the animation you just need to take the id of the new symbol your created using jquery or any way you like.
and example of control it:
$.Edge.symbol.get("#theNewID").play();