SpryTabbedPanel: Flash player in tabs do not play video streams

Question

Note: I am a complete noob (no experience with Javascript and rudimentary experience with htlm/css). Please be patient (I hope that this is the correct forum for this) and know that I am appreciative of any help or solution that anyone can provide.
Using Dreamweaver CS4 on Mac OS 10.5.8
We recently switched all of our streaming servers from Windows Media (good riddance) to Flash Media Server 3.5 (now getting awesome H.264 quality in comparison).
I was asked to re-design this webpage with the aim of re-organizing the content so that it is more accessible:
http://www.librarymedia.net/VideoGallery.html
We used Adobe's test page for our first page:
http://www.librarymedia.net/flash/videoplayer.html?source=rtmp://63.116.232.4/live/livestr eam&type=live&idx=10
This was meant as a temporary page to get us started, and as you can see, it needs work but at least it works.
I've been working the the final version of this page. My boss wants a tabbed web page with links to our video streams (tab for each category of streams).
This is what I have so far:
http://www.librarymedia.net/Flash2/videoplayer2.html?source=rtmp://63.116.232.4/live/lives tream&type=live&idx=10
I realize that I had several options before building this. One, I could have made a separate page for each tab and linked them with a tab menu. In hindsight, this might have been a better option since I could have just copied the working page that we already have for each tab. Or I could have done what I have tried to do: to use Dreamweaver's SpryTabbedPanel to make the tabs and insert a Flash player with links into each tab.
The problem:
1. The streams do not play. The player says "initializing" and then "please enter a stream name and play". Please note that I used SpryURLutils to get each link to open in the appropriate tab.
2. After reading about the benefits of external vs. inline javascript, I took all of the inline javascript that was contained in Adobe's sample page and placed it in an external file. I tried placing the javascript back into the source code (inline), but this did not fix the problem. I guess there is a Javascript problem or I need extra Javascript code to get this to work.  The javascript code is below. Use view source in your web browser to see source code. Please let me know if I need to provide more information.
Thanks.
// (C) Copyright 2008 Adobe Systems Incorporated. All Rights Reserved.
// NOTICE:  Adobe permits you to use, modify, and distribute this file in accordance with the terms of the Adobe license agreement accompanying it. 
// If you have received this file from a source other than Adobe, then your use, modification, or distribution of it requires the prior
// written permission of Adobe.
// THIS CODE AND INFORMATION IS PROVIDED "AS-IS" WITHOUT WARRANTY OF
// ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
// THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
// PARTICULAR PURPOSE.
// THIS CODE IS NOT SUPPORTED BY Adobe Systems Incorporated.
// Version check based upon the values defined in globals
                                            var hasRequestedVersion = DetectFlashVer(10, 0, 0);
                                            if(!hasRequestedVersion)
                                                var div = document.getElementById("flashcontent");
                                                div.innerHTML = '<a href="http://www.adobe.com/go/getflashplayer/" style="color:black"><img src="images/ERROR_getFlashPlayer.gif" width="641" height="377" /></a>';
                                            else{
                                                    AC_FL_RunContent(
                                                        "src", "swfs/videoPlayer",
                                                        "width", "640",
                                                        "height", "377",
                                                        "id", "videoPlayer",
                                                        "quality", "high",
                                                        "bgcolor", "#000000",
                                                        "name", "videoPlayer",
                                                        "allowfullscreen","true",
                                                        "type", "application/x-shockwave-flash",
                                                        "pluginspage", "http://www.adobe.com/go/getflashplayer",
                                                        "flashvars", flashVars
                                      // -->  
// Javascript in original page
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function changeImages() {
    if (document.images && (preloadFlag == true)) {
        for (var i=0; i<changeImages.arguments.length; i+=2) {
            document [changeImages.arguments[i]].src = changeImages.arguments[i+1];
var preloadFlag = false;
function preloadImages() {
    if (document.images) {
        navi_01_over = newImage("images/button_dynamic_up.gif");
        navi_02_over = newImage("images/button_samples_up.gif");
        navi_03_over = newImage("images/button_interactive.gif");
        preloadFlag = true;
function changetab(obj, obj2, obj3, left1, left2, left3, nav1, nav2, nav3){
    document.getElementById(obj).style.display = 'block';
    document.getElementById(obj2).style.display = 'none';
    document.getElementById(obj3).style.display = 'none';
    document.getElementById(left1).style.display = 'block';
    document.getElementById(left2).style.display = 'none';
    document.getElementById(left3).style.display = 'none';
    document.getElementById(nav1).src = "images/" + nav1 + "_up.gif";
    document.getElementById(nav2).src = "images/" + nav2 + "_down.gif";
    document.getElementById(nav3).src = "images/" + nav3 + "_down.gif";
function tabout(obj, nav){
    if (document.getElementById(obj).style.display == 'block'){
        document.getElementById(nav).src = "images/" + nav + "_up.gif";
    else{
        document.getElementById(nav).src = "images/" + nav + "_down.gif";
function tabover(obj){
    document.getElementById(obj).src = "images/" + obj + "_up.gif";
// Functionality
    <script language="javascript">
        var queryParameters = new Array();
        var flashVars = "";
        var tag = "";
        var url = "";
        window.onload = function ()
            for(var i=1 ; i<=10;i++)
                var ids = String("sel"+i.toString());
                document.getElementById( ids ).style.visibility = "hidden";
                document.getElementById( ids ).className = "style76";
            // mark the entry for that index
            if(queryParameters['idx'] != "")
                document.getElementById("td" + queryParameters['idx'] ).className = "style75";
                document.getElementById("sel" + queryParameters['idx'] ).style.visibility = "visible";
        function initialise()
            function getUrlParam( name )
                  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
                  var regexS = "[\\?&]"+name+"=([^&#]*)";
                  var regex = new RegExp( regexS );
                  var results = regex.exec( window.location.href );
                  if( results == null )
                        return "";
                  else
                        return unescape( results[1] );
            queryParameters['source'] = getUrlParam('source');
            queryParameters['type'] = getUrlParam('type');
            queryParameters['idx'] = getUrlParam('idx');
               flashVars += "&videoWidth=";
            flashVars += 0;
            flashVars += "&videoHeight=";
            flashVars += 0;
            flashVars += "&dsControl=";
            flashVars += unescape("manual");
            flashVars += "&dsSensitivity=";
            flashVars += 100;
            flashVars += "&serverURL=";
            flashVars += queryParameters['source'];
            flashVars += "&DS_Status=";
            flashVars += "true";
            flashVars += "&streamType=";
            flashVars += queryParameters['type'];
            flashVars += "&autoStart=";
            flashVars += unescape("true");
            tag = "&lt;object width='640' height='377' id='videoPlayer' name='videoPlayer' type='application/x-shockwave-flash' classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' &gt;&lt;param name='movie' value='swfs/videoPlayer.swf' /&gt; &lt;param name='quality' value='high' /&gt; &lt;param name='bgcolor' value='#000000' /&gt; &lt;param name='allowfullscreen' value='true' /&gt; &lt;param name='flashvars' value= '"+                   
            flashVars+"'/&gt;&lt;embed src='swfs/videoPlayer.swf' width='640' height='377' id='videoPlayer' quality='high' bgcolor='#000000' name='videoPlayer' allowfullscreen='true' pluginspage='http://www.adobe.com/go/getflashplayer'   flashvars='"+ flashVars +"' type='application/x-shockwave-flash'&gt; &lt;/embed&gt;&lt;/object&gt;";
        function playStream()
            var url = "source=" + document.getElementById('inputURL').value;
            var type;
            if(document.getElementById('vodCheckbox').checked==true)
                type="vod";
            else
                type="live";
            url += ("&type=" + type);
            document.getElementById('playBtn').href="videoplayer.html?" + url;
        function checkbox(type)
            if(type=="vod")
                if(document.getElementById('liveCheckbox').checked==true)
                    document.getElementById('liveCheckbox').checked=false;
            if(type=="live")
                if(document.getElementById('vodCheckbox').checked==true)
                    document.getElementById('vodCheckbox').checked=false;
        initialise();

Answer 1

Should I have posted this in the Spry forum instead? My apologies if this is the wrong forum.
>There is a sample application of the code included with the zip file  which shows how to implement it.
The sample doesn't really tell me what I need to do to the code to make it work (I do not know javascript), and unfortunately, I have not found any helpful instructions/documentation online. You've given me the answer, I just don't know enough to implement it. This is what I've done:
1. Placed the FAVideo.js file in my site folder and linked it to the page: <script src="FAVideo.js" type="text/javascript"></script>
2. I added the following code (taken from the SimpleDemo.html example inside the FAVideo folder). My comments in bold. Page at
http://www.librarymedia.net/Flash2/videoplayer2.html?source=rtmp://63.116.232.6/vod/mp4:Ol ympics2010_640x480.mov
         <! To the <body> section:-->
<body onLoad="">
    <div id="divOne"></div>
<!-Do I have to place the entire page within the "divOne" div (or just the section containing the tabs) in order for the javascript to work?-->
         <!-In the <head> section: -->
   <script type="text/javascript">
        playerOne = new FAVideo("divOne", "TabbedPanels1", "demo_video.flv",0,0,{ autoLoad:true, autoPlay:true });
    </script>
<!- I noticed that the body code added a div id called "divOne", so I added the "TabbedPanels1" div id to the above code thinking that this would apply the javascript code to all of the tabs. Dreamweaver adds <div id="TabbedPanels1" class="TabbedPanels"> to the page when you insert the tabbed menu, so I'm thinking the javascript has to point to either one of those for it to work. The "demo_video.flv",0,0 code is probably unneccesary, right? As you can see, I'm completely clueless. -->
    <script>
        playerOne.addEventListener("playheadUpdate",this,myHandler);
        playerOne.removeEventListener("playheadUpdate",this,myHandler);
        function myHandler() {
            //alert("eh");
    </script>
</body>
Once again, thanks for your help.