/**
* Created by nozmu on 2017/10/20.
*/
/*
1. 対象の　divにclass="drop_target"　を設定
2. すぐしたのuploadURLに　アップロード用PHPファイルを設定
3. 画像表示のURL(ディレクトリまでを設定)

（例）
<div class="drop_target" id="image2"
     data-moto="moto,200px,200px"
     data-thum1="sub1,800,800"
     data-thum2="sub2,268,268"
     data-val=""
     data-showkbn=""
     data-maxsize="10485760">

    data-moto　：　元ファイルの保存先 ,Divの幅, Divの幅
    data-thum? :  サムネイルの保存先、幅、高さ 　※ ?は連番
    data-val　：　ファイル名
    data-showkbn : 0:input状態　1：表示のみ
    　※アップロード後は、1番目のサムネイルを表示します
    */

    //アップロード用Ajaxファイル
    var uploadURL = "https://h-cloud.jp/manager/dashboard/image_upload/ajax_file_upload.php";  //Upload URL
    var photoURL = "https://h-cloud.jp//image/";
    var in_upload_lock = 0;

    /*
    アップロード処理
    */
    function sendFileToServer(formData, status ,obj) {

    var extraData = {}; //Extra Data.
    var jqXHR = $.ajax({
    xhr: function () {
    var xhrobj = $.ajaxSettings.xhr();
    if (xhrobj.upload) {
    xhrobj.upload.addEventListener('progress', function (event) {
    var percent = 0;
    var position = event.loaded || event.position;
    var total = event.total;
    if (event.lengthComputable) {
    percent = Math.ceil(position / total * 100);
    }
    //Set progress
    status.setProgress(percent);
    }, false);
    }
    return xhrobj;
    },
    url: uploadURL,
    type: "POST",
    contentType: false,
    processData: false,
    cache: false,
    data: formData
    }).done(function (data) {

    status.setProgress(100);
    console.log(data);
    if ( data != '') {
    obj.data("val", data);
    drop_target_init(obj);
    } else {
    status.setError('アップロード中にエラーが発生しました');
    }

    }).fail(function (data) {

    status.setError('アップロード中にエラーが発生しました');
    }).always(function (data) {
    in_upload_lock = 0;
    });

    }


    function setImageFile(obj,name){
    obj.data("val",name);
    drop_target_init(obj);
    }
    /*
    ステータス表示
    */
    function createStatusbar(obj) {

    obj.html('');
    this.filename = $("<div class='filedd_filename'></div>").appendTo(obj);
    this.size = $("<div class='filedd_filesize'></div>").appendTo(obj);
    this.progressBar = $("<div class='filedd_progressBar'><div></div></div>").appendTo(obj);
    this.error = $("<div class='filedd_error'><div></div></div>").appendTo(obj);

    this.setFileNameSize = function (name, size) {
    var sizeStr = "";
    var sizeKB = size / 1024;
    if (parseInt(sizeKB) > 1024) {
    var sizeMB = sizeKB / 1024;
    sizeStr = sizeMB.toFixed(2) + " MB";
    }
    else {
    sizeStr = sizeKB.toFixed(2) + " KB";
    }

    this.filename.html(name);
    this.size.html(sizeStr);
    }

    this.setProgress = function (progress) {
    this.progressBar.find('div').html(progress + "% ");
    }
    this.setError = function (msg) {
    this.error.find('div').html(msg);
    }
    }

    /*
    アップロード メイン処理
    */
    function handleFileUpload(files, obj) {
    for (var i = 0; i < files.length; i++) {

    //フォーム作成
    var fd = new FormData();
    fd.append('file' , files[i]);
    fd.append('moto' ,obj.data('moto'));
    var j = 1;
    while( obj.data('thum'+j) !== undefined ) {
    fd.append('thum'+j,obj.data('thum'+j));
    j++;
    }

    var status = new createStatusbar(obj);
    status.setFileNameSize(files[i].name, files[i].size);
    sendFileToServer(fd, status ,obj);
    }
    }
    /*
    ドロップターゲットの初期化
    */
    function drop_target_init(obj){
    var show_kbn = obj.data('showkbn');
    var max_size = obj.data('maxsize');
    $('#input_'+obj.attr('id')).val(obj.data("val"));

    //表示設定
    if ( obj.data('val') != "" ){

    var name = obj.data('val');
    var ext = getExt(name);
    ext = ext.toLowerCase();
    var arr_moto = obj.data('moto').split(',');
    obj.css('width',arr_moto[1]);
    obj.css('height','auto');
    if (ext == "jpeg" || ext == "jpg" || ext == "png" || ext == "gif" ) {
    obj.html('<img id="show_obj" src="' + photoURL + obj.data('moto').split(',')[0] + '/base/' + obj.data('val') + '" style="width: 100%;display: block;" />');
    } else {
    obj.html('<video id="show_obj_v" src="' + photoURL + obj.data('moto').split(',')[0] + '/' + obj.data('val') + '" style="width: 100%;display: block;" controls></video>');
    }

    if ( show_kbn == "0" ) {
    obj.append('<div class="filedd_close">削除</div>');
    $(".filedd_close").off();
    $(".filedd_close").on("click",function(){
    var obj = $(this).parent();
    obj.data('val',"");
    drop_target_init(obj);
    });
    }
    } else {
    //表示サイズ設定
    var arr_moto = obj.data('moto').split(',');
    obj.css('width',arr_moto[1]);
    obj.css('height',arr_moto[2]);

    if ( show_kbn == "0" ) {
    var sizeStr = "";
    var sizeKB = max_size / 1024;
    if (parseInt(sizeKB) > 1024) {
    var sizeMB = sizeKB / 1024;
    sizeStr = sizeMB + " MB";
    }
    else {
    sizeStr = sizeKB + " KB";
    }
    //obj.html('<div class="filedd_message">動画・画像ファイルをドロップ<br /><span>ファイル形式：jpg/png/gif/wmv/mp4/mpg/mov/m4v</span><br /><span>最大サイズ:'+sizeStr+'</span></div>');
    obj.html('<div class="filedd_message">画像ファイルをドロップ<br /><span>ファイル形式：jpg/png/gif</span><br /><span>最大サイズ:'+sizeStr+'</span></div>');
    obj.append('<input type="file" class="upload_file_select" style="display:none" /><button class="upload_file_select_btn" type="button">ファイルを選択</button>');
    set_btn_event(obj);
    } else {
    obj.html('<div class="filedd_message">未選択</div>');
    }
    }

    $('#show_obj').on('load', function() {
    var vh = $('#show_obj').height();
    $('#show_obj').parent().height(vh);
    console.log(vh + 'px');
    });

    $('#show_obj_v').on('progress', function() {
    var vh = $('#show_obj_v').height();
    $('#show_obj_v').parent().height(vh);
    console.log(vh + 'px(progress)');
    });
    }

    /*
    イベント処理
    */
    $(document).ready(function () {

    //ドロップ対象へイベント追加
    $(".drop_target").each(function () {

    var show_kbn = $(this).data('showkbn');
    var max_size = $(this).data('maxsize');

    //IDを隠し項目の名前に設定
    $(this).after('<input type="hidden" name="' + $(this).attr('id') + '" id="input_'+$(this).attr('id')+'" value="'+$(this).data('val')+'" />');


    //表示設定
    drop_target_init($(this));

    //イベント設定
    if ( show_kbn == "0" ) {

    $(this).on('dragenter', function (e) {
    e.stopPropagation();
    e.preventDefault();
    $(this).css('border', '3px solid #0B85A1');
    });
    $(this).on('dragover', function (e) {
    e.stopPropagation();
    e.preventDefault();
    });

    /* ドロップ　イベント */
    $(this).on('drop', function (e) {

    //ロック
    if ( in_upload_lock == 1){
    alert('他のアップロード中です、アップロード完了後に実行してください');
    return;
    }
    in_upload_lock = 1;

    //罫線
    $(this).css('border', '1px dotted #0B85A1');

    //デフォルトイベントなし
    e.preventDefault();

    //ファイル取得
    var files = e.originalEvent.dataTransfer.files;

    //入力チェック
    if (files.length > 1){
    $(this).html('<div class="filedd_error">複数のファイルが選択されています<br />1つのファイルのみドロップしてください</div>');
    $(this).append('<input type="file" class="upload_file_select" style="display:none" /><button class="upload_file_select_btn" type="button">ファイルを選択</button>');
    set_btn_event($(this));
    in_upload_lock = 0;
    return;
    }
    var ext = getExt(files[0].name);
    ext = ext.toLowerCase();
    //if (ext !== "jpeg" && ext !== "jpg" && ext !== "png" && ext !== "gif" && ext !== "wmv" && ext !== "mp4" && ext !== "mpg" && ext !== "mov" && ext !== "m4v"){
    if (ext !== "jpeg" && ext !== "jpg" && ext !== "png" && ext !== "gif" ){
    $(this).html('<div class="filedd_error">未対応の形式のファイルです<br /><span>対応形式：jpg/png/gif</span></div>');
    $(this).append('<input type="file" class="upload_file_select" style="display:none" /><button class="upload_file_select_btn" type="button">ファイルを選択</button>');
    set_btn_event($(this));
    in_upload_lock = 0;
    return;
    }
    var max_size = $(this).data('maxsize');
    if (isNaN(max_size)){
    max_size = 0;
    }
    if (files[0].size > max_size ){
    $(this).html('');
    var sizeStr = "";
    var sizeKB = max_size / 1024;
    if (parseInt(sizeKB) > 1024) {
    var sizeMB = sizeKB / 1024;
    sizeStr = sizeMB + " MB";
    }
    else {
    sizeStr = sizeKB + " KB";
    }
    $(this).html('<div class="filedd_error">ファイルサイズが大きすぎます<br /><span>最大サイズ：'+sizeStr+'</span></div>');
    $(this).append('<input type="file" class="upload_file_select" style="display:none" /><button class="upload_file_select_btn" type="button">ファイルを選択</button>');
    set_btn_event($(this));
    in_upload_lock = 0;
    return;
    }

    //処理実行
    handleFileUpload(files, $(this));
    });

    }
    });

    //ブラウザ自体のイベントを解除
    $(document).on('dragenter', function (e) {
    e.stopPropagation();
    e.preventDefault();
    });
    $(document).on('dragover', function (e) {
    e.stopPropagation();
    e.preventDefault();
    });
    $(document).on('drop', function (e) {
    e.stopPropagation();
    e.preventDefault();
    });

    //サブミット時
    $("form").submit(function() {
    if ( in_upload_lock == 1) {
    alert('ファイルのアップロード中です、アップロード完了後に実行してください');
    return false;
    }
    });

    });

    /*
    拡張子の取得
    */
    function getExt(filename){
    /*
    var reg=/(.*)(?:\.([^.]+$))/;
    return filename.match(reg)[2];
    */
    var arr_filename = filename.split('.');
    console.log(arr_filename);
    return arr_filename[arr_filename.length -1 ];
    }




    /*
    ファイル選択ボタン　イベント設定
    */
    function set_btn_event(obj){


    $('.upload_file_select_btn').off('click');
    $('.upload_file_select').off('change');

    $('.upload_file_select_btn').on('click', function () {
    if($('.filedd_error').length){
    $('.filedd_error').remove();
    }
    $(this).prev().click();
    return false;
    });


    $('.upload_file_select').on('change', function(e) {

    //ロック
    if ( in_upload_lock == 1){
    alert('他のアップロード中です、アップロード完了後に実行してください');
    return;
    }
    in_upload_lock = 1;

    //デフォルトイベントなし
    e.preventDefault();

    //ファイル取得
    var files = $(this).prop('files');

    //入力チェック
    if (files.length > 1){
    $(this).parent().append('<div class="filedd_error">複数のファイルが選択されています</div>');
    in_upload_lock = 0;
    return;
    }
    var ext = getExt(files[0].name);
    ext = ext.toLowerCase();
    //if (ext !== "jpeg" && ext !== "jpg" && ext !== "png" && ext !== "gif" && ext !== "wmv" && ext !== "mp4" && ext !== "mpg"  && ext !== "mov" && ext !== "m4v"){
    if (ext !== "jpeg" && ext !== "jpg" && ext !== "png" && ext !== "gif" ){
    $(this).parent().append('<div class="filedd_error">未対応の形式のファイルです</div>');
    in_upload_lock = 0;
    return;
    }
    var max_size = $(this).parent().data('maxsize');
    if (isNaN(max_size)){
    max_size = 0;
    }

    if (files[0].size > max_size ){
    $(this).parent().html('');
    var sizeStr = "";
    var sizeKB = max_size / 1024;
    if (parseInt(sizeKB) > 1024) {
    var sizeMB = sizeKB / 1024;
    sizeStr = sizeMB + " MB";
    } else {
    sizeStr = sizeKB + " KB";
    }

    $(this).parent().append('<div class="filedd_error">ファイルサイズが大きすぎます</div>');
    in_upload_lock = 0;
    return;
    }

    //処理実行
    handleFileUpload(files, $(this).parent());
    });
    }