<?php

declare( strict_types=1 );

namespace Rooster\Modules\Admin;

use Rooster\Core\Modules;
use Rooster\Modules\Abilities\Changes;

defined( 'ABSPATH' ) || exit;

final class SiteStyle {

	public const SLUG   = 'rooster-site-style';
	public const SCHEMA = 'rooster-site-style@1';

	
	public const KEYS = [
		'design'     => [ 'button_color', 'shape', 'site_width', 'content_width', 'shop_view', 'gallery_thumbs', 'gallery_arrows' ],
		'typography' => [ 'body_font', 'heading_font', 'font_host' ],
		'general'    => [ 'part_header', 'part_footer', 'header_icon_color', 'menu_overlay', 'menu_source', 'phone_nav', 'glass', 'glass_menu_opacity', 'appearance_default' ],
	];

	public static function boot(): void {
		add_action( 'admin_menu', [ self::class, 'menu' ] );
		add_action( 'admin_post_rooster_site_style', [ self::class, 'handle' ] );
		add_action( 'admin_enqueue_scripts', [ self::class, 'assets' ] );
	}

	public static function menu(): void {
		add_theme_page( __( 'Site style', 'ai-eshop-optimizer' ), __( 'Site style', 'ai-eshop-optimizer' ), 'edit_theme_options', self::SLUG, [ self::class, 'render' ] );
	}

	public static function assets( string $hook ): void {
		if ( 'appearance_page_' . self::SLUG === $hook ) {
			wp_enqueue_style( 'wp-color-picker' );
			wp_enqueue_script( 'wp-color-picker' );
			
			wp_register_style( 'rooster-site-style', false, [], ROOSTER_VERSION );
			wp_enqueue_style( 'rooster-site-style' );
			wp_add_inline_style( 'rooster-site-style', self::css() );
		}
	}

	

	
	public static function current(): array {
		$active = get_option( 'rooster_active_variations', [] );
		$out    = [ 'colors' => (string) ( ( is_array( $active ) ? $active : [] )['colors'] ?? 'default' ) ];
		foreach ( self::KEYS as $group => $keys ) {
			foreach ( $keys as $key ) {
				$out[ $group ][ $key ] = rooster_setting( $group, $key );
			}
		}
		$out['typography_variation'] = self::active_typography();
		return $out;
	}

	
	private static function active_typography(): string {
		$active = get_option( 'rooster_active_variations', [] );
		$slug   = sanitize_key( (string) ( ( is_array( $active ) ? $active : [] )['typography'] ?? '' ) );
		return isset( self::files( 'typography' )[ $slug ] ) ? $slug : '';
	}

	
	private static function files( string $kind ): array {
		if ( method_exists( \Rooster\Core\Setup::class, 'variation_files' ) ) {
			return \Rooster\Core\Setup::variation_files( $kind );
		}
		$out = [];
		foreach ( glob( get_template_directory() . '/styles/' . $kind . '/*.json' ) ?: [] as $file ) {
			$out[ basename( $file, '.json' ) ] = $file;
		}
		return $out;
	}

	
	public static function font_pairs(): array {
		$out = [];
		foreach ( self::files( 'typography' ) as $slug => $file ) {
			$data         = json_decode( (string) file_get_contents( $file ), true ); 
			$out[ $slug ] = (string) ( is_array( $data ) && isset( $data['title'] ) ? $data['title'] : $slug );
		}
		return $out;
	}

	
	public static function schemes(): array {
		$theme = \WP_Theme_JSON_Resolver::get_theme_data()->get_settings()['color']['palette']['theme'] ?? [];
		$out   = [ 'default' => [ 'title' => __( 'The theme\'s colours', 'ai-eshop-optimizer' ), 'swatches' => self::swatches( (array) $theme ) ] ];
		foreach ( self::files( 'colors' ) as $file ) { 
			$data = json_decode( (string) file_get_contents( $file ), true ); 
			$out[ basename( $file, '.json' ) ] = [ 'title' => (string) ( $data['title'] ?? basename( $file, '.json' ) ), 'swatches' => self::swatches( (array) ( $data['settings']['color']['palette'] ?? [] ) ) ];
		}
		return $out;
	}

	
	private static function swatches( array $palette ): array {
		$by = array_column( $palette, 'color', 'slug' );
		return array_values( array_filter( [ $by['bg'] ?? '', $by['fg'] ?? '', $by['accent-2'] ?? ( $by['accent'] ?? '' ) ] ) );
	}

	
	public static function clean( array $input ): array {
		$out     = [ 'colors' => isset( self::schemes()[ (string) ( $input['colors'] ?? '' ) ] ) ? (string) $input['colors'] : 'default' ];
		foreach ( self::KEYS as $group => $keys ) {
			$out[ $group ] = array_intersect_key( Settings::sanitize( $group, (array) ( $input[ $group ] ?? [] ) ), array_flip( $keys ) );
		}
		
		$pair                        = is_scalar( $input['typography_variation'] ?? null ) ? sanitize_key( (string) $input['typography_variation'] ) : '';
		$out['typography_variation'] = isset( self::files( 'typography' )[ $pair ] ) ? $pair : '';
		return $out;
	}

	
	public static function ops( array $style ): array {
		$ops = [];
		foreach ( array_keys( self::KEYS ) as $group ) {
			$ops[] = [ 'type' => 'settings', 'args' => [ 'group' => $group, 'values' => $style[ $group ] ] ];
		}
		
		
		$slug = $style['colors'];
		if ( 'default' === $slug ) {
			$color = \WP_Theme_JSON_Resolver::get_theme_data()->get_settings()['color'] ?? [];
			$data  = [ 'settings' => [ 'color' => [ 'palette' => [ 'theme' => array_values( (array) ( $color['palette']['theme'] ?? [] ) ) ], 'duotone' => [ 'theme' => array_values( (array) ( $color['duotone']['theme'] ?? [] ) ) ] ] ] ];
		} else {
			[ $data ] = Changes::variation( (array) json_decode( (string) file_get_contents( self::files( 'colors' )[ $slug ] ), true ) ); 
		}
		$active           = get_option( 'rooster_active_variations' );
		$active           = is_array( $active ) ? $active : [ 'colors' => 'default', 'typography' => 'system' ];
		$active['colors'] = $slug;
		$ops[]            = [ 'type' => 'global_styles', 'args' => [ 'data' => $data, 'replace' => [ 'settings.color.palette', 'settings.color.duotone' ] ] ];
		
		$pair  = (string) ( $style['typography_variation'] ?? '' );
		$files = self::files( 'typography' );
		if ( '' !== $pair && isset( $files[ $pair ] ) && $pair !== self::active_typography() ) {
			[ $fonts, $replace ] = Changes::variation( (array) json_decode( (string) file_get_contents( $files[ $pair ] ), true ) ); 
			$ops[]               = [ 'type' => 'global_styles', 'args' => [ 'data' => $fonts, 'replace' => $replace ] ];
			$active['typography'] = $pair;
		}
		$ops[] = [ 'type' => 'option', 'args' => [ 'name' => 'rooster_active_variations', 'value' => $active ] ];
		return $ops;
	}

	

	public static function handle(): void {
		if ( ! current_user_can( 'edit_theme_options' ) ) {
			wp_die( esc_html__( 'Sorry, you are not allowed to change the site style.', 'ai-eshop-optimizer' ), 403 );
		}
		check_admin_referer( 'rooster_site_style' );
		Modules::load( 'abilities/changes' );
		$do    = sanitize_key( (string) wp_unslash( $_POST['do'] ?? 'preview' ) ); 
		$input = (array) wp_unslash( $_POST['style'] ?? [] ); 
		if ( 'import' === $do ) {
			$file   = $_FILES['config']['tmp_name'] ?? ''; 
			$parsed = is_uploaded_file( (string) $file ) ? json_decode( (string) file_get_contents( (string) $file ), true ) : null; 
			if ( ! is_array( $parsed ) || self::SCHEMA !== ( $parsed['$schema'] ?? '' ) ) {
				wp_safe_redirect( add_query_arg( [ 'page' => self::SLUG, 'notice' => 'bad-file' ], admin_url( 'themes.php' ) ) );
				exit;
			}
			$input = $parsed;
			$do    = 'preview';
		}
		$style = self::clean( $input );
		if ( 'export' === $do ) {
			nocache_headers();
			header( 'Content-Type: application/json; charset=utf-8' );
			header( 'Content-Disposition: attachment; filename="site-style-' . sanitize_file_name( wp_parse_url( home_url(), PHP_URL_HOST ) ?: 'site' ) . '.json"' );
			echo wp_json_encode( [ '$schema' => self::SCHEMA ] + $style, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE ); 
			exit;
		}
		$draft = Changes::draft( 'site-style', $style, self::ops( $style ), __( 'Site style', 'ai-eshop-optimizer' ) );
		if ( 'save' === $do ) {
			$applied = Changes::apply( $draft['change_id'] );
			$args    = [ 'page' => self::SLUG, 'notice' => is_wp_error( $applied ) ? 'failed' : 'saved' ];
		} else {
			$args = [ 'page' => self::SLUG, 'draft' => $draft['change_id'] ];
		}
		if ( ! empty( $_POST['ajax'] ) ) { 
			wp_send_json( [ 'draft' => $args['draft'] ?? '', 'preview' => add_query_arg( Changes::QUERY, $args['draft'] ?? 'off', home_url( '/' ) ) ] );
		}
		wp_safe_redirect( add_query_arg( $args, admin_url( 'themes.php' ) ) );
		exit;
	}

	

	public static function render(): void {
		Modules::load( 'abilities/changes' );
		$draft_id = isset( $_GET['draft'] ) ? preg_replace( '/[^a-zA-Z0-9]/', '', (string) wp_unslash( $_GET['draft'] ) ) : ''; 
		$draft    = $draft_id ? Changes::get_draft( $draft_id ) : null;
		$style    = $draft ? (array) $draft['input'] : self::current();
		$notice   = sanitize_key( (string) wp_unslash( $_GET['notice'] ?? '' ) ); 
		$fields   = Settings::fields();
		$preview  = add_query_arg( Changes::QUERY, $draft ? $draft_id : 'off', home_url( '/' ) );
		Chrome::ensure();
		rooster_admin_page_open( __( 'Site style', 'ai-eshop-optimizer' ), [
			'icon'        => 'palette',
			'description' => __( 'Every look-and-feel choice of the site in one place. Changes show in the preview for you only; Save makes them the style every visitor gets. With no visitor controls ticked, visitors cannot change it.', 'ai-eshop-optimizer' ),
			'class'       => 'rooster-style',
		] );
		$messages = [
			'saved'    => [ 'success', __( 'Saved: every visitor now gets this style. The change log can undo it.', 'ai-eshop-optimizer' ) ],
			'failed'   => [ 'error', __( 'The style could not be saved; nothing changed.', 'ai-eshop-optimizer' ) ],
			'bad-file' => [ 'error', __( 'That file is not a site style config (rooster-site-style@1).', 'ai-eshop-optimizer' ) ],
		];
		if ( isset( $messages[ $notice ] ) ) {
			printf( '<div class="notice notice-%s"><p>%s</p></div>', esc_attr( $messages[ $notice ][0] ), esc_html( $messages[ $notice ][1] ) );
		}
		echo '<div class="rooster-style__layout"><form class="rooster-style__form" method="post" enctype="multipart/form-data" action="' . esc_url( admin_url( 'admin-post.php' ) ) . '">';
		wp_nonce_field( 'rooster_site_style' );
		echo '<input type="hidden" name="action" value="rooster_site_style">';

		
		
		foreach ( self::sections() as $key => [ $legend, $group, $keys, $icon ] ) {
			rooster_admin_card_open( Chrome::PRODUCT . '/design/site-style/' . $key, $legend, [ 'dom_id' => 'style=' . $key, 'icon' => $icon ] );
			echo '<fieldset class="rooster-style__fieldset"><legend class="screen-reader-text">' . esc_html( $legend ) . '</legend><div class="rooster-admin-fields rooster-admin-fields--stacked">';
			if ( 'colours' === $key ) {
				echo '<div class="rooster-admin-field rooster-admin-field--radio"><div class="rooster-admin-field__label"><span>' . esc_html__( 'Colour scheme', 'ai-eshop-optimizer' ) . '</span></div><div class="rooster-admin-field__control"><div class="rooster-admin-checks rooster-style__schemes">';
				foreach ( self::schemes() as $slug => $scheme ) {
					
					$dots = implode( '', array_map( static fn ( $c ) => '<svg viewBox="0 0 18 18" aria-hidden="true" focusable="false"><circle cx="9" cy="9" r="8.5" fill="' . esc_attr( $c ) . '"/></svg>', $scheme['swatches'] ) );
					printf( '<label class="rooster-admin-check rooster-style__scheme"><input type="radio" name="style[colors]" value="%s" %s><span class="rooster-style__dots">%s</span> %s</label>', esc_attr( $slug ), checked( $style['colors'] ?? 'default', $slug, false ), $dots, esc_html( $scheme['title'] ) ); 
				}
				echo '</div></div></div>';
			}
			if ( 'fonts' === $key && [] !== self::font_pairs() ) {
				
				echo '<div class="rooster-admin-field rooster-admin-field--select"><div class="rooster-admin-field__label"><label for="rooster-style-typography-variation">' . esc_html__( 'Font pair', 'ai-eshop-optimizer' ) . '</label></div><div class="rooster-admin-field__control"><select id="rooster-style-typography-variation" name="style[typography_variation]">';
				foreach ( [ '' => __( 'Keep the site\'s', 'ai-eshop-optimizer' ) ] + self::font_pairs() as $slug => $title ) {
					printf( '<option value="%s" %s>%s</option>', esc_attr( (string) $slug ), selected( (string) ( $style['typography_variation'] ?? '' ), (string) $slug, false ), esc_html( $title ) );
				}
				echo '</select></div><p class="rooster-admin-field__help">' . esc_html__( 'One of the theme\'s typography variations, applied when it changes. A text or heading font chosen below covers it.', 'ai-eshop-optimizer' ) . '</p></div>';
			}
			self::fields_html( $group, $keys, $fields, $style );
			echo '</div></fieldset>';
			rooster_admin_card_close();
		}

		echo '<div class="rooster-admin-actions rooster-style__actions">';
		echo '<button class="rooster-admin-button" name="do" value="preview">' . esc_html__( 'Preview', 'ai-eshop-optimizer' ) . '</button>'; 
		echo '<button class="rooster-admin-button rooster-admin-button--primary" name="do" value="save">' . esc_html__( 'Save for every visitor', 'ai-eshop-optimizer' ) . '</button>';
		echo '<button class="rooster-admin-button" name="do" value="export">' . esc_html__( 'Export config file', 'ai-eshop-optimizer' ) . '</button></div>';
		echo '<div class="rooster-admin-actions rooster-admin-actions--quiet rooster-style__import"><label class="rooster-admin-actions__label" for="rooster-style-config">' . esc_html__( 'Import a config file', 'ai-eshop-optimizer' ) . '</label><input type="file" id="rooster-style-config" name="config" accept="application/json,.json" class="rooster-admin-file"><button class="rooster-admin-button" name="do" value="import">' . esc_html__( 'Import and preview', 'ai-eshop-optimizer' ) . '</button></div>';
		echo '</form>';

		$devices = '<span class="rooster-admin-segmented rooster-style__devices"><button type="button" class="rooster-admin-segmented__btn" data-width="1440" data-device="desktop">' . esc_html__( 'Computer', 'ai-eshop-optimizer' ) . '</button><button type="button" class="rooster-admin-segmented__btn" data-width="390" data-device="mobile">' . esc_html__( 'Phone', 'ai-eshop-optimizer' ) . '</button></span>';
		echo '<div class="rooster-style__preview">';
		rooster_admin_card_open( '', __( 'Preview', 'ai-eshop-optimizer' ), [ 'icon' => 'app-window', 'meta' => $devices, 'class' => 'rooster-style__previewcard' ] );
		printf( '<div class="rooster-style__frame"><iframe title="%s" src="%s"></iframe></div>', esc_attr__( 'Preview', 'ai-eshop-optimizer' ), esc_url( $preview ) );
		rooster_admin_card_close();
		echo '</div></div>'; 
		rooster_admin_page_close();
		self::inline_assets();
	}

	
	public static function sections(): array {
		return [
			'colours'  => [ __( 'Colours', 'ai-eshop-optimizer' ), 'design', [ 'button_color', 'shape' ], 'sun-moon', __( 'The colour scheme, the button colour and the corners of every element', 'ai-eshop-optimizer' ) ],
			'fonts'    => [ __( 'Fonts', 'ai-eshop-optimizer' ), 'typography', [ 'body_font', 'heading_font', 'font_host' ], 'pencil-line', __( 'The text and heading fonts, and where their files come from', 'ai-eshop-optimizer' ) ],
			'layout'   => [ __( 'Layout', 'ai-eshop-optimizer' ), 'design', [ 'site_width', 'content_width' ], 'layout-dashboard', __( 'The site width and the width of the page content', 'ai-eshop-optimizer' ) ],
			'header'   => [ __( 'Header and footer', 'ai-eshop-optimizer' ), 'general', [ 'part_header', 'part_footer', 'header_icon_color' ], 'rows-3', __( 'The header and footer variants and the icon colour', 'ai-eshop-optimizer' ) ],
			'phones'   => [ __( 'Phones', 'ai-eshop-optimizer' ), 'general', [ 'menu_overlay', 'menu_source', 'phone_nav', 'glass', 'glass_menu_opacity' ], 'sliders-horizontal', __( 'The phone menu and its source, the phone bar and the glass effect', 'ai-eshop-optimizer' ) ],
			'shop'     => [ __( 'Shop', 'ai-eshop-optimizer' ), 'design', [ 'shop_view', 'gallery_thumbs', 'gallery_arrows' ], 'shopping-cart', __( 'The shop view, the product gallery thumbnails and arrows', 'ai-eshop-optimizer' ) ],
			'visitors' => [ __( 'Visitors', 'ai-eshop-optimizer' ), 'general', [ 'appearance_default' ], 'users', __( 'The theme until visitors choose (the controls they get are the header\'s actions)', 'ai-eshop-optimizer' ) ],
		];
	}

	
	private static function fields_html( string $group, array $keys, array $fields, array $style ): void {
		foreach ( $keys as $key ) {
			$field = $fields[ $group ][ $key ] ?? null;
			if ( ! $field ) {
				continue;
			}
			$name  = 'style[' . $group . '][' . $key . ']';
			$value = $style[ $group ][ $key ] ?? rooster_setting( $group, $key );
			$id    = 'rooster-style-' . $group . '-' . str_replace( '_', '-', $key );
			
			$label = in_array( $field['type'], [ 'select', 'color' ], true ) ? '<label for="' . esc_attr( $id ) . '">' . esc_html( $field['label'] ) . '</label>' : '<span>' . esc_html( $field['label'] ) . '</span>';
			echo '<div class="rooster-admin-field rooster-admin-field--' . esc_attr( (string) $field['type'] ) . '"><div class="rooster-admin-field__label">' . $label . '</div><div class="rooster-admin-field__control">'; 
			switch ( $field['type'] ) {
				case 'select':
					echo '<select id="' . esc_attr( $id ) . '" name="' . esc_attr( $name ) . '">';
					foreach ( $field['options'] as $opt => $label ) {
						printf( '<option value="%s" %s>%s</option>', esc_attr( (string) $opt ), selected( (string) $value, (string) $opt, false ), esc_html( $label ) );
					}
					echo '</select>';
					break;
				case 'multicheck':
					echo '<input type="hidden" name="' . esc_attr( $name ) . '[]" value=""><div class="rooster-admin-checks">';
					foreach ( $field['options'] as $opt => $label ) {
						printf( '<label class="rooster-admin-check"><input type="checkbox" name="%s[]" value="%s" %s> %s</label>', esc_attr( $name ), esc_attr( $opt ), checked( in_array( $opt, (array) $value, true ), true, false ), esc_html( $label ) );
					}
					echo '</div>';
					break;
				case 'color':
					printf( '<input type="text" id="%s" name="%s" value="%s" class="rooster-color" data-default-color="">', esc_attr( $id ), esc_attr( $name ), esc_attr( (string) $value ) );
					break;
				case 'checkbox':
					printf( '<input type="hidden" name="%s" value="0">', esc_attr( $name ) );
					printf( '<label class="rooster-admin-check"><input type="checkbox" name="%s" value="1" %s> %s</label>', esc_attr( $name ), checked( (bool) $value, true, false ), esc_html__( 'On', 'ai-eshop-optimizer' ) );
					break;
			}
			echo '</div>';
			if ( ! empty( $field['help'] ) ) {
				echo '<p class="rooster-admin-field__help">' . esc_html( (string) $field['help'] ) . '</p>';
			}
			echo '</div>';
		}
	}

	
	private static function css(): string {
		return '.rooster-style__layout { display: grid; grid-template-columns: minmax(20rem, 27rem) 1fr; gap: 1.25rem; align-items: start; }'
			. '.rooster-style__form { min-width: 0; }'
			
			. '.rooster-style__fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }'
			. '.rooster-style__form select { width: 100%; max-width: 100%; }'
			. '.rooster-style__scheme { margin: 0; }'
			. '.rooster-style__dots { display: inline-flex; }'
			. '.rooster-style__dots svg { width: 18px; height: 18px; margin-inline-end: -4px; }'
			. '.rooster-style__dots circle { stroke: var(--ra-border); stroke-width: 1px; }'
			. '.rooster-style__preview { position: sticky; top: var(--rooster-style-top, 100px); min-width: 0; }'
			. '.rooster-style__previewcard { margin-bottom: 0; }'
			. '.rooster-style__frame { position: relative; overflow: hidden; width: 100%; height: calc(100vh - var(--rooster-style-top, 100px) - 6.5rem); border: 1px solid var(--ra-border); border-radius: 6px; background: var(--ra-card); }'
			. '.rooster-style__frame iframe { position: absolute; top: 0; left: 0; width: 1440px; height: 100%; border: 0; transform-origin: 0 0; }'
			. '@media (max-width: 960px) { .rooster-style__layout { grid-template-columns: 1fr; } .rooster-style__preview { position: static; } }';
	}

	
	private static function inline_assets(): void {
		?>
		<script>
		( function () {
			var form = document.querySelector( '.rooster-style__form' ), frame = document.querySelector( '.rooster-style__frame' ), iframe = frame.querySelector( 'iframe' ), width = 1440, timer;
			function fit() {
				// The preview sits under the chrome's sticky bar: its top and the frame's height follow the bar.
				var bar = document.querySelector( '.rooster-admin-stickytop' );
				document.documentElement.style.setProperty( '--rooster-style-top', ( bar ? Math.round( parseFloat( getComputedStyle( bar ).top ) + bar.offsetHeight ) + 12 : 46 ) + 'px' );
				var scale = Math.min( 1, frame.clientWidth / width );
				iframe.style.width = width + 'px';
				iframe.style.height = ( frame.clientHeight / scale ) + 'px';
				iframe.style.left = Math.max( 0, ( frame.clientWidth - width * scale ) / 2 ) + 'px';
				iframe.style.transform = 'scale(' + scale + ')';
			}
			// The site serves phones their own page (one DOM per device class), so the phone view asks for it with a
			// cookie the theme honours for editors only; it goes when this page closes.
			function device( name ) {
				document.cookie = 'rooster_device=' + name + '; path=/; SameSite=Lax' + ( name ? '' : '; max-age=0' );
			}
			device( '' );
			document.querySelectorAll( '.rooster-style__devices [data-width]' ).forEach( function ( b, i, all ) {
				b.setAttribute( 'aria-pressed', i ? 'false' : 'true' );
				b.addEventListener( 'click', function () {
					all.forEach( function ( o ) { o.setAttribute( 'aria-pressed', o === b ? 'true' : 'false' ); } );
					width = +b.dataset.width;
					device( b.dataset.device );
					fit();
					iframe.contentWindow.location.reload();
				} );
			} );
			window.addEventListener( 'pagehide', function () { device( '' ); } );
			window.addEventListener( 'resize', fit );
			fit();
			function preview() {
				var data = new FormData( form );
				data.set( 'do', 'preview' );
				data.set( 'ajax', '1' );
				data.delete( 'config' );
				// The form has a field named "action", which form.action would return instead of the URL.
				fetch( form.getAttribute( 'action' ), { method: 'POST', body: data, credentials: 'same-origin' } ).then( function ( r ) { return r.json(); } ).then( function ( j ) {
					if ( j.preview ) iframe.src = j.preview;
				} );
			}
			form.addEventListener( 'change', function ( e ) {
				if ( e.target.name === 'config' ) return;
				clearTimeout( timer );
				timer = setTimeout( preview, 500 );
			} );
			if ( window.jQuery && jQuery.fn.wpColorPicker ) {
				jQuery( '.rooster-color' ).wpColorPicker( { change: function () { clearTimeout( timer ); timer = setTimeout( preview, 800 ); }, clear: function () { clearTimeout( timer ); timer = setTimeout( preview, 300 ); } } );
			}
		} )();
		</script>
		<?php
	}
}