<?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-color-picker input-group" id="<?php $this->get( 'id' ); ?>">
	<input type="text" <?php $this->html_attributes( array( 'id', 'type' ) ); ?> />
	<span class="input-group-btn">
		<a href="javascript:void(0);" class="btn btn-default btn-sm" title="<?php _e( 'Pick Color', IT_THEME_TEXTDOMAIN ); ?>">...</a>
	</span>
<?php
// Load Javascript assets and initialization if not already loaded
if ( ! defined( 'IT_COLOR_PICKER_INITIALIZED' ) ) :

define( 'IT_COLOR_PICKER_INITIALIZED', true );

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

$script = '
		$(".it-form-field-color-picker > .input-group-btn > a.btn").each(function(i, e) {
			// Set button color
			$(e).css({
				"background-image": "none",
				"text-shadow": "none",
				"background-color": $(e).parent().prev().val(),
				"color": $(e).parent().prev().val()
			}).click(function(event) {
				event.preventDefault();

				$.it_color_picker = $(this).ColorPicker({
					color: $(e).parent().prev().val(),
					onShow: function(color_picker) {
						$(color_picker).fadeIn(500);

						return false;
					},
					onHide: function(color_picker) {
						$(color_picker).fadeOut(500, function() {
							$(color_picker).remove();
							$.it_color_picker.data("colorpicker", null);
 							$.it_color_picker.data("colorpickerId", null);
							delete $.it_color_picker;
						});

						return false;
					},
					onChange: function(hsb, hex, rgb) {
						$(e).parent().prev().val("#" + hex).trigger("change");
						$(e).css({
							"background-color": "#" + hex,
							"color": "#" + hex
						});
					}
				});

				$.it_color_picker.ColorPickerShow();
			});
		});';

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

endif;
?>
</div>
