<div class='tabber'>
  <div class='tabbertab' title='My Diary'>
    <fieldset id='history'>
      <legend>
        History
      </legend>
      <ul class='entries'>
        <li id='entry_89'>
          <ul class='entry'>
            <li class='date' title='Click to view/edit'>
              <span>
                <a href="#" onclick="new Ajax.Request('/diaries/edit_entry/89', {asynchronous:true, evalScripts:true}); return false;">10 Mar 10</a>
              </span>
            </li>
            <li class='cals'>
              <label>Calories:</label>
              <span>0</span>
            </li>
            <li class='controls' title='Click to Delete'>
              <a href="#" onclick="new Ajax.Request('/diaries/delete_entry/89', {asynchronous:true, evalScripts:true}); return false;"><img alt="Delete" src="/images/delete.png?1258827774" /></a>
            </li>
          </ul>
        </li>
      </ul>
      <div id='add_entry_inner'>
        <form action="/diaries/add_entry" method="post" onsubmit="new Ajax.Request('/diaries/add_entry', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)}); return false;">
          <input id="new_entry_diary_date" name="new_entry[diary_date]" onclick="event.cancelBubble=true;this.select();calendar_open(this,{format:'%d %b %Y',images_dir:'/images',month_names:['January','February','March','April','May','June','July','August','September','October','November','December'],day_names:['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']})" onfocus="this.select();calendar_open(this,{format:'%d %b %Y',images_dir:'/images',month_names:['January','February','March','April','May','June','July','August','September','October','November','December'],day_names:['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']})" size="30" type="text" value="10 Mar 2010" />
          <input name="commit" type="submit" value="Add Entry" />
        </form>
      </div>
    </fieldset>
    <fieldset id='entry'>
      <legend>
        10 March 2010
      </legend>
      <div class='chunk' id='edit'>
        <a class="help" href="#" onclick="$('edit').hide(); $('help').show(); return false;">Help</a>
        <table>
          <tbody id='entry_header'>
            <tr>
              <th class='name'>Food</th>
              <th class='right'>Protein</th>
              <th class='right'>Carbs</th>
              <th class='right'>Fat</th>
              <th class='serving right'>Serving</th>
              <th class='weight right'>Weight</th>
              <th class='calories right'>Calories</th>
              <th class='controls'></th>
            </tr>
          </tbody>
        </table>
        <div class='display'>
          <table>
            <tbody id='entry_display'>
              
            </tbody>
          </table>
        </div>
        <div id='total_table'>
          <table>
            <tr class='total'>
              <td class='name'>
                Total
              </td>
              <td></td>
              <td></td>
              <td></td>
              <td class='serving'></td>
              <td class='weight'></td>
              <td class='calories'>
                0
              </td>
            </tr>
          </table>
        </div>
        <form action="/diaries/update_entry" class="add_food" id="entry_form" method="post" onsubmit="new Ajax.Request('/diaries/update_entry', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)}); return false;">
        <table>
          <tbody>
            <tr id='tr_entry_'>
              <td class='name' id='td_{food_entry.id}_name'>
                <style type="text/css">        div.auto_complete {
                          width: 350px;
                          background: #fff;
                        }
                        div.auto_complete ul {
                          border:1px solid #888;
                          margin:0;
                          padding:0;
                          width:100%;
                          list-style-type:none;
                        }
                        div.auto_complete ul li {
                          margin:0;
                          padding:3px;
                        }
                        div.auto_complete ul li.selected {
                          background-color: #ffb;
                        }
                        div.auto_complete ul strong.highlight {
                          color: #800; 
                          margin:0;
                          padding:0;
                        }
                </style><input id="food_name" name="food[name]" size="30" type="text" /><div class="auto_complete" id="food_name_auto_complete"></div><script type="text/javascript">
                //<![CDATA[
                var food_name_auto_completer = new Ajax.Autocompleter('food_name', 'food_name_auto_complete', '/diaries/auto_complete_for_food_name', {afterUpdateElement:function(element, value){ new Ajax.Request('/diaries/get_data_for_food?food='+value.id+'&entry=', {asynchronous:true, evalScripts:true});  $('food_id').value = value.id; console.log('value: ' + value.id ); return false;  }})
                //]]>
                </script>
              </td>
              <td id='td__protein'>
                
              </td>
              <td id='td__carbs'>
                
              </td>
              <td id='td__fat'>
                
              </td>
              <td class='serving' id='td__serving'>
                
              </td>
              <td class='weight' id='td__weight'>
                <input id="food_weight" name="food[weight]" size="30" type="text" />
                gms
              </td>
              <td class='calories' id='td__calories'>
                <input id="food_calories" name="food[calories]" size="30" type="text" />
                <input id="food_id" name="food_id" type="hidden" />
                <input id="diary_id" name="diary_id" type="hidden" value="29" />
                <input id="entry_id" name="entry_id" type="hidden" value="89" />
              </td>
            </tr>
          </tbody>
        </table>
        <input name="commit" type="submit" value="Add" />
        </form>
      </div>
      <div class='chunk' id='help' style='display:none'>
        <a class="help" href="#" onclick="$('edit').show(); $('help').hide(); return false;">Hide</a>
        <h3>Help</h3>
        <p>This page allows you to track how much you're eating, eg a calorie counter.</p>
        <p>In the Dates section you can view and create records for any day.</p>
        <p>
          In the Entry section you can list and add the foods you have eaten for that entry.
          The Food field will auto complete the food name you are typing if we know it. If
          it is known, then the calorie information will be filled out for you (using a typical
          serving size). You can adjust the amount eaten and/or the calories before saving
          the changes. (The calories is really the important part here)
        </p>
      </div>
    </fieldset>
  </div>
  <div class='tabbertab' title='Graphs'>
    <fieldset id='graphs'>
      <legend>
        <div id='graph_image'>
          <img alt="Calory_graph?entry=89&amp;size=985x405" id="graph" src="/diaries/calory_graph?entry=89&amp;size=985x405" />
        </div>
      </legend>
    </fieldset>
  </div>
</div>
