Debug Help for Simple Javascript/jQuery Vimeo Froogaloop

See this link: http://jitimanagementcoach.com/TC_test/tabbed4try.html I've already got the videos to play and/or pause on one tab or another when a tab is clicked... but now I need the video on the Prelearn tab to "click" the Solution tab and play the video once the Prelearn video is finished. Here's the code:

               <script>
var iframe1 = document.getElementById("prelearnvid");
var iframe2 = document.getElementById("solutionvid");
var player1 = $f(iframe1);
var player2 = $f(iframe2);
var prelearnBtn = document.getElementById("prelearnbtn");
prelearnBtn.addEventListener("click", function() {player1.api("play");player2.api("pause");});

var solutionBtn = document.getElementById("solutionbtn");
solutionBtn.addEventListener("click", function() {player2.api("play");player1.api("pause");});

    player1.addEvent('ready', function() {player1.addEvent('finish', onFinish);});

    function onFinish(id) {window.location.href = '#solution-tab';};

        </script>

It all works fine until the very last two lines... where am I going wrong?

The ready event is not firing for your player. In order for the player's events to fire, you need to add a player_id parameter to your URL that includes the id of your <iframe>.

Change the src attribute of your <iframe> to this:

<iframe id="prelearnvid" src="http://player.vimeo.com/video/92349330?&amp;player_id=prelearnvid"

From the Froogaloop documentation:

If you’re embedding and controlling multiple players on a page or using our JS API library (Froogaloop), you should give each player a player_id that matches the id of the iframe element.

This stackoverflow answer and this forum post helped uncover this solution.