setting a buffer graphic using OSMF

I'm building a pretty simple player and have a a buffer size set on my MediaPlayer (mediaPlayer.bufferTime = BUFFER_TIME). That's working but I want to show a graphic whenever it starts to buffer. I have an Event Listener on my mediaplayer to show and hide but it doesn't seem to be working properly. What's the best method for doing this?

Here's what I have from a sample I found somewhere ---

mediaPlayer.addEventListener (MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE, _onMediaPlayerStateChange, false, 0, true);

function _onMediaPlayerStateChange(evt:MediaPlayerStateChangeEvent):void {
    trace ( "_onMediaPlayerStateChange () , evt.state : " + evt.state );
    switch ( evt.state ) {
        case "playing" :
            posterButton.visible = false;
            img.visible = false;
            onPlaying();
            break;
        case "loading" :
            //
            break;
        case "buffering" :
            onBuffering();
            break;
        case "uninitialized" :
            //
            break;
        case "ready" :
            //
            break;
        default :
            break;
    }
}

function onBuffering():void {
    trace("BUFFERING");
    bImg.visible = true;
}
function onPlaying():void {
    trace("PLAYING");
    bImg.visible = false;
}

Try setting the BUFFERING_CHANGE event listener on MediaPlayer:

_mediaPlayer.addEventListener(BufferEvent.BUFFERING_CHANGE,
    bufferingChangeHandler);

...

private function bufferingChangeHandler(e: BufferEvent): void
{
    trace("buffering " + (_mediaPlayer.buffering ? "in progress" : "finished"));
    _ui.isWaiting = _mediaPlayer.buffering;
}