function new_hotspot_editor_settings_page()
{
    $semantic = WP_PLUGIN_URL . '/vocabulary-plugin/css/semantic.css';
    $missions = get_missions();
    $domains = get_domains();
    ?>
<link rel="stylesheet" type="text/css" href="<?php 
    echo $semantic;
    ?>
"/>
<h2>Create a new hotspot!</h2>
<hr>
<style type="text/css">
	.new_pano_form{
		width:85%;
		margin: 0px auto;
	}
</style>
<form method="post" enctype="multipart/form-data" action="<?php 
    echo get_admin_url() . 'admin-post.php';
    ?>
">
    <!-- pano processing hook -->
    <input type="hidden" name="action" value="create_new_hotspot" />
    <div class="ui form segment new_pano_form">
	    <div class="ui form">
	      <div class="field">
	        <label for="mission_id">Select a Mission</label>
	        <select name="mission_id">
                 <?php 
    foreach ($missions as $mission) {
        ?>
                    <option value="<?php 
        echo $mission->mission_id;
        ?>
"><?php 
        echo $mission->name;
        ?>
</option>
                 <?php 
    }
    ?>
            </select>
	      </div>
	    </div>

        <div class="ui form">
	      <div class="field">
	        <label for="hotspot_domain_id">Select a Domain</label>
	        <select name="hotspot_domain_id">
				 <option value="NA">...</option>
                 <?php 
    foreach ($domains as $domain) {
        ?>
                    <option value="<?php 
        echo $domain->id;
        ?>
"><?php 
        echo $domain->name;
        ?>
</option>
                <?php 
    }
    ?>
			</select>
	      </div>
	    </div>

	    <div class="ui form">
	      <div class="field">
	        <label for="hotspot_description">Hotspot Description</label>
	        <textarea name="hotspot_description" required ></textarea>
	      </div>
	    </div>

        <div class="ui form">
          <div class="field">
            <input type="checkbox" name="hotspot_icon" checked="true" />Apply image to hotspot
          </div>
        </div>

	    <?php 
    submit_button();
    ?>

</form>
</div>
<?php 
}
function new_hotspot_settings_page()
{
    $semantic = WP_PLUGIN_URL . '/panomanager/css/semantic.css';
    $missions = get_missions();
    $types = get_types();
    $domains = get_domains();
    ?>
<link rel="stylesheet" type="text/css" href="<?php 
    echo $semantic;
    ?>
"/>
<h2>Create a new hotspot!</h2>
<hr>
<style type="text/css">
	#wpfooter{
		display: none;
	}

	#file_input {
	    border: 1px solid #cccccc;
	    padding: 5px;
	}

	.new_pano_form{
		width:85%;
		margin: 0px auto;
	}
</style>
<form method="post" enctype="multipart/form-data" action="<?php 
    echo get_admin_url() . 'admin-post.php';
    ?>
">
    <!-- pano processing hook -->
    <input type="hidden" name="action" value="create_new_hotspot" />
    <div class="ui form segment new_pano_form">
	    <div class="ui form">
	      <div class="field">
	        <label for="mission_id">Select a Mission</label>
	        <select name="mission_id">
                 <?php 
    foreach ($missions as $mission) {
        ?>
                    <option value="<?php 
        echo $mission->mission_id;
        ?>
"><?php 
        echo $mission->name;
        ?>
</option>
                 <?php 
    }
    ?>
            </select>
	      </div>
	    </div>
	    <div class="ui form">
	      <div class="field">
            <label for="hotspot_name">Hotspot Name</label>
            <input type="text" name="hotspot_name" id="name" placeholder="Fun Hotspot" required />
	      </div>
	    </div>
	    <div class="ui form">
	      <div class="field">
	        <label for="hotspot_menu_name">Hotspot Menu Name</label>
            <input type="text" name="hotspot_menu_name" id="name" placeholder="Find Hotspot" required />
	      </div>
	    </div>
	    <div class="ui form">
	      <div class="field">
	        <label for="hotspot_description">Hotspot Description</label>
	        <textarea name="hotspot_description" required ></textarea>
	      </div>
	    </div>
	    <div class="ui form">
	      <div class="field">
	        <label for="hotspot_info">Hotspot Info</label>
	        <textarea name="hotspot_info" required ></textarea>
	      </div>
	    </div>
	    <div class="ui form">
	      <div class="field">
	        <label for="hotspot_xml">Hotspot XML</label>
	        <textarea name="hotspot_xml" required ></textarea>
	      </div>
	    </div>
	    <div class="ui form">
	      <div class="field">
	        <label for="hotspot_action_xml">Hotspot Action XMl</label>
	        <textarea name="hotspot_action_xml" required ></textarea>
	      </div>
	    </div>
	    <div class="ui form">
	      <div class="field">
            <label for="hotspot_points">Points</label>
            <input type="number" name="hotspot_points" id="hotspot_points" placeholder="10" required />
	      </div>
	    </div>
	    <div class="ui form">
	      <div class="field">
            <label for="hotspot_attempts">Attempts</label>
            <input type="number" name="hotspot_attempts" id="hotspot_attempts" placeholder="1" required />
	      </div>
	    </div>
	    <div class="ui form">
	      <div class="field">
	        <label for="type_id">Select a Type</label>
	        <select name="type_id">
                 <?php 
    foreach ($types as $type) {
        ?>
					 <option value="<?php 
        echo $type->id;
        ?>
"><?php 
        echo $type->name;
        ?>
</option>
				 <?php 
    }
    ?>
			</select>
	      </div>
	    </div>
	    <div class="ui form">
	      <div class="field">
	        <label for="hotspot_domain_id">Select a Domain</label>
	        <select name="hotspot_domain_id">
				 <option value="NA">...</option>
                 <?php 
    foreach ($domains as $domain) {
        ?>
					<option value="<?php 
        echo $domain->id;
        ?>
"><?php 
        echo $domain->name;
        ?>
</option>
  				 <?php 
    }
    ?>
			</select>
	      </div>
	    </div>
	    <div class="ui form">
	      <div class="field">
	        <label for="hotspot_modal_url">Hotspot Modal Url</label>
	        <input type="text" name="hotspot_modal_url" id="hotspot_modal_url" placeholder="" value="" required />
	      </div>
	    </div>
	    <?php 
    submit_button();
    ?>
	</div>
</form>
</div>
<?php 
}
function edit_hotspot_settings_page()
{
    $semantic = WP_PLUGIN_URL . '/panomanager/css/semantic.css';
    $missions = get_missions();
    $types = get_types();
    $domains = get_domains();
    $hotspot = null;
    $show_type_edit = false;
    if (isset($_GET['id']) && is_numeric($_GET['id'])) {
        $hotspot = build_hotspot($_GET['id']);
    }
    $hotspot_menu = $hotspot->is_menu_item();
    $hotspot_type_id = $hotspot->get_type_id();
    $hotspot_type_row = get_hotspot_type($hotspot_type_id);
    $hotspot_type = $hotspot_type_row->name;
    if ($hotspot_type == "website" || $hotspot_type == "image" || $hotspot_type == "video" || $hotspot_type == "oppia") {
        $show_type_edit = true;
    }
    ?>

<link rel="stylesheet" type="text/css" href="<?php 
    echo $semantic;
    ?>
"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style type="text/css">
  #wpfooter{
    display: none;
  }

  #file_input {
    border: 1px solid #cccccc;
    padding: 5px;
  }

  .new_pano_form{
    width:85%;
    margin: 0px auto;
  }
</style>
<script type="text/javascript">
  jQuery('#form').ready(function(){
    // Hiding oppia id on startup
    jQuery('#oppia_input').hide();

    // Displaying oppia id or hotspot url input
    //  according to radio button selection
    jQuery('.url_type').change(function(){
      if(jQuery('#oppia').is(':checked')){
        jQuery('#hotspot_url').val('');
        jQuery('#website_input').hide();
        jQuery('#oppia_input').show();
        jQuery('#oppia_id').focus();
      } else {
        jQuery('#oppia_id').val('');
        jQuery('#oppia_input').hide();
        jQuery('#website_input').show();
        jQuery('#hotspot_url').focus();
      }
    });

    // Changing hotspot type value
    //  according to user selection
    jQuery('.url_type').change(function(){
      if(jQuery('#website').is(':checked')){
        jQuery('#hotspot_type').val('website');
      }
      else if(jQuery('#image').is(':checked')){
        jQuery('#hotspot_type').val('image');
      }
      else if(jQuery('#video').is(':checked')){
        jQuery('#hotspot_type').val('video');
      }
      else if(jQuery('#oppia').is(':checked')){
        jQuery('#hotspot_type').val('oppia');
      } else {
        jQuery('#hotspot_type').val('url');
      }
    });

    // Displaying hotspot zoom if user chooses
    //  visible hotspot
    jQuery('#hotspot_icon').change(function(){
      if(jQuery(this).is(':checked')){
        jQuery('#zoom_input').show();
        jQuery('#size_input').show();
      } else {
        jQuery('#hotspot_zoom').prop('checked', false);
        jQuery('#zoom_input').hide();
        jQuery('#size_value').val(125);
        jQuery('#size_input').hide();
      }
    });

    // Displaying hotspot menu name input
    //  if user chooses to be visible
    jQuery('#hotspot_menu').change(function(){
      if(jQuery(this).is(':checked')){
        jQuery('#menu_name_input').show();
      } else{
        jQuery('#hotspot_menu_name').val('');
        jQuery('#menu_name_input').hide();
      }
    });

    // Updating hotspot size value according to slide
    jQuery('#hotspot_size').on('input', function(){
      jQuery('#size_value').val(jQuery(this).val());
    });
  });
</script>
<h2>Edit a Hotspot!</h2>
<hr>

<?php 
    if (isset($_GET['settings-saved'])) {
        ?>
<div class="updated"><p>Hotspot updated successfully.</p></div>
<?php 
    } elseif (isset($_GET['error'])) {
        ?>
<div class="error"><p>Error updating hotspot.</p></div>
<?php 
    }
    ?>

<form id="form" method="post" enctype="multipart/form-data" action="<?php 
    echo get_admin_url() . 'admin-post.php';
    ?>
">
  <!-- pano processing hook -->
  <input type="hidden" name="action" value="edit_hotspot" />
  <input type="hidden" name="hotspot_id" value="<?php 
    echo $hotspot->get_id();
    ?>
" />
  <input type="hidden" name="mission_id" value="<?php 
    echo $hotspot->get_mission_id();
    ?>
"/>
  <input type="hidden" name="hotspot_domain_id" value="<?php 
    echo $hotspot->get_domain_id();
    ?>
"/>
  <input type="hidden" id="hotspot_type" name="hotspot_type" value="<?php 
    echo $hotspot_type;
    ?>
" />
  <textarea style="display:none;" name="hotspot_xml" > <?php 
    echo $hotspot->get_xml();
    ?>
 </textarea>
  <textarea style="display:none;" name="hotspot_action_xml" > <?php 
    echo $hotspot->get_action_xml();
    ?>
</textarea>
  <div class="ui form segment new_pano_form">
    <div class="ui form">
      <div class="field">
        <label for="hotspot_name">Hotspot Name</label>
        <input type="text" name="hotspot_name" id="name" value="<?php 
    echo $hotspot->get_name();
    ?>
" required />
      </div>
    </div>
    <div class="ui form">
      <div class="field">
        <label for="hotspot_info">Hotspot Info</label>
        <textarea name="hotspot_info" required > <?php 
    echo $hotspot->get_hotspot_info();
    ?>
 </textarea>
      </div>
    </div>
    <div class="ui form">
      <div class="field">
        <label for="hotspot_menu">
          <input type="checkbox" id="hotspot_menu" name="hotspot_menu" <?php 
    echo $hotspot_menu ? 'checked' : '';
    ?>
 />
          <span>Show hotspot on the menu</span>
        </label>
      </div>
    </div>
    <div class="ui form">
      <div class="field">
        <label for="hotspot_menu_name">Hotspot Menu Text</label>
        <input type="text" name="hotspot_menu_name" id="name" value="<?php 
    echo $hotspot->get_menu_name();
    ?>
" required />
      </div>
    </div>

    <?php 
    if ($show_type_edit) {
        ?>
    <p>Type of URL</p>
    <div class="ui form">
      <div class="field">
        <label for="website">
          <input type="radio" class="url_type" name="url_type" id="website" value="website" <?php 
        echo $hotspot_type == 'website' ? 'checked' : '';
        ?>
 />
          <span>Website</span>
        </label>
        <label for="image">
          <input type="radio" class="url_type" name="url_type" id="image" value="image" <?php 
        echo $hotspot_type == 'image' ? 'checked' : '';
        ?>
 />
          <span>Image</span>
        </label>
        <label for="video">
          <input type="radio" class="url_type" name="url_type" id="video" value="video" <?php 
        echo $hotspot_type == 'video' ? 'checked' : '';
        ?>
 />
          <span>Video</span>
        </label>
        <label for="oppia">
          <input type="radio" class="url_type" name="url_type" id="oppia" value="oppia" <?php 
        echo $hotspot_type == 'oppia' ? 'checked' : '';
        ?>
 />
          <span>Oppia</span>
        </label>
      </div>
    </div>
    <div id="website_input" class="ui form">
      <div class="field">
        <label for="hotspot_url">Hotspot URL</label>
        <input type="text" id="hotspot_url" name="hotspot_url" />
      </div>
    </div>
    <div id="oppia_input" class="ui form">
      <div class="field">
        <label for="oppia_id">Oppia ID</label>
        <input type="text" id="oppia_id" name="oppia_id" />
      </div>
    </div>
    <?php 
    }
    ?>

    <div class="ui form">
      <div class="field">
        <label for="hotspot_points">Hotspot Points</label>
        <input type="number" name="hotspot_points" id="hotspot_points" value="<?php 
    echo $hotspot->get_points();
    ?>
" required />
      </div>
    </div>
    <div class="ui form">
      <div class="field">
        <label for="hotspot_icon">
          <input type="checkbox" id="hotspot_icon" name="hotspot_icon" checked />
          <span>Make hotspot icon visible</span>
        </label>
      </div>
    </div>
    <div id="size_input" class="ui form">
      <div class="field">
        <label for="hotspot_size">
          <span>Hotspot size</span>
          <input type="range" id="hotspot_size" name="hotspot_size" min="1" max="500" step="1" value="125" />
          <output for="hotspot_size" id="size_value">125</output>
          <span> px</span>
        </label>
      </div>
    </div>
    <div id="zoom_input" class="ui form">
      <div class="field">
        <label for="hotspot_zoom">
          <input type="checkbox" id="hotspot_zoom" name="hotspot_zoom" checked />
          <span>Hotspot icon zoom with panorama</span>
        </label>
      </div>
    </div>
    <div class="ui form">
      <div class="field">
        <label for="max_attempts">Maximum number of attempts (0 for unlimited)</label>
        <input type="number" name="max_attempts" id="max_attempts" value="<?php 
    echo $hotspot->get_attempts();
    ?>
" required />
      </div>
    </div>
    <?php 
    submit_button();
    ?>
  </div>
</form>

<?php 
}
function pano_mission_settings_page()
{
    $missions = get_missions();
    $semantic = WP_PLUGIN_URL . '/panomanager/css/semantic.css';
    $new_mission_url = admin_url() . "admin.php?page=new_mission_settings";
    $edit_missoin_url = admin_url() . "admin.php?page=edit_mission_settings";
    ?>

<!-- style sheet so our admin page looks nice -->
<link rel="stylesheet" type="text/css" href="<?php 
    echo $semantic;
    ?>
"/>
<p>Manage your missions!</p>
<hr>

<?php 
    if (isset($_GET['settings-saved'])) {
        ?>
    <div class="updated"><p>Settings updated successfully.</p></div>
<?php 
    }
    ?>

<h2>Missions</h2>
<table id="missionTable" class="ui table segment tablesorter">
    <thead>
      <tr>
        <th>Mission</th>
        <th>Mission Info</th>
        <th>Language Code</th>
        <th>Pano</th>
        <th>Domain</th>
        <th>Edit</th>
        <th>Delete</th>
      </tr>
    </thead>

    <tbody>
        <?php 
    foreach ($missions as $mission) {
        ?>
            <?php 
        $current_mission = build_mission($mission->mission_id);
        ?>
            <tr>
                <td><?php 
        echo $current_mission->get_name();
        ?>
</td>
                <td><?php 
        echo $current_mission->get_description();
        ?>
</td>
                <td><?php 
        echo $current_mission->get_language();
        ?>
</td>
                <td><?php 
        echo $mission->pano_name;
        ?>
</td>
                <td><?php 
        echo $current_mission->get_domain_name();
        ?>
</td>
                <td><a class="ui blue icon button" href="<?php 
        echo $edit_missoin_url;
        ?>
&id=<?php 
        echo $current_mission->get_id();
        ?>
" style="padding: 7px">Edit</a></td>
                <td>
                    <form method="post" action="admin-post.php" id="delete_mission_form<?php 
        echo $current_mission->get_id();
        ?>
">
                        <!-- pano processing hook -->
                        <input type="hidden" name="action" value="delete_mission" />
                        <input type="hidden" name="mission_id" value="<?php 
        echo $current_mission->get_id();
        ?>
" />

                        <input type="submit" class="ui blue icon button" value="Delete" style="padding: 7px" >
                    </form>
                </td>
            </tr>
        <?php 
    }
    ?>
    </tbody>
</table>
<a class="ui blue icon button" href="<?php 
    echo $new_mission_url;
    ?>
" style="padding: 7px">New Mission</a>
</div>

<script>
    jQuery(document).ready(function(){
        jQuery("#missionTable").tablesorter();
    })
</script>

<?php 
}
<?php

require 'db.php';
$db = database_connection();
$pano_id = $_GET['pano_id'];
$missions = get_missions($db, $pano_id);
$domains = get_domains($db);
$semantic = "../wp-content/plugins/panomanager/css/semantic.css";
$point_x = $_GET['point_x'];
$point_y = $_GET['point_y'];
$deck_id = $_GET['deck_id'];
$item_id = $_GET['item_id'];
$mission_id = $pano_id;
$hotspot_type = "";
if ($deck_id) {
    $game_type = get_deck_type($db, $deck_id);
    $hotspot_type = "game";
} else {
    if ($item_id) {
        $game_type = "item";
        $hotspot_type = "item";
    } else {
        $game_type = "url";
        $hotspot_type = "url";
    }
}
?>

<!DOCTYPE html>
<html lang="en">
  <head>