How Can I Dynamically Edit JW Player JavaScript?

I have a text box in my page containing the code of JW player:

<div id="video-container">Loading the player ...</div>

<script type="text/javascript">
    jwplayer("video-container").setup({
        autostart: false,
        skin: "/skins/modieus/modieus.zip",
        image: "/wp-content/uploads/picture-filename.jpg",
        file: "/wp-content/uploads/video-filename.mp4",
        flashplayer: "/jwplayer/player.swf",
        volume: 80,
        width: 853,
        height: 480
    });
</script>                             

In addition, I have three other text areas and two checkboxes:

1. The first textbox is the name of an image.
2. The second is the name of a video file.
3. The third is a separate placeholder where generated script output will be placed (see below).

You can see them in the above JavaScript:

• image: "/wp-content/uploads/picture-filename.jpg"
• file: "/wp-content/uploads/video-filename.mp4"

When you click the first checkbox, we need to grab the script from the text area and add the names of the image and video files from their own text boxes to it in the correct place. This generated code will then be added to the third text area at the bottom of the page.

If the user clicks the second checkbox, then the original (simple) code for the JW Player should be grabbed from text area and inserted into the third text area at the bottom of the page without any modifications.

What code do I need to use to make this happen? Is this better done through PHP on the server side or jQuery on the client side?