<!DOCTYPE html>
<meta charset=utf-8>
<title>Scratch HTML5 vs. Flash</title>

<link rel=stylesheet href=player.css>
<link rel=stylesheet href=compare.css>

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script>
<script src=http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js></script>


<script>
  $(document).ready(function() {
    var project_id = location.hash && parseInt(location.hash.substr(1)) || 10000160;
    var scratch = new Scratch(project_id);
  });
</script>

<script>
    var flashLog = null;
    var project_id = location.hash && parseInt(location.hash.substr(1)) || 10000160;
    $(function() {
        // The flashvars tell flash about the project data (and autostart=true)
        var flashvars = {
            server: encodeURIComponent('scratch.mit.edu'),
            debugOps: true,
            debugOpCmd: 'debugFlash',
            project_title: '',
            project_id: project_id
        };

        var params = {
            allowscriptaccess: 'always',
            allowfullscreen: 'false',
            wmode: 'direct',
            menu: 'false'
        };

        var flashPlayer = null;
        var swf_url = "http://cdn.scratch.mit.edu/scratchr2/static/Scratch.swf?brkCache="+project_id;
        swfobject.embedSWF(swf_url, "flash-scratch", "482", "402", "10.2.0",
            "http://cdn.scratch.mit.edu/scratchr2/static/expressInstall.swf",
            flashvars, params, null, function(e) {
                $('#flash-scratch').css('visibility', 'visible');
                if (e.success) flashPlayer = e.ref;
            });

        $('#trigger-green-flag, #overlay').click(function() {
            flashPlayer.ASstartRunning();
        });

        // Stop button behavior
        $('#trigger-stop').click(function() {
            flashPlayer.ASstopRunning();
        });

        flashLog = $('#flash-debug');
        var jsLog = $('#js-debug');
        interp.debugOps = true;
        interp.debugFunc = function(opCount, opName, args) {
            var text = opCount + ': ' + opName + '(' + args.join(', ') + ')';
            jsLog.val(jsLog.val() + text + "\n");
        };

        // Setup synchronized scrolling
        flashLog.scroll(function() {
            jsLog.scrollTop(flashLog.scrollTop());
        });

        jsLog.scroll(function() {
            flashLog.scrollTop(jsLog.scrollTop());
        });
    });

    function debugFlash(opCount, opName, args) {
        var text = opCount + ': '+opName+'('+args.join(', ')+')';
        flashLog.val(flashLog.val() + text + "\n");
    }
</script>

<div class=container>
    <div id=player-container>
        <div class="arrow vertical" id=up></div>
        <div class="arrow vertical" id=down></div>
        <div class="arrow horizontal" id=left></div>
        <div class="arrow horizontal" id=right></div>
        <div id=player-header>
            <div id=player-header-preload></div>
            <div id=player-header-version>HTML5</div>
            <button id=toggle-fullscreen tabindex=1></button>
            <button id=trigger-stop tabindex=3></button>
            <button id=trigger-green-flag tabindex=2></button>
        </div>
        <div id=player-content>
            <div id=container></div>
            <div id=overlay></div>
            <div id=preloader>
                <div id=preloader-progress><div id=preloader-progress-bar></div></div>
                <div id=preloader-caption>Loading project&hellip;</div>
                <div id=preloader-details></div>
            </div>
        </div>
    </div>
    <textarea id=js-debug readonly></textarea>
    <div id=project-picker>
        <span id=address-hint>http://scratch.mit.edu/projects/</span><input id=project-id placeholder=10000160><button id=go-project>&rarr;</button>
    </div>
</div><div class=container>
    <div id=flash-scratch>
        <p>Oh Noes! Scratch project cannot display.<br>Flash player is disabled, missing, or less than version 10.2.</p>
        <a href=http://www.adobe.com/go/getflashplayer>
            <img src=http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif alt="Get Adobe Flash player" target=_blank>
        </a>
    </div>
    <textarea id=flash-debug readonly></textarea>
</div>

<script src=js/util/Timer.js></script>
<script src=js/util/OffsetBuffer.js></script>
<script src=js/util/Color.js></script>
<script src=js/util/Rectangle.js></script>
<script src=js/Sprite.js></script>
<script src=js/Reporter.js></script>
<script src=js/Stage.js></script>
<script src=js/sound/WAVFile.js></script>
<script src=js/sound/SoundDecoder.js></script>
<script src=js/sound/SoundBank.js></script>
<script src=js/sound/NotePlayer.js></script>
<script src=soundbank/Instr.js></script>
<script src=js/IO.js></script>
<script src=js/primitives/VarListPrims.js></script>
<script src=js/primitives/MotionAndPenPrims.js></script>
<script src=js/primitives/LooksPrims.js></script>
<script src=js/primitives/SensingPrims.js></script>
<script src=js/primitives/SoundPrims.js></script>
<script src=js/primitives/Primitives.js></script>
<script src=js/Interpreter.js></script>
<script src=js/Runtime.js></script>
<script src=js/Scratch.js></script>