: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);
      if (model_id == "Cramer"){
        $("img.circle_cramer").show();
      } else if (model_id == "Mazzatorta"){
        $("img.circle_mazza").show();
      }else{
        progress(response['percent'],id);
      }
      if (response['percent'] == 100){
        window.clearInterval(markers[id]);
        $("a#downbutton_"+id).removeClass("disabled");
        $("a#detailsbutton_"+id).removeClass("disabled");
        $("a#detailsbutton_"+id).addClass("btn-success");
        if (model_id == "Cramer"){
          $("img.circle_cramer").hide();
        };
        if (model_id == "Mazzatorta"){
          $("img.circle_mazza").hide();
        };
      };
    });
  };
  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){
    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: 'prediction',
        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).css("min-height", $(window).height() + "px" );
        }
      });
    } 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?tpid=#{@pid}")}
    %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|Mazzatorta/
    - task = @tasks[idx].id
    #result.panel{:id=>idx}
      %div.row
        %div.col-md-6
          - if model =~ /Mazzatorta/
            %h5= "Lowest observed adverse effect level (LOAEL) (Mazzatorta) (Rats)"
          - else
            %h5= (model == "Cramer") ? "Oral toxicity (Cramer rules)" : (m.endpoint =~ /Mutagenicity/i ? "Consensus mutagenicity" : "#{m.endpoint} (#{m.species})")
          #pager{:id=>idx}
        %div.col-md-6.h5
          %a.btn.btn-default.btn-xs.disabled{:id => "detailsbutton_#{idx}", :data=>{:toggle=>"collapse"}, :href=>"javascript:void(0)", :onclick=>"pagePredictions('#{task}','#{model}','#{idx}')", :style=>"font-size:small;"}
            %span.glyphicon.glyphicon-menu-right
            Details
          %a.btn.btn-default.btn-xs.disabled{:id => "downbutton_#{idx}", :href=>"#{to("/predict/csv/#{task}/#{model}/#{@filename}")}", :title=>"download", :style=>"font-size:small;"}
            %span.glyphicon.glyphicon-download-alt
            CSV
      - if model == "Cramer"
        %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle1", :class=>"circle_cramer", :alt=>"wait", :style=>"display:none;"}
      - if model == "Mazzatorta"
        %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle2", :class=>"circle_mazza", :alt=>"wait", :style=>"display:none;"}
      - if model !~ /Cramer|Mazzatorta/
        %div{:id=>"progress_#{idx}", :style=>"width:100%;height:3px;position:relative;background-color:#ccc;"}
          %div{:id=>"bar_#{idx}", :style=>"background-color: #4CAF50;width:10px;height:3px;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(){
          // check button class before execute a task
          if (#{idx} > 0){
            markers[#{idx}] = setInterval(function(){
              var button = document.getElementById("detailsbutton_#{idx-1}");
              if(!button.classList.contains('disabled')){
                renderTask('#{task}','#{model}',#{idx});
              }
            }, timer );
          }else{
            markers[#{idx}] = setInterval(function(){
              renderTask('#{task}','#{model}',#{idx});
            }, timer );
          };
        });
      #data-container{:id=>idx,:style=>"width:100%;"}