<div class="container-fluid bg-grey">

  <div class="row">

    <div class="col-sm-4">

      <br><img id="logo_ARTICLE" src="images/block_image.php?methode=treemap" width="100%; height: auto"></img>

      <br><p>ARTICLE</p>

    </div>

    <div class="col-sm-8">

      <h2>Blockchain as a Treemap</h2>

      <h4 class="text-justify">Draw a Treemap where each rectangle is a transaction's inputs sum. Then add block's hashes on top and previous block's invert hash on bottom. This way we can draw the blockchain by putting images last's one above the others.</h4>

      <p>That way, we can "see" the Blockchain...</p>

      <p>You can choose an alternative drawing method.

	<select id="selectMethod_ARTICLE" onchange="javascript:DrawLastBlock_ARTICLE()">

          <option value=4>Random method</option>

	  <option value=4>Gradient 2 random colors</option>

	  <option value=1>Grey</option>

	  <option value=2>Mondrian</option>

	  <option value=3>Pink</option>

          <option value=0>Random colors</option>

	</select>

      </p>

      ####BUTTON####

    </div>

  </div>

</div>

<script>

function DrawLastBlock_ARTICLE()

{

  var methode = $("#selectMethod_ARTICLE").val();

  var downloadingImage = new Image();

  downloadingImage.onload = function(){

    $('#logo_ARTICLE').attr('src', this.src);   

  };

  $('#logo_ARTICLE').attr('src','images/loading.gif');

  downloadingImage.src='images/block_image.php?strict=1&methode=treemap&mode='+methode;

  return true;

}

</script>