$(document).ready(function($) {

    
    $('input#target_sample_image1').change(function() {
        asyncUpload(1);
    });
    $('input#target_sample_image2').change(function() {
        asyncUpload(2);
    });
    $('input#target_sample_image3').change(function() {
        asyncUpload(3);
    });


    /**
     * 非同期ファイルアップロード処理
     * 
     * @param int num 対象のファイルアップロード
     */
    function asyncUpload(num) {

        var $form, fd;
        $form = $('#form1');
        fd = new FormData($form[0]);

        $('#result'+ num).empty();

        var f_id = 'filename_'+ num;
        var i_id = 'image_'+ num;
        var p_id = 'progress_'+ num;


        // 最初にアップロードするファイルのバリデーションをかける
        var fp = $('#target_sample_image'+num);
        var items = fp[0].files;
        var fileName = items[0].name;
        var fileSize = items[0].size;

        // 拡張子チェック
        var fileTypes = fileName.split(".");
        var len = fileTypes.length;
        var ext = fileTypes[len - 1].toLowerCase();
        var arr = ['ai','psd','pdf','zip','lzh','jpg','jpeg','gif','png','xls','xlsx','doc','docx','ppt','pptx','bmp','tiff','tif','eps','txt'];

        if (arr.indexOf(ext) == -1){
            var result = $('<div class="view_blk">').append('<div style="margin:10px 0 0 0;"><span id="'+ f_id + '"></span></div>');
            $('#result'+ num).append(result);
            document.getElementById(f_id).innerHTML = 'ファイル形式が不正です。';
            $('#'+f_id).addClass('error');
            return;
        }
        

        // ファイルサイズチェック
        if(items[0].size > 20000000) {
            var result = $('<div class="view_blk">').append('<div style="margin:10px 0 0 0;"><span id="'+ f_id + '"></span></div>');
            $('#result'+ num).append(result);
            document.getElementById(f_id).innerHTML = 'アップロードできるファイルサイズは20MBまでです。';
            $('#'+f_id).addClass('error');
            return;
        }

        
        var result = $('<div class="view_blk">')
        .append('<div style="margin:10px 0 0 0;"><span id="'+ f_id + '"></span></div><progress id="'+ p_id +'" value="0" max="100">0%</progress><div id="'+ i_id + '"></div>')
        .append(
            $('<a href="javascript:;">')
            .addClass('drop')
            .text(
                '添付の取り消し'
            )
            .click(function(){
                drop_image(result, num);
            })
        );
        $('#result'+ num).append(result);

        // 画面遷移ボタンを無効にする
        $('#send_btn')
        .attr("disabled", "disabled")
        .css({
            'opacity': '.3'
        });
    
        $.ajax({
            url   : "/api/uploadimage.php",
            type  : 'post',
            async: true,
            processData : false,
            contentType : false,
            data: fd,
            dataType : 'Json',
            // プログレスバーを表示
            xhr : function() {
                XHR = $.ajaxSettings.xhr();
                if (XHR.upload) {
                    XHR.upload.addEventListener('progress',
                    function(e) {
                        console.log(e);
                        progre = parseInt(e.loaded / e.total * 10000) / 100;
                        document.getElementById(p_id).value = progre;
                        document.getElementById(p_id).innerHTML = progre + '%';

                        // 画像表示が重く100%状態で止まるため、99%をMAXとしておく
                        if(progre > 99) {
                            progre = 99;
                        }

                        // メッセージをセット
                        document.getElementById(f_id).innerHTML = 'アップロードしています（' + Math.floor(progre) + '%）';

                    }, false);
                }
                return XHR;
            }
        })
        .done(function(data, textStatus, jqXHR){

            var msg = '';

            if(data[num].error){
                msg = data[num].error;
                $('#'+f_id).addClass('error');
            }else {
                msg = " アップロードに成功しました。";

                // アップロードしたファイルを表示
                if(data[num].is_image) {
                    // 画像
                    document.getElementById(i_id).innerHTML = '<img src="' + data[num].sample_image_urlpath + '" alt="" />';
                }else {
                    // ファイル
                    document.getElementById(i_id).innerHTML = '<a href="' + data[num].sample_image_urlpath + '" target="_blank">【添付ファイル】' + fileName + '</a>';
                }

                // 必要な値をセット
                $('#sample_image'+num).val(data[num].file_name);
                $('#sample_image'+num+'_urlpath').val(data[num].sample_image_urlpath);
            }

            // $('#progress_'+num).hide();

            // メッセージをセット
            document.getElementById(f_id).innerHTML = msg;

            // アップロード完了後に、画面遷移ボタンを有効化
            $('#send_btn')
            .removeAttr("disabled")
            .css({
                'opacity': '1'
            });

        })
        .fail(function(jqXHR, textStatus, errorThrown){

            // 通信失敗
            alert(errorThrown);
        });
    }

    // 添付の取り消し
    function drop_image(result, num)
    {
        if(result.prev().length > 0){
            result.prev().remove();
        }else if(result.next().length > 0){
            result.next().remove();
        }
        result.animate({
            opacity: '0'
        },{
            duration: 500,
            complete: function() {
                result.remove();
            }
        });

        $('#sample_image'+num).val(null);
        $('#sample_image'+num+'_urlpath').val(null);
    }

});