#include <infodrom.style>

<future>
<page func="Infodrom Oldenburg" title="Termine">
<script type="text/javascript" src="<root_prefix>jquery.editable.js"></script>

<style type="text/css">
@media only screen and (max-device-width: 400px) {
    div.view {
	margin-left: 100px;
    }
}

@media only screen and (max-device-width: 980px) {
     button {
        width: 3em;
    }
}

div.view {
    float:right;
    margin-top:-30px;
}
div.clear {
    clear: both;
    margin-bottom: 3px;
}
table#calendar tr.row:hover {
    background: yellow;
}
table#calendar tr.newkw td {
    border-top: 1px solid #999;
}
table#calendar tr.month {
    background: #a7efff;
}
table#calendar tr.current {
    background: orange;
}
div.bimonth div.monthcolumn {
    float: left;
    width: 50%;
}
div.onemonth div.monthcolumn {
    float: left;
    width: 100%;
}
div.head {
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    text-align: center;
}
div.day {
    position: relative;
    border-bottom: 1px solid #ccc;
}
div.sunday {
    border-bottom: 1px solid black;
}
div.today {
    background: #90ee90;
}
div div.wday {
    width: 1.6em;
    margin-right: 2px;
    float: left;
}
div div.date {
    width: 1.6em;
    margin-right: 2px;
    float: left;
}
div.kw {
    position: absolute;
    top: 0px;
    right: 1px;
    color: #999;
}
div.month table thead td.title {
  background: #b0e2ff;
}
div.month table tbody td {
    height: 100px;
    vertical-align: top;
    position: relative;
}
div.month table tbody td.empty {
    background: #ddd;
}
div.month table tbody td span {
    font-size: 90%;
}

div#termine span {
    padding-left: 1px;
    padding-right: 1px;
    cursor: default;
}

span.menu_title {
    padding-left: 2px;
    padding-right: 2px;
    background: #e0e0e0;
    font-weight: bold;
    border-bottom: 1px solid #8f8f8f;
    display: block;
}
div.menu {
    background: #fffb71;
    position: absolute;
    border: 1px solid #8f8f8f;
    z-index: 10;
}
span.menu {
    padding-left: 2px;
    padding-right: 2px;
    display: block;
    cursor: default;
}
span.menu:hover {
    background: #96ccff;
}
div.popup#calendar_log div.popup_body {
    padding-left: 0px;
    padding-right: 0px;
}
div.popup_body div#log div.caltitle {
    padding-left: 2px;
    padding-right: 2px;
    border-top: 0px !important;
}
div.logl {
    float: left;
    width: 120px;
}
div.logr {
    float: left;
}
div.popup_body div#log div.row0,
div.popup_body div#log div.row1 {
    margin: 0;
    padding-left: 2px;
    padding-right: 2px;
    font-size: 90%;
    border-top: 1px solid #ccc;
}
div.popup_body div#log div.row0
{
    background: #eee;
}
</style>

<?php
  $textbrowser = strpos($_SERVER['HTTP_USER_AGENT'], 'Lynx/') !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'w3m/') !== false;
?>

<input type="hidden" id="thismonth">
<div id="termine">
<?php
  if ($textbrowser || (isset($_GET['month']) && $_GET['month'] == 'normal')) {
?>
<table id="calendar" width="100%" class="smallfont border" cellspacing="0" summary="">
<tr class="head">
<th width="5%">KW</th>
<th width="20%">Datum</th>
<th width="55%">Beschreibung</th>
<th width="20%">Location</th>
</tr>

<?php
  setlocale('LC_TIME', 'de_DE');
  $now = date('Y-m-d H:i:s');
  $pivot = date('Y-m-d H:i:s', time()+(7*24*60*60));

  $item = new Calendar();
  $month = '';

  if (empty($_GET['year'])) {
    $from = time();
    $to = false;
  } else {
    $from = mktime(0,0,0,1,1,intval($_GET['year']));
    $to = mktime(0,0,0,1,1,intval($_GET['year'])+1) - 1;
  }
  $kw = '';
  foreach ($item->getItems($from, $to) as $row) {
    $start = new DateTime($row->dtstart);
    $newmonth = $start->format('F Y');
    if ($month != $newmonth) {
      $month = $newmonth;
      if ($textbrowser)
	  printf('<tr><td colspan="4">&nbsp;</td></tr>');
      printf('<tr class="month" month="%s"><td colspan="4">%s</td></tr>',
	     $start->format('Y-m'), $month);
      $kw = '';
    }

    $tooltip = '';
    if (strlen($row->description))
      $tooltip = sprintf(' title="%s"', htmlspecialchars($row->description));

    $class = 'row';
    if ($row->dtstart >= $now && $row->dtstart < $pivot)
      $class .= ' current';
    if (strlen($kw) && $kw != $row->kw)
      $class .= ' newkw';
      
    $item = new Calendar_Item($row->dav_id);
    printf('<tr id="%d" class="%s"><td>%s</td><td>%s</td><td>%s</td><td>%s</td></tr>',
	   $row->dav_id,
	   $class,
	   $kw != $row->kw ? $row->kw : '&nbsp;',
	   Calendar::formatTimespan($row->dtstart, $row->dtend),
	   utf8_decode($item->toSpan()),
	   utf8_decode($row->location));
    $kw = $row->kw;
  }

?>

</table>
<?php
  } // $textbrowser || month == 'monat'
?>
</div>
<div class="clear"></div>

<div id="menu" class="menu" style="display:none;">
<span class="menu_title" onmouseup="\$(this).parent().hide()">Titel</span>
<span class="menu" onmouseup="add_comment()">Comment</span>
<span class="menu" onmouseup="show_log()">Protocol</span>
<span class="menu" onmouseup="colorise()">Color</span>
<span class="menu" onmouseup="menu_close()">close</span>
</div>

<select name="colorpicker" style="display:none;">
  <option value="#5484ed">Bold blue</option>
  <option value="#a4bdfc">Blue</option>
  <option value="#63b8ff">InfoCon</option>
  <option value="#87ceeb">Sky blue</option>
  <option value="#46d6db">Freunde</option>
  <option value="#7ae7bf">Light green</option>
  <option value="#c0ff3e">Linuxhotel</option>
  <option value="#7bd148">Familie</option>
  <option value="#51b749">Linstep</option>
  <option value="#ffff00">FIPS/Ski</option>
  <option value="#fbd75b">Light orange</option>
  <option value="#ffb878">Orange</option>
  <option value="#f4a460">Sandy brown</option>
  <option value="#ff6a6a">IndianRed</option>
  <option value="#ffa500">Vati</option>
  <option value="#ff8247">Sienna</option>
  <option value="#ff887c">Red</option>
  <option value="#dc2127">Bold red</option>
  <option value="#ff7f00">Dark orange</option>
  <option value="#ee82ee">Violett</option>
  <option value="#dbadff">Purple</option>
  <option value="#ff00ff">Magenta</option>
  <option value="#d4d4d4">Gray</option>
  <option value="#e1e1e1">minol</option>
  <option value="#ededed">Light gray</option>
</select>

<protect><script type="text/javascript">
function menu_close()
{
    $('div#menu').hide();
}

function dom_enhance()
{
    var html = ['<div class="view">',
		'<button id="prev" style="display:none;"><img src="'+site_url('pix/left.png')+'" /></button>',
		'&nbsp;&nbsp;',
		'<button id="sync" style="display:none;"><img src="'+site_url('pix/sync.png')+'" /></button>',
		'&nbsp;&nbsp;',
		'<button id="next" style="display:none;"><img src="'+site_url('pix/right.png')+'" /></button>',
		'&nbsp;&nbsp;',
		'<select id="month" style="display:none;">',
		'<option value="">jetzt</option>',
		'</select>',
		'&nbsp;&nbsp;',
		'<select id="view">',
		'<option value="normal">Normal</option>',
		'<option value="bimonth">2 Monate</option>',
		'<option value="onemonth">1 Monat</option>',
		'<option value="month">Monat</option>',
		'</select>',
		'</div>'];

    $(html.join('')).insertAfter('h3');
    $.invoke('Calendar/Months');
}

var logwindow = false;
function show_log()
{
    menu_close()

    if (!logwindow) {
	logwindow = new Popup('Protocol', '460px', false, '<div id="log"></div>');
	logwindow.setId('calendar_log');
	logwindow.centerPopup();
    } else {
	logwindow.openPopup();
    }

    $.invoke('Calendar_Item/Log', {id: $('div#menu').attr('dav_id')}, function(data){
	if (!is_mobile())
	    make_editable('div#log div.editable');
    });
}

var commentwindow = false;
function add_comment()
{
    menu_close()

    if (!commentwindow) {
	var html = ['<form id="comment">',
		    '<input type="hidden" name="id">',
		    '<label for="name">Name</label>',
		    '<input name="name" style="width: 296px;">',
		    '<label for="url">Link</label>',
		    '<input name="url" style="width: 296px;">',
		    '<label for="comment">Bemerkung</label>',
		    '<textarea name="comment" style="width: 296px; height:65px;"></textarea>',
		    '<div style="text-align: center; margin-top: 5px;"><input type="submit" value="Speichern"></div>',
		    '</form>'];
	commentwindow = new Popup('Bemerkung hinzufügen', '300px', false, html.join(''));
	commentwindow.centerPopup();
	$('form#comment input[type="submit"]').click(function(e){
	    $.invoke('Calendar_Item/AddLog', $('form#comment').serialize(), function(data){
		commentwindow.closePopup();
	    });
	    return false;
	});
    } else {
	commentwindow.openPopup();
    }
    $('form#comment input,form#comment textarea').not('form#comment input[type="submit"]').val('');
    $('form#comment input[name="id"]').val($('div#menu').attr('dav_id'));
    $('form#comment input[name="name"]').focus();
}

var incolorise = false;
function colorise()
{
    menu_close()

    $('select[name="colorpicker"]').simplecolorpicker({
	picker: false
    }).change(function(e) {
	if (incolorise) return;
	incolorise = true;

	var color = $('select[name="colorpicker"]').val();
	var id = $('div#menu').attr('dav_id');

	$('span[dav_id="'+id+'"]').css('background-color', color);

	$.invoke('Calendar_Item/SetColor', {id: id, color: color}, function(data){
	    incolorise = false;
	});

	$('select[name="colorpicker"]').simplecolorpicker('destroy');
	$('select[name="colorpicker"]').hide();
    });
}

function month_actions(data)
{
    $('#termine span').contextmenu(function(e){
	$('select[name="colorpicker"]').simplecolorpicker('destroy');
	$('select[name="colorpicker"]').hide();
	$('div#menu').attr('dav_id', $(this).attr('dav_id'));
	$('div#menu').positionOn($(this), 'center').show();
	return false;
    });
    $('#termine span').click(function(e){
	$('div#menu').attr('dav_id', $(this).attr('dav_id'));
	show_log();
    });

    $('select#month').val($('#thismonth').val());
}

$(function(){
    dom_enhance();
    month_actions();
    $('#view').val('normal').change(function(e){
	if ($('#view').val() == 'normal') {
	    document.location.href = document.location.href.split('?')[0] + '?month=normal';
	} else if ($('#view').val() == 'bimonth') {
	    $('#month,div.view button').show();
	    $.invoke('Calendar/BiMonth', {month: $('#thismonth').val()}, month_actions);
	} else if ($('#view').val() == 'onemonth') {
	    $('#month,div.view button').show();
	    $.invoke('Calendar/OneMonth', {month: $('#thismonth').val()}, month_actions);
	} else if ($('#view').val() == 'month') {
	    $('#month,div.view button').show();
	    $.invoke('Calendar/Month', {month: $('#thismonth').val()}, month_actions);
	}
    });
    $('#month').change(function(e){
	if ($('#view').val() == 'bimonth') {
	    $.invoke('Calendar/BiMonth', {month: $('#month').val()}, month_actions);
	} else if ($('#view').val() == 'month') {
	    $.invoke('Calendar/Month', {month: $('#month').val()}, month_actions);
	}

    });
    $('div.view button').click(function(e){
	var direction = null
	if ($(this).attr('id') != 'sync')
	    direction = $(this).attr('id') == 'prev' ? 'prev' : 'next';
	if ($('#view').val() == 'bimonth') {
	    $.invoke('Calendar/BiMonth',
		     {month: $('#thismonth').val(),
		      direction: direction}, month_actions);
	} else if ($('#view').val() == 'onemonth') {
	    $.invoke('Calendar/OneMonth',
		     {month: $('#thismonth').val(),
		      direction: direction}, month_actions);
	} else if ($('#view').val() == 'month') {
	    $.invoke('Calendar/Month',
		     {month: $('#thismonth').val(),
		      direction: direction}, month_actions);
	}
    });
    if (document.location.href.indexOf('month=normal') == -1) {
        if (is_mobile()) {
	    $('<meta name="viewport" content="width=device-width, initial-scale=0.75" />').insertAfter('title');
	    $('#view').val('onemonth');
	    $.invoke('Calendar/OneMonth', {month: '<?=date('Y-m')?>'}, month_actions);
	    $('select#view').hide();
	} else {
	    $('#view').val('bimonth');
	    $.invoke('Calendar/BiMonth', {month: '<?=date('Y-m')?>'}, month_actions);
	}
    }
    $('#month,div.view button').show();
});
</script></protect>
</page>

# Local variables:
# mode: text
# mode: auto-fill
# mode: iso-accents
# end: