jQuery( document ).ready( function($) {

	// Responsive switchers
	$( '.customize-control .responsive-switchers button' ).on( 'click', function( event ) {

		// Set up variables
		var $this 		= $( this ),
			$devices 	= $( '.responsive-switchers' ),
			$device 	= $( event.currentTarget ).data( 'device' ),
			$control 	= $( '.customize-control.has-switchers' ),
			$body 		= $( '.wp-full-overlay' ),
			$footer_devices = $( '.wp-full-overlay-footer .devices' );

		// Button class
		$devices.find( 'button' ).removeClass( 'active' );
		$devices.find( 'button.preview-' + $device ).addClass( 'active' );

		// Control class
		$control.find( '.control-wrap' ).removeClass( 'active' );
		$control.find( '.control-wrap.' + $device ).addClass( 'active' );
		$control.removeClass( 'control-device-desktop control-device-tablet control-device-mobile' ).addClass( 'control-device-' + $device );

		// Wrapper class
		$body.removeClass( 'preview-desktop preview-tablet preview-mobile' ).addClass( 'preview-' + $device );

		// Panel footer buttons
		$footer_devices.find( 'button' ).removeClass( 'active' ).attr( 'aria-pressed', false );
		$footer_devices.find( 'button.preview-' + $device ).addClass( 'active' ).attr( 'aria-pressed', true );

		// Open switchers
		if ( $this.hasClass( 'preview-desktop' ) ) {
			$control.toggleClass( 'responsive-switchers-open' );
		}

	} );

	// If panel footer buttons clicked
	$( '.wp-full-overlay-footer .devices button' ).on( 'click', function( event ) {

		// Set up variables
		var $this 		= $( this ),
			$devices 	= $( '.customize-control.has-switchers .responsive-switchers' ),
			$device 	= $( event.currentTarget ).data( 'device' ),
			$control 	= $( '.customize-control.has-switchers' );

		// Button class
		$devices.find( 'button' ).removeClass( 'active' );
		$devices.find( 'button.preview-' + $device ).addClass( 'active' );

		// Control class
		$control.find( '.control-wrap' ).removeClass( 'active' );
		$control.find( '.control-wrap.' + $device ).addClass( 'active' );
		$control.removeClass( 'control-device-desktop control-device-tablet control-device-mobile' ).addClass( 'control-device-' + $device );

		// Open switchers
		if ( ! $this.hasClass( 'preview-desktop' ) ) {
			$control.addClass( 'responsive-switchers-open' );
		} else {
			$control.removeClass( 'responsive-switchers-open' );
		}

	} );

} );
! function(t, n) {
    n.sectionConstructor["wp-deep-blue-link"] = n.Section.extend({
        attachEvents: function() {},
        isContextuallyActive: function() {
            return !0
        }
    })
}(jQuery, wp.customize);

wp.customize.controlConstructor[ 'wp-deep-blue-page-repeater' ] = wp.customize.Control.extend({

	ready: function() {

		'use strict';

		var control = this;

		var getValue = function(){

			var value = control.setting.get();
			if( '' == value ){
				return [];
			}

			try{
				value = JSON.parse( value );
			}catch(err){
				value = [];
			}

			return value;
		}

		var getIndex = function(){
			return control.container.find('select').length;
		}

		this.container.on( 'change', 'select', function() {
			var value = getValue();
			var index = jQuery( this ).next().data( 'index' );
			value.splice( index, 1, jQuery( this ).val() );
			control.setting.set( JSON.stringify( value ) );
		});

		this.container.on( 'click', '.page-repeater-add', function( e ){
			e.preventDefault();
			var index = getIndex(),
				limit = jQuery( this ).data( 'limit' );

			if( index <= limit ){
				var h = control.container.find( '.page-repeater-template' ).html();
				h = h.replace( '{#index}', index );
				control.container.find( '.page-repeater-selectors' ).append(h);
			}else{
				var pro_text = jQuery( this ).data( 'pro-text' );
				var pro_link = jQuery( this ).data( 'pro-link' );
				//Replace add button with pro text and pro link later
			}
			console.log( limit, index );
			if( index >= limit ){
				jQuery( this ).hide();
			}

		});

		this.container.on( 'click', '.page-repeater-remove', function( e ){
			e.preventDefault();
			var index = jQuery(this).data('index'),
				limit = jQuery( this ).data( 'limit' );

			jQuery( this ).parent().remove();

			control.container.find( '.page-repeater-selectors .page-repeater-remove' ).each(function(i){
				jQuery(this).data( 'index', i );
			});

			var value = getValue();
			value.splice( index, 1);
			control.setting.set( JSON.stringify( value ) );

			if( index < limit ){
				jQuery( '.page-repeater-add' ).show();
			}
		});
	}
});
wp.customize.controlConstructor['wp-deep-blue-slider'] = wp.customize.Control.extend({

	ready: function() {

		'use strict';

		var control = this,
			desktop_slider 			= control.container.find( '.slider.desktop-slider' ),
			desktop_slider_input 	= desktop_slider.next( '.slider-input' ).find( 'input.desktop-input' ),
			tablet_slider 			= control.container.find( '.slider.tablet-slider' ),
			tablet_slider_input 	= tablet_slider.next( '.slider-input' ).find( 'input.tablet-input' ),
			mobile_slider 			= control.container.find( '.slider.mobile-slider' ),
			mobile_slider_input 	= mobile_slider.next( '.slider-input' ).find( 'input.mobile-input' ),
			slider_input,
			$this,
			val;
		// Desktop slider
		desktop_slider.slider( {
			range: 'min',
			value: desktop_slider_input.val(),
			min: +desktop_slider_input.attr( 'min' ),
			max: +desktop_slider_input.attr( 'max' ),
			step: +desktop_slider_input.attr( 'step' ),
			slide: function( event, ui ) {
				desktop_slider_input.val( ui.value ).keyup();
			},
	        change: function( event, ui ){
	            control.settings['desktop'].set( ui.value );
	        }
		} );

		// Tablet slider
		tablet_slider.slider( {
			range: 'min',
			value: tablet_slider_input.val(),
			min: +tablet_slider_input.attr( 'min' ),
			max: +tablet_slider_input.attr( 'max' ),
			step: +desktop_slider_input.attr( 'step' ),
			slide: function( event, ui ) {
				tablet_slider_input.val( ui.value ).keyup();
			},
	        change: function( event, ui ){ 
	            control.settings['tablet'].set( ui.value );
	        }
		} );

		// Mobile slider
		mobile_slider.slider( {
			range: 'min',
			value: mobile_slider_input.val(),
			min: +mobile_slider_input.attr( 'min' ),
			max: +mobile_slider_input.attr( 'max' ),
			step: +desktop_slider_input.attr( 'step' ),
			slide: function( event, ui ) {
				mobile_slider_input.val( ui.value ).keyup();
			},
	        change: function( event, ui ){ 
	            control.settings['mobile'].set( ui.value );
	        }
		} );

		// Update the slider when the number value change
		jQuery( 'input.desktop-input' ).on( 'change keyup paste', function() {
			$this 			= jQuery( this );
			val 			= $this.val();
			slider_input 	= $this.parent().prev( '.slider.desktop-slider' );

			slider_input.slider( 'value', val );
		} );

		jQuery( 'input.tablet-input' ).on( 'change keyup paste', function() {
			$this 			= jQuery( this );
			val 			= $this.val();
			slider_input 	= $this.parent().prev( '.slider.tablet-slider' );

			slider_input.slider( 'value', val );
		} );

		jQuery( 'input.mobile-input' ).on( 'change keyup paste', function() {
			$this 			= jQuery( this );
			val 			= $this.val();
			slider_input 	= $this.parent().prev( '.slider.mobile-slider' );

			slider_input.slider( 'value', val );
		} );

		// Save the values
		control.container.on( 'change keyup paste', '.desktop input', function() {
			control.settings['desktop'].set( jQuery( this ).val() );
		} );

		control.container.on( 'change keyup paste', '.tablet input', function() {
			control.settings['tablet'].set( jQuery( this ).val() );
		} );

		control.container.on( 'change keyup paste', '.mobile input', function() {
			control.settings['mobile'].set( jQuery( this ).val() );
		} );

	}

});


( function( $, api ) {

	api.controlConstructor['wp-deep-blue-toggle'] = api.Control.extend( {

		ready: function() {
			var control = this;

			this.container.on( 'change', 'input:checkbox', function() {
				value = this.checked ? true : false;
				control.setting.set( value );
			} );
		}
   
	} );

} )( jQuery, wp.customize );