(function($) {
	"use strict";
	
	// Uploading files
	var file_frame;
	function sw_upload_image( tar_parent ){
		// Only show the "remove image" button when needed
		if ( ! tar_parent.find( '.thumbnail' ).val() ) {
			tar_parent.find( '.remove_image_button' ).hide();
		}	

		tar_parent.find( '.upload_image_button' ).on( 'click', function( event ) {

			event.preventDefault();

			// If the media frame already exists, reopen it.
			if ( file_frame ) {
				file_frame.open();
				return;
			}

			// Create the media frame.
			file_frame = wp.media.frames.downloadable_file = wp.media({
				title: setting_val.setting_media_title,
				button: {
					text: setting_val.setting_media_button_text
				},
				multiple: false
			});

			// When an image is selected, run a callback.
			file_frame.on( 'select', function() {
				var attachment = file_frame.state().get( 'selection' ).first().toJSON();
				console.log( attachment );
				tar_parent.find( '.thumbnail' ).val( attachment.id );
				var size = attachment.sizes.full.url;
				if( typeof(attachment.sizes.thumbnail) != "undefined" ){
					size = attachment.sizes.thumbnail.url;
				}
				tar_parent.find( '.product-thumbnail > img' ).attr( 'src', size );
				tar_parent.find( '.remove_image_button' ).show();
			});

			// Finally, open the modal.
			file_frame.open();
		});

		tar_parent.find( '.remove_image_button' ).on( 'click', function() {
			tar_parent.find( '.product-thumbnail > img' ).attr( 'src', setting_val.setting_img_placehold );
			tar_parent.find( '.thumbnail' ).val( '' );
			tar_parent.find( '.remove_image_button' ).hide();
			return false;
		});
	}
	
	$( '.form-upload' ).each( function(){
		sw_upload_image( $(this) );
	});
	
	$( 'a[data-toggle="project_gallery"' ).on( 'click', function(event){
		var target = $(this);
		event.preventDefault();

		// If the media frame already exists, reopen it.
		if ( file_frame ) {
			file_frame.open();
			return;
		}

		// Create the media frame.
		file_frame = wp.media.frames.downloadable_file = wp.media({
			title: setting_val.setting_media_title,
			button: {
				text: setting_val.setting_media_button_text
			},
			multiple: true
		});

		// When an image is selected, run a callback.
		file_frame.on( 'select', function() {
			var attachments  = file_frame.state().get( 'selection' );
			var imageIDArray = [];
			var imageHTML    = '<ul>';
			attachments.each(function(attachment) {
				imageIDArray.push( attachment.attributes.id );
				imageHTML += '<li><img src="'+ attachment.attributes.sizes.thumbnail.url +'" id="'+ attachment.attributes.id +'"/><span class="gallery-remove" data-id="'+ attachment.attributes.id +'"></span></li>';
			});
			imageHTML    += '<ul>';
			var  metadataString = imageIDArray.join(",");
			if( metadataString ){
				target.parent().find( 'input' ).val(metadataString);
				target.parent().find( '.gallery-append' ).html(imageHTML);
			}
		});

		// Finally, open the modal.
		file_frame.open();
	});
	
	$( document ).on( 'click', '.gallery-remove', function(){
		var id = $(this).data( 'id' );
		var	old_gallery = $( 'input[name="_project_gallery"]' ).val();
		var newGallery  = old_gallery.replace( ','+id,'' ).replace( id+',','' ).replace( id,'' );
		$(this).parent().hide(300).remove();
		$( 'input[name="_project_gallery"]' ).val(newGallery);
	});
})(jQuery);