{% extends "monthplan/base.html" %}
{% load monthplan_templates %}

{% block header %}{% endblock %}
{% block target %}{% endblock %}

{% block content %}

<div id="animation"></div>

<div class="row">
  <div class="col-sm-9">
    <div class="card">
      <div class="card-body">

 <!-- insert this snippet where you want Aladin Lite viewer to appear and after the loading of jQuery -->
  <div id="aladin-lite-div" style="width:800px;height:800px;align=center"></div>
  <!--input id="allwise" type="radio" name="survey" value="P/allWISE/color"><label for="allwise">AllWISE<label-->
   <script type="text/javascript" src="//aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js" charset="utf-8"></script>

    <script type="text/javascript">
           /* survey: "P/DSS2/color", */
           var aladin = A.aladin('#aladin-lite-div', {
              cooFrame: "GAL",
              survey: "P/DSS2/color",
           fov: 2, target: "0. 0.",
              showShareControl: true,
              showCooGrid: false});
             /*
              see http://aladin.u-strasbg.fr/hips/list  for more
              */

           aladin.createImageSurvey("CDS/P/PanSTARRS/DR1/color-z-zg-g","CDS/P/PanSTARRS/DR1/color-z-zg-g", "http://alasky.u-strasbg.fr/Pan-STARRS/DR1/color-z-zg-g",'equatorial',8, {imgFormat: 'jpg'});

              /* aladin.createImageSurvey("XMMrgb","XMMrgb", "http://skies.esac.esa.int/XMM-Newton/EPIC-RGB",'equatorial',8, {imgFormat: 'jpg'}) */
              aladin.getBaseImageLayer().getColorMap().update('rainbow');

           aladin.createImageSurvey("RASS-soft", "RASS-soft", "http://cade.irap.omp.eu/documents/Ancillary/4Aladin/RASS_IM3", 'galactic', 12, {imgFormat: 'jpg'})
           aladin.setImageSurvey(aladin.createImageSurvey("RASS", "RASS", "http://alasky.u-strasbg.fr/RASS", 'equatorial', 12, {imgFormat: 'jpg'}));
           aladin.getBaseImageLayer().getColorMap().update('cubehelix');
           aladin.getBaseImageLayer().getColorMap().reverse('true');
           aladin.setImageSurvey(aladin.createImageSurvey("LAB-NH", "LAB-NH", "http://cade.irap.omp.eu/documents/Ancillary/4Aladin/LAB_NH", 'galactic', 12, {imgFormat: 'jpg'}));
           aladin.setOverlayImageLayer(aladin.createImageSurvey("Planck-HFI", "Planck-HFI", "http://alasky.u-strasbg.fr/PLANCK/R2/HFI_Color_353_545_857", 'galactic', 12, {imgFormat: 'jpg'}));
           aladin.getOverlayImageLayer().setAlpha(0.35);
           aladin.getOverlayImageLayer().getColorMap().reverse('true');

	      aladin.setImageSurvey("CDS/P/PanSTARRS/DR1/color-z-zg-g");
	      aladin.setOverlayImageLayer("");

              aladin.addCatalog(A.catalogFromURL('http://193.232.10.38/static/aladin/pvlabs.vot',
              {name: 'Labels', sourceSize:5, color: 'red', shape: 'circle',
              raField: "col3", decField: "col4",
              displayLabel: true,labelColumn: "col8", labelColor: "red", labelFont: "12px sans-serif",
              onClick: 'showPopup'}));
 

           var simbadhips = A.catalogHiPS('http://axel.u-strasbg.fr/HiPSCatService/Simbad', {color: "#2F4F4F", onClick: 'showPopup', name: 'Simbad'}, null, true);
              aladin.addCatalog(simbadhips);
              simbadhips.hide();

            </script>

      </div>
    </div>
  </div>

  <div class="col-sm-3">
    <div class="card">
      <div class="card-body">

	  <p><div id="tracking"></div></p>

           <h3>Caption:</h3>
	  <p>The circle is one degree in diameter, representing eRosita field of view. Lines show track of the current survey block. Note that the default sky image layer of the <a href="https://panstarrs.stsci.edu/">Pan-STARRS DR1 <span class="glyphicon glyphicon-new-window"></span></a> has sky coverage to the North of declination -30 degree. Switch to <a href="http://archive.stsci.edu/dss/index.html">DSS <span class="glyphicon glyphicon-new-window"></span></a>, <a href="https://old.ipac.caltech.edu/2mass/releases/allsky/">2MASS <span class="glyphicon glyphicon-new-window"></span></a> or <a href="http://wise.ssl.berkeley.edu/sky_coverage.html">AllWISE <span class="glyphicon glyphicon-new-window"></span></a> using radio buttons below to load full sky coverage.</p>

          <h3>Select sky image:</h3>
          <p><input id="DSS" type="radio" name="survey" value="P/DSS2/color"> <label for="DSS">DSS color<label></p>
        <p><input id="DSS-blue" type="radio" name="survey" value="P/DSS2/blue"> <label for="DSS-blue">DSS blue<label></p>
         <p><input id="2MASS" type="radio" name="survey" value="P/2MASS/color"> <label for="2MASS">2MASS<label></p>
	 <p><input id="allwise" type="radio" name="survey" value="P/allWISE/color"> <label for="allwise">AllWISE<label></p>

      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block javascript %}

 <script>
$(document).ready(function(){

var initial_obsid = ''
var request_path='skip';
var arr=[];

ajaxWhereNowTracking();

setInterval(ajaxWhereNowTracking, 1000);

function ajaxWhereNowTracking() {
   $.ajax({
        data: {
          'request_path': request_path,
        },
   url: '/monthplan/wherenow',
dataType: 'json',
success: function (data) {
          if (initial_obsid == ''){
             initial_obsid = data.obsid;
             request_path='load';
             console.log('Set initial_obsid to '+initial_obsid);
          } else if (initial_obsid != '' & initial_obsid != data.obsid) {
             request_path='load';
             console.log(initial_obsid+' != '+data.obsid+' -- REQUEST PATH')
          } else {
             request_path='skip';
             console.log(initial_obsid+' == '+data.obsid+' -- do nothing')
          }

          aladin.gotoRaDec(data.ra, data.dec)

          $('#tracking').html("Tracking "+data.mode+": <b>"+data.target+"</b><br> RA="+data.ra+", Dec="+data.dec+
          ",<br> ObsID: <a href="+data.url+">"+data.obsid+"</a>,<br>"+data.time);

          aladin.removeLayers()
          var overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 1});
          aladin.addOverlay(overlay);
          

        if (typeof arr !== 'undefined') {
           overlay.add(A.polyline(arr))
        }
          
        overlay.add(A.circle(parseFloat(data.ra), parseFloat(data.dec), 0.5, {color: 'cyan'})); 
          
        if(data.path.length > 0){
           arr=[]
           for (i = 0; i < data.path.length; i++) {arr.push([data.path[i].ra, data.path[i].dec]);}
        }

        $('input[name=survey]').change(function() {
            aladin.setImageSurvey($(this).val());
        });

}
      });
}

});
  </script>

{% endblock %}