include mixins
include mixins_day

doctype html
html
	include header
	script(src='/javascripts/socket.io.js' )
	script(src="/javascripts/jquery.loading.min.js")
	link(href="/stylesheets/jquery.loading.min.css", rel="stylesheet")
	body(style="overflow: hidden;")
	
		.modal.fade(id="confirmDelete", role="dialog", aria-labelledby="confirmDeleteLabel", aria-hidden="true")
			.modal-dialog(role="document")
				.modal-content
					.modal-header
						button(type="button", class="close", data-dismiss="modal", aria-hidden="true") ×
						h4(class="modal-title", id="confirmDeleteLabel") Löschen bestätigen
					.modal-body
						p Sind Sie sicher, dass Sie das Ereignis löschen wollen?
					.modal-footer
						button(type="button", class="btn btn-default", data-dismiss="modal") Abbrechen
						button(type="button", class="btn btn-danger", id="confirm") Löschen
						
		
		.root(style="overflow: hidden;")
						
			.new_flex_zero
				+nav("PfarrInfoSystem", "dropdown_menu")
				
				.container-fluid
					button(class="btn btn-success btn-xs", onclick="location.assign('/day/#{date}?back=false');", style="margin-bottom: 5px;")
						span(class="glyphicon glyphicon-ok", aria-hidden="true")
						span 
						span Zurück
	
			.new_flex_one(style="overflow: auto; padding-left: 15px; padding-right: 15px;")
				+pevent_with_thereafter(date, event, { details: true, links: true, clickable: false, pcalview: "day"} )
						
						
		script.
			$('#confirmDelete').on('show.bs.modal', function (e) {
				$etype = $(e.relatedTarget).attr('data-event-type');
				$ename = $(e.relatedTarget).attr('data-event-name');
				$(this).find('.modal-body p').text("Sind Sie sicher, dass Sie das " + $etype + " \"" + $ename + "\" löschen wollen?");
			
				$(this).find('.modal-footer #confirm').data('button', $(e.relatedTarget));
			});
			
			/*history.pushState(null, null, location.href);
			window.onpopstate = function(event) {
				history.go(1);
			};*/
			
			var sockets = io.connect();
			
			var delete_button = {};
			
			$('#confirmDelete').find('.modal-footer #confirm').on('click', function() {
					delete_button = $(this).data('button');
					console.log(delete_button);
					
					$etype = delete_button.attr('data-event-type');
					if($etype === "Ereignis") {
						var form = delete_button.closest("form");
						form.submit();
						return;
					}
					
					var date = delete_button.data('date');
					var event = delete_button.data('event-uuid');
					var tevent = delete_button.data('tevent-uuid');
					
					console.log(date, event, tevent);
					
					sockets.emit('tevent_delete', { date: date, event: event, tevent: tevent });
			});
			
			sockets.on('tevent_delete_result', function(data) {
				console.log(data);
				
				if(data.result === "OK") {
				
					var eventbox = delete_button.closest('.eventbox');
					var number_of_children = eventbox.parent().children().length;
				
					console.log('number_of_children: ', number_of_children);
				
					if(number_of_children > 1) {
						if(eventbox.is(':first-child')) { // disable up-button
							$(eventbox.next().find("div > button:nth-child(2)")[0]).prop('disabled', true);
						}
						if(eventbox.is(':last-child')) { // disable down-ubtton
							$(eventbox.prev().find("div > button:nth-child(3)")[0]).prop('disabled', true);
						}
					}
					
					eventbox.remove();
				}
				else
					console.log('tevent_delete_result: ', data);
					
				$('#confirmDelete').modal('hide');
			});
			
			var updown_button = {};
			var updown_direction = "";
			
			sockets.on('tevent_move_updown_result',function(data){
				console.log(data);
				/*window.location.reload();*/
					
				/* http://stackoverflow.com/questions/3050830/reorder-list-elements-jquery */
				var eventbox = updown_button.closest('.eventbox');
				var other = {};
				if(updown_direction === "down")
				{
					next = eventbox.next();
					next.after(eventbox);
					other = next;
				}
				else /* up */
				{
					prev = eventbox.prev();
					prev.before(eventbox);
					other = prev;
				}
				
				if(eventbox.is(':first-child'))
				{
					$(eventbox.find("div > button:nth-child(2)")[0]).prop('disabled', true);
					$(eventbox.find("div > button:nth-child(3)")[0]).prop('disabled', false);
				}
				else
				{
					if(eventbox.is(':last-child'))
					{
						$(eventbox.find("div > button:nth-child(2)")[0]).prop('disabled', false);
						$(eventbox.find("div > button:nth-child(3)")[0]).prop('disabled', true);
					}
					else
					{
						$(eventbox.find("div > button:nth-child(2)")[0]).prop('disabled', false);
						$(eventbox.find("div > button:nth-child(3)")[0]).prop('disabled', false);
					}
				}
				
				if(other.is(':first-child'))
				{
					$(other.find("div > button:nth-child(2)")[0]).prop('disabled', true);
					$(other.find("div > button:nth-child(3)")[0]).prop('disabled', false);
				}
				else
				{
					if(other.is(':last-child'))
					{
						$(other.find("div > button:nth-child(2)")[0]).prop('disabled', false);
						$(other.find("div > button:nth-child(3)")[0]).prop('disabled', true);
					}
					else
					{
						$(other.find("div > button:nth-child(2)")[0]).prop('disabled', false);
						$(other.find("div > button:nth-child(3)")[0]).prop('disabled', false);
					}
				}
				
				/* $('body').loading('stop'); */
			});
			
			do_tevent_move_updown = function(button, date, event, tevent, updown) {
				updown_button = button;
				updown_direction = updown;
				/* $('body').loading(); */
				sockets.emit('tevent_move_updown', { date: date, event: event, tevent: tevent, updown: updown });
			}
			
			history.replaceState({direction: 'back'}, document.title, location.pathname);
			history.pushState({direction: 'actual'}, document.title, location.pathname);
			window.addEventListener("popstate", function(e) {
				console.log(e.state);
				if((e.state != null) && (e.state.direction === "back")) {
					history.replaceState(null, document.title, location.pathname);
					setTimeout(function(){
						location.replace("/day/#{date}?back=false");
					},0);
				}
			}, false);