/* Plugin Script (admin)
-------------------------------------------------------------
------------------------------------------------------------- */

var LGMJ_ADMIN = new function() {

	var t = this,
		gallery_frame;

	/* Multi image upload
	---------------------------------------------------------- */	

	t.addImages = function( event ) {
		event.preventDefault();

		var btn = jQuery(this),
			container = btn.closest( '.layers-multiimage-container' ),
			upload = true;

		// If the media frame already exists, reopen it.
		if ( gallery_frame ) {
			gallery_frame.close();
		}

		// Create the media frame.
		gallery_frame = wp.media.frames.gallery_frame = wp.media({
			title: btn.data( 'title' ),
			button: {
				text: btn.data( 'button_text' ),
			},
			multiple: true
		});

		// When image(s) selected, run a callback.
		gallery_frame.on( 'select' , function() {

			var attachments = gallery_frame.state().get('selection').toJSON(),
				imageGroup = [];

			if ( typeof attachments !== "" ) {

				jQuery( attachments ).each( function() {

					if ( this.type && this.type === "image" ) {

						var input_id = btn.data( 'input_id' ),
							input_name = btn.data( 'input_name' );

						upload = '<li class="layers-multiimage-single">'+
								'<div class="layers-multiimage-single-img">'+
									'<img width="75" height="75" src="' + this.url + '" alt="'+ this.filename +'">'+
									'<input type="hidden" class="layers-multiimage-input" id="'+input_id+'-'+this.id+'" name="'+input_name+'[]" value="'+this.id+'" />'+
									'<a href="#" class="layers-multiimage-remove"><i class="fa fa-remove"></i></a>'+
								'</div>'+
							'</li>';
					}

					// Add file to array
					imageGroup.push( upload );
				});

			} // end - typeof

			// print out files
			jQuery( imageGroup ).each( function() {

				var image_list = container.find("ul.layers-multiimage-display");

				image_list.append(this);

				// trigger change event
				image_list.find('input.layers-multiimage-input').layers_trigger_change();
			});


			sortableImages( jQuery("ul.layers-multiimage-display") );

		} );

		// Finally, open the modal
		gallery_frame.open();

	}

	t.removeImage = function( event ) {

		event.preventDefault();

		var btn = jQuery(this),
			list = btn.closest( 'ul.layers-multiimage-display' ),
			item = btn.closest( '.layers-multiimage-single' );

		item.remove();

		// trigger change event
		var input = list.find("input.layers-multiimage-input");

		if ( typeof input != "" && input.length > 0 ) {
			input.layers_trigger_change();
		} else {
			jQuery("input.layers-multiimage-input-reset").val('').layers_trigger_change();
		}

	}

	/* Sortable
	---------------------------------------------------------- */

	var sortableImages = function( obj ) {

		if ( obj.length > 0 ) {
			obj.sortable({
					placeholder: "ui-state-highlight",
					connectWith: "ul.layers-multiimage-display",
				})
				.disableSelection();
		}

	}

	t.updatePosition = function( event , ui ) {
		jQuery(this).find("input.layers-multiimage-input").layers_trigger_change();
	}


	/* Run the init function
	---------------------------------------------------------- */
	jQuery(document).ready(function(){

		// media handlers
		jQuery(document).on( "click" , ".layers-multiimage-upload-button", LGMJ_ADMIN.addImages );
		jQuery(document).on( "click" , ".layers-multiimage-remove", LGMJ_ADMIN.removeImage );

		// sortable gallery
		jQuery(document).on( "layers-interface-init" , '.widget' , function(e) {
			sortableImages( jQuery("ul.layers-multiimage-display") );
		});
		jQuery(document).on( "sortstop" , "ul.layers-multiimage-display", LGMJ_ADMIN.updatePosition );

	});

}