jQuery( document ).ready( function () {

	jQuery('#font_family').change(function() {
		jQuery('.font-preview').remove();
		jQuery(this ).parent().parent().parent().after("<iframe class='font-preview' width='480' height='60' src='"+config.theme_uri+"/font_test.php?font="+this.value+"'></iframe>");
	}).change();

	jQuery('#default_header_paralax').change(function() {

		jQuery('#section-default_header_height').hide();
		if ( jQuery(this).attr('checked') ) {
			jQuery('#section-default_header_height').show();
		}

	}).change();

	jQuery('#default_header_paralax_blog').change(function() {

		jQuery('#section-default_header_height_blog').hide();
		if ( jQuery(this).attr('checked') ) {
			jQuery('#section-default_header_height_blog').show();
		}

	}).change();

	jQuery('#header-thumbnail-paralax').change(function() {

		jQuery('#header-thumbnail-height-par').hide();
		if ( jQuery(this).attr('checked') ) {
			jQuery('#header-thumbnail-height-par').show();
		}

	}).change();



});


/**
 * Callback function for the 'click' event of the 'Set header Image'
 * anchor in its meta box.
 *
 * Displays the media uploader for selecting an image.
 *
 * see http://code.tutsplus.com/tutorials/getting-started-with-the-wordpress-media-uploader--cms-22011
 */
function renderMediaUploader( $ ) {
	'use strict';

	var file_frame, image_data, json;

	/**
	 * If an instance of file_frame already exists, then we can open it
	 * rather than creating a new instance.
	 */
	if ( undefined !== file_frame ) {

		file_frame.open();
		return;

	}

	/**
	 * If we're this far, then an instance does not exist, so we need to
	 * create our own.
	 *
	 * Here, use the wp.media library to define the settings of the Media
	 * Uploader. We're opting to use the 'post' frame which is a template
	 * defined in WordPress core and are initializing the file frame
	 * with the 'insert' state.
	 *
	 * We're also not allowing the user to select more than one image.
	 */
	file_frame = wp.media.frames.file_frame = wp.media({
		frame:    'post',
		state:    'insert',
		multiple: false
	});

	/**
	 * Setup an event handler for what to do when an image has been
	 * selected.
	 *
	 * Since we're using the 'view' state when initializing
	 * the file_frame, we need to make sure that the handler is attached
	 * to the insert event.
	 */
	file_frame.on( 'insert', function() {

		// Read the JSON data returned from the Media Uploader
		json = file_frame.state().get( 'selection' ).first().toJSON();

		// First, make sure that we have the URL of an image to display
		if ( 0 > $.trim( json.url.length ) ) {
			return;
		}

		// After that, set the properties of the image and display it
		$( '#featured-header-image-container' )
			.children( 'img' )
			.attr( 'src', json.url )
			.attr( 'alt', json.caption )
			.attr( 'title', json.title )
			.show()
			.parent()
			.removeClass( 'hidden' );

		// Next, hide the anchor responsible for allowing the user to select an image
		$( '#featured-header-image-container' )
			.prev()
			.hide();

		// Display the anchor for the removing the featured image
		$( '#featured-header-image-container' )
			.next()
			.show();

		// Store the image's information into the meta data fields
		$( '#header-thumbnail-src' ).val( json.url );
		$( '#header-thumbnail-title' ).val( json.title );
		$( '#header-thumbnail-alt' ).val( json.title );

	});

	// Now display the actual file_frame
	file_frame.open();

}

/**
 * Callback function for the 'click' event of the 'Remove header Image'
 * anchor in its meta box.
 *
 * Resets the meta box by hiding the image and by hiding the 'Remove
 * header Image' container.
 *
 * @param    object    $    A reference to the jQuery object
 * @since    0.2.0
 */
function resetUploadForm( $ ) {
	'use strict';

	// First, we'll hide the image
	$( '#featured-header-image-container' )
		.children( 'img' )
		.hide();

	// Then display the previous container
	$( '#featured-header-image-container' )
		.prev()
		.show();

	// We add the 'hidden' class back to this anchor's parent
	$( '#featured-header-image-container' )
		.next()
		.hide()
		.addClass( 'hidden' );

	// Finally, we reset the meta data input fields
	$( '#featured-header-image-info' )
		.children()
		.val( '' );

}

/**
 * Checks to see if the input field for the thumbnail source has a value.
 * If so, then the image and the 'Remove featured image' anchor are displayed.
 *
 * Otherwise, the standard anchor is rendered.
 *
 * @param    object    $    A reference to the jQuery object
 * @since    1.0.0
 */
function renderFeaturedImage( $ ) {

	/* If a thumbnail URL has been associated with this image
	 * Then we need to display the image and the reset link.
	 */
	if ( '' !== $.trim ( $( '#header-thumbnail-src' ).val() ) ) {

		$( '#featured-header-image-container' ).removeClass( 'hidden' );

		$( '#set-header-thumbnail' )
			.parent()
			.hide();

		$( '#remove-header-thumbnail' )
			.parent()
			.removeClass( 'hidden' );

	}

}


function renderMediaUploader2x( $ ) {
	'use strict';

	var file_frame, image_data, json;

	/**
	 * If an instance of file_frame already exists, then we can open it
	 * rather than creating a new instance.
	 */
	if ( undefined !== file_frame ) {

		file_frame.open();
		return;

	}

	/**
	 * If we're this far, then an instance does not exist, so we need to
	 * create our own.
	 *
	 * Here, use the wp.media library to define the settings of the Media
	 * Uploader. We're opting to use the 'post' frame which is a template
	 * defined in WordPress core and are initializing the file frame
	 * with the 'insert' state.
	 *
	 * We're also not allowing the user to select more than one image.
	 */
	file_frame = wp.media.frames.file_frame = wp.media({
		frame:    'post',
		state:    'insert',
		multiple: false
	});

	/**
	 * Setup an event handler for what to do when an image has been
	 * selected.
	 *
	 * Since we're using the 'view' state when initializing
	 * the file_frame, we need to make sure that the handler is attached
	 * to the insert event.
	 */
	file_frame.on( 'insert', function() {

		// Read the JSON data returned from the Media Uploader
		json = file_frame.state().get( 'selection' ).first().toJSON();

		// First, make sure that we have the URL of an image to display
		if ( 0 > $.trim( json.url.length ) ) {
			return;
		}

		// After that, set the properties of the image and display it
		$( '#featured-header-image2x-container' )
			.children( 'img' )
			.attr( 'src', json.url )
			.attr( 'alt', json.caption )
			.attr( 'title', json.title )
			.show()
			.parent()
			.removeClass( 'hidden' );

		// Next, hide the anchor responsible for allowing the user to select an image
		$( '#featured-header-image2x-container' )
			.prev()
			.hide();

		// Display the anchor for the removing the featured image
		$( '#featured-header-image2x-container' )
			.next()
			.show();

		// Store the image's information into the meta data fields
		$( '#header-thumbnail2x-src' ).val( json.url );
		$( '#header-thumbnail2x-title' ).val( json.title );
		$( '#header-thumbnail2x-alt' ).val( json.title );

	});

	// Now display the actual file_frame
	file_frame.open();

}

/**
 * Callback function for the 'click' event of the 'Remove header Image'
 * anchor in its meta box.
 *
 * Resets the meta box by hiding the image and by hiding the 'Remove
 * header Image' container.
 *
 * @param    object    $    A reference to the jQuery object
 * @since    0.2.0
 */
function resetUploadForm2x( $ ) {
	'use strict';

	// First, we'll hide the image
	$( '#featured-header-image2x-container' )
		.children( 'img' )
		.hide();

	// Then display the previous container
	$( '#featured-header-image2x-container' )
		.prev()
		.show();

	// We add the 'hidden' class back to this anchor's parent
	$( '#featured-header-image2x-container' )
		.next()
		.hide()
		.addClass( 'hidden' );

	// Finally, we reset the meta data input fields
	$( '#featured-header-image2x-info' )
		.children()
		.val( '' );

}

/**
 * Checks to see if the input field for the thumbnail source has a value.
 * If so, then the image and the 'Remove featured image' anchor are displayed.
 *
 * Otherwise, the standard anchor is rendered.
 *
 * @param    object    $    A reference to the jQuery object
 * @since    1.0.0
 */
function renderFeaturedImage2x( $ ) {

	/* If a thumbnail URL has been associated with this image
	 * Then we need to display the image and the reset link.
	 */
	if ( '' !== $.trim ( $( '#header-thumbnail2x-src' ).val() ) ) {

		$( '#featured-header-image2x-container' ).removeClass( 'hidden' );

		$( '#set-header-thumbnail2x' )
			.parent()
			.hide();

		$( '#remove-header-thumbnail2x' )
			.parent()
			.removeClass( 'hidden' );

	}

}




(function( $ ) {
	'use strict';

	$(function() {

		renderFeaturedImage( $ );

		$( '#set-header-thumbnail' ).on( 'click', function( evt ) {

			// Stop the anchor's default behavior
			evt.preventDefault();

			// Display the media uploader
			renderMediaUploader( $ );

		});

		$( '#remove-header-thumbnail' ).on( 'click', function( evt ) {

			// Stop the anchor's default behavior
			evt.preventDefault();

			// Remove the image, toggle the anchors
			resetUploadForm( $ );

		});

		renderFeaturedImage2x( $ );

		$( '#set-header-thumbnail2x' ).on( 'click', function( evt ) {

			// Stop the anchor's default behavior
			evt.preventDefault();

			// Display the media uploader
			renderMediaUploader2x( $ );

		});

		$( '#remove-header-thumbnail2x' ).on( 'click', function( evt ) {

			// Stop the anchor's default behavior
			evt.preventDefault();

			// Remove the image, toggle the anchors
			resetUploadForm2x( $ );

		});


	});

})( jQuery );