:javascript

  function progress(value,id) {
    var percent = Math.round(value);
    var bar = document.getElementById("bar_"+id);
    var prog = document.getElementById("progress_"+id);
    bar.style.width = value + '%';
    if (percent == 100){
      prog.style.display = "none";
    };
  }

  var HttpClient = function() {
    this.get = function(aUrl, aCallback) {
    var anHttpRequest = new XMLHttpRequest();
    anHttpRequest.onreadystatechange = function() {
    if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
      aCallback(anHttpRequest.responseText);
    }
      anHttpRequest.open( "GET", aUrl, true );
      anHttpRequest.send( null );
    }
  };  

  var markers = [];

  function renderTask(task_id,model_id,id) {
    var uri = "#{to("/")}" + 'task/?turi=' + task_id;
    var aClient = new HttpClient();
    aClient.get(uri, function(res) {
      var response = JSON.parse(res);
      progress(response['percent'],id);
      if (response['percent'] == 100){
        window.clearInterval(markers[id]);
        $("a#downbutton_"+id).show();
        $("a#detailsbutton_"+id).show();
        //pagePredictions(task_id,model_id,id);
      };
    });
  };
  function simpleTemplating(data) {
    var html = '<ul class=pagination>';
    $.each(data, function(index, item){
      html += '<li>'+ item +'</li>'+'</br>';
    });
    html += '</ul>';
    return html;
  };
  function pagePredictions(task_id,model_id,id){
    //var compounds = #{@compounds_ids};
    //console.log(compounds[id]);
    //var compound = compounds[id];
    button = document.getElementById("detailsbutton_"+id);
    span = button.childNodes[1];
    if (span.className == "glyphicon glyphicon-menu-right"){
      span.className = "glyphicon glyphicon-menu-down";
      $('#data-container_'+id).show();
      $('#pager_'+id).show();
      $('#pager_'+id).pagination({
        dataSource: '#{to("/")}' + 'task/?predictions=' + task_id + '&model=' + model_id ,
        locator: 'predictions',
        totalNumber: #{@compounds.size},
        pageSize: 1,
        showPageNumbers: true,
        showGoInput: true,
        formatGoInput: 'go to <%= input %>',
        formatAjaxError: function(jqXHR, textStatus, errorThrown) {
          $('#data-container_'+id).html(errorThrown);
        },
        /*ajax: {
          beforeSend: function() {
            $('#data-container_'+id).html('Loading content ...');
          }
        },*/
        callback: function(data, pagination) {
          var html = simpleTemplating(data);
          $('#data-container_'+id).html(html);
          //$('#data-container_'+id).height(300);
        }
      });
    } else if (span.className = "glyphicon glyphicon-menu-down"){
      span.className = "glyphicon glyphicon-menu-right";
      $('#data-container_'+id).hide();
      $('#pager_'+id).hide();
    };
  };
%div.well
  %a.btn.btn-warning{:href => to('/predict')}
    %span.glyphicon.glyphicon-menu-left{:aria=>{:hidden=>"true"}}
    New Prediction

  / show file name
  %topline
    %div.row
      %div.col-md-4
        %h3 Batch Prediction Results:
      %div.col-md-8
        %h3= @filename


  - @models.each_with_index do |model,idx|
    - m = Model::Validation.find model unless model == "Cramer"
    - task = @tasks[idx].id
    - predictions = @tasks[idx].predictions["#{model}"]
    #result.panel{:id=>idx}
      %div.row
        %div.col-md-6
          %h5= (model == "Cramer") ? "Oral toxicity (Cramer rules)" : (m.endpoint =~ /Mutagenicity/i ? "Consensus mutagenicity" : "#{m.endpoint} (#{m.species})")
        %div.col-md-6.h5
          %a.btn.btn-default.btn-xs{:id => "detailsbutton_#{idx}", :data=>{:toggle=>"collapse"}, :href=>"javascript:void(0)", :onclick=>"pagePredictions('#{task}','#{model}','#{idx}')", :style=>"display:none;font-size:small;"}
            %span.glyphicon.glyphicon-menu-right
            Details
          %a.btn.btn-default.btn-xs{:id => "downbutton_#{idx}", :href=>"#{to("/predict/csv/#{task}/#{model}/#{@filename}")}", :title=>"download", :style=>"display:none;font-size:small;"}
            %span.glyphicon.glyphicon-download-alt
            CSV
      %div{:id=>"progress_#{idx}", :style=>"width:100%;height:2px;position:relative;background-color:#ccc;"}
        %div{:id=>"bar_#{idx}", :style=>"background-color: #4CAF50;width:10px;height:2px;position:absolute;"}
      - # increase interval timer for large datasets 
      - ctimer = ((@compounds.size/1000) == 0 ? 1000 : ((@compounds.size/1000)*1000))
      :javascript
        var timer = #{ctimer};
        $(document).ready(function(){
          markers[#{idx}] = setInterval(function(){
            renderTask('#{task}','#{model}',#{idx});
          }, timer );
        });
      #data-container{:id=>idx,:style=>"width:100%;"}
      #pager{:id=>idx}