{% extends "three_d_viewer/sample_detail.html" %}

{% block load %}
function load(){
  window.addEventListener('resize', resizeCanvas, false);
  resizeCanvas();

  var sampleFilename = '{{ mineral.model_filename|escapejs }}';

  if (sampleFilename.trim() == "")
  {
    document.getElementById("progress").innerHTML = "No model defined!";
    return;
  }

  request = new XMLHttpRequest();
  request.open("GET", '{{ MEDIA_URL }}' + sampleFilename, true);
  request.overrideMimeType("text/plain; charset=x-user-defined");
  request.onreadystatechange = function(){
    if (this.readyState == 3 || this.readyState == 4){
      document.getElementById("progress").innerHTML = "Downloading... "
        + formatNumber(this.responseText.length / 1048576, 2) + " MB";
    }
    if (this.readyState == 4 && (this.status == 200 || this.status == 0) ){
      document.getElementById("progress").innerHTML = "Unpacking...";
      setTimeout(loaded, 1);
    }
  }
  request.send();
}
{% endblock load %}

{%  block menu_header %}Select a Mineral{%  endblock %}

{% block sample_detail %}
    <div id="mineralContainer">
        <div id="mineralOne">
            <h1 class="subHeadings">{{  mineral.name }}</h1>
            <h2 class="theoryHeadings">Physical properties</h2>
            <table class="theoryHeadings">
                  <tr>
                    <td><p>Chemical Formula:</p></td>
                    <td><p>{{ mineral.chemical_formula|safe }}</p></td>
                  </tr>
                  <tr>
                    <td><p>Hardness:</p></td>
                    <td><p>{{ mineral.hardness }}</p></td>
                  </tr>
                  <tr>
                    <td><p>Specific Gravity:</p></td>
                    <td><p>{{ mineral.specific_gravity }}</p></td>
                  </tr>
                  <tr>
                    <td><p>Cleavage/Fracture:</p></td>
                    <td><p>{{ mineral.cleavage_fracture }}</p></td>
                  </tr>
                  <tr>
                    <td><p>Lustre:</p></td>
                    <td><p>{{ mineral.lustre }}</p></td>
                  </tr>
                  <tr>
                    <td><p>Colour:</p></td>
                    <td><p>{{ mineral.colour }}</p></td>
                  </tr>
                  <tr>
                    <td><p>Streak:</p></td>
                    <td><p>{{ mineral.streak }}</p></td>
                  </tr>
                  <tr>
                    <td><p>Habit:</p></td>
                    <td><p>{{ mineral.habit }}</p></td>
                  </tr>
                  <tr>
                    <td><p>Crystallography:</p></td>
                    <td><p>{{ mineral.crystallography }}</p></td>
                  </tr>
            </table>
            <h2 class="theoryHeadings">Diagnostic features</h2>
            <p>{{ mineral.identifying_features }}</p>
            <h2 class="theoryHeadings">Geological significance</h2>
            <p>{{ mineral.occurance }}</p>
        </div>
    </div>
{% endblock %}