var Canvas = {
};
    Canvas.init = function() {
        this.setImage();
        this.canvas = $('c');
        this.ctx = this.canvas.getContext('2d');
        this.gctx = this.canvas.getContext('opera-2dgame');

        this.canvas.width = this.img.width;
        this.canvas.height = this.img.height;
        this.drawImage();
    }
    Canvas.setImage = function() {
        var img = new Image();
            img.src = "./image/tori.jpg";
        this.img = img;
    }
    Canvas.drawImage = function() {
        this.ctx.drawImage(this.img, 0, 0, this.img.width, this.img.height);
    }
    Canvas.blur = function() {
        for(var x = this.canvas.width; x--;) {
            for(var y = this.canvas.height; y--;) {
                var check = [[x-1, y-1], [x, y-1], [x+1, y-1],
                            [x-1, y], [x+1, y],
                            [x-1, y+1], [x, y+1], [x+1, y+1]];
                var RS = [], GS = [], BS = [];
                for(var i = 0; i < check.length; i++) {
                    if(check[i][0] >= 0 && check[i][0] < this.canvas.width
                        && check[i][1] >= 0 && check[i][1] < this.canvas.height) {
                        var rgb = this.getRGB(check[i][0], check[i][1]);
                        RS.push(rgb[0]);
                        GS.push(rgb[1]);
                        BS.push(rgb[2]);
                    }
                }
                this.gctx.setPixel(x, y, ['rgb(', Math.floor(RS.avg()), ',',
                                            Math.floor(GS.avg()), ',',
                                            Math.floor(BS.avg()), ')'].join(''))
            }
            this.gctx.updateCanvas();
        }
    }
    Canvas.flip = function() {
        for(var x = this.canvas.width; x--;) {
            for(var y = this.canvas.height; y--;) {
                var rgb = this.getRGB(x, y);
                var r = 255 - rgb[0];
                var g = 255 - rgb[1];
                var b = 255 - rgb[2];
                this.gctx.setPixel(x, y, 'rgb(' + r + ',' + g + ',' + b + ')');
            }
        }
    }
    Canvas.sep = function() {
        for(var x = this.canvas.width; x--;) {
            for(var y = this.canvas.height; y--;) {
                var rgb = this.getRGB(x, y);
                var r = Math.floor((rgb[0] / 255) * 240);
                var g = Math.floor((rgb[1] / 255) * 200);
                var b = Math.floor((rgb[2] / 255) * 145);
                this.gctx.setPixel(x, y, 'rgb(' + r + ',' + g + ',' + b + ')');
            }
        }
    };
    Canvas.twoColor = function() {
        for(var x = this.canvas.width; x--;) {
            for(var y = this.canvas.height; y--;) {
                var rgb = this.getRGB(x, y);
                var r = rgb[0];
                var g = rgb[1];
                var b = rgb[2];
                var rgb_avg = (r + g + b) / 3;
                if(rgb_avg > 127) {
                    this.gctx.setPixel(x, y, 'white');
                } else {
                    this.gctx.setPixel(x, y, 'black');
                }
            }
        }
    }
    Canvas.grayScale = function() {
        //from http://my.opera.com/Watanabe/blog/bookmarklet-04 by watanabe
        for (var y = this.canvas.height; y--;){
            for (var x = this.canvas.width; x--;){
                var rgb = this.getRGB(x, y);
                var r = rgb[0];
                var g = rgb[1];
                var b = rgb[2];
                // ん，整数じゃないとだめなのかな
//                var c = 0.298912 * r + 0.586611 * g + 0.114478 * b;
                var c = Math.floor(0.298912 * r + 0.586611 * g + 0.114478 * b);

                this.gctx.setPixel(x, y, 'rgb(' + c + ',' + c + ',' + c + ')');
            }
        }
    };
    Canvas.getRGB = function(x, y) {
        var color = parseInt(this.gctx.getPixel(x, y).substr(1), 16);
        var r = color >> 16;
        var g = color >> 8 & 255;
        var b = color & 255;
        return [r, g, b];
    }

function init_event() {
    $('t').addEventListener('click', function() {
        Canvas.twoColor();
    }, false);
    $('gray').addEventListener('click', function() {
        Canvas.grayScale();
    }, false);
    $('fl').addEventListener('click', function() {
        Canvas.flip();
    }, false);
    $('sep').addEventListener('click', function() {
        Canvas.sep();
    }, false);
    $('bl').addEventListener('click', function() {
        Canvas.blur();
    }, false);
    $('reset').addEventListener('click', function() {
        Canvas.drawImage();
    }, false);
}

function $(el) {
    return $[el] || ($[el] = document.getElementById(el));
}

Array.prototype.avg = function() {
    return eval(this.join('+')) / this.length;
}

window.addEventListener('load', function() {
    Canvas.init();
    init_event();
}, false);