(function(){
    var $ = window.$ || function(id){
        return document.getElementById(id);
    }

    var toggleActionButton = function(status){
        if(status){
            action.classList.add('btn-primary');
            action.disabled = false;
        }else{
            action.classList.remove('btn-primary');
            action.disabled = true;
        }
    }

    var doSketch = function(){
        var st = Math.abs(strangth.value || 5);
        var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        sk.sketch(imgData, st);
        ctx.putImageData(imgData, 0, 0);
    }

    var defaultWidth = 640, defaultHeight = 480;
    var setCanvasSize = function(width, height){
        var scale = height / width,
            defaultScale = defaultHeight / defaultWidth;
        if(scale >= defaultScale && height >= defaultHeight){
            height = defaultHeight;
            width = height / scale;
        }
        if(scale <= defaultScale && width >= defaultWidth){
            width = defaultWidth;
            height = width * scale;
        }
        // console.log(width, height);
        canvas.width = width;
        canvas.height = height;
    }

    var drawImage = function(img){
        toggleActionButton(false);
        setTimeout(function(){
            //set the width/height will clear the canvas
            // canvas.width = img.width;
            // canvas.height = 640 * img.height / img.width;
            setCanvasSize(img.width, img.height);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            doSketch();
            download.href = canvas.toDataURL();
            toggleActionButton(true);
        }, 0);
    }

    var canvas = $('canvas'),
        action = $('action'),
        download = $('download'),
        strangth = $('strength'),
        dropper = $('dropper'),

        ctx = canvas.getContext('2d'),
        cacheImg;

    dropper.addEventListener('drop', function(e){
        e.preventDefault();
        dropper.innerHTML = '';
        var file = e.dataTransfer.files[0];
        var reader = new FileReader();
        reader.onload = function(e){
            var img = new Image();
            img.onload = function(){
                cacheImg = this;
                drawImage(this);
            }
            img.src = e.target.result;
        }
        reader.onerror = function(e){
            var code = e.target.error.code;
            if(code === 2){
                alert('please don\'t open this page using protocol fill:///');
            }else{
                alert('error code: ' + code);
            }
        }
        reader.readAsDataURL(file);
    });

    action.addEventListener('click', function(e){
        if(cacheImg){
            drawImage(cacheImg);
        }else{
            alert('please select a picture first')
        }
    });

})();
@@ -2727,16 +2727,106 @@
 %0A    %7D);
+%0A    dropper.addEventListener('dragover', function(e)%7B%0A        e.preventDefault();%0A    %7D);
 %0A%0A    ac

fix drag bug in firefox