<div id="thememakers_shortcode_template" class="thememakers_shortcode_template clearfix">
	
	<div class="one-half">
		<h4 class="label"><?php _e('Type', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
		<select class="js_shortcode_template_changer data-select" data-shortcode-field="type" onchange="thememakers_app_shortcodes_video_block(this)">
			<option value="youtube">youtube</option>
			<option value="vimeo">vimeo</option>
			<option value="html5">html5</option>
		</select>
		
	    <div id="youtube_or_vimeo_id_block">
			<h4 class="label"><?php _e('youtube or vimeo id', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
			<input type="text" value="" class="js_shortcode_template_changer data-input" data-shortcode-field="content">
		</div>
		
		<div id="html5_video_block" style="display: none">
			<h4 class="label"><?php _e('MP4 html5 file url', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
			<input type="text" value="" class="js_shortcode_template_changer data-input" data-shortcode-field="html5_video_url" />
			<a title="" class="admin-button button-gray button-medium button_upload ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" href="#">
				<?php _e('Upload', THEMEMAKERS_THEME_FOLDER_NAME); ?>
			</a>

			<h4 class="label"><?php _e('HTML5 poster', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
			<input type="text" value="" class="js_shortcode_template_changer data-input" data-shortcode-field="html5_poster" />
			<a title="" class="admin-button button-gray button-medium button_upload ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" href="#">
				<?php _e('Upload', THEMEMAKERS_THEME_FOLDER_NAME); ?>
			</a>
		</div>
		
	</div><!--/ .one-half-->
	
	<div class="one-half">
		
		<h4 class="label"><?php _e('Width', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
		<input type="text" value="500" class="js_shortcode_template_changer data-input" data-shortcode-field="width">
		
		<h4 class="label"><?php _e('Height', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
		<input type="text" value="500" class="js_shortcode_template_changer data-input" data-shortcode-field="height">
		
	</div><!--/ .one-half-->
	
</div><!--/ .thememakers_shortcode_template-->

<!-- --------------------------  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 ?>";
			jQuery(function() {
				var shortcode_name = "video";
				thememakers_app_shortcodes.changer(shortcode_name);
				jQuery("#thememakers_shortcode_template .js_shortcode_template_changer").on('keyup, change', function() {
					thememakers_app_shortcodes.changer(shortcode_name);
				});
			});

			function thememakers_app_shortcodes_video_block(selector_obj) {
				jQuery("#youtube_or_vimeo_id_block").hide(350);
				jQuery("#html5_video_block").hide(350);

				var val = jQuery(selector_obj).val();

				switch (val) {
					case 'youtube':
					case 'vimeo':
						jQuery("#youtube_or_vimeo_id_block").show(350);
						break;
					default:
						jQuery("#html5_video_block").show(350);
						break
				}


			}


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



