var csrf_token = $('meta[name=csrf-token]').attr('content'),
    csrf_param = $('meta[name=csrf-param]').attr('content');

(function() {
    $.FroalaEditor.DEFAULTS.key = 'kKC1KXDF1INBh1KPe2TK==';

    $.FroalaEditor.DefineIcon('cms-image', {NAME: 'image'});
    $.FroalaEditor.RegisterCommand('cms-image', {
        title: 'Image',
        focus: false,
        undo: false,
        refreshAfterCallback: false,
        callback: function () {
            var $this = this;

            var galleryUrl = $this.$original_element.data('gallery-url');




            jQuery.ajax({
                type: 'POST',
                url: galleryUrl,
                success: function (data) {
                    var $popover = $this.$original_element.closest('form').find('*[data-cmd="cms-image"]'),
                        $data = $(data),
                        layer_position = 'left';

                    if($this.$original_element.froalaEditor('fullscreen.isActive')){
                        layer_position = 'bottom';
                        $popover = $('.fr-fullscreen').find('*[data-cmd="cms-image"]');
                    }




                    $popover.popover({
                        content: $data,
                        html: true,
                        trigger: 'manual',
                        placement: layer_position
                    }).on('hidden.bs.popover', function () {
                        $popover.popover('destroy');
                    }).popover('show');

                    $('body').on( 'click', function(e) {
                        if($popover.next('.popover')){
                            if ( !$popover.next('.popover').has(e.target).length ) {$popover.popover('destroy'); }
                        }
                    });


                    $data.find('.gallery-item').click(function(){
                        var img_link = $(this).attr('href');

                        $this.$original_element.froalaEditor('image.insert', img_link, true, {});


                        return false;
                    });



                }
            });



        }
    });

  function ViewProgressModal(){
    var html = '<div id="progress-window" class="modal"  tabindex="-1" role="dialog" aria-hidden="true" >' +
      '<div class="modal-dialog">' +
      '<div class="modal-content">' +
      '<div class="modal-header"><h4 class="modal-title">Upload in progress ...</h4></div>' +
      '<div class="modal-body" style="height:auto;max-height:none;overflow:none;" >   </div>' +
      '</div>' +
      '</div>' +
      '</div> ';
    $(html).modal({show:true, keyboard: false, backdrop: 'static'});
    window.scrollTo(0, 0);
  }

  var ajaxFileUpload = undefined;

  var initAjaxFileUpload = function(selector){


    function send_ajax_form($form){
      $('#progress-window').find('.modal-body').append('<div>Upload form data, please wait...</div>');
      var url = $form.attr('action');

      if($form.hasClass('simple_submit')){
        $('#progress-window').modal('hide');
        $('#progress-window').remove();
        $form.removeClass('ajax-file-upload-form');
        //$form.unbind('submit', addFileForAjaxUpload);
        $form.unbind('submit', addFileForAjaxUpload);
        $form.submit();

      }else{
        $.post(url, $form.serialize(), function(){
          $('#progress-window').modal('hide');
          $('#progress-window').remove();
        });
      }
    }



    addFileForAjaxUpload = function(e){
      var $form = $(this),
        count_files = 0,
        count_upload = 0;
      e.preventDefault();
      e.stopPropagation();

      selector.find(".ajax-file-upload-form input:file").each(function(){
        var $this = $(this),
          filesList = $this.data('files');
        if(filesList == undefined){
          filesList = [];
        }
        count_files = count_files + filesList.length;

        if(filesList.length > 0) {
          if($('#progress-window').length == 0){
            ViewProgressModal();
          }


          var fileToSend = [];
          $(filesList).each(function(){
            var item = this,
              class_name = item.input_name.replace (/[\[\]]/g, '-');

            var progress_bar = '<div class="'+ class_name +'"><div>' + item.file.name + ':</div><div style="position:relative;"><div style="margin-right:50px;" class="progress"><div class="progress-bar" style="width: 0%;"></div><a href="#" style="color:#FFFFFF;position:absolute;display:none;top:0px;right:0px;" class="cancel-save"><i class="icon-remove"></i></a></div></div></div>';
            $('#progress-window').find('.modal-body').append(progress_bar);
            fileToSend.push(item.file);
          });





          $this.fileupload('send', {files: fileToSend})
            .complete(function (result, textStatus, jqXHR) {
              count_upload = count_upload + 1;
              if(count_upload == count_files){
                send_ajax_form($form);
              }

            });

        }

      });
      if(count_files == 0){
        send_ajax_form($form);
      }




    }

    initFileInput = function(fileInputElem){
      var form = $(fileInputElem.parents('form:first'));
      var submitButton = form.find('input[type="submit"]');

      var class_name = fileInputElem.attr('name').replace (/[\[\]]/g, '-');

      var fileUploadItem = fileInputElem.fileupload({
        fileInput: fileInputElem,
        url: fileInputElem.data('url'),
        type: 'POST',
        autoUpload: false,
        formData: fileInputElem.data('form-data'),
        paramName: 'file', // S3 does not like nested name fields i.e. name="user[avatar_url]"
        dataType: 'XML',  // S3 returns XML if success_action_status is set to 201
        replaceFileInput: false,
        add: function(e, data){
          var filesList = [];
          $.each(data.files, function (index, file) {
            filesList.push({input_name: fileInputElem.attr('name'), file: data.files[index]});
          });
          fileInputElem.data('files', filesList);
        },
        progressall: function (e, data) {
          var progress = parseInt(data.loaded / data.total * 100, 10);

          $('.' + class_name).find('.progress-bar').css('width', progress + '%');
        },
        start: function (e) {
          submitButton.prop('disabled', true);

          $('.' + class_name).find('.progress-bar').css('width', '0%');
        },
        done: function (e, data) {
          submitButton.prop('disabled', false);


          $('.' + class_name).find('.progress-bar').addClass('progress-bar-success');


          // extract key and generate URL from response
          var key = $(data.jqXHR.responseXML).find("Key").text();
          var url = 'http://' + fileInputElem.data('host') + '/' + key;

          // create hidden field
          var input = $("<input />", {type: 'hidden', name: fileInputElem.attr('name'), value: url})
          form.append(input);
          fileInputElem.val('');
        },
        fail: function (e, data) {
          submitButton.prop('disabled', false);

          $('.' + class_name).find('.progress-bar').addClass('progress-bar-danger');
        }
      });
    };

    selector.find(".ajax-file-upload-form input:file").each(function () {
      initFileInput($(this));


    });



    selector.find('.ajax-file-upload-form').submit(addFileForAjaxUpload);


    return this;
  };


    var modal = undefined;

    $('body').on('ajax:success', '.frontend-content-form', function(evt, data, status, xhr){
        var $cell = $('body').find('.col[data-id='+ data.structure_id +']');
        $cell.html(data.html);
        if(modal != undefined){
            modal.modal('hide');
        }

        initCell($cell);
    });

    initCell = function($cell){
        var $content = $('<div class="operation"><a class="edit" href="javascript:void(0);"><i class="fa fa-edit"></i></a></div>');

        $cell.append($content);

        $content.find('.edit').click(function(){
            alert('1');
            var $iframe = $('<iframe name="content-edit" style="width:500px;height:500px;position: absolute;top: 10%;left: 50%;transform: translateX(-50%);border: 0;" src = "http://www.w3schools.com">This text ensures cross browser compatibility </iframe>');
            $('body').append($iframe);
            alert(edit_layer_url);
            return;

            var $block = $(this).closest('.col'),
                page_data_id = $block.data('page_data_id'),
                structure_id = $block.data('id');



            //show editor for content
            if(typeof(edit_layer_url) != undefined){
                jQuery.ajax({
                    type: 'POST',
                    url: edit_layer_url,
                    data: {page_data_id: page_data_id, structure_id: structure_id},
                    success: function (data) {

                      var $data = $(data);

                      $data.find(".fileupload-field").each(function(){
                        var $this = $(this),
                          $previewBlock = $this.next(),
                          options = {'showUpload':false};

                        if($previewBlock) {
                          options['initialPreview'] = $previewBlock.html();
                          $previewBlock.remove();
                        }


                        $this.fileinput(options);
                      });


                      modal = $data.modal({
                            show: true,
                            backdrop: false
                        }).on('shown.bs.modal', function (e) {


                            $('.page_html_content').froalaEditor({
                                theme: 'gray',
                                height: 400,
                                toolbarButtons: ['fontFamily', 'fontSize', '|', 'bold', 'italic', 'underline', 'strikeThrough', '|', 'subscript', 'superscript', '|' ,'color', 'paragraphStyle', 'paragraphFormat', 'align', '|', 'formatOL', 'formatUL', 'outdent', 'indent', '|', 'quote', 'insertHR', '|', 'cms-image', '|', 'insertTable', '|', 'undo', 'redo', 'clearFormatting', '|', 'html', 'fullscreen'],
                                toolbarButtonsMD: ['fontFamily', 'fontSize', '|', 'bold', 'italic', 'underline', 'strikeThrough', '|', 'subscript', 'superscript', '|' ,'color', 'paragraphStyle', 'paragraphFormat', 'align', '|', 'formatOL', 'formatUL', 'outdent', 'indent', '|', 'quote', 'insertHR', '|', 'cms-image', '|', 'insertTable', '|', 'undo', 'redo', 'clearFormatting', '|', 'html', 'fullscreen'],
                                toolbarButtonsSM: ['fontFamily', 'fontSize', '|', 'bold', 'italic', 'underline', 'strikeThrough', '|', 'subscript', 'superscript', '|' ,'color', 'paragraphStyle', 'paragraphFormat', 'align', '|', 'formatOL', 'formatUL', 'outdent', 'indent', '|', 'quote', 'insertHR', '|', 'cms-image', '|', 'insertTable', '|', 'undo', 'redo', 'clearFormatting', '|', 'html', 'fullscreen'],
                                toolbarButtonsXS: ['fontFamily', 'fontSize', '|', 'bold', 'italic', 'underline', 'strikeThrough', '|', 'subscript', 'superscript', '|' ,'color', 'paragraphStyle', 'paragraphFormat', 'align', '|', 'formatOL', 'formatUL', 'outdent', 'indent', '|', 'quote', 'insertHR', '|', 'cms-image', '|', 'insertTable', '|', 'undo', 'redo', 'clearFormatting', '|', 'html', 'fullscreen'],
                                imageEditButtons: ['imageAlign', 'imageCaption', 'imageRemove', '|', 'linkOpen', 'linkEdit', 'linkRemove', '-', 'imageDisplay', 'imageStyle', 'imageSize'],
                            });

                            ajaxFileUpload = initAjaxFileUpload($data);


                        }).on('hidden.bs.modal', function (e) {
                            modal.remove();
                        });
                    }
                });
            }
            /*
             var $cell = $(this).closest('.col');



             */
            return false;
        });
    }


    $('.col').each(function(){
        var $cell = $(this);

        initCell($cell);




    });


    $(document).on('click', '.add-repeat-row', function(data, status, xhr){
        var $this = $(this),
            url = $this.attr('href');


        jQuery.ajax({
            type: 'POST',
            url: url,
            success: function (data) {
                var $data = $(data);

                $data.find('.page_html_content').froalaEditor({
                    theme: 'gray',
                    height: 400,
                    toolbarButtons: ['fontFamily', 'fontSize', '|', 'bold', 'italic', 'underline', 'strikeThrough', '|', 'subscript', 'superscript', '|' ,'color', 'paragraphStyle', 'paragraphFormat', 'align', '|', 'formatOL', 'formatUL', 'outdent', 'indent', '|', 'quote', 'insertHR', '|', 'cms-image', '|', 'insertTable', '|', 'undo', 'redo', 'clearFormatting', '|', 'html', 'fullscreen'],
                    toolbarButtonsMD: ['fontFamily', 'fontSize', '|', 'bold', 'italic', 'underline', 'strikeThrough', '|', 'subscript', 'superscript', '|' ,'color', 'paragraphStyle', 'paragraphFormat', 'align', '|', 'formatOL', 'formatUL', 'outdent', 'indent', '|', 'quote', 'insertHR', '|', 'cms-image', '|', 'insertTable', '|', 'undo', 'redo', 'clearFormatting', '|', 'html', 'fullscreen'],
                    toolbarButtonsSM: ['fontFamily', 'fontSize', '|', 'bold', 'italic', 'underline', 'strikeThrough', '|', 'subscript', 'superscript', '|' ,'color', 'paragraphStyle', 'paragraphFormat', 'align', '|', 'formatOL', 'formatUL', 'outdent', 'indent', '|', 'quote', 'insertHR', '|', 'cms-image', '|', 'insertTable', '|', 'undo', 'redo', 'clearFormatting', '|', 'html', 'fullscreen'],
                    toolbarButtonsXS: ['fontFamily', 'fontSize', '|', 'bold', 'italic', 'underline', 'strikeThrough', '|', 'subscript', 'superscript', '|' ,'color', 'paragraphStyle', 'paragraphFormat', 'align', '|', 'formatOL', 'formatUL', 'outdent', 'indent', '|', 'quote', 'insertHR', '|', 'cms-image', '|', 'insertTable', '|', 'undo', 'redo', 'clearFormatting', '|', 'html', 'fullscreen'],
                    imageEditButtons: ['imageAlign', 'imageCaption', 'imageRemove', '|', 'linkOpen', 'linkEdit', 'linkRemove', '-', 'imageDisplay', 'imageStyle', 'imageSize'],
                });

                $('#accordion').append($data);
              $data.find("input:file").each(function () {
                ajaxFileUpload.initFileInput($(this));
              });

            }
        });


        return false;
    });

    $(document).on('click', '.delete-repeat-row', function(data, status, xhr){
        var $this = $(this),
            url = $this.attr('href');


        jQuery.ajax({
            type: 'POST',
            url: url,
            success: function (data) {
                if(data.status == 'ok'){
                    $this.closest('.panel').remove();
                }
            }
        });


        return false;
    });

})();