(function( wp, $ ){

	if ( ! wp || ! wp.customize ) { return; }

	var api = wp.customize,

		OldPreview;

	/**

	 * wp.customize.WidgetCustomizerPreview

	 *

	 */

	api.WidgetCustomizerPreview = {

		renderedSidebars: {}, // @todo Make rendered a property of the Backbone model

		renderedWidgets: {}, // @todo Make rendered a property of the Backbone model

		registeredSidebars: [], // @todo Make a Backbone collection

		registeredWidgets: {}, // @todo Make array, Backbone collection

		widgetSelectors: [],

		preview: null,

		l10n: {},

		init: function () {

			var self = this;

			this.buildWidgetSelectors();

			this.highlightControls();

			this.preview.bind( 'highlight-widget', self.highlightWidget );

		},

		/**

		 * Calculate the selector for the sidebar's widgets based on the registered sidebar's info

		 */

		buildWidgetSelectors: function () {

			var self = this;

			$.each( this.registeredSidebars, function ( i, sidebar ) {

				var widgetTpl = [

						sidebar.before_widget.replace('%1$s', '').replace('%2$s', ''),

						sidebar.before_title,

						sidebar.after_title,

						sidebar.after_widget

					].join(''),

					emptyWidget,

					widgetSelector,

					widgetClasses;

				emptyWidget = $(widgetTpl);

				widgetSelector = emptyWidget.prop('tagName');

				widgetClasses = emptyWidget.prop('className');

				// Prevent a rare case when before_widget, before_title, after_title and after_widget is empty.

				if ( ! widgetClasses ) {

					return;

				}

				widgetClasses = widgetClasses.replace(/^\s+|\s+$/g, '');

				if ( widgetClasses ) {

					widgetSelector += '.' + widgetClasses.split(/\s+/).join('.');

				}

				self.widgetSelectors.push(widgetSelector);

			});

		},

		/**

		 * Highlight the widget on widget updates or widget control mouse overs.

		 *

		 * @param  {string} widgetId ID of the widget.

		 */

		highlightWidget: function( widgetId ) {

			var $body = $( document.body ),

				$widget = $( '#' + widgetId );

			$body.find( '.widget-customizer-highlighted-widget' ).removeClass( 'widget-customizer-highlighted-widget' );

			$widget.addClass( 'widget-customizer-highlighted-widget' );

			setTimeout( function () {

				$widget.removeClass( 'widget-customizer-highlighted-widget' );

			}, 500 );

		},

		/**

		 * Show a title and highlight widgets on hover. On shift+clicking

		 * focus the widget control.

		 */

		highlightControls: function() {

			var self = this,

				selector = this.widgetSelectors.join(',');

			$(selector).attr( 'title', this.l10n.widgetTooltip );

			$(document).on( 'mouseenter', selector, function () {

				self.preview.send( 'highlight-widget-control', $( this ).prop( 'id' ) );

			});

			// Open expand the widget control when shift+clicking the widget element

			$(document).on( 'click', selector, function ( e ) {

				if ( ! e.shiftKey ) {

					return;

				}

				e.preventDefault();

				self.preview.send( 'focus-widget-control', $( this ).prop( 'id' ) );

			});

		}

	};

	/**

	 * Capture the instance of the Preview since it is private

	 */

	OldPreview = api.Preview;

	api.Preview = OldPreview.extend( {

		initialize: function( params, options ) {

			api.WidgetCustomizerPreview.preview = this;

			OldPreview.prototype.initialize.call( this, params, options );

		}

	} );

	$(function () {

		var settings = window._wpWidgetCustomizerPreviewSettings;

		if ( ! settings ) {

			return;

		}

		$.extend( api.WidgetCustomizerPreview, settings );

		api.WidgetCustomizerPreview.init();

	});

})( window.wp, jQuery );