(function($) {

	$(document).ready(function() {

		var bgImage = $("#custom-background-image"),

			frame;

		$('#background-color').wpColorPicker({

			change: function( event, ui ) {

				bgImage.css('background-color', ui.color.toString());

			},

			clear: function() {

				bgImage.css('background-color', '');

			}

		});

		$('input[name="background-position-x"]').change(function() {

			bgImage.css('background-position', $(this).val() + ' top');

		});

		$('input[name="background-repeat"]').change(function() {

			bgImage.css('background-repeat', $(this).val());

		});

		$('#choose-from-library-link').click( function( event ) {

			var $el = $(this);

			event.preventDefault();

			// If the media frame already exists, reopen it.

			if ( frame ) {

				frame.open();

				return;

			}

			// Create the media frame.

			frame = wp.media.frames.customBackground = wp.media({

				// Set the title of the modal.

				title: $el.data('choose'),

				// Tell the modal to show only images.

				library: {

					type: 'image'

				},

				// Customize the submit button.

				button: {

					// Set the text of the button.

					text: $el.data('update'),

					// Tell the button not to close the modal, since we're

					// going to refresh the page when the image is selected.

					close: false

				}

			});

			// When an image is selected, run a callback.

			frame.on( 'select', function() {

				// Grab the selected attachment.

				var attachment = frame.state().get('selection').first();

				// Run an AJAX request to set the background image.

				$.post( ajaxurl, {

					action: 'set-background-image',

					attachment_id: attachment.id,

					size: 'full'

				}).done( function() {

					// When the request completes, reload the window.

					window.location.reload();

				});

			});

			// Finally, open the modal.

			frame.open();

		});

	});

})(jQuery);