var RzRadio = Class.create({

    /**
     * RZRadio.initialize( container )
     * constructor.
     * The constructor sets up the flags and other variables that are used to 
     * keep the state of the controls.
     */
    initialize: function() {
        this.isRadioReady = false;
        this.isPlaying = false;
        this.isLooping = false;
        this.isShuffling = false;
        this.playPauseHoverState = "PLAY";
        this.progressWidthAdjustment = 1.98;
    },
    
    /**
     * RZRadio.insertRadio()
     * Inserts the HTML tags that constitute the UI for the radio.
     */
    insertRadio: function(container) {
        // preload the hover and active images to avoid flicker
        // when the buttons are first hovered or active.
        var buttonStateImages = [
            "/images/playergif/loopBtn/over_skin.gif",
            "/images/playergif/loopBtn/down_skin.gif",
            "/images/playergif/prevBtn/over_skin.gif",
            "/images/playergif/prevBtn/down_skin.gif",
            "/images/playergif/nextBtn/over_skin.gif",
            "/images/playergif/nextBtn/down_skin.gif",
            "/images/playergif/pausePlayBtn/over_skin.gif",
            "/images/playergif/pausePlayBtn/down_skin.gif",
            "/images/playergif/volPlusBtn/over_skin.gif",
            "/images/playergif/volPlusBtn/down_skin.gif",
            "/images/playergif/volMinusBtn/over_skin.gif",
            "/images/playergif/volMinusBtn/down_skin.gif",
            "/images/playergif/shuffleBtn/over_skin.gif",
            "/images/playergif/shuffleBtn/down_skin.gif"
        ]
        
        imageObj = new Image();
        for( var i = 0; i < buttonStateImages.length; i++ ) {
            imageObj = new Image();
            imageObj.src = buttonStateImages[i];
        }
        
        this.isRadioReady = true;
        $(container).innerHTML = 
              "<div id='playerInfoLabels'>"
              + "    <label id='currentSongLbl'></label>"
              + "    <label id='hoverLbl'></label>"
              + "    <label id='volumeLbl'></label>"
              + "</div><!--end div playerInfoLabels-->"
              + "<div id='volumeGraphics'>"
              + "    <div id='volumeBar1'></div>"
              + "    <div id='volumeBar2'></div>"
              + "    <div id='volumeBar3'></div>"
              + "    <div id='volumeBar4'></div>"
              + "    <div id='volumeBar5'></div>"
              + "    <div id='volumeBar6'></div>"
              + "    <div id='volumeBar7'></div>"
              + "    <div id='volumeBar8'></div>"
              + "    <div id='volumeBar9'></div>"
              + "</div>"
              + "<div id='playProgressControl' onclick='rzradio.seekMusicFile(event)' onmouseover='rzradio.setHoverLabel(\"SEEK\")' onmouseout='rzradio.setHoverLabel(\"\")'>"
              + "    <div id='playProgressBar'></div>"
              + "</div>"
              + "<div id='playerButtons'>"
              + "    <button id='loopBtn' type='button' class='loopBtnReset' onclick='rzradio.toggleRepeat()' onfocus='blur()' onmouseout='rzradio.setHoverLabel(\"\");' onmouseover='rzradio.setHoverLabel(\"LOOP\");'></button>"
              + "    <button id='prevBtn' type='button' onclick='rzradio.sendControlSignal(\"prev\")' onfocus='blur()' onmouseout='rzradio.setHoverLabel(\"\")' onmouseover='rzradio.setHoverLabel(\"PREVIOUS\")'></button>"            
              + "    <button id='nextBtn' type='button' onclick='rzradio.sendControlSignal(\"next\")' onfocus='blur()' onmouseout='rzradio.setHoverLabel(\"\")' onmouseover='rzradio.setHoverLabel(\"NEXT\")'></button>"
              + "    <button id='pausePlayBtn' type='button' onclick='rzradio.togglePlay()' onfocus='blur()' onmouseout='rzradio.setHoverLabel(\"\")' onmouseover='rzradio.setHoverLabel(rzradio.playPauseHoverState)'></button>"   
              + "    <button id='volMinusBtn' type='button' onclick='rzradio.sendControlSignal(\"volDown\")' onfocus='blur()' onmouseout='rzradio.setHoverLabel(\"\")' onmouseover='rzradio.setHoverLabel(\"VOLUME\")'></button>"       
              + "    <button id='volPlusBtn' type='button' onclick='rzradio.sendControlSignal(\"volUp\")' onfocus='blur()' onmouseout='rzradio.setHoverLabel(\"\")' onmouseover='rzradio.setHoverLabel(\"VOLUME\")'></button>"       
              + "    <button id='shuffleBtn' class='shuffleBtnReset' type='button' onclick='rzradio.toggleShuffle()' onfocus='blur()' onmouseout='rzradio.setHoverLabel(\"\")' onmouseover='rzradio.setHoverLabel(\"SHUFFLE\")'></button>"
              + "</div><!--end div playerButtons-->";
    },
    
    /**
     * Returns whether this control has been initialized yet.
     */
    isReady: function() {
        return this.isRadioReady;    
    },

    /**
     * Cross browser utility to retrieve the flash movie from the HTML
     * page.
     */
    getFlashMovieObject: function( movieName ) {
      if ( window.document[movieName] ) {
          return window.document[movieName];
      }
      if ( navigator.appName.indexOf( "Microsoft Internet" )==-1 ) {
        if ( document.embeds && document.embeds[movieName] )
          return document.embeds[movieName]; 
      }
      else {
        return document.getElementById( movieName );
      } 	
    },
    
    /**
     * Utility to set the hover label to the string in hovermessage.
     */
    setHoverLabel: function( hoverMessage ) {
        document.getElementById("hoverLbl").innerHTML = hoverMessage;
    },
    
    
    /*************************************
     * ACTIONSCRIPT CONTROL FUNCTIONS 
     ************************************/
    
    /**
     * Sends the player control signals to the flash movie.  sendToActionScript
     * is defined as an external API in the flash movie.
     */
    sendControlSignal: function(signal) {
        this.getFlashMovieObject("rzswf").sendControlSignalToPlayer(signal);  
    },    
    
    /**
     * Event handler for the click event of the progress bar.  This calls the 
     * movie's function to seek the current song.
     */
    seekMusicFile: function(event) {        

        var clickPos = 0;
        
        // if we're dealing with IE, the click is relative to the 
        // div.
        if(event.offsetX) {
            clickPos = event.offsetX;
        }
        // if not, we need to find the div's position in the page
        // and subtract that out.
        else {
            var obj = document.getElementById( "playProgressControl" );
            
            var curleft = 0;
            
            if(obj.offsetParent){
                do {
                    curleft += obj.offsetLeft;            
                } while (obj = obj.offsetParent);
            }
            
            clickPos = event.pageX - curleft;
        }
        
        // seek the currently playing file        
        this.getFlashMovieObject("rzswf").seekMusicFile( clickPos / this.progressWidthAdjustment );    
    },

    /**
     * Since the hover on the play/pause button changes, we need a custom event handler for this.
     * It sets the hover variable based on whether we are playing or not and send the playPauseToggle
     * control signal to the movie file.
     */
    togglePlay: function() {
        // if we are not playing, the player will play at the completion of the function. 
        // set the next hover state to PAUSE
        if(this.isPlaying == false)
        {
            this.playPauseHoverState = "PAUSE";
            this.isPlaying = true;
        }
        // if we are, we won't be playing, so set the hover state to PLAY
        else
        {
            this.playPauseHoverState = "PLAY";
            this.isPlaying = false;
        }
        this.sendControlSignal("playPauseToggle");
    },
    
    /**
     * Since the shuffle button is sticky, we need to have special logic to change
     * the state of the shuffle button based on whether the button has been pressed.
     */
    toggleShuffle: function() {
        if( this.isShuffling == true )
        {
            rzradio.sendControlSignal( "resetShuffle");
            document.getElementById("shuffleBtn").className = "shuffleBtnReset";
            this.isShuffling = false;
        }
        else
        {
            if( this.isLooping == true )
                this.toggleRepeat();
            rzradio.sendControlSignal( "setShuffle" );
            
            document.getElementById("shuffleBtn").className = "shuffleBtnSet";
            this.isShuffling = true;   
        }
        
    },
    
    /**
     * Since the loop button is sticky, we need to have special logic to change the
     * state of the loop button based on whether the button has been pressed.
     */
    toggleRepeat: function() {
        if( this.isLooping == true )
        {
            rzradio.sendControlSignal( "resetRepeat");
            document.getElementById("loopBtn").className = "loopBtnReset";
            this.isLooping = false;
        }
        else
        {
            if( this.isShuffling ==true )
                this.toggleShuffle();
            rzradio.sendControlSignal( "setRepeat" );
            document.getElementById("loopBtn").className = "loopBtnSet";
            this.isLooping = true;   
        }
        
    },

    /***********************************
     * ACTIONSCRIPT CALLBACK FUNCTIONS 
     **********************************/
     
    /**
     * Callback from the flash movie to set the displayed volume.
     * This sets the corresponding bars to red (activeated) and white (un-activated).
     */
    displayVolumeLevel: function(volumeLevel) {
        if(volumeLevel > 9)
            volumeLevel = 9;
        
        volumeBarId = 'volumeBar';
        for(i = 1; i < 10; i++)
        {
            backgroundColorSetting = '#FFFFFF';
                     
            if(i <= volumeLevel)
            {
                backgroundColorSetting = '#B10000';
            }
            
            document.getElementById(volumeBarId + i).style["backgroundColor"] = 
                backgroundColorSetting;
        }
    },
    
    /**
     * Callback from the flash movie to set the song title.
     */
    displaySongStatus: function(currentSong) {
        document.getElementById("currentSongLbl").innerHTML = currentSong;
    },
    
    /** 
     * Callback from the flash file to set the song progress.  We adjust the 
     * progress bar's width based on the percentage value.
     */
    displayProgress: function( percentage ) {
        document.getElementById("playProgressBar").style["width"] = 
            percentage * this.progressWidthAdjustment + "px";
    }
    
    
});



var rzradio = new RzRadio();