(function(){
        function mesen(img, points, ctx) {
            // 目線を生成する
            var r = preview.width / img.width;
            var p = {};
            for(var q = 0;q < points.length;q++) {
                p[points[q].part] = points[q].position;
            }
            var prop = {
                x: ( p.rightEye.x + p.leftEye.x ) / 2, // x座標（両目の中点）
                y: ( p.rightEye.y + p.leftEye.y ) / 2, // y座標（両目の中点）
                deg: Math.atan2( p.leftEye.y - p.rightEye.y, p.leftEye.x - p.rightEye.x ), // 目線の角度（両目の角度）
                dis_ears: Math.sqrt( Math.pow( p.rightEar.x - p.leftEar.x, 2 ) + Math.pow( p.rightEar.y - p.leftEar.y, 2 ) ) / 2, // 横幅（両耳の距離の半分）
                dis_eye: Math.sqrt( Math.pow( p.rightEye.x - p.leftEye.x, 2 ) + Math.pow( p.rightEye.y - p.leftEye.y, 2 ) ), // 横幅（両目の距離）
            };
            
            
            // 傾きの補助
            if(p.rightEar.x > p.rightEye.x || p.leftEar.x < p.leftEye.x) {
                // 横顔（目より耳が顔の内側）のとき角度をゼロにする
                // prop.deg = 0;
            }
            // 目線の始点
            prop.x1 = prop.x + Math.cos(prop.deg) * prop.dis_ears * -1;
            prop.y1 = prop.y + Math.sin(prop.deg) * prop.dis_ears * -1;
            
            // 目線の終点
            prop.x2 = prop.x + Math.cos(prop.deg) * prop.dis_ears;
            prop.y2 = prop.y + Math.sin(prop.deg) * prop.dis_ears;
            
            // 目線の描画
            ctx.beginPath();
            ctx.moveTo(prop.x1, prop.y1);
            ctx.lineTo(prop.x2, prop.y2);
            ctx.lineWidth = Math.sqrt( Math.pow( prop.x1 - prop.x2, 2 ) + Math.pow( prop.y1 - prop.y2, 2 ) ) / 5; // 目線の横幅の1/5
            ctx.closePath();
            ctx.stroke();
            prop = null;
        }
        function removeClass(classname, elm) {
            [].forEach.call(elm,function(x){
                x.classList.remove(classname);
            });
        }

        function img_load(src) {
            result.innerHTML = ''; // リセット
            document.body.classList.add('loading');
            result.appendChild(preview);
            var img = new Image();
            img.onload = function() {
                var ratio = img.width / img.height;
                function build() {
                    cnv.width = img.width;
                    cnv.height = img.height;
                    preview.src = img.src;
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    posenet.load().then(function(net) {
                        return net.estimateMultiplePoses(img, 0.5, flipHorizontal, outputStride, maxPoseDetections)
                    }).then(function(poses){
                        for(var i = 0;i < poses.length;i++) {
                            if(poses[i].score < 0.2) {
                                // 認識のスコアが低いときは無視する
                                continue;
                            }
                            mesen(img, poses[i].keypoints, ctx);
                            // ポイントを置く
                            for(var q = 0;q < poses[i].keypoints.length;q++) {
                                var point = document.createElement('div');
                                point.classList.add('point');
                                point.classList.add('pose' + i);
                                point.classList.add('part-' + poses[i].keypoints[q].part);
                                point.style.top = (poses[i].keypoints[q].position.y / img.height * 100) + '%';
                                point.style.left = (poses[i].keypoints[q].position.x / img.width * 100) + '%';
                                result.appendChild(point);
                            }
                        }
                        document.body.classList.remove('loading');
                        loading = false;
                        poses = null,img = null;
                    })
                }
                preview.id = 'preview';
                preview.src = img.src;
                result.appendChild(cnv);
                ctx.drawImage(img, 0, 0, img.width, img.height);
                if(resize && img.width * img.height > max_size * max_size) {
                    // 大きい画像は縮小してから処理する
                    var image = new Image();
                    if(ratio > 1) {
                        // 横長画像は横幅を基準に
                        cnv.width = max_size;
                        cnv.height = img.height * (cnv.width / img.width);
                    } else {
                        // 縦長画像は縦幅を基準に
                        cnv.height = max_size;
                        cnv.width = img.width * (cnv.height / img.height);
                    }
                    ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, cnv.width, cnv.height);
                    image.onload = function() {
                        img = image;
                        image = null;
                        build();
                    }
                    image.src = cnv.toDataURL();
                    return;
                } else {
                    build();
                }
            }
            img.src = src;
        }
        var filereader = new FileReader();
        var imageScaleFactor = 0.2;
        var flipHorizontal = false;
        var outputStride = 16;
        var maxPoseDetections = 8;
        var preview = new Image();

        var result = document.getElementById('result');
        var fileElement = document.getElementById('input_img');
        var loading = false;
        var ua = navigator.userAgent;
        var max_size = 800, resize = false;
        if (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0 || ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
            // PC以外は max_size でリサイズする
            resize = true;
        }
        var cnv = document.createElement('canvas');
        var ctx = cnv.getContext('2d');
        fileElement.addEventListener('change', function(){
            if (!this.files.length) {
                return;
            }
            if(loading) return;
            loading = true;
            filereader.onload = function() {
                img_load(filereader.result);
            }
            filereader.readAsDataURL(this.files[0]);
        });
        [].forEach.call(document.getElementsByClassName('sample-item'), function(x){
            x.addEventListener('click', function(){
                if(loading) return;
                loading = true;
                removeClass('current', document.getElementsByClassName('sample-item'));
                this.classList.add('current');
                var imgs = this.getElementsByTagName('img');
                if(imgs.length > 0) {
                    img_load('./img/' + imgs[0].getAttribute('data-filename'));
                }
            });
        });
    })();