#include <infocon.style>

<future>
<?php
  $machine = new SpritMachine($_POST['machine']);
?>
<page func=InfoCon title="Tankbuch <?=$machine->getAttribute('name')?>">
<script type="text/javascript" src="<root_prefix>jquery.autocomplete.min.js"></script>
<script type="text/javascript" src="<root_prefix>jquery.editable.js"></script>
<calendar_init -5>
<style type="text/css">
div#details {
    width: 270px;
}
div.bar {
    background-color: #98c5e5;
    border-bottom: 1px solid #AAA;
    font-size: 14px;
    font-weight: bold;
}
div.year {
    float: left;
}
table.spritlog tbody td {
    border-bottom: 1px solid #CCC;
}
table.spritlog thead th {
    border-bottom: 1px solid #AAA;
}
table.spritlog tfoot th {
    border-top: 1px solid #AAA;
}
table.spritlog tbody tr:hover {
    background-color: yellow;
}
</style>

<div id="details" class="popup" style="display:none;">
<div class="popup_title" style="padding-bottom: 0.35ex;">Bearbeiten</div>
<div class="popup_body" style="padding-left: 2px;">
<input type="hidden" id="id" name="id" value="">
<input type="hidden" id="machine" name="machine">
<label for="date">Datum</label>
<input type="text" id="date" name="date" size="8">
<img class="calendar" src="<root_prefix>pix/calendar.gif" onclick="event.cancelBubble=true;popcalendar('date');">

<label for="city">Ort</label>
<input type="text" id="city" name="city" style="width: 99%">
<label for="tankstelle">Tankstelle</label>
<input type="text" id="tankstelle" name="tankstelle" style="width: 99%">

<label for="price_liter">Preis pro Liter</label>
<input type="text" id="price_liter" name="price_liter" style="width: 99%">

<label for="liter">Liter / Preis</label>
<input type="text" id="liter" name="liter" style="width: 49%">
<input type="text" id="price" name="price" style="width: 49%">

<label for="km">Tageskilometer / Gesamt</label>
<input type="text" id="km" name="km" style="width: 49%">
<input type="text" id="km_total" name="km_total" style="width: 49%">

<div style="margin-top: 8px; margin-bottom: 1ex; text-align: center;">
<input type="submit" onclick="return log_save()" value="Speichern">
&nbsp;&nbsp;&nbsp;
<input type="submit" onclick="$('#details').hide();return false" value="Abbrechen">
</div>
 </div>
</div>

<?php
  $log = new SpritLog();
  $log->setMachine($_POST['machine']);
  $list = $log->distinctYears();
  foreach ($list as $row) {
    echo '<div class="bar">';
    printf('<div year="%d" class="year">%d</div>', $row->year, $row->year);
    printf('<div id="sum_%d" style="float:right;">&euro; %.2f&nbsp;&nbsp;%d km</div>', $row->year, $row->sum, $row->km);
    echo '<div style="clear:both;"></div></div>';
    printf('<div id="list_%d" style="display:none;"></div>', $row->year);
  }
  if (count($list)) {
    $out = <<<EOT
<script type="text/javascript">
$(function(){
    $('div.popup').udraggable({
        'handle': 'div.popup_title'
    })
    load_year({$list[0]->year});
    $('div.bar').click(toggle_year);
});
</script>
EOT;
echo $out;
  }
?>
<div style="height:10px;"></div>
</page>
<protect><script text="text/javascript">
$(function(){
    $('#city').autocomplete({
	deferRequestBy: 500,
	lookup: function(query, done){
	    $.invoke('SpritLog/SuggestCity', {query: query}, function(data){
		done(data);
	    });
	}
    });
    $('#tankstelle').autocomplete({
	minChars: 0,
	deferRequestBy: 500,
	lookup: function(query, done){
	    $.invoke('SpritLog/SuggestTankstelle', {query: query, city: $('#city').val()}, function(data){
		done(data);
	    });
	}
    });
    $('#price_liter').keydown(on_plus(function(){$('#liter').focus();}));
    $('#liter').keydown(on_plus(function(){$('#price').focus();}));
    $('#price').keydown(on_plus(function(){$('#km').focus();}));
    $('#km').keydown(on_plus(function(){$('#km_total').focus();}));
    $('#km_total').keydown(on_plus(function(){log_save();}));
});
var sprit_machine = <?=intval($_POST['machine'])?>;
function on_plus(callback)
{
    return function(e){
	// Plus sign
	if (e.keyCode == 107) {
	    callback();
	    return false;
	}

    };
}
function log_new()
{
    $('#details input').not('input[type="submit"]').val('');
    $('input#machine').val(sprit_machine);
    if ($('#details').css('left') == '0px')
      $('#details').css('left', ($(window).width()-280)+'px').css('top', '30px');
    $('#details').show();
    $('#date').focus();
    return false;
}

function log_save()
{
    $.invoke('SpritLog/Add', $('#details input').serialize(), function(data){
	load_year(data.year);
	$('#details').hide();
    });

    return false;
}

function toggle_year(event)
{
    var year = $(this).find('div.year').attr('year');

    if ($('div#list_'+year).is(':visible'))
	$('div#list_'+year).hide();
    else
	load_year(year);
}

function load_year(year)
{
    $('div#list_'+year).show();
    $.invoke('SpritLog/List', {year: year, machine: sprit_machine}, function(data){
	make_editable('div#list_'+year+' td span');
    });
}
</script></protect>