At this point there's not much left in our main application object, PianoHeroApp. We moved all of the code to load the audio to the SplashPanel object, and all of the code to make the keyboard work to the GamePanel object.

The PianoHeroApp object will now only act as a state controller to hide and show the correct panels. First we need to add some variables to hold references to the panels:

function PianoHeroApp()
{
    var version = "7.1",
        audioManager = new AudioManager("audio"),
        splashPanel = new SplashPanel(audioManager),
        gamePanel = new GamePanel(audioManager),
        curPanel = undefined;

We define variables to hold the audio manager, the splash panel, and the game panel objects. We also have a curPanel variable, which will be set to the current panel that is showing. To start with we will set it to undefined.

Next, we will create a private showPanel() method that will hide the currently showing panel, if there is one, and show a different one:

    function showPanel(panel)
    {
        if (curPanel) curPanel.hide();
        curPanel = panel;
        curPanel.show();
    }

This method takes the panel to show as a parameter. This will be a reference to either SplashPanel or GamePanel. First we check to see if a panel is showing, and if so we call its hide() method. Then we set curPanel to the new panel and call its show() method.

Next we define the public startGame() method. If you remember from the code we wrote for the SplashPanel object, this will get called from the event handler when the user clicks either on the Play Game or Play Song button. It passes in the game options the player selected:

    this.startGame = function(songName, rate, playGame)
    {
        gamePanel.setOptions(songName, rate, playGame);
        showPanel(gamePanel);
    };

The startGame() method takes three parameters; the name of the song to play, the playback rate (which controls how fast the game progresses), and a Boolean value (which determines if the user clicked on the Play Game button).

First we call the setOptions() method of the GamePanel object, which we will write later. We pass through the same parameters we got from the splash panel. Then we call the showPanel() method passing in the GamePanel object. This is what will start the game.

Next we will define the public quitGame() method. This will be called from the game panel when the user clicks on the Quit button:

    this.quitGame = function()
    {
        showPanel(splashPanel);
    };

All we do in this method is call showPanel(), passing it the SplashPanel object.

The final thing we need to define is the start() method of our application:

    this.start = function()
    {
        $(document).keydown(function(e) { curPanel.onKeyDown(e); })
                   .keyup(function(e) { curPanel.onKeyUp(e); });
                   
        showPanel(splashPanel);
        splashPanel.loadAudio();
    };

First we set up keyboard event handlers on the document, just as we did when creating the piano application. However, in this application we will forward the keyboard event to the current panel. By centralizing the keyboard event handlers in the application object, we don't have to write a bunch of code in each panel to subscribe and unsubscribe keyboard event handlers from the document when the panel is shown or hidden.

The final thing we do is show the splash panel, and then call its loadAudio() method to kickstart the application.