<?php
/**
 * @version    $Id$
 * @package    IT_Theme_Framework
 * @author     InnoThemes Team <support@innothemes.com>
 * @copyright  Copyright (C) 2012 InnoThemes.com. All Rights Reserved.
 * @license    GNU/GPL v2 or later http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Websites: http://www.innothemes.com
 */

// Filter typography attributes
$typo_attrs = array( 'standard_fonts', 'google_fonts', 'font_size', 'font_unit', 'font_weight', 'font_style', 'font_display' );

foreach ( $typo_attrs as $attr ) {
	$this->{$attr} = apply_filters( "it_form_field_typography_{$attr}_support", $this->{$attr} );
}

// Prepare field name
$name = esc_attr( $this->name );
?>
<div class="it-form-field-typography" id="<?php $this->get( 'id' ); ?>">
<?php
// Support theme customizer
$support = '';

if ( isset( $this->attributes['data-customize-setting-link'] ) ) {
	$support = 'data-customize-setting-link="' . $this->attributes['data-customize-setting-link'] . '"';
}

// Render fields
foreach ( $this->choices as $choice ) :

switch ( $choice ) :

case 'font-face':
case 'font-family':
	// Prepare values
	$this->value['font-type'  ] = isset( $this->value['font-type'  ] ) ? $this->value['font-type'  ] : 'standard';
	$this->value['font-family'] = isset( $this->value['font-family'] ) ? $this->value['font-family'] : 'Verdana, Geneva, sans-serif';
	$this->value['font-google'] = isset( $this->value['font-google'] ) ? $this->value['font-google'] : 'Open Sans';

	if ( 'font-face' == $choice ) :
	?>
	<select autocomplete="off" class="it-form-field-typography-font-type chosen-box" name="<?php esc_attr_e( $name ); ?>[font-type]" onchange="jQuery(this).next().next().next().addClass('hide').next().next().addClass('hide').parent().children('.' + jQuery(this.options[this.selectedIndex]).attr('rel')).next().removeClass('hide');" <?php echo '' . $support; ?>>
		<option value="standard" rel="it-form-field-typography-font-family" <?php selected( $this->value['font-type'], 'standard' ); ?>>
			<?php _e( 'Standard Font', IT_THEME_TEXTDOMAIN ); ?>
		</option>
		<option value="google" rel="it-form-field-typography-font-google" <?php selected( $this->value['font-type'], 'google' ); ?>>
			<?php _e( 'Google Font', IT_THEME_TEXTDOMAIN ); ?>
		</option>
	</select>
	<?php
	endif;

	if ( 'font-face' == $choice || ! in_array( 'font-face', $this->choices ) ) :
	?>
	<select autocomplete="off" class="it-form-field-typography-font-family chosen-box <?php if ( ! selected( $this->value['font-type'], 'standard', false ) ) echo 'hide'; ?>" name="<?php esc_attr_e( $name ); ?>[font-family]" <?php echo '' . $support; ?>>
		<?php foreach ( $this->standard_fonts as $family ) : $shorten = trim( substr( $family, 0, strpos( $family, ',' ) ), "'" ); ?>
		<option class="it-form-field-typography-font-family-<?php esc_attr_e( str_replace( ' ', '-', strtolower( $shorten ) ) ); ?>" value="<?php esc_attr_e( $family ); ?>" <?php selected( $this->value['font-family'], $family ); ?>>
			<?php esc_html_e( $shorten, IT_THEME_TEXTDOMAIN ); ?>
		</option>
		<?php endforeach; ?>
	</select>
	<?php
	endif;

	if ( 'font-face' == $choice ) :
	?>
	<select autocomplete="off" class="it-form-field-typography-font-google chosen-box <?php if ( ! selected( $this->value['font-type'], 'google', false ) ) echo 'hide'; ?>" name="<?php esc_attr_e( $name ); ?>[font-google]" <?php echo '' . $support; ?>>
		<?php foreach ( $this->google_fonts as $family ) : ?>
		<option class="it-form-field-typography-font-google-<?php esc_attr_e( str_replace( ' ', '-', strtolower( $family ) ) ); ?>" value="<?php esc_attr_e( $family ); ?>" <?php selected( $this->value['font-google'], $family ); ?>>
			<?php esc_html_e( $family, IT_THEME_TEXTDOMAIN ); ?>
		</option>
		<?php endforeach; ?>
	</select>
	<?php
	endif;
break;

case 'font-size':
case 'font-unit':
case 'font-weight':
case 'font-style':
case 'font-display':
	// Prepare values
	$this->value['font-size'   ] = isset( $this->value['font-size'   ] ) ? $this->value['font-size'   ] : '12';
	$this->value['font-unit'   ] = isset( $this->value['font-unit'   ] ) ? $this->value['font-unit'   ] : 'px';
	$this->value['font-weight' ] = isset( $this->value['font-weight' ] ) ? $this->value['font-weight' ] : 'normal';
	$this->value['font-style'  ] = isset( $this->value['font-style'  ] ) ? $this->value['font-style'  ] : 'normal';
	$this->value['font-display'] = isset( $this->value['font-display'] ) ? $this->value['font-display'] : 'normal';

	if ( 'font-size' == $choice && empty( $this->font_size ) ) {
		$this->font_size = array();

		for ( $i = 1; $i <= 100; $i += 1 ) {
			$this->font_size[] = $i;
		}
	}

	if ( 'font-display' != $choice || ( ! in_array( 'font-weight', $this->choices ) && ! in_array( 'font-style', $this->choices ) ) ) :
	?>
	<select autocomplete="off" class="it-form-field-typography-<?php esc_attr_e( $choice ); ?> chosen-box" name="<?php esc_attr_e( $name ); ?>[<?php esc_attr_e( $choice ); ?>]" <?php echo '' . $support; ?>>
	<?php
	// Generate name of variable containing supported values
	$key = str_replace( '-', '_', $choice );

	foreach ( $this->{$key} as $value ) :
	?>
		<option value="<?php esc_attr_e( $value ); ?>" <?php selected( $this->value[$choice], $value ); ?>>
			<?php
			esc_html_e( ( 'font-unit' == $choice ) ? $value : ucfirst( $value ), IT_THEME_TEXTDOMAIN );

			if ( 'font-size' == $choice && ! in_array( 'font-unit', $this->choices ) && @isset( $this->default['font-unit'] ) ) :
				esc_html_e( $this->default['font-unit'], IT_THEME_TEXTDOMAIN );
			endif;
			?>
		</option>
	<?php endforeach; ?>
	</select>
	<?php
	endif;
break;

case 'text-color':
	// Prepare values
	$this->value['text-color'] = isset( $this->value['text-color'] ) ? $this->value['text-color'] : '#333333';

	// Instantiate color-picker field then get input
	$field = IT_Form_Field::get_instance(
		array(
			'type'       => 'color-picker',
			'name'       => "{$name}[text-color]",
			'value'      => $this->value['text-color'],
			'attributes' => $this->attributes,
		)
	);

	$field->get( 'input' );
break;

case 'text-effect':
	// Prepare values
	$this->value['shadow-horizontal'] = isset( $this->value['shadow-horizontal'] ) ? $this->value['shadow-horizontal'] : '0';
	$this->value['shadow-vertical'  ] = isset( $this->value['shadow-vertical'  ] ) ? $this->value['shadow-vertical'  ] : '0';
	$this->value['shadow-blur'      ] = isset( $this->value['shadow-blur'      ] ) ? $this->value['shadow-blur'      ] : '0';
	$this->value['shadow-color'     ] = isset( $this->value['shadow-color'     ] ) ? $this->value['shadow-color'     ] : '#eeeeee';
	?>
	<div class="input-append">
		<input class="it-form-field-typography-shadow-horizontal" type="number" size="5" name="<?php esc_attr_e( $name ); ?>[shadow-horizontal]" value="<?php esc_attr_e( $this->value['shadow-horizontal'] ); ?>" <?php echo '' . $support; ?> />
		<span class="btn"><?php _e( 'px', IT_THEME_TEXTDOMAIN ); ?></span>
	</div>
	<div class="input-append">
		<input class="it-form-field-typography-shadow-vertical" type="number" size="5" name="<?php esc_attr_e( $name ); ?>[shadow-vertical]" value="<?php esc_attr_e( $this->value['shadow-vertical'] ); ?>" <?php echo '' . $support; ?> />
		<span class="btn"><?php _e( 'px', IT_THEME_TEXTDOMAIN ); ?></span>
	</div>
	<div class="input-append">
		<input class="it-form-field-typography-shadow-blur" type="number" size="5" name="<?php esc_attr_e( $name ); ?>[shadow-blur]" value="<?php esc_attr_e( $this->value['shadow-blur'] ); ?>" <?php echo '' . $support; ?> />
		<span class="btn"><?php _e( 'px', IT_THEME_TEXTDOMAIN ); ?></span>
	</div>
	<?php
	// Instantiate color-picker field then get input
	$field = IT_Form_Field::get_instance(
		array(
			'type'       => 'color-picker',
			'name'       => "{$name}[shadow-color]",
			'value'      => $this->value['shadow-color'],
			'attributes' => $this->attributes,
		)
	);

	$field->get( 'input' );
break;

endswitch;

endforeach;

// Render hidden value if neccessary
if ( is_array( $this->default ) && count( $this->default ) > count( $this->choices ) ) :

foreach ( $this->default as $key => $value ) :

if ( ! in_array( $key, $this->choices ) ) :
?>
	<input type="hidden" name="<?php esc_attr_e( $name ); ?>[<?php esc_attr_e( $key ); ?>]" value="<?php esc_attr_e( $value ); ?>" <?php echo '' . $support; ?> />
<?php
endif;

endforeach;

endif;

// Load Javascript assets and initialization if not already loaded
if ( ! defined( 'IT_TYPOGRAPHY_INITIALIZED' ) ) :

define( 'IT_TYPOGRAPHY_INITIALIZED', true );

IT_Init_Assets::load( array( 'it-chosen-js', 'it-chosen-css' ) );

$script = '
		$("div.it-form-field-typography select.chosen-box" ).each(function(i, e) {
			!$(e).hasClass("hide") || $(e).removeClass("hide").addClass("unhidden");

			$(e).chosen( {
				disable_search: $(e).hasClass("it-form-field-typography-font-google") ? false : true,
				inherit_select_classes: true
			} );

			!$(e).hasClass("unhidden") || $(e).removeClass("unhidden").addClass("hide").next().addClass("hide");
		});';

IT_Init_Assets::inline( 'js', $script, true );

endif;
?>
</div>
