Put scripts in js file and append to div tag with click function

Put scripts in js file and append to div tag with click function

    I have php page pulling data from a mysql db and looping output until a condition isn't met.  What I would like to do is append html to a single div instead of 3 div's.  I was wondering if I can put the script stuff into a separate js file as well.  Below is a link and the code, I'm going to post what I want to end up with further down.

    Example (I know it only displays for the first div)

    2. echo "<img src='http://www.thecatalystchurch.com/images/play_icon.png' width='11' height='9'>&nbsp;<a href='#' id='audio'>Listen Online</a>&nbsp;|&nbsp;\n";
    5.     

    8. if (trim($row_getmessages[VideoURL])=='') {
    9. echo "";
    10. } else {
    11. echo "<img src='http://www.thecatalystchurch.com/images/video_icon.png' width='16' height='16'>&nbsp;<a href='#' id='video'>Watch Online</a>&nbsp;|&nbsp;\n";
    12. }
    14. $year = $row_getmessages[Year];
    15. $file = $row_getmessages[Filename];
    16. $lofs= round(filesize('../messages/' . $year . '/lo/' . $file)/1024/1024,2);
    17. $hifs= round(filesize('../messages/' . $year . '/hi/' . $file)/1024/1024,2);
    18.    
    19.     echo "<img src='http://www.thecatalystchurch.com/images/download_icon.png' width='9' height='11'>&nbsp;<a href='#' id='download'>Download</a><br>\n\n";

    21.   echo "<div id='audiospace' style='margin:3px;width:314px;height:25px;display:none;'>This text will be replaced</div>\n";
    22. echo "<div id='videospace' style='margin:3px;width:314px;height:260px;display:none;'>This text will be replaced</div>\n";
    23. echo "<div id='downloadspace' style='margin:3px;width:314px;height:25px;display:none;'><span style='font-style:italic;font-size:14px'><a href='/messages/$row_getmessages[Year]/lo/$row_getmessages[Filename]'>Low Quality - $lofs MB</a>&nbsp;|&nbsp;<a href='/messages/$row_getmessages[Year]/hi/$row_getmessages[Filename]'>High Quality - $hifs MB</a></span></div>\n";
    24.     
    25. echo "<br>testing<br>";


    28. echo "<script type='text/javascript' src='http://www.thecatalystchurch.com/mediaplayer/swfobject.js'></script>

    30. <script type='text/javascript'>
    31. var so = new SWFObject('$HomeDir/mediaplayer/player.swf','ply','314','25','9','#000000');
    32. so.addParam('allowfullscreen','true');
    33. so.addParam('allowscriptaccess','always');
    34. so.addParam('wmode','opaque');
    35. so.addVariable('file','$URL/$row_getmessages[Year]/lo/$row_getmessages[Filename]');
    36. so.addVariable('skin','http://developer.longtailvideo.com/svn/skins/stormtrooper/stormtrooper.zip');
    37. so.write('audiospace');
    38. </script>

    40. <script type='text/javascript'>
    41. var so = new SWFObject('http://www.thecatalystchurch.com/mediaplayer/player-viral.swf','ply','314','260','9','#000000');
    42. so.addParam('allowfullscreen','true');
    43. so.addParam('allowscriptaccess','always');
    44. so.addParam('wmode','opaque');
    45. so.addVariable('file','$row_getmessages[VideoURL]');
    46. so.addVariable('skin','http://developer.longtailvideo.com/svn/skins/stormtrooper/stormtrooper.zip');
    47. so.write('videospace');
    48. </script>
    49.   
    50. <script type='text/javascript'>
    51. var so = $(<a href='http://www.thecatalystchurch.com/messages/2010/hi/08-22-10.mp3'>HighVersion</a>);
    52. so.write('downloadspace');
    53.             </script>

    55. <script>";
    57. echo "$(function() {
    58.       $('#audio,#video,#download').click(function() {
    59.             var id = '#' + this.id + 'space';
    60.             $('#audiospace,#videospace,#downloadspace').not(id).slideUp('slow');
    61.             $(id).slideToggle('slow');
    62.       });
    63. });
    64. </script>";




    What I am trying to get too...

    1. echo "Title";
    2. echo "Date";
    3. echo "Speaker";

    5. echo "<div id='Links' style='margin:3px;width:314px;height:25px;display:none;'>Listen Online | Watch Online | Download</div>\n";

    I think I will need to add the record id to the "Links" id to make them unique.

    Now for the for the js file...

    1. <script type='text/javascript' src='http://www.thecatalystchurch.com/mediaplayer/swfobject.js'></script>

    3. <script type='text/javascript'>
    4. var so = new SWFObject('$HomeDir/mediaplayer/player.swf','ply','314','25','9','#000000');
    5. so.addParam('allowfullscreen','true');
    6. so.addParam('allowscriptaccess','always');
    7. so.addParam('wmode','opaque');
    8. so.addVariable('file','me$URL/$row_getmessages[Year]/lo/$row_getmessages[Filename]'); so.addVariable('skin','http://developer.longtailvideo.com/svn/skins/stormtrooper/stormtrooper.zip');
    9. so.write('audiospace');
    10. </script>

    12. <script type='text/javascript'>
    13. var so = new SWFObject('http://www.thecatalystchurch.com/mediaplayer/player-viral.swf','ply','314','260','9','#000000');
    14. so.addParam('allowfullscreen','true');
    15. so.addParam('allowscriptaccess','always');
    16. so.addParam('wmode','opaque');
    17. so.addVariable('file','$row_getmessages[VideoURL]');
    18. so.addVariable('skin','http://developer.longtailvideo.com/svn/skins/stormtrooper/stormtrooper.zip');
    19. so.write('videospace');
    20. </script>
    21.  
    22. <script type='text/javascript'>
    23. var so = $(<a href='http://www.thecatalystchurch.com/messages/2010/hi/08-22-10.mp3'>HighVersion</a>);
    24. so.write('downloadspace');
    25. </script>

    27. <script>
    29. $(function() {
    30. $('#audio,#video,#download').click(function() {
    31. var id = '#' + this.id + 'space';
    32. $('#audiospace,#videospace,#downloadspace').not(id).slideUp('slow');
    33.             Depending on whats clicked - Append that Script to Links Div then slide down
    34. $(id).slideToggle('slow');
    35. });
    36. });
    37. </script>
    How can I write it so that I can assign the three "Spaces" to a variable and append it to the div id on the php page?
    There are dynamic links the scripts, but I can pass those from the php page to the js file by defining an
    array in the php page correct?

    var data = {div id:new Array(data1,data2,data3...)}

    So, in wrapping up (because I posted a book), all I'm trying to do is append whichever "Space" is clicked to the 
    Links div on the php page.

    Is this possible? If it doesn't make any sense let me know.

    Any help is greatly appeciated!!