1 (function( exports, $ ){

     2 	var api = wp.customize,

     3 		debounce;

     4 

     5 	debounce = function( fn, delay, context ) {

     6 		var timeout;

     7 		return function() {

     8 			var args = arguments;

     9 

    10 			context = context || this;

    11 

    12 			clearTimeout( timeout );

    13 			timeout = setTimeout( function() {

    14 				timeout = null;

    15 				fn.apply( context, args );

    16 			}, delay );

    17 		};

    18 	};

    19 

    20 	api.Preview = api.Messenger.extend({

    21 		/**

    22 		 * Requires params:

    23 		 *  - url    - the URL of preview frame

    24 		 */

    25 		initialize: function( params, options ) {

    26 			var self = this;

    27 

    28 			api.Messenger.prototype.initialize.call( this, params, options );

    29 

    30 			this.body = $( document.body );

    31 			this.body.on( 'click.preview', 'a', function( event ) {

    32 				event.preventDefault();

    33 				self.send( 'scroll', 0 );

    34 				self.send( 'url', $(this).prop('href') );

    35 			});

    36 

    37 			// You cannot submit forms.

    38 			// @todo: Allow form submissions by mixing $_POST data with the customize setting $_POST data.

    39 			this.body.on( 'submit.preview', 'form', function( event ) {

    40 				event.preventDefault();

    41 			});

    42 

    43 			this.window = $( window );

    44 			this.window.on( 'scroll.preview', debounce( function() {

    45 				self.send( 'scroll', self.window.scrollTop() );

    46 			}, 200 ));

    47 

    48 			this.bind( 'scroll', function( distance ) {

    49 				self.window.scrollTop( distance );

    50 			});

    51 		}

    52 	});

    53 

    54 	$( function() {

    55 		api.settings = window._wpCustomizeSettings;

    56 		if ( ! api.settings )

    57 			return;

    58 

    59 		var preview, bg;

    60 

    61 		preview = new api.Preview({

    62 			url: window.location.href,

    63 			channel: api.settings.channel

    64 		});

    65 

    66 		preview.bind( 'settings', function( values ) {

    67 			$.each( values, function( id, value ) {

    68 				if ( api.has( id ) )

    69 					api( id ).set( value );

    70 				else

    71 					api.create( id, value );

    72 			});

    73 		});

    74 

    75 		preview.trigger( 'settings', api.settings.values );

    76 

    77 		preview.bind( 'setting', function( args ) {

    78 			var value;

    79 

    80 			args = args.slice();

    81 

    82 			if ( value = api( args.shift() ) )

    83 				value.set.apply( value, args );

    84 		});

    85 

    86 		preview.bind( 'sync', function( events ) {

    87 			$.each( events, function( event, args ) {

    88 				preview.trigger( event, args );

    89 			});

    90 			preview.send( 'synced' );

    91 		});

    92 

    93 	 	preview.bind( 'active', function() {

    94 	 		if ( api.settings.nonce )

    95 	 			preview.send( 'nonce', api.settings.nonce );

    96 	 	});

    97 

    98 		preview.send( 'ready' );

    99 

   100 		/* Custom Backgrounds */

   101 		bg = $.map(['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) {

   102 			return 'background_' + prop;

   103 		});

   104 

   105 		api.when.apply( api, bg ).done( function( color, image, position_x, repeat, attachment ) {

   106 			var body = $(document.body),

   107 				head = $('head'),

   108 				style = $('#custom-background-css'),

   109 				update;

   110 

   111 			// If custom backgrounds are active and we can't find the

   112 			// default output, bail.

   113 			if ( body.hasClass('custom-background') && ! style.length )

   114 				return;

   115 

   116 			update = function() {

   117 				var css = '';

   118 

   119 				// The body will support custom backgrounds if either

   120 				// the color or image are set.

   121 				//

   122 				// See get_body_class() in /wp-includes/post-template.php

   123 				body.toggleClass( 'custom-background', !! ( color() || image() ) );

   124 

   125 				if ( color() )

   126 					css += 'background-color: ' + color() + ';';

   127 

   128 				if ( image() ) {

   129 					css += 'background-image: url("' + image() + '");';

   130 					css += 'background-position: top ' + position_x() + ';';

   131 					css += 'background-repeat: ' + repeat() + ';';

   132 					css += 'background-position: top ' + attachment() + ';';

   133 				}

   134 

   135 				// Refresh the stylesheet by removing and recreating it.

   136 				style.remove();

   137 				style = $('<style type="text/css" id="custom-background-css">body.custom-background { ' + css + ' }</style>').appendTo( head );

   138 			};

   139 

   140 			$.each( arguments, function() {

   141 				this.bind( update );

   142 			});

   143 		});

   144 	});

   145 

   146 })( wp, jQuery );