Untitled

<!DOCTYPE html>
<html>
<head>
    <title>The Gentlemanizer</title>
    <style type="text/css">
        canvas {
            max-width: 100%;
        }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <!--
    <script type="text/javascript" src="fileuploader.js"></script>
    <link rel="stylesheet" type="text/css" href="fileuploader.css"></script>
    -->
    <script type="text/javascript">
    $(document).ready(function() {
        $("#uploadButton").click(function(e) {
            $("#fileSelect").click();
        });

        var overlay = null, underlay = null;
        var handleOverlay = function(over, under) {
            overlay = overlay == null ? over : overlay;
            underlay = underlay == null ? under : underlay;
            if (overlay != null && underlay != null) {
                // Both ready, so render
                var content = $("#content");
                content.empty();
                var canvas = $("<canvas />").attr("width", underlay.width).attr("height", underlay.height);
                var ctx = canvas.get(0).getContext('2d');
                ctx.drawImage(underlay, 0, 0);
                ctx.drawImage(overlay, 0, 0);
                content.append(canvas);
                overlay = underlay = null;
                $("#progress").hide('slow');
            }
        };

        $("#fileSelect").change(function(e) {
            $("#progress-remote").html("Uploading");
            $("#progress-local").html("Loading");
            $("#progress").show("slow");
            var file = $("#fileSelect").prop('files')[0];
            var xhr = new XMLHttpRequest();

            xhr.upload.onprogress = function(e){
                if (e.lengthComputable){
                    $("#progress-remote").html((e.loaded * 100 / e.total).toFixed(2));
                }
            };
            xhr.onreadystatechange = function(e){
                if (xhr.readyState == 4){
                    var progress = $("#progress-remote");
                    if (xhr.status != 200) {
                        progress.html("Error: " + xhr.statusText);
                    } else {
                        progress.html("Done");
                        var overlay = $("<img />").attr("src", xhr.responseText).get(0);
                        handleOverlay(overlay, null);
                    }
                }
            };
            xhr.open("POST", '/gentlemanize', true);
            xhr.setRequestHeader("Content-Type", file.type);
            xhr.send(file);

            var reader = new FileReader();
            reader.onload = function(e) {
                var underlay = $("<img />", {
                    src: e.target.result,
                }).get(0);
                $("#progress-local").html("Done");
                handleOverlay(null, underlay);
            };
            reader.readAsDataURL(file);

        });
    });
    </script>
</head>
<body>

<noscript>
    <p>Scripts appear to be disabled in your browser.  This application
       uses client-side scripting to minimize the amount of data transfer
       required (since images tend to be large), so please consider allowing
       this page to execute scripts.  You can read more about this rationale
       in the
       <a href="http://www.taricorp.net/projects/gentlemanizer/#bandwidth">design notes</a>.</p>
   <p>The <a href="bandwidth-waster.html">alternate version</a> of this
   page doesn't require scripts, but is significantly less polished and
   requires more data transfer.</p>
</noscript>

<input type="file" id="fileSelect" accept="image/*" style="display:none"></input>
<div id="uploadButton">
    Click here to upload.
    <div id="progress">
        Remote: <div id="progress-remote"></div>
        Local: <div id="progress-local"></div>
    </div>
</div>

<div id="content">
</div>

</body>
</html>