<div id="thememakers_shortcode_column_template" class="thememakers_shortcode_template clearfix">

<a class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" href="javascript:add_shortcode_column_list_item();void(0);"><?php _e('Add Column', THEMEMAKERS_THEME_FOLDER_NAME); ?></a>


</div><!--/ .thememakers_shortcode_column_template-->


<div class="fullwidth thememakers_shortcode_template">
    
    <ul id="shortcode_column_list">
        <li>

            <h4 class="label"><?php _e('Select type', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
            <select class="js_shortcode_template_changer data-select" data-shortcode-field="type">
                <option value="one-third"><?php _e('One Third', THEMEMAKERS_THEME_FOLDER_NAME); ?></option>
				<option value="one-third-last"><?php _e('One Third Last', THEMEMAKERS_THEME_FOLDER_NAME); ?></option>
                <option value="one-fourth"><?php _e('One Fourth', THEMEMAKERS_THEME_FOLDER_NAME); ?></option>
				<option value="one-fourth-last"><?php _e('One Fourth Last', THEMEMAKERS_THEME_FOLDER_NAME); ?></option>
                <option value="one-half"><?php _e('One Half', THEMEMAKERS_THEME_FOLDER_NAME); ?></option>
				<option value="one-half-last"><?php _e('One Half Last', THEMEMAKERS_THEME_FOLDER_NAME); ?></option>
                <option value="two-third"><?php _e('Two Third', THEMEMAKERS_THEME_FOLDER_NAME); ?></option>
				<option value="two-third-last"><?php _e('Two Third Last', THEMEMAKERS_THEME_FOLDER_NAME); ?></option>
                <option value="full-width"><?php _e('Full Width', THEMEMAKERS_THEME_FOLDER_NAME); ?></option>
            </select>

            <h4 class="label"><?php _e('Content', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
            <textarea class="js_shortcode_template_changer data-area" data-shortcode-field="content"></textarea>

        </li>
    </ul>		

</div><!--/ .fullwidth-->


<!-- --------------------------  PROCESSOR  --------------------------- -->

<div class="fullwidth-frame">
	
	<h4 class="label"><?php _e('Preview', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
	
	<?php $frame_uri = Thememakers_Application_Shortcodes::get_application_uri() . "/preview.php"; ?>

	<div class="shortcode_app_frame_block">
		<div class="thememakers_shortcode_info_popup" style="display: none"></div>
		<iframe src="<?php echo $frame_uri ?>" class="shortcode_app_frame" frameborder="1" id="thememakers_shortcode_template_preview"></iframe>
	</div>

	<script type="text/javascript">
		var thememakers_app_shortcodes_preview_url = "<?php echo $frame_uri ?>";
		var shortcode_column_list = null;
		var shortcode_column_list_template = null;
		var shortcode_name = "column";

		jQuery(function() {
			thememakers_app_shortcodes.column_changer(shortcode_name);
			jQuery(".js_shortcode_template_changer").on('keyup, change', function() {
				thememakers_app_shortcodes.column_changer(shortcode_name);
			});

			//***
			shortcode_column_list = jQuery("#shortcode_column_list");
			shortcode_column_list_template = jQuery("#shortcode_column_list li:first-child").html();

		});


	//*****

		function add_shortcode_column_list_item() {
			jQuery(shortcode_column_list).append("<li>" + shortcode_column_list_template + "</li>");
			thememakers_app_shortcodes.column_changer(shortcode_name);
			jQuery(".js_shortcode_template_changer").on('keyup, change', function() {
				thememakers_app_shortcodes.column_changer(shortcode_name);
			});
		}

	</script>
	
</div><!--/ .fullwidth-frame-->


