/* Admin JS */
(function($) {
	$(document).ready(function() {
		$('.swp_form_fields .handlediv').click(function(){
			$(this).parent().toggleClass('closed');
		})
			/* Layout Builder */

         $('.styler-color-picker').wpColorPicker();

         $('.swp_styler_slider').each(function(){
            var inp_val = $(this).next().val();
            if( inp_val != ''){
               inp_val =  inp_val.replace('px', '');
            }else{
                inp_val =1;
            }

             $(this).noUiSlider({
            start: inp_val ,
            step: 1,
            range: {
                'min': [  0 ],
                'max': [ 100 ]
                },
            format: {
              to: function ( value ) {
                return Math.round(value) + 'px';
              },
              from: function ( value ) {
                return value.replace('px', '');
              }
            }

        }).on({
         slide: function(){

                  $(this).Link('lower').to($(this).next());
                }
        })

         })

   layout_gridster = $(".gridster ul").gridster({
        widget_margins: [5, 5],
        widget_base_dimensions: [250, 42],
         resize: {
            enabled: true,
            max_size: [2, 1],
            min_size: [1, 1]
          },
        max_cols: 2,
         serialize_params: function($w, wgd) {
            field_obj={};
            var id =$w.attr('id');
             field_obj[id]={
                col: wgd.col,
                row: wgd.row,
                size_x: wgd.size_x,
                size_y: wgd.size_y,
                key:id
              };
            return field_obj;
        },
    }).data('gridster');

   $('#publish').click(function(event) {
     s = layout_gridster.serialize();
     $('#field-layout-data').val(JSON.stringify(s))
     //console.log(JSON.stringify(s))
     return true;
    });

	$('#swp-layout-fields li a ').click(function(){
		var status = $(this).hasClass('disabled');
		if(status){
			return;
		}
		var id = $(this).data('id');
		var label = $(this).text();
		var type = $(this).data('type');
			var html = '<li   id="swp_styler_field_layout_'+id+'" class=" ninja-forms-no-nest _text-li">';
				html += '<dl class="menu-item-bar">';
				html += '<dt class="menu-item-handle" id="ninja_forms_metabox_field_'+id+'">';
				html += '<span class="item-title ninja-forms-field-title" id="nf_styler_field_'+id+'_title">'+label+'</span>';
				html += '<span class="item-controls">';
				html += '<span class="item-type"><span class="spinner" style="margin-top: -2px; float: left; display: none;"></span><span class="item-type-name">'+type+'</span><a class="remove-field" data-id="'+id+'" href="javascript:void(0)"><span class="dashicons dashicons-no"></span></a></span>';
				html += '</span>';
				html += '</dt>';
				html += '</dl>';
				html += '</li>';
		layout_gridster.add_widget( html,1,1,1,100);
		$(this).addClass('disabled')

	})

	$(document).on('click','.remove-field',function(){
		// remove li
		var li = $(this).parent().parent().parent().parent().parent();
		layout_gridster.remove_widget( li );
		// remove the disabled class
		var id = $(this).data('id');
		$('#swp-layout-fields li a[data-id="'+id+'"]').removeClass('disabled');
	})

	})
})(jQuery);