var _tutorialContent = " \
    <table id=\"tutorialWrapper\" class=\"tutorial\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"> \
        <tbody> \
            <tr> \
                <td valign=\"top\" class=\"tl\"></td> \
                <td valign=\"middle\" class=\"tc\"><span class=\"tutorialTitle\"></span></td> \
                <td valign=\"top\" class=\"tr\"></td> \
            </tr> \
            <tr> \
                <td valign=\"top\" class=\"ml\"></td> \
                <td valign=\"top\" class=\"mc\"></td> \
                <td valign=\"top\" class=\"mr\"></td> \
            </tr> \
            <tr> \
                <td valign=\"top\" class=\"bl\"></td> \
                <td valign=\"top\" align=\"right\" class=\"bc\"> \
                    <table class=\"controls\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"> \
                        <tr> \
                            <td> \
                                <div class=\"tutorialPGB\"> \
                                    <div id=\"pgb\"></div> \
                                </div> \
                            </td> \
                            <td> \
                                <span id=\"pnlButtons\"> \
                                    <input type=\"button\" value=\"Start Over\"/> \
                                    <input type=\"button\" value=\"Back\"/> \
                                    <input type=\"button\" value=\"Next\"/> \
                                </span> \
                            </td> \
                            <td> \
                                <input type=\"button\" value=\"Cancel\"/> \
                            </td> \
                        </tr> \
                    </table> \
                </td> \
                <td valign=\"top\" class=\"br\"></td> \
            </tr> \
        </tbody> \
    </table> \
";

function Tutorial( options )
{
    // wrap the tutorial
    options.general.container.parent( ).append( _tutorialContent );
    options.general.container.appendTo( '#tutorialWrapper/tbody/tr/td.mc' );
        
    // name the tutorial
    var title = $( '#tutorialWrapper//span.tutorialTitle' );
    title.hide( );
    title.append( options.general.title );
    
    // preamble
    var preamble = document.createElement( 'div' );
    options.general.container[ 0 ].parentNode.appendChild( preamble );
    
    if( options.general.graphic )
    {
        var img = document.createElement( 'img' );
        img.className = 'tutorialGraphic';
        img.setAttribute( 'src', options.general.graphic );
     
        preamble.appendChild( img );
    }
    
    var h1 = document.createElement( 'h1' );
    h1.className = 'tutorialTitle';
    h1.appendChild( document.createTextNode( options.general.title ) );
    preamble.appendChild( h1 );

    if( options.general.description )
    {
        var desc = document.createElement( 'h2' );
      //  desc.className = 'ind';
        desc.appendChild( document.createTextNode( options.general.description ) );
     
        preamble.appendChild( desc );
    }
         
    // intercept the frame change event handler
    if( ! options.events ) options.events = { };
     
    var onFrameChange = options.events.onFrameChange;
     
    var redirectOnFrameChange = function( movie, index )
    {
        if( index )
        {
            $( '#tutorial' ).show( );
            title.show( );
            preamble.style.display = 'none';
        }
        else
        {
            $( '#tutorial' ).hide( );
            title.hide( );
            preamble.style.display = 'block';
        }
     
        if( onFrameChange ) onFrameChange( movie, index );
    }
     
    options.events.onFrameChange = redirectOnFrameChange;
    
    // intercept the image load change event handler    
    var onLoadChange = options.events.onLoadChange;

    var pgbEl = document.getElementById( 'pgb' );
     
    var redirectOnLoadChange = function( movie, loaded, total )
    {        
        if( loaded == total )
        {
            $( '#pgb' ).parent( ).hide( );
            $( '#pnlButtons' ).show( );
            
            // make the buttons bigger for the iPhone
            if( navigator.userAgent.indexOf( 'iPhone' ) > -1 )
                buttons.addClass( 'big' );
        }
        else
        {
            pgbEl.style.width = ( loaded * 100 / total ) + '%';
        }

        if( onLoadChange ) onLoadChange( movie, loaded, total );
    }
     
    options.events.onLoadChange = redirectOnLoadChange;
    
    // wire up buttons
    var buttons = $( '#tutorialWrapper//table.controls//input' );
    
    options.buttons =
    {
        reset:  buttons[ 0 ],
        back:   buttons[ 1 ],
        next:   buttons[ 2 ],
        cancel: buttons[ 3 ]
    };

    return new jMovie( options );
}