<?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
 */
?>
<div class="it-form-field-radio-image<?php if ( $this->inline ) echo '-inline'; ?> it-form" id="<?php $this->get( 'id' ); ?>">
<?php if ( ! $this->inline ) : ?>
	<div class="it-form-field-radio-image-modal input-group">
		<input class="form-control input-sm" type="text" value="<?php esc_attr_e( $this->value ); ?>" disabled="disabled" />
		<input type="hidden" <?php $this->html_attributes( array( 'class', 'id', 'placeholder', 'type' ) ); ?> />
		<span class="input-group-btn">
			<a href="javascript:void(0);" class="btn btn-default btn-sm" title="<?php _e( 'Click to select', IT_THEME_TEXTDOMAIN ); ?>">...</a>
		</span>
	</div>
	<div id="<?php $this->get( 'id' ); ?>-radio-image-modal" class="jsn-bootstrap it-radio-image-modal hidden" title="<?php esc_attr_e( $this->label, IT_THEME_TEXTDOMAIN ); ?>">
		<ul class="thumbnails row-fluid">
			<?php foreach ( $this->choices as $value => $image ) : $label = null; ?>
			<li <?php $this->radio_image_attributes( $image, $label ); ?>>
				<a class="thumbnail<?php if ( $this->value == $value ) echo ' it-form-field-radio-image-selected'; ?>" href="<?php echo '#'; $this->get( 'id' ); echo '::' . $value; ?>">
					<img src="<?php echo esc_url( $image ); ?>" alt="<?php if ( empty( $label ) ) esc_attr_e( basename( $image ) ); else esc_attr_e( $label, IT_THEME_TEXTDOMAIN ); ?>" />
					<?php if ( ! empty( $label ) ) : ?>
					<span class="caption"><?php esc_html_e( $label, IT_THEME_TEXTDOMAIN ); ?></span>
					<?php endif; ?>
				</a>
			</li>
			<?php endforeach; ?>
		</ul>
	</div>
<?php
else :

// Backup original attributes
$original_attrs = $this->attributes;

foreach ( $this->choices as $value => $image ) :

// Count the number of image
$i = isset( $i ) ? $i + 1 : 1;

// Update attributes
$this->attributes['value'] = $value;

if ( $this->value == $value ) {
	$this->attributes['checked'] = 'checked';
}

// Prepare additional attributes
$label = null;

if ( is_array( $image ) ) {
	foreach ( $image as $k => $v ) {
		if ( 'label' == $k ) {
			$label = $v;
		} elseif ( 'image' != $k ) {
			$this->attributes[ $k ] = $v;
		}
	}

	$image = $image['image'];
}

// If image link is relative, prepend root URL
if ( is_string( $image ) && strpos( $image, '://' ) === false ) {
	if ( @is_file( IT_THEME_PATH . "/{$image}" ) ) {
		$image = IT_THEME_URI . "/{$image}";
	} else {
		$image = site_url( $image );
	}
}
?>
	<div class="pull-left<?php if ($this->image_per_row > 0 && $i % $this->image_per_row == 1) echo ' clear'; ?>">
		<div class="hide">
			<label class="radio-inline">
				<input <?php $this->html_attributes( array( 'id', 'placeholder' ) ); ?> />
				<?php esc_html_e( $label, IT_THEME_TEXTDOMAIN ); ?>
			</label>
		</div>
		<img src="<?php echo esc_url( $image ); ?>" alt="<?php if ( empty( $label ) ) esc_attr_e( $this->attributes['value'] ); else esc_attr_e( $label, IT_THEME_TEXTDOMAIN ); ?>" title="<?php if ( empty( $label ) ) esc_attr_e( $this->attributes['value'] ); else esc_attr_e( $label ); ?>" class="it-thumbnail<?php if ( isset( $this->attributes['checked'] ) ) echo ' it-form-field-radio-image-selected'; ?>" />
	</div>
<?php
// Trigger click event if option is selected
if ( isset( $this->attributes['onclick'] ) && isset( $this->attributes['checked'] ) ) {
	$script = '
		$(window).load(function() {
			$("#' . $this->get( 'id', null, true ) . ' img.it-form-field-radio-image-selected").trigger("click");
		});';

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

// Restore original attributes
$this->attributes = $original_attrs;

endforeach;
?>
	<div class="clear"></div>
<?php
endif;

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

define( 'IT_RADIO_IMAGE_INITIALIZED', true );

IT_Init_Assets::load( 'it-radio-image-js', 'wp-jquery-ui-dialog-css' );

$script = '
		// Init popup radio image
		$.IT_RadioImageInline();

		new $.IT_RadioImageModal();';

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

endif;
?>
</div>
