#spotted_plate_id{:style => 'display:none'}
  =@spotted_plate.id

#navigator
  #navigator_tpl
    #labels{:context => 'labels'}
      %h3 Labels
      %ol
        %li{:context => 'all'}
          =link_to('${tag_name}','#', :class=>'tag_link')
  =link_to('Reset filters','#', :id => "reset_filters")
  
#filters 
  #tags
    %h3 Labels
    %ol
      %li
        =link_to('${tag_name}','#', :class=>'tag_link')

  #peptides_above_identity_treshhold
    
    
%table{:style => "width:600px"}
  %thead
    %tr
      %td.first
      %th Name
      %th Order
      %th Spot
      %th{:title => 'Peptides with ion score'} IS
      %th{:title => 'Peptides above homology threshold'}  Hom
      %th{:title => 'Peptides above identity threshold'} Id
      %td Tags
      /%td Mw
      /%td pl
  %tbody#template
    %tr{:id => "protein_${id}", :class => "protein_line pline${spot}"}
      %td=check_box_tag('protein', '${id}', false, :name => "protein_${id}")
      %td ${label}
      %td ${order_name}
      %td ${spot}
      %td ${peptides_with_ions_score}
      %td ${peptides_above_homology_threshold}
      %td ${peptides_above_identity_threshold}
      %td ${tag_list}
      /%td Mw
      /%td pl
    %tr{:class => "pline${spot} protein_comments", :id => "protein_${id}_comments"}
      %td.first
      %td{:colspan => 10}
        %table
          %tr{:class => "protein_comment", :context => 'comments'}
            %td
              %small
                Comment:
                ${commenter_name}(${date}): ${comment}
    %tr{:id => "protein_${id}_info", :class => "protein_info pline${spot}", :style => 'display:none'}
      %td.first
      %td{:colspan => 10}
        %p ${description}
        %form{:method => :post, :action => "/protein_hits/update/${id}", :id => "form_\#{}"}
          .input_block
            %label Comment:
            %input{:type => :text, :name => "protein[comment]", :value => "${comment_text}", :class => :comment_field }
          .input_block
            %label Tags:
            %input{:type => :text, :name => "protein[tags]", :value => "${tag_list}", :class => :tags_field}
          %button{:type => :submit} submit

%style
  :sass

    .odd
      :background-color #e8e173
    .even
      :background-color #EFFADA
    label
      :width 100px
      :display block
      :float left
    #navigator
      :width 200px
      :float left
      :height 500px
    .protein_comments
      :font-style italic

:javascript
  j(document).ready(function(){

    Page = {
      line_template : j('.protein_line:first').html(),
      comments_template : j('.protein_comments:first').html(),
      info_template : j('.protein_info:first').html(),
      
      spotted_plate_id : j.trim(j('#spotted_plate_id').text()),
      
      init : function(){
        j.getJSON("/spotted_plates/"+Page.spotted_plate_id+"/protein_hits_json", function(data){
          Page.protein_hits.list = data;
        });
        return false;
      },
      
      draw_table : function(){
        j('#template').fillTemplate(Page.protein_hits.list);
      },
      
      colorize_table : function(){
        var darks = ""; var lights = "";
        previous_spot = "";
        current_color = 'light';
        j(".protein_line").each(function(i, id){
          cls = j(id).attr('class').split(" ")[1];
          spot = cls.split('pline')[1];
        
          if(previous_spot != spot) {
            current_color = ('light' == current_color)? 'dark' : 'light';
            previous_spot = spot;
          }
        
          if(current_color == 'dark') {
            darks = darks + "."+cls+", ";
          }
          else {
            lights = lights + "."+cls+", ";
          }
        });
        //cl(lights);
        //cl(darks);
            
        old_classes = j(darks).attr('class');
        j(darks).attr('class', old_classes+' odd');
        old_classes = j(lights).attr('class');
        j(lights).attr('class', old_classes+' even');      
      },
      
      bind_events : function(){
        j('.protein_line').css("cursor","pointer").click(function(){
          var info = "#"+this.id+"_info";
          j(info).toggle();
        });

        var post_info = function(){
          var form = j(this).parent('form');
          var url = form.attr('action');
          var num = form.attr('id').split("_")[1];

          j.post(url, form.serialize(), function(response){
                    var line_id = '#protein_'+response[0].id;
                    j(line_id+"_info").hide();
                    j(line_id).html(line_template).fillTemplate(response);
                    j(line_id +"_comments").html(comments_template).fillTemplate(response);
                    j(line_id +"_info").html(info_template).fillTemplate(response);
                    j(line_id +'_info button').click(post_info);

                    j.getJSON("/spotted_plates/"+id+"/filters_list.json", draw_navigator);
                  }, 'json');
          //cl(form.find('.tags_field').val());
          Proteins.update_tags(num, form.find('.tags_field').val());
          j(this).hide();

          return false;
        };

        j('.protein_line button').click(post_info);      
      
      },
      
      protein_hits : {
        list : [],
        update_tags : function(num, tags) {
          this.data[num].tag_list = tags.split(' ');
        },
        filter : function(filter_name, filter_value){
          return new FiltersFactory().filter(filter_name).apply(this.data, filter_value);
        }
      },
      
      tags : [],
      
      filters : {
        TagFilter : {
          init : function(){
            var tags = [];
            Page.protein_hits.list.forEach(function(protein_hit, i, protein_hits){
              tags.push(protein_hit.tag_list);
            });
            cl(tags);
          },
          apply : function(data, filter_text){
            for (var i = 0; i < data.length; i++) {
              tags = data[i].tag_list;
              //cl(tags.indexOf(filter_text));
              if(tags.indexOf(filter_text) != -1 ){
                result.push(data[i]);
              }
            }
            return result;
          }
        }
      },
      
    }
    //var data = new FiltersFactory().filter('peptides_above_identity_treshhold').apply(data, '2');

    TagFilterBlock = {
      init : function(){
        //j('#filters #tags').
      }
    
    }

    function TagFilter(){
      var result = [];
      
      //this
      
      this.apply = function(data, filter_text){
        for (var i = 0; i < data.length; i++) {
          tags = data[i].tag_list;
          //cl(tags.indexOf(filter_text));
          if(tags.indexOf(filter_text) != -1 ){
            result.push(data[i]);
          }
        }
        return result;
      }
    }

    function PeptidesAboveIdentityTreshholdFilter(){
      var result = [];
      this.apply = function(data, filter_text){
        for (var i = 0; i < data.length; i++) {
          if(data.peptides_above_identity_threshold >= parseFloat(filterText) ){
            result.push(data[i]);
          }
        }
        return result;
      }
    }

    function FiltersFactory(){
      this.filter = function(type){
       switch(type){
        case "tag":
          return new TagFilter();
        case "search":
          return new SearchFilter();
        case "peptides_above_identity_treshhold":
          return new PeptidesAboveIdentityTreshholdFilter();
        default:
          return new VoidFilter();
       }
      }
    };

    var id = j.trim(j('#spotted_plate_id').text());

    var draw_navigator = function(data) {
      j('#navigator_tpl').fillTemplate(data);
      j('a.tag_link').click(query_by_tag);
      return false;
    }

    var draw_table = function(data){


      j('.protein_line').css("cursor","pointer").click(function(){
        var info = "#"+this.id+"_info";
        j(info).toggle();
      });

      var post_info = function(){
        var form = j(this).parent('form');
        var url = form.attr('action');
        var num = form.attr('id').split("_")[1];
        //        var tags = ;
        j.post(url, form.serialize(), function(response){
                  var line_id = '#protein_'+response[0].id;
                  j(line_id+"_info").hide();
                  j(line_id).html(line_template).fillTemplate(response);
                  j(line_id +"_comments").html(comments_template).fillTemplate(response);
                  j(line_id +"_info").html(info_template).fillTemplate(response);
                  j(line_id +'_info button').click(post_info);

                  j.getJSON("/spotted_plates/"+id+"/filters_list.json", draw_navigator);
                }, 'json');
        //cl(form.find('.tags_field').val());
        Proteins.update_tags(num, form.find('.tags_field').val());
        j(this).hide();

        return false;
      };

      j('.protein_line button').click(post_info);
    };

    var query_by_tag = function() {
      //j.getJSON("/spotted_plates/"+id+"/protein_hits_json", {tag:  j(this).text()}, draw_table);
      var filtered = new FiltersFactory().filter('tag').apply(Proteins.data, j(this).text());
      //cl(Proteins.data);
      draw_table(filtered);
      return false;
    }

    var reset_filters = function() {
      j.getJSON("/spotted_plates/"+id+"/protein_hits_json", function(data){
        Proteins.data = data;
        draw_table(data);
      });
      return false;
    }
    j('#reset_filters').click(reset_filters);
    reset_filters();

    j.getJSON("/spotted_plates/"+id+"/filters_list.json", draw_navigator);

  });