"use strict";

$(document).ready(function() {

	/*
	 * Build Panel
	 */

	var margin = 50;
	var windowWidth = $(window).width();
	var windowHeight = $(window).height();

	var panel = $('<div>').appendTo('body').css({
		display: 'none',
		position: 'fixed',
		zIndex: 9999,
		background: 'white',
		color: 'black',
		top: margin,
		left: margin,
		width: windowWidth - ( margin * 2 ),
		height: windowHeight - ( margin * 2 ),
		padding: 20,
		boxSizing: 'border-box',
		border: '1px solid black',
		overflow: 'scroll',
	}).html("<h2>Debug Output</h2>");

	$('script[type="application/debugjs"]').each(function() {
		panel.append($('<pre>').text(this.innerHTML));
		panel.append('<hr>');
		
		$(this).replaceWith($('<pre>').text(this.innerHTML).addClass('debugWeb-inline').css({
			display: 'none',
			background: 'white',
			padding: 20,
			border: '1px solid black',
		}));
	});

	var inlines = $('.debugWeb-inline');


	/*
	 * Button
	 */

	var container = $('<div>').appendTo('body').css({
		position: 'fixed',
		bottom: -30,
		right: 100,
		padding: '8px 10px',
		textAlign: 'center',
		background: '#fafafa',
		color: '#000',
		fontWeight: 'normal',
		fontSize: "11px",
		zIndex: "9999",
	}).attr('id', 'container');

	var linkStyle = {
		display: 'inline-block',
		color: '#555',
		backgroundColor: '#f3f3f3',
		marginRight: 5,
		fontWeight: 'normal',
		cursor: 'pointer',
		padding: "5px 10px",
		textTransform: "uppercase",
		'-webkit-touch-callout': 'none', /* iOS Safari */
		'-webkit-user-select': 'none',   /* Chrome/Safari/Opera */
		'-khtml-user-select': 'none',    /* Konqueror */
		'-moz-user-select': 'none',      /* Firefox */
		'-ms-user-select': 'none',       /* Internet Explorer/Edge */
		'user-select': 'none',
	};
	var linkStyleActive = {
		display: 'inline-block',
		color: '#fff',
		backgroundColor: '#333',
		marginRight: 5,
		fontWeight: 'normal',
		cursor: 'pointer',
		padding: "5px 10px",
		textTransform: "uppercase",
		'-webkit-touch-callout': 'none', /* iOS Safari */
		'-webkit-user-select': 'none',   /* Chrome/Safari/Opera */
		'-khtml-user-select': 'none',    /* Konqueror */
		'-moz-user-select': 'none',      /* Firefox */
		'-ms-user-select': 'none',       /* Internet Explorer/Edge */
		'user-select': 'none',
	};
	var linkStyle2 = {
		display: 'inline-block',
		color: '#000',
		marginLeft: 10,
		marginRight: 5,

		fontWeight: 'normal',
		cursor: 'pointer',
		'-webkit-touch-callout': 'none', /* iOS Safari */
		'-webkit-user-select': 'none',   /* Chrome/Safari/Opera */
		'-khtml-user-select': 'none',    /* Konqueror */
		'-moz-user-select': 'none',      /* Firefox */
		'-ms-user-select': 'none',       /* Internet Explorer/Edge */
		'user-select': 'none',
	};

	var shortcut1 = "STRG + D";
	var shortcut2 = "STRG + SHIFT + D";
	if ( navigator.userAgent.indexOf("Mac OS") !== -1 || navigator.userAgent.indexOf("macOS") !== -1 ) {
		shortcut1 = "CMD + D";
		shortcut2 = "CMD + SHIFT + D";
	}

	var button_panel = $('<a>').appendTo(container).css(linkStyle).html(
		"Debug aktivieren (" + shortcut1 + ")"
	);
	var button_inline = $('<a>').appendTo(container).css(linkStyle).html(
		"Inline aktivieren (" + shortcut2 + ")"
	);
	var button_close = $('<a>').appendTo(container).css(linkStyle2).html("&times;");

	var panel_visible = false;
	var inlines_visible = false;

	var togglePanel = function() {
		var windowWidth = $(window).width();
		var windowHeight = $(window).height();
		panel_visible = !panel_visible;

		panel.css({
			width: windowWidth - ( margin * 2 ),
			height: windowHeight - ( margin * 2 ),
		});
		panel.toggle();
		button_panel.html("Debug " + (panel.is(':visible') ? "deaktivieren" : "aktivieren"));
		button_panel.css(panel_visible ? linkStyleActive : linkStyle);
	};

	var toggleInlines = function() {
		inlines.toggle();
		inlines_visible = !inlines_visible;
		button_inline.html("Inline " + (inlines_visible ? "deaktivieren" : "aktivieren"));
		button_inline.css(inlines_visible ? linkStyleActive : linkStyle);
	};

	container.animate({bottom: 0}, 'ease-in');

	button_panel.on('click', togglePanel);
	button_inline.on('click', toggleInlines);

	button_close.on('click', function() {
		container.hide();
	});

	$(document).on('keydown', function(e) {
		if ( e.key == "d" && ( e.metaKey || e.ctrlKey ) ) {
			e.preventDefault();

			if ( e.shiftKey ) {
				toggleInlines();
			} else {
				togglePanel();
			}
		}
	});

});