<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Toyz Workspace</title>
        <script src="/third_party/jquery/jquery.min.js" type="text/javascript"></script>
        <script src="/third_party/jquery_ui/jquery-ui.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" 
            href="/third_party/jquery_ui_themes/{{user_theme}}/jquery-ui.min.css">
        <script src="/static/web/static/toyz_core.js" type="text/javascript"></script>
        <script src="/static/web/static/viewer.js" type="text/javascript"></script>
        <script src="/static/web/static/workspace.js" type="text/javascript"></script>
    </head>
    <body>
        <div id='ws-div'></div>
        <script>
        var $workspace_div = $('#ws-div');
        var workspace;
        var $rclick = $("<div id='instructions' ><center><font size='20' color='#FFFF66'>"
                        +"Right-click below to begin</font></center></div>");
        var user_id = "{{user_id}}";
        var work_id = "{{work_id}}";
        window.onload = function(){
            $workspace_div.height(window.innerHeight);
            $workspace_div.width(window.innerWidth);
            $(window).resize(function(){
                $workspace_div.height(window.innerHeight);
                $workspace_div.width(window.innerWidth);
            });
            var ws_options = {
                $parent: $workspace_div
            };
            if(user_id!=''){
                ws_options.user_id = user_id;
                ws_options.work_id = work_id;
            }
            workspace = new Toyz.Workspace.Workspace(ws_options);
            
            // Clear instructions to right-click after the user has done so
            if(user_id==''){
                workspace.$div.append($rclick);
            };
            workspace.$div.on('contextmenu', function(){
                $rclick.remove();
            });
            console.log('workspace-div SIZE:', $workspace_div.height(), $workspace_div.width());
        }
        </script>
    </body>
</html>