var BOLDGRID=BOLDGRID||{};BOLDGRID.EDITOR=BOLDGRID.EDITOR||{},BOLDGRID.EDITOR.Crop=function(n){var s=this;s.modal,s.selectedCoordinates=null,s.newImage=!1,s.oldImage=!1,this.modalClear=function(){s.$mediaModal.css("display","block"),s.$modalContent.empty(),s.$modalToolbar.empty();var t=wp.template("suggest-crop-compare");s.$modalContent.html(t())},this.crop=function(){s.$skipButton.prop("disabled",!0),s.$primaryButton.prop("disabled",!0).text("Cropping...");var t={action:"suggest_crop_crop",cropDetails:s.selectedCoordinates,path:s.$selectDimensions.find("option:selected").val(),originalWidth:n(s.oldImage)[0].naturalWidth,originalHeight:n(s.oldImage)[0].naturalHeight,id:s.$selectDimensions.attr("data-id")};n.post(ajaxurl,t,function(t){s.cropValidate(t)})},this.cropInvalid=function(){var t=wp.template("suggest-crop-invalid");s.$modalToolbar.html(t()),n("button.crop-fail").on("click",function(){s.modal.close()})},this.cropValidate=function(o){if("0"===o)s.cropInvalid();else{try{o=JSON.parse(o)}catch(t){return void s.cropInvalid()}var i=!0;n.each(["new_image_height","new_image_width","new_image_url"],function(t,e){if(void 0===o[e])return i=!1}),i?s.cropValid(o):s.cropInvalid()}},this.cropValid=function(t){var e=tinyMCE.activeEditor.selection.getNode();e.src=t.new_image_url,e.width=t.new_image_width,e.height=t.new_image_height,e.setAttribute("data-mce-src",t.new_image_url),s.$skipButton.prop("disabled",!1),s.$primaryButton.prop("disabled",!1).text(n(this).attr("data-default-text")),s.modal.close()},this.setImages=function(e){var o=new Image,i=new Image,a=wp.template("suggest-crop-sizes"),t={action:"suggest_crop_get_dimensions",attachment_id:e.attachment_id,originalWidth:e.customWidth,originalHeight:e.customHeight};jQuery.post(ajaxurl,t,function(t){if("0"===t)return s.modal.close(),!1;try{t=JSON.parse(t)}catch(t){return s.modal.close(),!1}s.$selectDimensions=n(a(t)),s.$selectDimensions.attr("data-id",e.attachment_id),o.onload=function(){s.oldImage=o,s.selectBestFit(),i.onload=function(){s.newImage=i,s.compareImages()},i.src=s.bestSizeSelector},o.src=e.originalUrl})},this.selectBestFit=function(){var t=parseFloat(s.oldImage.width/s.oldImage.height)<1?s.$selectDimensions.find("option").filter(function(){return n(this).attr("data-height")>=s.oldImage.height}):s.$selectDimensions.find("option").filter(function(){return n(this).attr("data-width")>=s.oldImage.width});1===t.length?s.bestSizeSelector=t.eq(0).val():0===t.length?s.bestSizeSelector=s.$selectDimensions.find("option").last().val():s.bestSizeSelector=t.eq(1).val(),s.$selectDimensions.find('option[value="'+s.bestSizeSelector+'"]').prop("selected",!0)},this.selectCoordinates=function(){s.setDefaultCoordinates(s.oldImage.width,s.oldImage.height,s.newImage.width,s.newImage.height),s.ias=s.$suggestCrop.imgAreaSelect({aspectRatio:s.defaultCoordinates.aspectRatio,handles:!0,imageHeight:s.newImage.height,imageWidth:s.newImage.width,instance:!0,keys:!0,persistent:!0,parent:s.$modalContent.find(".container-crop .left"),x1:s.defaultCoordinates.x1,y1:s.defaultCoordinates.y1,x2:s.defaultCoordinates.x2,y2:s.defaultCoordinates.y2,onInit:function(t,e){s.setSelectedCoordinates(t,e)},onSelectEnd:function(t,e){s.setSelectedCoordinates(t,e)}})},this.init=function(){},this.onReplace=function(t){s.modalOpen(),s.setImages(t)},this.onResize=function(){s.$modalContent.is(":visible")&&s.ias.setOptions({imageHeight:s.newImage.naturalHeight,imageWidth:s.newImage.naturalWidth,x1:s.selectedCoordinates.x1,y1:s.selectedCoordinates.y1,x2:s.selectedCoordinates.x2,y2:s.selectedCoordinates.y2})},this.onSize=function(t){var e;s.$suggestCrop.off("load").attr("src",t).on("load",function(){e=n(this)[0],img1Width=s.oldImage.width,img1Height=s.oldImage.height,img2Width=e.naturalWidth,img2Height=e.naturalHeight,s.setDefaultCoordinates(img1Width,img1Height,img2Width,img2Height),s.ias.setOptions({aspectRatio:s.defaultCoordinates.aspectRatio,imageHeight:e.naturalHeight,imageWidth:e.naturalWidth,x1:s.defaultCoordinates.x1,y1:s.defaultCoordinates.y1,x2:s.defaultCoordinates.x2,y2:s.defaultCoordinates.y2}),s.setSelectedCoordinates(null,{height:e.naturalHeight,width:e.naturalWidth,x1:s.defaultCoordinates.x1,y1:s.defaultCoordinates.y1,x2:s.defaultCoordinates.x2,y2:s.defaultCoordinates.y2}),s.$modalContent.find('[name="force-aspect-ratio"]').prop("checked",!0)})},this.modalCreate=function(){s.modal=wp.media({id:"crop",title:"Crop Image",button:{text:"Crop Image"}}),s.modal.on("close",function(){s.modal.remove(),n("#crop").closest('[id*="wp-uploader-id"]').remove(),delete s.modal}),s.modal.open(),s.$mediaModal=n(".media-modal").last(),s.$modalContent=s.$mediaModal.find(".media-frame-content",".media-modal"),s.$modalToolbar=s.$mediaModal.find(".media-frame-toolbar",".media-modal"),n(window).resize(function(){s.onResize()})},this.modalOpen=function(){s.modal?s.modal.open():s.modalCreate(),s.modalClear()},this.onMatch=function(){var t=wp.template("suggest-crop-match");s.$modalContent.html(t()),setTimeout(function(){s.$mediaModal.fadeOut("1000",function(){s.modal.close()})},1e3)},this.modalFill=function(){var t={oldImageSrc:s.oldImage.src,newImageSrc:s.newImage.src,newContentSrc:s.bestSizeSelector},e=wp.template("suggest-crop"),e=(s.$modalContent.html(e(t)),s.$suggestCrop=s.$modalContent.find(".suggest-crop"),n(".imgedit-group.imgedit-source p").last().html(s.$selectDimensions),s.$selectDimensions.on("change",function(){var t=n(this).val();s.onSize(t)}),wp.template("suggest-crop-toolbar"));s.$modalToolbar.html(e()),s.bindModal(),s.selectCoordinates()},this.setSelectedCoordinates=function(t,e){s.selectedCoordinates=e},this.setDefaultCoordinates=function(t,e,o,i){var a={},n=o,d=e*o/t;a.x1=0,a.y1=(i-d)/2,a.x2=n,a.y2=a.y1+d,i<d&&(a.x1=(o-(n=t*(d=i)/e))/2,a.y1=0,a.x2=a.x1+n,a.y2=d),a.aspectRatio=n+":"+d,s.defaultCoordinates=a},this.compareImages=function(){s.oldImage.width/s.oldImage.height==s.newImage.width/s.newImage.height?s.onMatch():s.modalFill()},this.bindModal=function(){n(".imgedit-help-toggle").on("click",function(){n(".imgedit-help").slideToggle()}),s.bindRatio(),s.$primaryButton=s.$modalToolbar.find(".button-primary"),s.$primaryButton.attr("disabled",!1),s.$primaryButton.on("click",function(){s.crop()}),s.$skipButton=s.$primaryButton.siblings(".media-button-skip"),s.$skipButton.on("click",function(){s.modal.close()})},this.bindRatio=function(){var t=s.$modalContent.find('[name="force-aspect-ratio"]');s.$modalContent.find("span#toggle-force").on("click",function(){t.click()}),t.off("change"),t.on("change",function(){n(this).is(":checked")?s.ias.setOptions({aspectRatio:s.defaultCoordinates.aspectRatio,x1:s.defaultCoordinates.x1,y1:s.defaultCoordinates.y1,x2:s.defaultCoordinates.x2,y2:s.defaultCoordinates.y2}):s.ias.setOptions({aspectRatio:!1})})}},BOLDGRID.EDITOR.CropInstance=new BOLDGRID.EDITOR.Crop(jQuery);//global sekPreviewLocalized
var SekPreviewPrototype = SekPreviewPrototype || {};
( function( api, $, _ ) {
      $.extend( SekPreviewPrototype, {
            // Fired on Dom Ready, in ::initialize()
            setupResizable : function() {
                  var self = this;
                  $('.sektion-wrapper').find( 'div[data-sek-level="section"]' ).each( function() {
                        self.maybeMakeColumnResizableInSektion.call( this );
                  });
                  // Delegate instantiation when a level markup is refreshed
                  // Let the event bubble up to the location, and then visit all children section to maybe re-instantiate resizable
                  // @fixes https://github.com/presscustomizr/nimble-builder/issues/165
                  self.cachedElements.$body.on(
                        'sek-level-refreshed sek-modules-refreshed sek-columns-refreshed sek-section-added sek-location-refreshed',
                        '[data-sek-level="location"]',
                        function( evt ) {
                              $(this).find('[data-sek-level="section"]').each( function() {
                                    self.maybeMakeColumnResizableInSektion.call( this );
                              });
                        }
                  );
                  return this;
            },//setupResizable()

            // this is the parent section jQuery object
            maybeMakeColumnResizableInSektion : function() {
                  var self = this,
                      $parentSektion,
                      parentSektionId,
                      parentSektionWidth,
                      $resizedColumn,
                      resizedColumnWidthInPercent,
                      //calculate the number of column in this section, excluding the columns inside nested sections if any
                      colNumber,
                      $sisterColumn,
                      isLastColumn;

                  // We won't fire resizable for single column sektions
                  var $directColumnChildren = $(this).find('.sek-sektion-inner').first().children( 'div[data-sek-level="column"]' );
                  if ( 2 > $directColumnChildren.length )
                    return;

                  var $lastCol = $(this).find('.sek-sektion-inner').first().children( 'div[data-sek-level="column"]' ).last();

                  $directColumnChildren.not($lastCol).each( function() {
                        $(this).resizable({
                                // handles: { 'e': '.ui-resizable-e', 'w': '.ui-resizable-w' },
                                resize : function( event, ui ) {
                                      $('.sektion-wrapper').data('sek-resizing-columns', true );
                                },
                                start : function( event, ui ) {
                                      $parentSektion = ui.element.closest('div[data-sek-level="section"]');
                                      parentSektionId = $parentSektion.data('sek-id');
                                      parentSektionWidth = $parentSektion.find('.sek-sektion-inner')[0].getBoundingClientRect().width;
                                      //calculate the number of column in this section, excluding the columns inside nested sections if any
                                      colNumber = $parentSektion.find('.sek-sektion-inner').first().children( 'div[data-sek-level="column"]' ).length;

                                      // Resizable should not have been instantiated anyway
                                      if ( 2 > colNumber )
                                        return;

                                      $resizedColumn = ui.element.closest('div[data-sek-level="column"]');
                                      if ( 1 > $resizedColumn.length ) {
                                          throw new Error( 'ERROR => resizable => No valid level dom element found' );
                                      }

                                      isLastColumn = $resizedColumn.index() + 1 == colNumber;

                                      // Assomption : RTL user. LTR should be implemented also.
                                      // If parent section has at least 2 columns, the sister column is the one on the right if not in last position. On the left if last.
                                      $sisterColumn = isLastColumn ? $resizedColumn.prev() : $resizedColumn.next();

                                      // Implement a global state value()
                                      $('.sektion-wrapper').data('sek-resizing-columns', true );

                                      // auto set to false after a moment.
                                      _.delay( function() {
                                            $('.sektion-wrapper').data('sek-resizing-columns', false );
                                      }, 3000 );
                                },
                                stop : function( event, ui ) {
                                      // console.log('ON RESIZE STOP', event, ui, $resizedColumn );
                                      // console.log('colNumber', colNumber, '[data-sek-id="' + parentSektionId +'"] > .sek-sektion-inner' );
                                      // Skip the case when there's only one column
                                      // Resizable should not have been instantiated anyway
                                      if ( 2 > colNumber )
                                        return;

                                      if ( 1 > $resizedColumn.length ) {
                                          throw new Error( 'ERROR => resizable => No valid level dom element found' );
                                      }

                                      // Reset the automatic inline style
                                      $resizedColumn.css({
                                            width : '',
                                            height: ''
                                      });

                                      resizedColumnWidthInPercent = ( ( parseFloat( ui.size.width ) / parseFloat( parentSektionWidth ) ) * 100 ).toFixed(3);

                                      api.preview.send( 'sek-resize-columns', {
                                            action : 'sek-resize-columns',
                                            level : $resizedColumn.data( 'sek-level' ),
                                            in_sektion : $parentSektion.data('sek-id'),
                                            id : $resizedColumn.data('sek-id'),

                                            resized_column : $resizedColumn.data('sek-id'),
                                            sister_column : $sisterColumn.data('sek-id'),

                                            resizedColumnWidthInPercent : resizedColumnWidthInPercent,

                                            col_number : colNumber
                                      });

                                      $('.sektion-wrapper').data('sek-resizing-columns', false );
                                },
                                helper: "ui-resizable-helper",
                                handles :'e'
                        });//$(this).resizable({})

                        // Add a resizable icon in the handle
                        // revealed on section hovering @see sek-preview.css
                        var $column = $(this);
                        _.delay( function() {
                              var $resizableHandle = $column.find('.ui-resizable-handle');
                              if ( $resizableHandle.find('.fa-arrows-alt-h').length < 1 ) {
                                    $column.find('.ui-resizable-handle').append('<i class="fas fa-arrows-alt-h"></i>');
                              }
                        }, 500 );

                  });//$directColumnChildren.each()
            }

      });//$.extend()
})( wp.customize, jQuery, _ );