<div id="thememakers_shortcode_template" class="thememakers_shortcode_template clearfix">
	
	<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">	
	</div><!--/ .one-half-->
	
	<div class="one-half">
		<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 class="one-half">
		<h4 class="label"><?php _e('Latitude', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
		<input type="text" value="40.714623" class="js_shortcode_template_changer data-input" data-shortcode-field="latitude"><br />
		<span class="preset_description">
			<?php _e('Point on which the viewport will be centered. If not given and no markers are defined the viewport defaults to world view.', THEMEMAKERS_THEME_FOLDER_NAME); ?>
		</span>
	</div><!--/ .one-half-->
	
	<div class="one-half">
		<h4 class="label"><?php _e('Longitude', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
		<input type="text" value="-74.006605" class="js_shortcode_template_changer data-input" data-shortcode-field="longitude"><br />
		<span class="preset_description"><?php _e('Same as above but for Latitude ...', THEMEMAKERS_THEME_FOLDER_NAME); ?></span>	
	</div><!--/ .one-half-->
	
	<div class="one-half">
		<h4 class="label"><?php _e('Zoom', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
		 <?php
		 $zoom_array = array();
		 for ($i = 1; $i <= 19; $i++) {
			 $zoom_array[$i] = $i;
		 }
		 ?>
		
		 <select class="js_shortcode_template_changer data-select" data-shortcode-field="zoom">
			 <?php if (!empty($zoom_array)): ?>
				 <?php foreach ($zoom_array as $zoom) : ?>
					 <option <?php echo($zoom == 12 ? 'selected' : '') ?> value="<?php echo $zoom ?>"><?php echo $zoom ?></option>
				 <?php endforeach; ?>
			 <?php endif; ?>
		 </select>
		
		 <span class="preset_description"><?php _e('Zoom value from 1 to 19 where 19 is the greatest and 1 the smallest.', THEMEMAKERS_THEME_FOLDER_NAME); ?></span>	
	</div><!--/ .one-half-->
	
	<div class="one-half">
		<h4 class="label"><?php _e('Enable Scrollwheel', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
		<input type="checkbox" value="0" class="js_shortcode_template_changer js_shortcode_checkbox_self_update data-check" data-shortcode-field="enable_scrollwheel"><br><br>
		<span class="preset_description"><?php _e('Set to false to disable zooming with your mouses scrollwheel.', THEMEMAKERS_THEME_FOLDER_NAME); ?></span>	
	</div><!--/ .one-half-->
	
	<div class="one-half">
		<h4 class="label"><?php _e('Maptype', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
		<select class="js_shortcode_template_changer data-select" data-shortcode-field="map_type">
			<option value="ROADMAP">ROADMAP</option>
			<option value="SATELLITE">SATELLITE</option>
			<option value="HYBRID">HYBRID</option>
			<option value="TERRAIN">TERRAIN</option>
		</select>
	</div><!--/ .one-half-->
	
	<div class="one-half">
		<h4 class="label"><?php _e('Enable Marker', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
		<input type="checkbox" value="0" class="js_shortcode_template_changer js_shortcode_checkbox_self_update data-check" data-shortcode-field="enable_marker"><br><br>
		<span class="preset_description"><?php _e('Set to false to disable display a marker in the viewport.', THEMEMAKERS_THEME_FOLDER_NAME); ?></span>	
	</div><!--/ .one-half-->
	
	<div class="one-half">
		<h4 class="label"><?php _e('Enable Popup', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
		<input type="checkbox" value="0" class="js_shortcode_template_changer js_shortcode_checkbox_self_update data-check" data-shortcode-field="enable_popup"><br><br>
		<span class="preset_description"><?php _e('If true the info window for this marker will be shown when the map finished loading. If html is empty this option will be ignored.', THEMEMAKERS_THEME_FOLDER_NAME); ?></span>	
	</div><!--/ .one-half-->
	
	<div class="one-half">
		<h4 class="label"><?php _e('Html content', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
		<textarea class="js_shortcode_template_changer data-area" data-shortcode-field="content"></textarea>
		<span class="preset_description"><?php _e('Content that will be shown after marker click', THEMEMAKERS_THEME_FOLDER_NAME); ?></span>	
	</div><!--/ .one-half-->

</div><!--/ .thememakers_template_changer-->

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

		});
	</script>
	
</div><!--/ .fullwidth-frame-->



