Bill's members highlights in the balance in accordance with #69.

I'm not satisfied with the payer display but I have better in mind.

budget/static/main.css

@@ -156,3 +156,24 @@ div.topbar ul.secondary-nav { padding-right: 75px; }
     cursor:pointer;
     display:none;
 }
+
+.balance-value{
+    text-align:right;
+}
+
+tr.ower_line {
+    /* Fallback for web browsers that doesn't support RGBa */
+    background: rgb(255, 255, 255) transparent;
+    /* RGBa with 0.6 opacity */
+    background: rgba(255, 255, 255, 0.4);
+    /* For IE 5.5 - 7*/
+    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FFFFFF, endColorstr=#66FFFFFF);
+    /* For IE 8*/
+    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FFFFFF, endColorstr=#66FFFFFF)";
+}
+
+tr.payer_line .balance-name{
+    color:green;
+    text-indent:5px;
+}
+

budget/templates/list_bills.html

@@ -9,6 +9,10 @@
     <script src="{{ url_for("static", filename="ihatemoney/custom.js") }}"></script>
 {% endblock %}
 {% block js %}
+
+    // specifies that the text in #name text field has to be hidden on user typing
+    auto_hide_default_text('#name');
+
     $(window).resize(function() {
         $("#sidebar").height( window.innerHeight-40 );
         $("#table_overflow").height( $("#sidebar").height()-120 );
@@ -30,9 +34,6 @@
         return false;
     }
 
-	
-	auto_hide_default_text('#name');
-
     $('#new-bill').click(show_form);
     $('#empty-new-bill').click(show_form);
     $('#hide-bill-form').click(hide_form);
@@ -46,10 +47,9 @@
     $('.balance tr').hover(function()
     {
         tr_id = $(this).attr('id');
-
+        var index = tr_id.lastIndexOf("-");
-		var index = tr_id.indexOf("-");
-		var action = tr_id.substring(0, index);
         id = tr_id.substring(index+1);
+        var action = $(this).attr('action');
         
         var x = $(this).offset().left;
         var y = $(this).offset().top;
@@ -108,6 +108,22 @@
     $.datepicker.setDefaults({'dateFormat': 'yy-mm-dd'});
     $(".datepicker").datepicker($.datepicker.regional['{{ g.lang }}']);
     
+    
+    var highlight_owers = function(){
+        var ower_ids = $(this).attr("owers").split(',');
+        var payer_id = $(this).attr("payer");
+        $.each(ower_ids, function(i, val){
+            $('#bal-member-'+val).addClass("ower_line");
+        });
+        $("#bal-member-"+payer_id).addClass("payer_line");
+    };
+    
+    var unhighlight_owers = function(){
+        $('[id^="bal-member-"]').removeClass("ower_line payer_line");
+    };
+    
+    $("#bill_table tr").hover(highlight_owers,unhighlight_owers);
+    
 {% endblock %}
 
 {% block sidebar %}
@@ -123,9 +139,9 @@
     {% set balance = g.project.balance %}
     {% for member in g.project.members %}
     {% if member.activated or balance[member.id] != 0 %}
-	<tr id="{% if member.activated %}delete{% else %}reactivate{% endif %}-{{ member.id }}">
+    <tr id="bal-member-{{ member.id }}" action={% if member.activated %}delete{% else %}reactivate{% endif %}>
-		<td>{{ member.name }}</td>
+        <td class="balance-name">{{ member.name }}</td>
-		<td class="{% if balance[member.id] > 0 %}positive{% elif balance[member.id] < 0 %}negative{% endif %}">
+        <td class="balance-value {% if balance[member.id] > 0 %}positive{% elif balance[member.id] < 0 %}negative{% endif %}">
             {% if balance[member.id] > 0 %}+{% endif %}{{ balance[member.id] }}
         </td>
     </tr>
@@ -150,11 +166,11 @@
     </form>
 
     {% if bills.count() > 0 %}
-	<table class="list_bills common-table zebra-striped">
+    <table id="bill_table" class="list_bills common-table zebra-striped">
         <thead><tr><th>{{ _("When?") }}</th><th>{{ _("Who paid?") }}</th><th>{{ _("For what?") }}</th><th>{{ _("For whom?") }}</th><th>{{ _("How much?") }}</th><th>{{ _("Actions") }}</th></tr></thead>
     <tbody>
     {% for bill in bills %}
-	<tr class="{{ loop.cycle("odd", "even") }}">
+    <tr class="{{ loop.cycle("odd", "even") }}" owers={{bill.owers|join(',','id')}} payer={{bill.payer.id}}>
             <td>{{ bill.date }}</td>
             <td>{{ bill.payer }}</td>
             <td>{{ bill.what }}</td>
@@ -178,19 +194,10 @@
     {% endif %}
 
 
-
-
-
-
-
-
-
-
-
-
 </div>
 <script>
         $("#sidebar").height( window.innerHeight-40 );
         $("#table_overflow").height( $("#sidebar").height()-120 );
+        
 </script>
 {% endblock %}