Inheritance: extends TitanFrameworkOption
    public static function createUploaderScript()
    {
        if (!self::$firstLoad) {
            return;
        }
        self::$firstLoad = false;
        ?>
		<script>
		jQuery(document).ready(function($){
			"use strict";
			$('.tf-upload .thumbnail').find('img').parent().addClass('has-value').find(':before').css({'opacity':'0'});
			function tfUploadOptionCenterImage($this) {
				var _preview = $this.parents('.tf-upload').find('.thumbnail');
				$this.css({
					'marginTop': ( _preview.height() - $this.height() ) / 2,
					'marginLeft': ( _preview.width() - $this.width() ) / 2
				}).show();
			}


			// Calculate display offset of preview image on load.
			$('.tf-upload .thumbnail img').load(function() {
				tfUploadOptionCenterImage($(this));
			}).each(function(){
				// Sometimes the load event might not trigger due to cache.
				if(this.complete) {
					$(this).trigger('load');
				};
			});


			// In the theme customizer, the load event above doesn't work because of the accordion,
			// the image's height & width are detected as 0. We bind to the opening of an accordion
			// and adjust the image placement from there.
			var tfUploadAccordionSections = [];
			$('.tf-upload').each(function() {
				var $accordion = $(this).parents('.control-section.accordion-section');
				if ( $accordion.length > 0 ) {
					if ( $.inArray( $accordion, tfUploadAccordionSections ) == -1 ) {
						tfUploadAccordionSections.push($accordion);
					}
				}
			});
			$.each( tfUploadAccordionSections, function() {
				var $title = $(this).find('.accordion-section-title:eq(0)'); // Just opening the section.
				$title.click(function() {
					var $accordion = $(this).parents('.control-section.accordion-section');
					if ( ! $accordion.is('.open') ) {
						$accordion.find('.tf-upload .thumbnail img').each(function() {
							var $this = $(this);
							setTimeout(function() {
								tfUploadOptionCenterImage($this);
							}, 1);
						});
					}
				});
			});


			// Remove the image when the remove link is clicked.
			$('body').on('click', '.tf-upload i.remove', function(event) {
				event.preventDefault();
				var _input = $(this).parents('.tf-upload').find('input');
				var _preview = $(this).parents('.tf-upload').find('div.thumbnail');

				_preview.removeClass('has-value').find('img').remove().end().find('i').remove();
				_input.val('').trigger('change');

				return false;
			});


			// Open the upload media lightbox when the upload button is clicked.
			$('body').on('click', '.tf-upload .thumbnail, .tf-upload img', function(event) {
				event.preventDefault();
				// If we have a smaller image, users can click on the thumbnail.
				if ( $(this).is('.thumbnail') ) {
					if ( $(this).parents('.tf-upload').find('img').length != 0 ) {
						$(this).parents('.tf-upload').find('img').trigger('click');
						return true;
					}
				}

				var _input = $(this).parents('.tf-upload').find('input');
				var _preview = $(this).parents('.tf-upload').find('div.thumbnail');
				var _remove = $(this).siblings('.tf-upload-image-remove');

				// Uploader frame properties.
				var frame = wp.media({
					title: '<?php 
        esc_html_e('Select Image', TF_I18NDOMAIN);
        ?>
',
					multiple: false,
					library: { type: 'image' },
					button : { text : '<?php 
        esc_html_e('Use image', TF_I18NDOMAIN);
        ?>
' }
				});

				// Get the url when done.
				frame.on('select', function() {
					var selection = frame.state().get('selection');
					selection.each(function(attachment) {

						// if ( typeof attachment.attributes.sizes === 'undefined' ) {
						// 	return;
						// }

						if ( _input.length > 0 ) {
							_input.val(attachment.id);
						}

						if ( _preview.length > 0 ) {
							// remove current preview
							if ( _preview.find('img').length > 0 ) {
								_preview.find('img').remove();
							}
							if ( _preview.find('i.remove').length > 0 ) {
								_preview.find('i.remove').remove();
							}

							// Get the preview image.
						if ( typeof attachment.attributes.sizes != 'undefined' ) {
								var image = attachment.attributes.sizes.full;
 								if ( typeof attachment.attributes.sizes.thumbnail != 'undefined' ) {
 									image = attachment.attributes.sizes.thumbnail;
 								}
 								var url = image.url;
 								var marginTop = ( _preview.height() - image.height ) / 2;
 								var marginLeft = ( _preview.width() - image.width ) / 2;
 								var filename = '';
 							} else {
 								var url = attachment.attributes.url;
 								var marginTop = ( _preview.height() - 64 ) / 2;
 								var marginLeft = ( _preview.width() - 48 ) / 2;
 								var filename = attachment.attributes.filename;
							}

							$("<img src='" + url + "'/>").appendTo(_preview);
							$("<i class='dashicons dashicons-no-alt remove'></i>").prependTo(_preview);
						}
						// We need to trigger a change so that WP would detect that we changed the value.
						// Or else the save button won't be enabled.
						_input.trigger('change');

						_remove.show();
						$('.tf-upload .thumbnail').find('img').parent().addClass('has-value').find(':before').css({'opacity':'0'});
					});
					frame.off('select');
				});

				// Open the uploader.
				frame.open();

				return false;
			});
		});
		</script>
		<?php 
    }
    public static function createUploaderScript()
    {
        if (!self::$firstLoad) {
            return;
        }
        self::$firstLoad = false;
        ?>
		<script>
		jQuery(document).ready(function($){
			"use strict";

			// open the upload media when the image is clicked
			$('body').on('click', '.tf-theme-customizer.thumbnail img, .tf-image-preview.thumbnail img', function(event) {
				event.preventDefault();
				$(this).parent().siblings('p').find('button.tf-upload-image, button.tf-upload-image').trigger('click');
				$(this).parent().siblings('button.tf-upload-image').trigger('click');
			});

			// remove the image when the remove link is clicked
			$('.tf-upload-image-remove').click(function(event) {
				event.preventDefault();
				var _input = $(this).siblings('input[type="text"]');
				if ( _input.length == 0 ) {
					// be careful with this since different placements of the input may render this invalid
					_input = $(this).parent().siblings('input[type="text"]');
				}
				var _preview = $(this).siblings('div.thumbnail');
				if ( _preview.length == 0 ) {
					_preview = $(this).parent().siblings('div.thumbnail');
				}

				_input.val('');
				_preview.html('');
				// we need to trigger a change so that WP would detect that we changed the value
				// or else the save button won't be enabled
				_input.trigger('change');
				$(this).hide();

				return false;
			});

			// open the upload media lightbox when the upload button is clicked
			$('button.tf-upload-image').click(function(event) {
				event.preventDefault();
				var _input = $(this).siblings('input[type="text"]');
				if ( _input.length == 0 ) {
					// be careful with this since different placements of the input may render this invalid
					_input = $(this).parent().siblings('input[type="text"]');
				}
				var _preview = $(this).siblings('div.thumbnail');
				if ( _preview.length == 0 ) {
					_preview = $(this).parent().siblings('div.thumbnail');
				}
				var _remove = $(this).siblings('.tf-upload-image-remove');

				// uploader frame properties
				var frame = wp.media({
					title: "Select Image",
					multiple: false,
					library: { type: 'image' },
					button : { text : 'Use image' }
				});

				// get the url when done
				frame.on('select', function() {
					var selection = frame.state().get('selection');
					selection.each(function(attachment) {
						if ( _input.length > 0 ) {
							_input.val(attachment.attributes.url);
						}
						if ( _preview.length > 0 ) {
							_preview.html("<img src='" + attachment.attributes.url + "'/>")
							// _preview.html("<img src='" + attachment.attributes.sizes.thumbnail.url + "'/>")
						}
						// we need to trigger a change so that WP would detect that we changed the value
						// or else the save button won't be enabled
						_input.trigger('change');

						_remove.show();
					});
					frame.off('select');
				});

				// open the uploader
				frame.open();

				return false;
			});
		});
		</script>
		<?php 
    }