blockchainExplorer = function(){

  // Init array
  var liste_blocks   = null;
  var flag_nav       = true;
  var classes        = ['bg-grey-even','bg-grey-odd'];
  var cur_class      = 0;
  var cur_height     = [];
  var cur_methode    = 'hasard';
  var isInitSelector = false;

  function precisionRound(number) {
      var precision = 4;
      var factor = Math.pow(10, precision);
      return Math.round((number/100000000) * factor) / factor;
  }

  function getblockNameFromHash(hash)
  {
    var retour = '';
    liste_blocks.forEach(function(item){
      if (hash == item.hash) retour = item.name;
    });
    return retour;
  }

  function getblocHashFromName(name)
  {
    var retour = '';
    liste_blocks.forEach(function(item){
      if (name == item.name) retour = item.hash;
    });
    return retour;
  }

  function addInfoForBlock(block)
  {
    var height = '300px';
    var contenu = '';
    var downloadingImage = new Image();

    cur_height.push(block.height);
    
    cur_class  = 1 - cur_class;

    blockName = getblockNameFromHash(block.hash);
    if (blockName != '') blockName = ' ( '+blockName+' )';
      
    contenu += '      <h2> <span style="font-size:12px">block</span> '+block.height+blockName+'</h2>';
    contenu += '      <table width="100%">';
    //contenu += '       <tr><td>hash</td><td align="right"><b>'+block.hash+'</b></td></tr>';
    //contenu += '       <tr><td>index</td><td align="right"><b>'+block.block_index+'</b></td></tr>';
    contenu += '        <tr><td>timestamp</td><td align="right"><b>'+block.time+'</b></td></tr>';
    contenu += '        <tr><td>nonce</td><td align="right"><b>'+block.nonce+'</b></td></tr>';
    contenu += '        <tr><td>nb tx</td><td align="right"><b>'+block.n_tx+'</b></td></tr>';
    contenu += '        <tr><td>outputs</td><td align="right"><b>'+precisionRound(block.topisto_outputs).toFixed(4)+'</b></td></tr>';
    contenu += '        <tr><td>inputs</td><td align="right"><b>'+precisionRound(block.topisto_inputs).toFixed(4)+'</b></td></tr>';
    contenu += '        <tr><td>fees</td><td align="right"><b>'+precisionRound(block.topisto_fees).toFixed(4)+'</b></td></tr>';
    contenu += '        <tr><td>reward</td><td align="right"><b>'+precisionRound(block.topisto_reward).toFixed(4)+'</b></td></tr>';
    contenu += '      </table>';

    $('#info_'+block.height).html(contenu);

    downloadingImage.onload = function(){
      $('#img_'+block.height).attr('src', this.src);   
      //$('#img_'+block.height).attr('height', height);
      //$('#img_'+block.height).attr('width','auto');
      flag_nav = true;
    };
    downloadingImage.src = 'images/block_image.php?methode='+cur_methode+'&hash='+block.hash;

    return true;
  }

  function addDivForBlock(block_height)
  {
    var contenu = '';

    contenu += '<div id="block_'+block_height+'" class="container-fluid '+classes[cur_class]+'">';
    contenu += '  <div class="row">';
    contenu += '    <div class="col-sm-8" id="info_'+block_height+'">';
    contenu += '      <h2>COMPUTING ...</h2>';
    contenu += '    </div>';
    contenu += '    <div class="col-sm-4 text-right">';
    contenu += '      <div width="100%" class="text-center">';
    contenu += '        <img id="img_'+block_height+'" src="images/loading.gif" class="img-responsive"></img>';
    contenu += '      </div>';
    contenu += '    </div>';
    contenu += '  </div>';
    contenu += '</div>';

    $('#blockchain').append(contenu);

    return true;
  }

  function addDivForVoid()
  {
    var contenu = '';

    contenu += '<div id="the_void" class="container-fluid '+classes[cur_class]+'">';
    contenu += '  <div class="row">';
    contenu += '    <div class="col-sm-8">';
    contenu += '      <h2>the VOID ... </h2>';
    contenu += '    </div>';
    contenu += '    <div class="col-sm-4 text-right">';
    contenu += '      <div width="100%" class="text-center">';
    contenu += '        <img src="images/loading.gif" class="img-responsive"></img>';
    contenu += '      </div>';
    contenu += '    </div>';
    contenu += '  </div>';
    contenu += '</div>';

    $('#blockchain').append(contenu);

    return true;
  }

  function toggleForwardBtn()
  {
    if (cur_height.length < 3)
    {
      $('#fast_forward_btn').removeClass('btn-success');
      $('#fast_forward_btn').addClass('btn-secondary');
      $('#btn-forward').removeClass('btn-info');
      $('#btn-forward').addClass('btn-secondary');
    } else {
      $('#fast_forward_btn').removeClass('btn-secondary');
      $('#fast_forward_btn').addClass('btn-success');
      $('#btn-forward').removeClass('btn-secondary');
      $('#btn-forward').addClass('btn-info');
    }
    return true;      
  }

  function gotoBlock(block_name)
  {
    $(document).scrollTop( $("#explorer").offset().top );
    // Bloquer la navigation pendant le calcul
    if (!flag_nav)
    {
      window.alert('A block image is currently computed, please wait ...');
      return false;
    }
    flag_nav   = false;

    if (block_name == 'NEXT')
    {
      flag_nav   = true;

      // Supprimer un block
      if (cur_height.length < 3)
      {
        window.alert('No Next Block, you are at '+$('#blockSelector').val()+' block !');
        return false;
      }

      liste_blocks['PREVIOUS'] = liste_blocks['BLOCK_'+cur_height[cur_height.length-1]];
      cur_height.pop();
        
      toggleForwardBtn();

      $('#block_'+cur_height[cur_height.length-2]).slideDown(400, function() {
        // Animation complete.
        $('#blockchain').children('div:last').remove();
        cur_class = 1 - cur_class;
      });

    } else {
      // Ajouter un block
      addDivForBlock(cur_height[cur_height.length-1] - 1);

      // Décaler d'un block vers le haut
      if (cur_height.length > 1) $('#block_'+cur_height[cur_height.length-2]).slideUp();

      block_hash = '';
      if (block_name != 'LAST') block_hash = '?block_hash='+liste_blocks[block_name];
      $.getJSON('data/getBlockInfo.php'+block_hash, function( data ) {
        liste_blocks['PREVIOUS'] = data.prev;
        liste_blocks['BLOCK_'+data.height] = data.hash;
        addInfoForBlock(data);

        toggleForwardBtn();
      });
    }

    return true;
  }

  function _ajouterPreviousBlock()
  {
    // Bloquer la navigation pendant le calcul
    if (!flag_nav) return false;
    flag_nav = false;

    // Ajouter un div
    addDivForBlock(cur_height[cur_height.length-1] - 1);
    // Mettre les infos du
    block_hash = '?block_hash='+liste_blocks['PREVIOUS'];
    $.getJSON('data/getBlockInfo.php'+block_hash, function( data ) {
      liste_blocks['PREVIOUS'] = data.prev;
      liste_blocks['BLOCK_'+data.height] = data.hash;
      addInfoForBlock(data);
    });
  }

  function initBlockchain(block_name)
  {
    $(document).scrollTop( $("#explorer").offset().top );
    $('#blockchain').html('');
    cur_height = [];
    cur_class  = 0;
    flag_nav   = true;

    block_hash = '';
    if (block_name != 'LAST') block_hash = '?block_hash='+getblocHashFromName(block_name);
    $.getJSON('data/getBlockInfo.php'+block_hash, function( data ) {
      addDivForBlock(data.height);        
      addInfoForBlock(data);

      liste_blocks['PREVIOUS'] = data.prev;
      if (data.prev != '0000000000000000000000000000000000000000000000000000000000000000')
        gotoBlock('PREVIOUS');
      else 
        addDivForVoid();
    });

    return true;
  }

  function blockSelectorChange()
  {
    initBlockchain($('#blockSelector').val());
    $('#fast_forward_btn').attr('data-original-title', $('#blockSelector').val());
  }

  function initBlockSelector()
  {
    if (!isInitSelector)
    {
      // Init the selector
      var select = $('#blockSelector');
      
      $.each(liste_blocks, function (key, bloc) {
        select.append(new Option(bloc.name, bloc.name));
      });

      isInitSelector = true;
    }
  }

  function _init()
  {
    $.getJSON('data/getKnownBlocksList.php', function( data ) {
      liste_blocks =  data;
      initBlockSelector();
      if (cur_height.length == 0) initBlockchain('LAST');
      return true;
    });
  }

  return {init: _init, ajouterPreviousBlock: _ajouterPreviousBlock};
}();

$(document).ready(function(){
  blockchainExplorer.init();
});