<?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-gradient-picker" id="<?php $this->get( 'id' ); ?>">
<?php
// Generate hidden input for string value
$this->attributes['name']  = "{$this->name}[raw]";
$this->attributes['value'] = isset( $this->value['raw'] ) ? $this->value['raw'] : '0% #FFFFFF, 100% #000000';
?>
	<input type="hidden" <?php $this->html_attributes( array( 'id', 'type' ) ); ?> />
<?php
// Generate hidden input for CSS value
$this->attributes['name']  = "{$this->name}[css]";
$this->attributes['value'] = isset( $this->value['css'] ) ? $this->value['css'] : 'background: url( data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRkZGRkZGOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOiMwMDAwMDA7IiAvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiAvPjwvc3ZnPg== ); background: -webkit-gradient( linear, left top, left bottom, color-stop( 0%, #FFFFFF ), color-stop( 100%, #000000 ) ); background: -moz-linear-gradient( top, #FFFFFF 0%, #000000 100% ); background: -webkit-linear-gradient( top, #FFFFFF 0%, #000000 100% ); background: -o-linear-gradient( top, #FFFFFF 0%, #000000 100% ); background: -ms-linear-gradient( top, #FFFFFF 0%, #000000 100% ); background: linear-gradient( top, #FFFFFF 0%, #000000 100% );';
$this->attributes['class'] = $this->attributes['class'] . ' it-form-field-gradient-picker-css';
?>
	<input type="hidden" <?php $this->html_attributes( array( 'id', 'type' ) ); ?> />
	<div class="classy-gradient-box"></div>
<?php
// Load Javascript assets and initialization if not already loaded
if ( ! defined( 'IT_GRADIENT_PICKER_INITIALIZED' ) ) :

define( 'IT_GRADIENT_PICKER_INITIALIZED', true );

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

$script = '
		$(".it-form-field-gradient-picker > input.it-form-field-gradient-picker-css").each(function(i, e) {
			$(e).next().ClassyGradient({
				gradient: $(e).prev().val(),
				width: 273,
				onChange: function(stringGradient, cssGradient, arrayGradient) {
					$(e).prev().val() == stringGradient || $(e).prev().val(stringGradient);
					$(e).val() == cssGradient || $(e).val(cssGradient).trigger("change");
				}
			});
		});';

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

endif;
?>
</div>
