/* ------------------------------------------------------------------------------
 *
 *  # Custom JS code
 *
 *  Place here all your custom js. Make sure it's loaded after app.js
 *  https://getbootstrap.com/docs/4.3/components/popovers/#options
 * ---------------------------------------------------------------------------- */
var jqGridLastSelection = [];
var PopoverErrorTemplate = '<div class="popover is-invalid" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>';
var GermanOrEnglish = "de";
var GermanOrEnglishCapitalize = "De";
var DoubleClick = false;
var RightClick = false;
$(function() {


	//JQGrid
	$.jgrid.defaults.loadtext = '';
	$.jgrid.defaults.width = 1200;
	$.jgrid.defaults.responsive = true;
	$.jgrid.defaults.styleUI = 'Bootstrap4';
	$.jgrid.defaults.iconSet = "Octicons";
	$.jgrid.defaults.shrinkToFit = false;
	$.jgrid.defaults.autowidth = false;
	$.jgrid.defaults.height = 'auto';
	$.jgrid.defaults.toppager = true;
	$.jgrid.defaults.altRows = true;
	$.jgrid.defaults.hidegrid = false;
	$.jgrid.defaults.hoverrows = true;
	$.jgrid.defaults.rowList = [10,20,50,100,200,500,1000];
	$.jgrid.defaults.sortable = true;
	$.jgrid.defaults.rowNum = 20;
	$.jgrid.defaults.colMenu = true;
	$.jgrid.defaults.regional = "de";
	
	$.jgrid.iconSet.Octicons.base.icon_asc = "octicon-chevron-up";
	$.jgrid.iconSet.Octicons.base.icon_desc = "octicon-chevron-down";
	
	//DE
	$.jgrid.regional["de"].search.defaultSearch = 'cn';
	$.jgrid.regional["de"].formatter.number.decimalPlaces = 2;
	$.jgrid.regional["de"].formatter.number.decimalSeparator = ",";
	$.jgrid.regional["de"].formatter.number.thousandsSeparator = "";
	
	$.jgrid.regional["de"].formatter.date.srcformat = "Y-m-d";
	$.jgrid.regional["de"].formatter.date.newformat = "d.m.Y";
	
	$.jgrid.regional["de"].formatter.datetime = {
			dayNames:   [
				"So", "Mo", "Di", "Mi", "Do", "Fr", "Sa",
				"Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"
			],
			monthNames: [
				"Jan", "Feb", "Mar", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez",
				"Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"
			],
			AmPm : ["","","",""],
			S: function () {return '.';}, // one can also use 'er' instead of '.' but one have to use additional word like 'der' or 'den' before
			srcformat: 'Y-m-d H:i:s',
			newformat: 'd.m.Y H:i:s',
			parseRe : /[#%\\\/:_;.,\t\s-]/,
			masks : {
				// see http://php.net/manual/en/function.date.php for PHP format used in jqGrid
				// and see http://docs.jquery.com/UI/Datepicker/formatDate
				// and https://github.com/jquery/globalize#dates for alternative formats used frequently
				ISO8601Long: "Y-m-d H:i:s",
				ISO8601Short: "Y-m-d",
				// short date:
				//    d - Day of the month, 2 digits with leading zeros
				//    m - Numeric representation of a month, with leading zeros
				//    Y - A full numeric representation of a year, 4 digits
				ShortDate: "d.m.Y",	// in jQuery UI Datepicker: "dd.MM.yyyy"
				// long date:
				//    l - A full textual representation of the day of the week
				//    j - Day of the month without leading zeros
				//    F - A full textual representation of a month
				//    Y - A full numeric representation of a year, 4 digits
				LongDate: "l, j. F Y", // in jQuery UI Datepicker: "dddd, d. MMMM yyyy"
				// long date with long time:
				//    l - A full textual representation of the day of the week
				//    j - Day of the month without leading zeros
				//    F - A full textual representation of a month
				//    Y - A full numeric representation of a year, 4 digits
				//    H - 24-hour format of an hour with leading zeros
				//    i - Minutes with leading zeros
				//    s - Seconds, with leading zeros
				FullDateTime: "l, j. F Y H:i:s", // in jQuery UI Datepicker: "dddd, d. MMMM yyyy HH:mm:ss"
				// month day:
				//    d - Day of the month, 2 digits with leading zeros
				//    F - A full textual representation of a month
				MonthDay: "d F", // in jQuery UI Datepicker: "dd MMMM"
				// short time (without seconds)
				//    H - 24-hour format of an hour with leading zeros
				//    i - Minutes with leading zeros
				ShortTime: "H:i", // in jQuery UI Datepicker: "HH:mm"
				// long time (with seconds)
				//    H - 24-hour format of an hour with leading zeros
				//    i - Minutes with leading zeros
				//    s - Seconds, with leading zeros
				LongTime: "H:i:s", // in jQuery UI Datepicker: "HH:mm:ss"
				SortableDateTime: "Y-m-d\\TH:i:s",
				UniversalSortableDateTime: "Y-m-d H:i:sO",
				// month with year
				//    F - A full textual representation of a month
				//    Y - A full numeric representation of a year, 4 digits
				YearMonth: "F Y" // in jQuery UI Datepicker: "MMMM yyyy"
			},
			reformatAfterEdit : false,
			userLocalTime : false
		};
	
	//EN
	$.jgrid.regional["en"].search.defaultSearch = 'cn';
	$.jgrid.regional["en"].formatter.number.decimalPlaces = 2;
	$.jgrid.regional["en"].formatter.number.decimalSeparator = ",";
	$.jgrid.regional["en"].formatter.number.thousandsSeparator = "";
	
	$.jgrid.regional["en"].formatter.date.srcformat = "Y-m-d";
	$.jgrid.regional["en"].formatter.date.newformat = "d.m.Y";
	
	$.jgrid.regional["en"].formatter.datetime = {
			dayNames:   [
				"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat",
				"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Thursday", "Saturday"
			],
			monthNames: [
				"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
				"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
			],
			AmPm : ["","","",""],
			S: function () {return '.';}, // one can also use 'er' instead of '.' but one have to use additional word like 'der' or 'den' before
			srcformat: 'Y-m-d H:i:s',
			newformat: 'd.m.Y H:i:s',
			parseRe : /[#%\\\/:_;.,\t\s-]/,
			masks : {
				// see http://php.net/manual/en/function.date.php for PHP format used in jqGrid
				// and see http://docs.jquery.com/UI/Datepicker/formatDate
				// and https://github.com/jquery/globalize#dates for alternative formats used frequently
				ISO8601Long: "Y-m-d H:i:s",
				ISO8601Short: "Y-m-d",
				// short date:
				//    d - Day of the month, 2 digits with leading zeros
				//    m - Numeric representation of a month, with leading zeros
				//    Y - A full numeric representation of a year, 4 digits
				ShortDate: "d.m.Y",	// in jQuery UI Datepicker: "dd.MM.yyyy"
				// long date:
				//    l - A full textual representation of the day of the week
				//    j - Day of the month without leading zeros
				//    F - A full textual representation of a month
				//    Y - A full numeric representation of a year, 4 digits
				LongDate: "l, j. F Y", // in jQuery UI Datepicker: "dddd, d. MMMM yyyy"
				// long date with long time:
				//    l - A full textual representation of the day of the week
				//    j - Day of the month without leading zeros
				//    F - A full textual representation of a month
				//    Y - A full numeric representation of a year, 4 digits
				//    H - 24-hour format of an hour with leading zeros
				//    i - Minutes with leading zeros
				//    s - Seconds, with leading zeros
				FullDateTime: "l, j. F Y H:i:s", // in jQuery UI Datepicker: "dddd, d. MMMM yyyy HH:mm:ss"
				// month day:
				//    d - Day of the month, 2 digits with leading zeros
				//    F - A full textual representation of a month
				MonthDay: "d F", // in jQuery UI Datepicker: "dd MMMM"
				// short time (without seconds)
				//    H - 24-hour format of an hour with leading zeros
				//    i - Minutes with leading zeros
				ShortTime: "H:i", // in jQuery UI Datepicker: "HH:mm"
				// long time (with seconds)
				//    H - 24-hour format of an hour with leading zeros
				//    i - Minutes with leading zeros
				//    s - Seconds, with leading zeros
				LongTime: "H:i:s", // in jQuery UI Datepicker: "HH:mm:ss"
				SortableDateTime: "Y-m-d\\TH:i:s",
				UniversalSortableDateTime: "Y-m-d H:i:sO",
				// month with year
				//    F - A full textual representation of a month
				//    Y - A full numeric representation of a year, 4 digits
				YearMonth: "F Y" // in jQuery UI Datepicker: "MMMM yyyy"
			},
			reformatAfterEdit : false,
			userLocalTime : false
		};
		
	
	//$.jgrid.setRegional('jqGrid',{regional: "de"});
	
	
	//Moment
	var moment = (typeof window != 'undefined' && typeof window.moment != 'undefined') ? window.moment : require('moment');

	//Prüfen
	moment.locale("de");

	var start = moment().subtract(29, 'days');
    var end = moment();
	
	//DaterangePicker Defaults
	$.daterangepicker.defaults = {
        startDate: start,
        endDate: end,
        ranges: {
           'Heute': [moment().set({hour:0,minute:0,second:0}), moment().set({hour:23,minute:59,second:59})],
           'Gestern': [moment().subtract(1, 'days').set({hour:0,minute:0,second:0}), moment().subtract(1, 'days').set({hour:23,minute:59,second:59})],
            'letzten 3 Tage': [moment().subtract(3, 'days').set({hour:0,minute:0,second:0}), moment().set({hour:23,minute:59,second:59})],
           // 'letzten 7 Tage': [moment().subtract(6, 'days').set({hour:0,minute:0,second:0}), moment().set({hour:23,minute:59,second:59})],
           // 'letzten 30 Tage': [moment().subtract(29, 'days').set({hour:0,minute:0,second:0}), moment().set({hour:23,minute:59,second:59})],
           // 'dieses Monat': [moment().startOf('month').set({hour:0,minute:0,second:0}), moment().endOf('month').set({hour:23,minute:59,second:59})],
           // 'letztes Monat': [moment().subtract(1, 'month').startOf('month').set({hour:0,minute:0,second:0}), moment().subtract(1, 'month').endOf('month').set({hour:23,minute:59,second:59})]
        },
		"locale": {
			"format": "DD.MM.YYYY",
			"separator": " - ",
			"applyLabel": "Übernehmen",
			"cancelLabel": "Abbrechen",
			"resetLabel": "Zurücksetzen",
			"fromLabel": "Von",
			"toLabel": "Bis",
			"customRangeLabel": 'Eigener Bereich',
			"weekLabel": "W",
			"daysOfWeek": [
				'So',
				'Mo',
				'Di',
				'Mi',
				'Do',
				'Fr',
				'Sa'
			],
			"monthNames": [
				'Januar',
				'Februar',
				'März',
				'April',
				'Mai',
				'Juni',
				'Juli',
				'August',
				'September',
				'Oktober',
				'November',
				'Dezember'
			],
			"firstDay": 1
		}
    };//.defaults.test = "fsdhfjkdshfk";
	
	//console.log($.daterangepicker);
	/*
	
	$.daterangepicker = $.daterangepicker || {};
	var DateRangePickerRanges = {
			'Today': [moment(), moment()],
			'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
			'Last 7 Days': [moment().subtract(6, 'days'), moment()],
			'Last 30 Days': [moment().subtract(29, 'days'), moment()],
			'This Month': [moment().startOf('month'), moment().endOf('month')],
			'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
		};
*/
	//console.log($.jgrid.regional["de"].formatter);
	
	//console.log($.daterangepicker);
	//numeral.locale('de');
	//$.jgrid.regional["de"].defaults.savetext = '';
    // Load on Startup for design
	/*
	$('#tab_main_head').on("mousewheel", function(e, delta) {
		this.scrollLeft -= (delta * 40);
		console.log(e);
		e.preventDefault();
	});
	*/
	/*
	$(document).on("click", '.collapse-link', function() {
		$(this).next().collapse('toggle');
	});
	*/
	$(document).on('click', '.blockOverlay', function(e){
		//$( ".sidebar-right-toggle" ).click();
		//$('.sidebar-mobile-right-toggle').click();
		hideSidebarRight();
	});
    $(document).on('click', 'ul.nav-sidebar ul li  a', function(e) {

        e.preventDefault();
		//console.log(this);
        var title = $(this).attr('title');
        var tabid = $(this).attr('rel');
        var url = $(this).attr('href');

        var title = $(this).attr('title');

        $(".nav-sidebar li ul a").removeClass("active");

        $(this).addClass("active");

        //tabs = $("#tab_main_head");
        //tabs.addBSTab(tabid, title, url);

		addBSByScript(url);
		//$('#'+tabid).css('display', '');
    });

	/*
    $(document).on('mouseover', '.help-item', function(e) {

		$(".helpcontainer").load("HelpViewer.php?ID="+$(this).attr('data-id')+"&Type=MenuEntry", function(result) {
			$(this).show();
		});
	});
	*/
    $(document).on('click', '.help-item', function(e) {
		e.stopPropagation();
		$(".helpcontainer").load("HelpViewer.php?ID="+$(this).attr('data-id')+"&Type=MenuEntry", function(result) {
			$(this).show();
		});
	});	
	$(document).on('mouseout', '.help-item', function(e) {

		$(".helpcontainer").empty().hide();
	});	

    $(document).on('click', '.tabdelete', function(e) {

		
        var tabelem = $(this).parent();

        var tabid = tabelem.attr('href');

        tabid = tabid.substring(1);

        tab = tabs.getBSTabByID(tabid);
		
		//Cleanup Popover
		$('[data-popup="popover"]', '#'+tabid).popover('dispose');
		$('[data-popup="popoverload"]', '#'+tabid).popover('dispose');
		
        tab.removeBSTab();

        // Load Last Tab

        var tabelem = $('#tab_main_head a').last();

        var href = tabelem.attr('href');
        var url = tabelem.attr('data-url');
		processURL4MenuItem(url);
        // Before Show, check if already exist

        if ($(href).is(':empty')) {

            $(href).load(url, function(result) {
                $('#tab_main_head a').last().tab('show');
            });

            var tabID = $('#tab_main_head a').last().attr('href');

            tabID = tabID.substring(7);

            $.post("eventhandler.php?type=tabhandler&action=select", {
                tabID : tabID
            });

        } else {

            var tabID = $('#tab_main_head a').last().attr('href');

            tabID = tabID.substring(7);

            $.post("eventhandler.php?type=tabhandler&action=select", {
                tabID : tabID
            });

            $('#tab_main_head a').last().tab('show');

        }

    });

    $(document).on('dblclick', '.tabitem', function(e) {

        var tabelem = $(this);
		//console.log(tabelem);
        var tabid = tabelem.attr('href');

        tabid = tabid.substring(1);
		if(tabid == "tab_1" || tabid == "tab_app0") // Dashboard schließen verhindern
		{
			return;
		}
        tab = tabs.getBSTabByID(tabid);
		
		//Cleanup Popover
		$('[data-popup="popover"]', '#'+tabid).popover('dispose');
		$('[data-popup="popoverurl"]', '#'+tabid).popover('dispose');
		
        tab.removeBSTab();

        // Load Last Tab

        var tabelem = $('#tab_main_head a').last();

        var href = tabelem.attr('href');
        var url = tabelem.attr('data-url');
		processURL4MenuItem(url);
        // Before Show, check if already exist

        if ($(href).is(':empty')) {

            $(href).load(url, function(result) {
                $('#tab_main_head a').last().tab('show');
				
            });

            var tabID = $('#tab_main_head a').last().attr('href');

            tabID = tabID.substring(7);


			

            $.post("eventhandler.php?type=tabhandler&action=select", {
                tabID : tabID
            });

        } else {

            var tabID = $('#tab_main_head a').last().attr('href');

            tabID = tabID.substring(7);

            $.post("eventhandler.php?type=tabhandler&action=select", {
                tabID : tabID
            });

            $('#tab_main_head a').last().tab('show');

        }

    });

	$(document.body).on( "click", ".PrintButton", function(e) {

		e.stopPropagation();
		var HideContent = new Array();
		$(this).parent().find("input.HideContent:checkbox:not(:checked)").each(function () {
		  HideContent.push($(this).val());
		});

		//Filterdaten ergänzen
		console.log($(this).data("formreference"));
		console.log(exists($(this).data("formreference")));
		var FormData = [];
		if(exists($(this).data("formreference")))
		{
			$("#"+$(this).data("formreference")).validationEngine({scroll: false,promptPosition : "topLeft",validateNonVisibleFields: true});
			if($("#"+$(this).data("formreference")).validationEngine('validate'))
			{
				FormData = $("#"+$(this).data("formreference")).serializeArray();
			}	
			else // Öffnen
			{
				console.log("NO");
				if ($("#"+$(this).data("formreference")).find('.dropdown-menu').is(":hidden")){
					
					$("#"+$(this).data("formreference")).find('.dropdown-toggle').dropdown('toggle');
				  }
				
				
				return;
			}	
			
			//console.log();
		}


		$(this).parent().find("form").validationEngine({scroll: false,validateNonVisibleFields: true});
		if($(this).parent().find("form").validationEngine('validate'))
		{	
			FormData = FormData.concat($(this).parent().find("form").serializeArray());
		}
		
		
		OpenPrintDialog($(this).data("printscript"),{ HideContent : {HideContent: HideContent}, FormData: FormData});
	});  
	$(document.body).on( "click",".PrintButton li", function(event) {

		event.stopPropagation();

	});
 
	$(document.body).on( "click",".PrintButtonGroup div", function(event) {

		event.stopPropagation();

	});	

	$(document).on('click', '.bs-canvas-close, .bs-canvas-overlay', function(){
		var elm = $(this).hasClass('bs-canvas-close') ? $(this).closest('.bs-canvas') : $('.bs-canvas');
		elm.removeClass('mr-0 ml-0');
		
		// console.log($('.bs-canvas.mr-0'));
		//Prüfen ob noch ein zweites offen ist
		if(!($('.bs-canvas.mr-0').length || $('.bs-canvas.ml-0').length))
		{
			$('.bs-canvas-overlay').remove();
		}
		return false;
	});
	//Popover
	/*
	$('body').popover(
	{
		sanitize: false,
		html: true,
		//trigger: $(this).data('trigger'),
		
		selector: '[data-popup="popoverload"]',
		content: function(){
			
			console.log("content");
			console.log($(this));
			var url = $(this).data('url');
			//console.log($(this).data('url'));
			//setTimeout(function(){InitPopoverChart(div_id, link)},10);
			//$('$FormNameDetail').load(url);
			return InitPopoverLoad($(this).data('url'), this);//$('<div></div>').load(url);
			//return PopoverCycleDataChart(div_id);
		}
	});
	
	*/

	
	onElementInserted('body', '[data-popup="popoverload"]', function(element) {
		//console.log(element);
		InitPopoverLoad(element);
	});
	

/*	
	var _getOptionsOriginal = $.fn.popover.Constructor.prototype.getOptions

	$.fn.popover.Constructor.prototype.getOptions = function (options) {
		console.log('test');
	  options = $.extend({}, options, this.$element.data())
	  return _getOptionsOriginal.call(this, options);
	}	
	*/
	
	
	
	
/*
	$(document).on('mouseenter', '[data-popup="popover"]:not(.disabled)', function(e) {
         
		var $target = $(this);
		$target.popover({
			sanitize: false,
			html: true,
			container: $target
		  });
		//$target.popover('show');
	});
	$(document).on('click', '[data-popup="popover"]:not(.disabled)', function(e) {
         
		var $target = $(this);
		//$target.popover('show');
	});	
	*/
	
	
	/*
	$(document).on('DOMNodeInserted', '[data-popup="popover"]', function(e) {
            var $target = $(this);
            console.log(this);
	
	});
	*/
/*	
	$(document).on('DOMNodeInserted', function(e) {
            var $target = $(this);
            console.log(this);
			console.log(e);
	
	});	
	*/
	$(document).on('click', '.card [data-action=collapse]:not(.disabled)', function(e) {
            var $target = $(this),
            slidingSpeed = 150;

            e.preventDefault();
            $target.parents('.card').toggleClass('card-collapsed');
            $target.toggleClass('rotate-180');
            $target.closest('.card').children('.card-header').nextAll().slideToggle(slidingSpeed);	
	
	});
	$(document).on('click', '.card [data-action=collapsearea]:not(.disabled)', function(e) {
            var $target = $(this),
            slidingSpeed = 150;

            e.preventDefault();
            $target.parents('.card').toggleClass('card-collapsed');
			$target.toggleClass('collapsed');
			
            $target.closest('.card').children('.card-header').nextAll().slideToggle(slidingSpeed);	
	
	});	

	$(document).on('click', '.card [data-action=hide]:not(.disabled)', function(e) {
		
		var $target = $(this);
		var $container = $target.parents('.PanelDetail').parent();

		

		e.preventDefault();
		
		HidePanelDetail($container);
	});
	
	
	

	
	$(document).on('click', '.card [data-action=increase]:not(.disabled)', function(e) {
            var $target = $(this),
            slidingSpeed = 150;

            e.preventDefault();
            //$target.parents('.card').parent().toggleClass('card-collapsed');
			var $col = $target.parents('.card').parents("div[class^='col-'],div[class*=' col-']");
            var $row = $col.parents(".row");
			var changed = false;
			//console.log($target.parents('.card').parents("div[class^='col-'],div[class*=' col-']"));
			var classNames = $col.attr("class").split(/\s+/);
            for (var j = 0; j < classNames.length; j++) 
			{
                var className = classNames[j];
				if(className.startsWith('col-'))
				{
					var classNameParts = className.split('-');
					var colSize = 4;
					if(classNameParts.length==3)
					{
						colSize = parseInt(classNameParts[2], 10);
					}
					else
					{
						colSize = parseInt(classNameParts[1], 10);
					}						
					if(colSize == 12) // Max Size
					{
						break;
					}
					var colSizeNew = colSize+1;
					
					var classNameNew = className.substr(0,className.lastIndexOf('-')+1)+colSizeNew;
					
					$col.removeClass(className);
					$col.addClass(classNameNew);
					changed = true;
					break;
				}
            }
			if(changed)
			{
				var $colprev = $col.prev();
				if(!$colprev.length)
				{
					var $colprev = $col.next();
				}					
				if($colprev.length)
				{
					var classNames = $colprev.attr("class").split(/\s+/);
					for (var j = 0; j < classNames.length; j++) 
					{
						var className = classNames[j];
						if(className.startsWith('col-'))
						{
							var classNameParts = className.split('-');
							var colSize = 4;
							if(classNameParts.length==3)
							{
								colSize = parseInt(classNameParts[2], 10);
							}
							else
							{
								colSize = parseInt(classNameParts[1], 10);
							}						
							
							if(colSize == 2) // Min Size
							{
								break;
							}
							
							var colSizeNew = colSize-1;
							
							var classNameNew = className.substr(0,className.lastIndexOf('-')+1)+colSizeNew;
							
							$colprev.removeClass(className);
							$colprev.addClass(classNameNew);
							changed = true;
							break;
						}
					}
				}				
			}
			
			console.log("resizegrid");
			$(".ui-jqgrid-btable", $row).each(function(i, obj) {
				var gridid = $(obj).attr("id");
				$('#'+gridid).jqGrid('resizeGrid');
			});
			$(".webix_gantt", $row).each(function(i, obj) {
				var id = $(obj).parent().attr("view_id");
				//$('#'+gridid).jqGrid('resizeGrid');
                $$(id).resize();
                //console.log("gefunden"+id);
			});			
			//$target.toggleClass('rotate-180');
            //$target.closest('.card').children('.card-header').nextAll().slideToggle(slidingSpeed);	
	
	});	
	
	$(document).on('click', '.card [data-action=fullscreen]:not(.disabled)', function(e) {

            e.preventDefault();
           // Define vars
            var $target = $(this),
                cardFullscreen = $target.closest('.card'),
                overflowHiddenClass = 'overflow-hidden',
                collapsedClass = 'collapsed-in-fullscreen',
                fullscreenAttr = 'data-fullscreen';

            // Toggle classes on card
            cardFullscreen.toggleClass('fixed-top h-100 rounded-0');

            // Configure
            if (!cardFullscreen.hasClass('fixed-top')) {
                $target.removeAttr(fullscreenAttr);
                cardFullscreen.children('.' + collapsedClass).removeClass('show');
                $('body').removeClass(overflowHiddenClass);
                $target.siblings('[data-action=move], [data-action=remove], [data-action=collapse], [data-action=increase]').removeClass('d-none');
            }
            else {
                $target.attr(fullscreenAttr, 'active');
                cardFullscreen.removeAttr('style').children('.collapse:not(.show)').addClass('show ' + collapsedClass);
                $('body').addClass(overflowHiddenClass);
                $target.siblings('[data-action=move], [data-action=remove], [data-action=collapse], [data-action=increase]').addClass('d-none');
            }
			//$(".ui-jqgrid").attr("id");
			//$(".ui-jqgrid", $target.parents('.card'))
			//$(".ui-jqgrid").jqGrid('resizeGrid');
			//console.log($(".ui-jqgrid").attr("id"));
			//console.log($(".ui-jqgrid", $target.parents('.card')));
			$(".ui-jqgrid-btable", $target.parents('.card')).each(function(i, obj) {
				var gridid = $(obj).attr("id");
				$('#'+gridid).jqGrid('resizeGrid');
			});
			$(".webix_gantt", $target.parents('.card')).each(function(i, obj) {
				var id = $(obj).parent().attr("view_id");
				//$('#'+gridid).jqGrid('resizeGrid');
                $$(id).resize();
                //console.log("gefunden"+id);
			});
            
			document.querySelectorAll('canvas, svg').forEach(
				function(e){
					let instance = echarts.getInstanceByDom(e);
					do{
						instance = echarts.getInstanceByDom(e);
						if(instance){
							//console.log(e)
							break;
						}
						e = e.parentElement;
					}while(e);
					if(instance){
						instance.resize();
					}
				}
			);			
			
			
			/*
			if($target.data( "fullscreen" ) == "active")
			{
				$target.data( "fullscreen", "" );
			}
			else
			{
				$target.data( "fullscreen", "active" );
			}
            $target.parents('.card').toggleClass('col-md-12');
			*/
            /*
			$target.toggleClass('rotate-180');
            $target.closest('.card').children('.card-header').nextAll().slideToggle(slidingSpeed);
			*/			
	
	});	

});


$(function() {
    $.fn.size = function() {
        return this.length;
    }
});
function onElementInserted(containerSelector, elementSelector, callback) {

    var onMutationsObserved = function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.addedNodes.length) {
                var elements = $(mutation.addedNodes).find(elementSelector);
                for (var i = 0, len = elements.length; i < len; i++) {
                    callback(elements[i]);
                }
            }
        });
    };

    var target = $(containerSelector)[0];
    var config = { childList: true, subtree: true };
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
    var observer = new MutationObserver(onMutationsObserved);    
    observer.observe(target, config);

}

function _InitPopoverLoad(url, obj, div_id)
{
    div_id = typeof b !== "undefined" ? div_id : "tmp-id-" + $.now();
    console.log("now");
    console.log($(obj));
    console.log($(obj).data('initialwidth'));
    var width = typeof $(obj).data('initialwidth') !== "undefined" && $(obj).data('initialwidth')!="" ? $(obj).data('initialwidth')  : "100"; 
    
    //console.log(url);
    $.ajax({
        url: url,//TODO divID übergeben
        success: function(response){
            $('#'+div_id).html(response);
        }
    });	
    return '<div id="'+ div_id +'" style="width: '+width+'px;">Loading...</div>';
}
function InitPopoverLoad(element)
{
    //console.log(element);
    var options = $.extend({}, 	{
        sanitize: false,
        html: true,
		container: element
    }, $(element).data());
    
    
    options = $.extend({}, 	options, {
        content: function(){
            
            console.log("content");
            console.log($(this));
            var url = $(this).data('url');
            return _InitPopoverLoad($(this).data('url'), this);//$('<div></div>').load(url);
            
        }
        });
    //console.log(options);
    
    $(element).popover(options);
}

var AlarmTypes = [];
/*
AlarmTypes[0] = {"Name": "Alarm", "CSS":"bg-orange-700", "Severity":3};
AlarmTypes[1] = {"Name": "Wartung", "CSS":"bg-amber", "Severity":2};
AlarmTypes[2] = {"Name": "Information", "CSS":"bg-green-700", "Severity":1};
AlarmTypes[3] = {"Name": "Produktionsstopp", "CSS":"bg-red-700", "Severity":5};
AlarmTypes[4] = {"Name": "Produktion abgeschlossen", "CSS":"bg-lightblue-900", "Severity":4};
*/				
var monthNames = [			'Januar',
			'Februar',
			'März',
			'April',
			'no translation',
			'Juni',
			'Juli',
			'August',
			'September',
			'Oktober',
			'November',
			'Dezember'];
function HidePanelDetail($container)
{

	
	/*
	$('.PanelDetail',$container).removeClass (function (index, className) {
		console.log(className);
		console.log(className.match('/\bcol-\S+/g'));
		return (className.match('^col-') || []).join(' ');
	});
	*/
	//Refactorn geht sicher besser
	var classNames = $('.PanelDetail',$container).attr("class").split(/\s+/);
	for (var j = 0; j < classNames.length; j++) 
	{
		var className = classNames[j];
		if(className.startsWith('col-'))
		{				
			$('.PanelDetail',$container).removeClass(className);
		}
	}
	$('.PanelDetail',$container).addClass($('.PanelDetail',$container).data('initclass') || "invisible");
	
	var classNames = $('.PanelOverview',$container).attr("class").split(/\s+/);
	for (var j = 0; j < classNames.length; j++) 
	{
		var className = classNames[j];
		if(className.startsWith('col-'))
		{				
			$('.PanelOverview',$container).removeClass(className);
		}
	}
	$('.PanelOverview',$container).addClass($('.PanelOverview',$container).data('initclass') || "col-md-12");		
	
	//console.log("resizegrid");
	$(".ui-jqgrid-btable", $container).each(function(i, obj) {
		var gridid = $(obj).attr("id");
		$('#'+gridid).jqGrid('resizeGrid');
	});
}
function DateDiffHumanReadable(date1, date2) {

    var seconds = Math.floor((date2 - date1) / 1000);

    var interval = Math.floor(seconds / 31536000);

    if (interval > 1) {
        return interval + " Jahre";
    }
    interval = Math.floor(seconds / 2592000);
    if (interval > 1) {
        return interval + " Monate";
    }
    interval = Math.floor(seconds / 86400);
    if (interval > 1) {
        return interval + " Tage";
    }
    interval = Math.floor(seconds / 3600);
    if (interval > 1) {
        return interval + " h";
    }
    interval = Math.floor(seconds / 60);
    if (interval > 1) {
        return interval + " min";
    }
    return Math.floor(seconds) + " s";
}

function getChartColorFromCSS(data)
{
	var colorArray = [];
	data.forEach((element) => {
		try
		{
			$el = $('<div class="'+element.CSS+'"></div>').appendTo('body');
			
			color = $el.css('background-color');
			$el.remove();
			//color = getComputedStyle(document.querySelector('.'+element.CSS)).backgroundColor;
			colorArray.push(color);
		}
		catch(e)
		{
			colorArray.push("#b71c1c");
		}
	});	
	return colorArray;
}
		
function DateRangePickerCB(start, end, chosenLabel, sender) {
	//$(FormName+'_reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
	var element = this.element;
	if(sender != null)
	{
		element = sender;
	}
	$('span', element).html(start.format('D.MMMM YYYY') + ' - ' + end.format('D.MMMM YYYY'));
}

$.extend(true, $.fn.datetimepicker.defaults, {
icons: {
  time: 'icon-watch2',
  date: 'icon-calendar',
  up: 'icon-arrow-up12',
  down: 'icon-arrow-down12',
  previous: 'icon-arrow-left12',
  next: 'icon-arrow-right13',
  today: 'fas fa-calendar-check',
  clear: 'icon-eraser',
  close: 'icon-cross'
}
});
$(document).on('click', '#tab_main_head a', function(e) {

    e.preventDefault();
    var url = $(this).attr("data-url");
    var href = this.hash;
    var pane = $(this);

    var tabID = href.substr(7);

    $.post("eventhandler.php?type=tabhandler&action=select", {
        tabID : tabID
    });

    // check first if empty, otherwise load on first request

    if ($(href).is(':empty')) {

        $(href).load(url, function(result) {
            pane.tab('show');
        });

    } else {
        pane.tab('show');
    }

});

// load first tab content
/*
$('#home').load($('.active a').attr("data-url"), function(result) {
    $('.active a').tab('show');
});
*/

/* Fixes SubTabs Problem */

$(document).on('click', '#subtabs li a', function(e) {

    var id = $(this).attr('href');

    var id = id.substr(1);

    $('#subtabs_content div').removeClass('active');

    $("div[id='" + id + "']").addClass('active');
});

$(document).ready(function() {

    // Accordion Script

    $(function() {

        var itemsList = $('.accordion > li > ul'), // Define submenu list
        itemLink = $('.accordion > li > a');
        // Define submenu links
        expandedItem = $('.accordion > li > ul.expand');
        // Define Expanded Menu

        // Hide all submenu links
        itemsList.hide();

        // Show Expanded Item (.expand)
        expandedItem.show();

        // Click on any link in main menu
        itemLink.click(function(e) {
            e.preventDefault();

            //If that link is not ("!$" -negation) active (has no ".active" class)
            if (!$(this).hasClass('active')) {

                //Remove this class
                itemLink.removeClass('active');

                //Close previously opened submenu list
                itemsList.filter(':visible').slideUp('normal');

                //Open clicked (4 steps previous) link
                $(this).addClass('active').next().stop(true, true).slideDown('normal');

                // If link is active
            } else {

                //Remove class ".active"
                $(this).removeClass('active');

                //Close menu
                $(this).next().stop(true, true).slideUp('normal');
            }
        });

    });

});
function handleAJAXResult(data,refresh=true)
{
	if(data.result)
	{
		Notify("Änderung übernommen.");
		if(refresh)
		{
			if(exists(data.id))
			{
				console.log(data);
				if(exists(data.grid))
				{
					console.log(data.grid);
					$("#"+data.grid).jqGrid('setSelection', data.id, true);
				}
				else
				{
					if(data.id != null)//if(data.id>0)
					{
						refreshCurrentTab("ID="+data.id);
					}
					else
					{
						refreshCurrentTab();
					}
				}
			}
			else
			{
				refreshCurrentTab();
			}
		}
	}
	else
	{
		if(data.msg != "")
		{
			Notify(data.msg,"FEHLER","error");
		}
		else
		{
			Notify("Fehler bei der Übernahme der Änderungen.","FEHLER","error");
		}		
	}
}
function Notify(Text,Title,Level,Icon)
{
	switch(Level) 
	{
		case "danger":
		case "error":
			PClass = "bg-danger-400 border-danger";
			PIcon = "icon-info22";
			break;
		case "warning":
			PClass = "bg-warning-400 border-warning";
			PIcon = "icon-info22";
			break;
		case "info":
			PClass = "bg-info-400 border-info";
			PIcon = "icon-info22";
			break;
		case "success":
			PClass = "bg-success-400 border-success";
			PIcon = "icon-info22";
			break;
		default:
			PClass = "bg-success-400 border-success";
			PIcon = "icon-info22";
	}
	if(!exists(Icon) || Icon == null)
	{
		PIcon = Icon;
	}
	new PNotify({
		title: Title,
		text: Text,
		icon: PIcon,
		addclass: PClass,
		delay: 3000
		});
}
/*Sidebar Helper*/
function showSidebarRight()
{
	console.log('show');
	if(!$('body').hasClass('sidebar-mobile-right'))
	{
		$('body').addClass('sidebar-mobile-right')
	}	
	if(!$('body').hasClass('sidebar-right-visible'))
	{
		$('body').addClass('sidebar-right-visible')
	}

	$("#Spinner").show();
			
}
function hideSidebarRight()
{
	//console.log('hide');
	$('body').removeClass('sidebar-mobile-right sidebar-right-visible');
	$('body').removeClass('sidebar-right-visible');
	//$.unblockUI();

//alert("TEST2");
	$("#Spinner").hide();
	//$("#Spinner").remove();
}
function correctAutocompleteValues4GridForm(formid,acField,valueField) {
	//console.log($("#tr_"+valueField, formid));
	//console.log($("#tr_"+valueField, formid).is(":visible"));
	//if($("#tr_"+valueField, formid).is(":visible"))
	//{
	$("#tr_"+valueField, formid).hide();
	var id = $("#"+acField, formid).val();
	$("#"+acField, formid).val($("#"+valueField, formid).val());
	$("#"+valueField, formid).val(id);
	//}
}
//Alle Autocomplete Felder ausbessern(einblenden/ausblenden und die Daten ausbessern) alternativ für alle Felder correctAutocompleteValues4GridForm ausführen
function correctAutocomplete4GridForm() {
	var $t = $(this)[0];
	//console.log(this);
	//console.log($(this));
	try 
	{
		var GridNameClear = $t.id;		
		var colModel = $("#"+GridNameClear).jqGrid('getGridParam', 'colModel');
		var formid = "#FrmGrid_"+GridNameClear;
		//console.log(formid);
		Array.from($(formid)[0].elements).forEach((input) => {
			if(input.type=="text")
			{
				if(c = colModel.find(x => x.index === input.id && x.name.toLowerCase().endsWith("autocomplete") && x.hasOwnProperty('editoptions') && x.editoptions.hasOwnProperty('IDElement')))
				{
					correctAutocompleteValues4GridForm(formid,c.name,c.editoptions.IDElement.substring(1));
					//$("#"+c.name,formid ).val($("#"+c.name,formid ).val().replace(',', '.'));
				}
			}
		});
		
		
	}
	catch(e)
	{
		console.log(e);
	}	

}
function correctAll4GridView(formid) {
	correctAutocomplete4GridView(formid);
	correctRowAlert4GridView(formid);
	correctRowHighlight4GridView(formid);
}
function correctAutocomplete4GridView(formid) {
	//console.log($("[id$=autocomplete]", formid));
	$("[id$=autocomplete]", formid).hide();
	if($("[id=v_RowAlert]", formid).text().trim().length > 0)
	{
		$("[id=trv_RowAlert]", formid).find('.CaptionTD').remove();
		$("[id=v_RowAlert]", formid).attr('colspan',2);
		
		$("[id=trv_RowAlert]", formid).show();	
	}
}
function correctRowAlert4GridView(formid) {
	if($("[id=v_RowAlert]", formid).text().trim().length > 0)
	{
		$("[id=trv_RowAlert]", formid).find('.CaptionTD').remove();
		$("[id=v_RowAlert]", formid).attr('colspan',2);
		
		$("[id=trv_RowAlert]", formid).show();	
	}
}
function correctRowHighlight4GridView(formid) {
	if($("[id=v_RowHighlight]", formid).text().trim().length > 0)
	{
		$("[id=trv_RowHighlight]", formid).find('.CaptionTD').remove();
		$("[id=v_RowHighlight]", formid).attr('colspan',2);
		
		$("[id=trv_RowHighlight]", formid).show();	
	}
}
function correctValues4GridForm() {
	$("#TblGrid_"+this.id+"_2 #sData").click(function () {
		try 
		{
			var GridNameClear = this.closest("table").id.substring(8).slice(0,-2);		
			var colModel = $("#"+GridNameClear).jqGrid('getGridParam', 'colModel');
			var formid = "#FrmGrid_"+GridNameClear;
			// console.log(colModel);
			Array.from($(formid)[0].elements).forEach((input) => {
				if(input.type=="text")
				{
					
					if(c = colModel.find(x => x.index === input.id && exists(x.editrules) && x.editrules.number == true))
					{
						// console.log(c);
						$("#"+c.name,formid ).val($("#"+c.name,formid ).val().replace(',', '.'));
					}
					else if(c = colModel.find(x => x.index === input.id && exists(x.searchrules) &&  x.searchrules.date == true)) // Datumsfeld
					{
						
						//console.log(c);
						if($("#"+c.name,formid ).val() == '')
						{
							$("#"+c.name,formid ).val('null');	
						}
						
					}
				}
			});
			
		}
		catch(e)
		{
			console.log(e);
		}	
	});
}
function correctNumberInput4GridForm() {
	$("#TblGrid_"+this.id+"_2 #sData").click(function () {
		try 
		{
			var GridNameClear = this.closest("table").id.substring(8).slice(0,-2);		
			var colModel = $("#"+GridNameClear).jqGrid('getGridParam', 'colModel');
			var formid = "#FrmGrid_"+GridNameClear;
			Array.from($(formid)[0].elements).forEach((input) => {
				if(input.type=="text")
				{
					if(c = colModel.find(x => x.index === input.id && exists(x.editrules) && x.editrules.number == true))
					{
						// console.log(c);
						$("#"+c.name,formid ).val($("#"+c.name,formid ).val().replace(',', '.'));
					}
				}
			});
			
		}
		catch(e)
		{
			console.log(e);
		}	
	});
}
function createGenericCard4Grid(GridNameClear, $table) {
    
	var colModel = $('#'+GridNameClear).getGridParam('colModel');
	var len,row,j=0,$card,$alert,showAlert=false,showHighlight=false;
	//console.log(colModel);
	
	len = $table.rows.length;
	while(j<len)
	{
		row = $table.rows[j],content="",contentdata="";
		if( $(row).hasClass('jqgrow'))//ignore first row
		{
			$alert=$(row).children("[aria-describedby='"+GridNameClear+"_RowAlert']");
			if($alert.length)
			{
				if($alert.text().trim() != "")
				{
					showAlert = true;
					$(row).addClass("bg-danger text-none");
					
					$(row).popover({
						content : $alert.html(),
						sanitize: false,
						html: true,
						trigger: "hover",
						placement:"bottom"
						//container: this
					  });
				}
			}	
			$hightlight=$(row).children("[aria-describedby='"+GridNameClear+"_RowHighlight']");
			if($hightlight.length)
			{
				if($hightlight.text().trim() != "")
				{
					showHighlight = true;
					$(row).addClass("pulse-bghighlight");
					
				}
			}			
			$card=$(row).children("[aria-describedby='"+GridNameClear+"_Card']");
			if($card.length)
			{
				//console.log("yes");
				
				$(row).children(".show-card").not("[aria-describedby='"+GridNameClear+"_Card']").each(function(){
					
					col = colModel.filter(col => GridNameClear+"_"+col.index == $(this).attr("aria-describedby"));
					if(col.length)
					{
						col=col[0];
						if((col.index != "RowAlert" || (col.index == "RowAlert" && showAlert)) ||
							(col.index != "RowHighlight" || (col.index == "RowHighlight" && showHighlight))
						) // Fehler anzeigen
						{
							contentdata += '<div class="row"><div class="col-6">'+col.label+':</div><div class="col-6">'+ $(this).html()+"</div></div>";					
						}
						
					}

				});
				var $name;

				content = '<div class="card border-top '+(showAlert ? "border-top-danger" : "border-top-success") +' '+(showHighlight ? "pulse-info" : "") +' rounded-top-0">';
				
				var cardheader = '<div class="card-header">';
				if($name = $(row).children("[aria-describedby='"+GridNameClear+"_Name']"))
				{ 
					if($name.html() !== undefined)
					{
						cardheader += '<h6 class="card-title">'+ $name.html() +'</h6>';
					}
				}
				
				$(row).children(".show-cardtitle").not("[aria-describedby='"+GridNameClear+"_Card']").each(function(){

						cardheader += '<h6 class="card-title pt-1">'+ $(this).html()+'</h6>';
				});
				
				if(cardheader.length > 30)
				{
					cardheader += '</div>';
					content += cardheader;
				}
				content += '<div class="card-body">'+ contentdata +'</div></div>';
				
				$card.html(content);
				
			}
			//$("body").find("[aria-controls='name1']");
			
		}
			
		j++;
	}
	
	return "";
}
function inlineEditRow(GridNameClear, id, selected, extraparam, options){
	var lastSelection = "";
	
	if(!exists(options) || options ==null)
	{
		options = {};
	}
	
	extraparam = extraparam || {};
	
	var settings = {
		CorrectAutocompleteValues : true};
		
	//Optionen übernehmen
	jQuery.extend(settings, options);	
	
	if(jqGridLastSelection.hasOwnProperty(GridNameClear))
	{
		lastSelection = jqGridLastSelection[GridNameClear];
	}
	if (id && id !== lastSelection) 
	{
		var grid = $('#'+GridNameClear);
		if(jqGridLastSelection.hasOwnProperty(GridNameClear))
		{
			grid.jqGrid('restoreRow',jqGridLastSelection[GridNameClear]);
		}
		grid.jqGrid('editRow',id, {
		keys: true,
		savetext: "",
		extraparam: extraparam,
		onEnter : function(rowid, options, event) {
			options.extraparam = extraparam;
			/*
			var gridrow = $(this).jqGrid('getRowData',rowid);
			console.log(gridrow);
			*/
			correctNumberInput4GridInlineEdit.call(this, rowid, options);
			$(this).jqGrid("saveRow", rowid, options );
			/*
			if (confirm("Save the row with ID: "+rowid) === true) {
				
			}
			*/
		},
		oneditfunc : function(rowid, options, event) {
			if(settings.CorrectAutocompleteValues)
			{
				correctAutocompleteFields4GridInlineEdit.call(this, rowid, options);
			}
		},
		aftersavefunc : function(rowid, options, event) {
			if(settings.CorrectAutocompleteValues)
			{
				$(this).trigger("reloadGrid");
			}
		}
		});
    }
	jqGridLastSelection[GridNameClear] = id;
}
function correctNumberInput4GridInlineEdit(rowid, options)
{
	var $t = $(this)[0];
	var ind = $($t).jqGrid("getInd",rowid,true);
	if(ind !== false)
	{
		var cm, nm
		$(ind).children('td[role="gridcell"]').each(function(i) 
		{
			cm = $t.p.colModel[i];
			nm = cm.name;
			
			if(cm.hasOwnProperty('editrules') && cm.editrules.hasOwnProperty('number') && cm.editrules.number == true)
			{
				if($("input",this).length)
				{
					$("input",this).val($("input",this).val().replace(',', '.'));
				}
			}		
		});
	}
}
function correctAutocompleteFields4GridInlineEdit(rowid, options)
{
	var $t = $(this)[0];
	var ind = $($t).jqGrid("getInd",rowid,true);
	if(ind !== false)
	{
		var cm, nm
		$(ind).children('td[role="gridcell"]').each(function(i) 
		{
			cm = $t.p.colModel[i];
			nm = cm.name;
			//console.log(cm);
			if(cm.name.endsWith("autocomplete") && cm.hasOwnProperty('editoptions') && cm.editoptions.hasOwnProperty('IDElement'))
			{
				var IDElement = cm.editoptions.IDElement;
				var $IDElement = $("td[aria-describedby='"+$t.id+"_"+IDElement.substring(1)+"']",ind)

				var textval = $("input",$IDElement).val();
				$("input",$IDElement).val($("input",this).val());
				$("input",this).val(textval);
				$IDElement.hide();
				
				$(this).show();
			}				

		});
	}
}
function correctFormData(dataform, FormName)
{
	$.each(dataform, function(key, data)
	{
		var item = $("#"+this.name, FormName);
		if(item.hasClass("ui-autocomplete-input")) // Autocomplete Feld
		{
			this.value = item.data("id");
		}		
		else if(item.hasClass("number")) // Nummer
		{
			if(this.value == '')
			{
				delete dataform[key];
			}
			else
			{
				this.value= this.value.replace(',','.');
			}			
		}		
		else if(item.hasClass("DATUMSKLASSE")) // Datum konvertieren
		{
			this.value= getDateForDB(getDatefromString(this.value));
			if(this.value == null)
			{
				delete dataform[key];
			}
		}
	});
	
	return dataform.filter(Boolean);
}
function splitFormData(dataform, groupby, separator)
{
	var dataresult = [];
	if(!exists(groupby) || groupby ==null)
	{
		groupby = ""
	}
	if(!exists(separator) || separator ==null)
	{
		separator = "_"
	}
	
	checkvalue = groupby+separator;
	
	checkvalue = checkvalue.toLowerCase();
	$.each(dataform, function(key, value)
	{
		namecheck = value.name.toLowerCase();
		if(namecheck.startsWith(checkvalue))
		{
			var o = JSON.parse(JSON.stringify(value));
			o.name = o.name.substring(checkvalue.length);
			dataresult.push(o);
		}
		
	});
	
	return dataresult;
}
function convertFormData2Object(dataform)
{
	var dataresult = {};
	dataform.forEach((value, key) => (dataresult[value.name] = value.value));
	
	return dataresult;
}
function gridFormatterCard(cellValue, options, rowObject) {
    
	/*
	console.log(cellValue);
	console.log(options);
	console.log(rowObject);
	*/
	/*
	console.log("#"+options.gid +" #"+rowObject.jqgrid_row);
	console.log($("#"+options.gid).find("#"+rowObject.jqgrid_row));
	console.log($("#"+options.gid+" > tbody"));
	*/
	/*
	$("#"+options.gid).children("tbody").children("tr.jqrow").each(function(){
			console.log($(this));
        });
		*/
	//console.log($("#"+options.gid +" > "#"+rowObject.jqgrid_row));
	return "";
}
function unformat(cellValue, options, rowObject) {
    return cellValue;
}
function formatCell(cellValue, options, rowObject) {
	if(cellValue != null) {
		return "<span class='"+options.colModel.CellClasses+"'>"+ cellValue +"</span>";
	} else {
		return "";
	}	
}
function formatProgressbar(cellValue, options, rowObject) {
	if(cellValue != null) {
		percentValue = Math.round(cellValue*100);
		return '<div style="/*! padding-bottom: 30px; */" class="progressbar-grid w-100 h-auto p-1"><div class="theme_bar_lg"><div class="pace_progress '+options.colModel.ProgressClasses+'" data-progress-text="'+ percentValue +'%" data-progress="'+ percentValue +'" style="width: '+ percentValue +'%;"></div><div class="pt-2">'+ percentValue +'%</div></div></div>';
		//return '<div style="padding-bottom: 30px;" class="pace-demo w-auto h-auto p-3 pb-4 '+options.colModel.CellClasses+'"><div class="theme_bar_lg"><div class="pace_progress" data-progress-text="'+ percentValue +'%" data-progress="'+ percentValue +'" style="width: '+ percentValue +'%;">'+ percentValue +'%</div></div></div>';
	} else {
		return "";
	}	
}
function customFormatterCurrency(cellValue, options, rowObject) {
	if (cellValue === null || cellValue === '') 
	{
		return '';
	}
	return $.fn.fmatter.currency(cellValue, options);
}
function formatNumber(cellValue, options, rowObject) {
	return cellValue.replace(".",",");
}
function uformatNumber(cellValue, options, rowObject) {
	//return cellValue.replace(",",".");
}

function makeRowAlert(cellValue, options, rowObject) {
	if(cellValue != null) {
		return '<span class="alert bg-danger text-white alert-styled-left m-0 p-1 d-inline-block w-100">'+ cellValue +'</span>';
	} else {
		return "";
	}	
}
function makeRowHighlight(cellValue, options, rowObject) {
	if(cellValue != null) {
		return '<span class="alert bg-amber-600 alert-styled-left m-0 p-1 d-inline-block w-100">'+ cellValue +'</span>';
	} else {
		return "";
	}	
}
function makeUntilToBadge(cellValue, options, rowObject) {
    
    var Now = new Date();
    if(cellValue==null)
    {
      return "";
    }
    else
    {
      var UntilDate = getDatefromString(cellValue.substring(0,19));
      var Diff = dateDiffInDays(UntilDate,Now);
      
      var UntilDateText = getDateOnlyFormat(UntilDate);


      if(Diff<0)
      {
        return "<span class='label label-danger'>"+ UntilDateText +"</span>"; 
      }
      else if(Diff<rowObject.UntilWarningDays)
      {
        return "<span class='label label-warning'>"+ UntilDateText +"</span>"; 
      }
      else
      {
        return "<span class='label label-success'>"+ UntilDateText +"</span>"; 
      
      }
    }
}

function makeDateBadge(cellValue, options, rowObject) {
    
    var Now = new Date();
    if(cellValue==null)
    {
      return "";
    }
    else
    {
      var UntilDate = getDatefromString(cellValue.substring(0,19));
      
      var UntilDateText = getDateOnlyFormat(UntilDate);

      return "<span class='label label-default'>"+ UntilDateText +"</span>"; 
      
    }
}
function makeFileExtentionBadge(cellValue, options, rowObject) {
	if(cellValue != null) {
		return '<span class="badge overflow-hidden align-middle '+getFileExtensionCSS(cellValue)+'" style="width:45px;">'+ cellValue.toUpperCase() +'</span>';
	} else {
		return "";
	}	
}
function makeBadge(cellValue, options, rowObject) {
	if(cellValue != null) {
		return "<span class='label label-default'>"+ cellValue +"</span>";
	} else {
		return "";
	}	
}
function makeConditionStyleBadge(cellValue, options, rowObject) {
	
	if(cellValue != null) {
		
		//console.log(options);
		if(!exists(options) || options ==null)
		{
			options = {}
			Button = {}
		}	
		if(!exists(options.colModel.Badge) || options.colModel.Badge == null)
		{
			options.colModel.Badge = {}
		}
		var settings = {
		GridNameClear : options.gid,
		Label : "",
		ForeColor : "#ffffff",
		Color : "#999999",
		Class : "",
		Style : "",
		Title : "",
		ParentID : "",
		IDLabel: "",
		IDColor: ""};
		
		//Optionen übernehmen
		jQuery.extend(settings, options.colModel.Button);

		if(settings.Title != "")
		{
			settings.Title = settings.Label;
		}	
	

		if(settings.IDLabel != "")
		{
			settings.Label = rowObject[settings.IDLabel];
		}
		if(settings.IDColor != "")
		{
			settings.Color = rowObject[settings.IDColor];
		}		
		if(settings.IDForeColor != "")
		{
			settings.ForeColor = rowObject[settings.IDForeColor];
		}		
		if(settings.Title == "")
		{
			settings.Title = settings.Label;
		}			
		if(settings.Style != "")
		{
			settings.Style = "style='background-color:"+settings.Color+";color:"+settings.ForeColor+";"+settings.Style+"'";
		}
		else
		{
			settings.Style = "style='background-color:"+settings.Color+"';color:"+settings.ForeColor+"";
		}	
		return "<span class='ConditionStyleBadge label "+settings.Class+"' data-id='"+ cellValue +"' data-options='"+ JSON.stringify(settings) +"' title='"+settings.Title+"' "+settings.Style+">"+settings.Label+"</span>";
	} else {
		return "";
	}
}
function makeConditionStyleCell(cellValue, options, rowObject) {
	
	if(cellValue != null) {
		
		//console.log(rowObject);
		if(!exists(options) || options ==null)
		{
			options = {}
			Button = {}
		}	
		if(!exists(options.colModel.Badge) || options.colModel.Badge == null)
		{
			options.colModel.Badge = {}
		}
		
		
		var Style="";
		var settings = {
		GridNameClear : options.gid,
		Label : "",
		ForeColor : "#ffffff",
		Color : "#999999",
		Class : "",
		Style : "",
		WindowTitle : "",
		Title : "",
		ParentID : "",
		RowID : "",
		IDLabel: "",
		IDColor: "",
		IDForeColor: ""};
		
		//Optionen übernehmen
		jQuery.extend(settings, options.colModel.Button);

		/*
		if(settings.Title != "")
		{
			settings.Title = settings.Label;
		}	
		*/
		if(exists(rowObject["ID"]))
		{
			settings.RowID = rowObject["ID"];
		}		

		if(settings.IDLabel != "")
		{
			settings.Label = rowObject[settings.IDLabel];
		}		
		if(settings.Label == "")
		{
			settings.Label = cellValue;
		}				
		if(settings.IDColor != "")
		{
			settings.Color = rowObject[settings.IDColor];
		}		
		if(settings.IDForeColor != "")
		{
			settings.ForeColor = rowObject[settings.IDForeColor];
		}		
		if(settings.Title == "")
		{
			settings.Title = settings.Label;
		}			
		if(settings.WindowTitle == "")
		{
			settings.WindowTitle = options.colModel.label;
		}			
		if(settings.Style != "")
		{
			Style = "style='display:block;background-color:"+settings.Color+";color:"+settings.ForeColor+";"+settings.Style+"'";
		}
		else
		{
			Style = "style='display:block;background-color:"+settings.Color+";color:"+settings.ForeColor+"'";
		}	
		delete settings.Style;
		return "<span class='ConditionStyleCell "+settings.Class+"' data-id='"+ cellValue +"' data-parentid='"+ settings.ParentID +"' data-options='"+ JSON.stringify(settings) +"' title='"+settings.Title+"' "+Style+">"+settings.Label+"</span>";
	} else {
		return "";
	}
}
function makeSignalLight(cellValue, options, rowObject) {
    

      if(cellValue == '1')
      {
        return "<span class='label label-success'> </span>"; 
      }
      else if(cellValue == '2')
      {
        return "<span class='label label-warning'> </span>"; 
      }
      else if(cellValue == '3' || cellValue == '0')
      {
        return "<span class='label label-danger'> </span>"; 
      }  
      else
      {
        return "<span class='label label-default'> </span>"; 
      
      }
}


function makeBold(cellValue, options, rowObject) {
    if (cellValue != null) {
        return "<strong>" + cellValue + "<\/strong>";
    } else {
        return "";
    }	
}
function makeItalic(cellValue, options, rowObject) {
    if (cellValue != null) {
        return "<i>" + cellValue + "<\/i>";
    } else {
        return "";
    }	
}
function makeAvatar(cellValue, options, rowObject) {
    if (cellValue != null) {
        return getAvatar(cellValue,'');
    } else {
        return "";
    }
}
function makeAvatarXL(cellValue, options, rowObject) {
    if (cellValue != null) {
        return getAvatar(cellValue,'xl');
    } else {
        return "";
    }
}


function makeNormal(cellValue, options, rowObject) {
    return cellValue;
}


function State(cellValue, options, rowObject) {

    if (cellValue == 1) {
        return "<span class='label label-success'>Aktiv</span>";
    } else {
        return "<span class='label label-danger'>Nicht Aktiv</span>";
    }

}


function makeYesNo(cellValue, options, rowObject) {
    if (cellValue == 2) {
        return "<span class='red'>Ja</span>";
    } else {
        return "<span>Nein</span>";
    }
}

function makeFlag(cellValue, options, rowObject) {
    if (cellValue != null) {
        return "<span class='" + cellValue + " flag' style='vertical-align:center;'>" + cellValue + "<\/span>";
    } else {
        return "";
    }
}

function makeDownloadLink(cellValue, options, rowObject) {
    if (cellValue != null) {
        return "<a href='php/GetFile.php?GUID=" + cellValue + "' target='_blank'>Anzeigen</a>";
    } else {
        return "";
    }
}
function makeLanguageIcon(cellValue, options, rowObject) {
    if (cellValue != null) {
        return "<img src='images/flags/" + cellValue + "' alt='flagicon'>";
    } else {
        return "";
    }
}
function makeImageLanguageIcon(cellValue, options, rowObject) {
    if (cellValue != null) {
        return "<img src='images/" + cellValue + "' alt=''>";
    } else {
        return "";
    }
}
function makeImage(cellValue, options, rowObject) {
    if (cellValue != null && cellValue != "") {
		if(!exists(options) || options ==null)
		{
			options = {};
		}
		if(!exists(options.colModel.Image) || options.colModel.Image == null)
		{
			options.colModel.Image = {}
		}		
		var settings = {
		GridNameClear : options.gid,
		IDAlt : "", // Alt Object
		Alt : "", // Alt Text
		IDTitle : "", // Title Object
		Title : "", // Title Text
		ForeColor : "#ffffff",
		Color : "#999999",
		Class : "",
		Style : "",
		WindowTitle : "",
		Title : "",
		ParentID : "",
		RowID : ""};
		
		//Optionen übernehmen
		jQuery.extend(settings, options.colModel.Image);		
		
				
		if(settings.IDAlt != "")
		{
			settings.Alt = rowObject[settings.IDAlt];
		}					
		if(settings.IDTitle != "")
		{
			settings.Title = rowObject[settings.IDTitle];
		}			
		
        return "<img class='"+settings.Class+"' src='" + cellValue + "' alt='"+settings.Alt+"' title='"+settings.Title+"'>";
    } else {
        return "";
    }
}
function makeBase64Image(cellValue, options, rowObject) {

	if (cellValue != null && cellValue != "") {
		if(!exists(options) || options ==null)
		{
			options = {};
		}
		if(!exists(options.colModel.Image) || options.colModel.Image == null)
		{
			options.colModel.Image = {}
		}		
		var settings = {
		GridNameClear : options.gid,
		IDAlt : "", // Alt Object
		Alt : "", // Alt Text
		IDTitle : "", // Title Object
		Title : "", // Title Text
		ForeColor : "#ffffff",
		Color : "#999999",
		Class : "GridThumbnail",
		Style : "",
		WindowTitle : "",
		Title : "",
		ParentID : "",
		RowID : ""};
		
		//Optionen übernehmen
		jQuery.extend(settings, options.colModel.Image);		
		
				
		if(settings.IDAlt != "")
		{
			settings.Alt = rowObject[settings.IDAlt];
		}					
		if(settings.IDTitle != "")
		{
			settings.Title = rowObject[settings.IDTitle];
		}			
		
        return "<img class='"+settings.Class+"' src='data:image/png;base64,"+cellValue+"' alt='"+settings.Alt+"' title='"+settings.Title+"'>";
    } else {
        return "";
    }
}

function buildUserConfigArray(Elements) {
  var PGC = {};
  var position = 0;
  $(Elements).each(function(){
    var Name = $(this).attr('id');
    Name = Name.substr(Name.indexOf('_')+1);
    
    PGC[Name] = {};
    PGC[Name]["hidden"] = $(this).is(":hidden");
    PGC[Name]["width"] = $(this).width();
	PGC[Name]["pos"] = position;
	
	position++;
    //PGC[Name] = PGCTemp;

  })

  return PGC;
}
function initUserConfigGrid(GridNameClear, UserConfigObj, GridOffset)
{
	if(UserConfigObj != "")
	{
		var UserConfigObj = JSON.parse(UserConfigObj);
		
		var colModel = $("#"+GridNameClear).jqGrid('getGridParam','colModel');
		var i = 0;
		$(colModel).each(function(){
			
			$(this)[0]["OriginPos"] = i++;
			$(this)[0]["ColumnConfigPos"]  = 999;		
			if(!exists($(this)[0]["hidedlg"]) || $(this)[0]["hidedlg"] == false)
			{
				//$(this)[0]["OriginPos"] = i++;
				//$(this)[0]["ColumnConfigPos"]  = 999;
				if(exists(UserConfigObj[$(this)[0]["name"]]))
				{
					$(this)[0]["ColumnConfigPos"] = parseInt(UserConfigObj[$(this)[0]["name"]].pos);
					//console.log($(this));		
				
					if(UserConfigObj[$(this)[0]["name"]].hidden == "true")
					{
						$("#"+GridNameClear).hideCol($(this)[0]["name"]);
					}
					else
					{
						$("#"+GridNameClear).showCol($(this)[0]["name"]);
					}
				}
			}
		})
		//colModel umsortieren
		
		var myColModel = Array.from(colModel);
		myColModel.sort((a,b) => (a.ColumnConfigPos > b.ColumnConfigPos) ? 1 : ((b.ColumnConfigPos > a.ColumnConfigPos) ? -1 : 0));
		//colOrder = myColModel.filter(function(a) {return !exists(a.hidedlg) || a.hide || a.hidedlg == false;}).map(a => a.OriginPos);
		colOrder = myColModel.map(a => a.OriginPos);
		//console.log(colOrder);
		
		
		//https://stackoverflow.com/questions/15062052/jqgrid-columns-reorder
		$("#"+GridNameClear).remapColumns(colOrder,true);

		$(colModel).each(function(){
			
			if(exists(UserConfigObj[$(this)[0]["name"]]))
			{
				//console.log($(this));	
				$("#"+GridNameClear).jqGrid('setColWidth',$(this)[0]["name"],parseInt(UserConfigObj[$(this)[0]["name"]].width));
				//console.log($(this));	
			}
		})	
		
		$("#"+GridNameClear).trigger("reloadGrid");

	}
	ResizeGrid(GridNameClear,GridOffset);
}
function saveUserConfigDialog(ScriptName, GridNameClear)
{
	var UserConfigName = prompt ('Geben Sie eine Bezeichnung für die Ansicht ein.\r\nEs werden nur Filter welche über die Lupe definiert wurden übernommen.',$("#"+GridNameClear+"UserConfigID option:selected").text());
	if (UserConfigName)
	{
		var filter = $("#fbox_"+GridNameClear);
		saveUserConfig(ScriptName,"#gview_"+GridNameClear+" table.ui-jqgrid-htable thead tr.ui-jqgrid-labels th",filter.jqFilter('filterData'),UserConfigName,0);
	}	
}
function saveUserConfig(ScriptName, Elements, Filter, Name, IsDefault)
{
  var ColumnConfig = buildUserConfigArray(Elements);
  if(ColumnConfig)
  {
    $.ajax({
       type: 'POST',
       url: 'eventhandler.php?type=UserConfig&action=save',
       data: ({Script: ScriptName, ColumnConfig: ColumnConfig, Filter: Filter, Name: Name, IsDefault: IsDefault}),
       dataType: 'html',
       success: function(data){
			var param = data.split(";");
			if(param[0] == 'Success')
			{
				$.notify(
				{message: param[1]},
				{type: 'success'});					
			} 
			else if(param[0] == 'Error')
			{
				$.notify(
				{message: param[1]},
				{type: 'danger'});	
			} 
			else
			{
				$.notify(
				{message: data},
				{type: 'danger'});
			}
       },
       error: function(request,error) {
        //alert('Fehler beim Senden zum Server. Bitte nocheinmal versuchen.');
       }
     });
   }
}

function convertIcons() {

    $(".ui-jqgrid-toppager .ui-icon,.ui-jqgrid-pager .ui-icon").each(function(e) {

        var classname = $(this).attr('class').split(' ')[1];

        switch(classname) {

            case "add" :
                $(this).replaceWith("<i class='icon-plus'></i> ");
                break;

            case "edit" :
                $(this).replaceWith("<i class='icon-pencil'></i> ");
                break;

            case "delete" :
                $(this).replaceWith("<i class='icon-remove'></i> ");
                break;

            case "search" :
                $(this).replaceWith("<i class='icon-search'></i> ");
                break;

            case "refresh" :
                $(this).replaceWith("<i class='icon-refresh'></i> ");
                break;

            case "pdf" :
                $(this).replaceWith("<i class='icon-file'></i> ");
                break;

            case "map" :
                $(this).replaceWith("<i class='icon-map-marker'></i> ");
                break;
				
            case "icon-gear" :
                $(this).replaceWith("<i class='icon-gear'></i> ");
                break;				
            case "column" :
                $(this).replaceWith("<i class='icon-columns'></i> ");
                break;
            case "excel" :
                $(this).replaceWith("<i class='icon-cloud-download'></i> ");
                break;				
            case "icon-copy" :
                $(this).replaceWith("<i class='icon-copy'></i> ");
                break;					
            case "icon-saveview" :
                $(this).replaceWith("<i class='icon-th' style='font-size:smaller;'></i> ");
                break;				
            case "copy" :
                $(this).replaceWith("<i class='icon-copy'></i> ");
                break;	                
            case "empty" :
                $(this).replaceWith("");
                break;	
            case "icon-map-marker" :
                $(this).replaceWith("<i class='icon-map-marker'></i> ");
                break;					
				
				/*
			default:
				$(this).replaceWith("<i class='"+classname+"'></i> ");
				break;
				*/

        }

    });

}

function convertbuttons() {

    $(".Act_Buttons td a span").each(function(e) {

        console.log(this);

        var classname = $(this).attr('class').split(' ')[1];

        switch(classname) {

            case "ui-icon-disk" :
                $(this).replaceWith("<i class='icon-plus'></i> ");
                break;

            case "ui-icon-close" :
                $(this).replaceWith("<i class='icon-pencil'></i> ");
                break;

            case "delete" :
                $(this).replaceWith("<i class='icon-pencil'></i> ");
                break;

            case "search" :
                $(this).replaceWith("<i class='icon-search'></i> ");
                break;

            case "refresh" :
                $(this).replaceWith("<i class='icon-refresh'></i> ");
                break;

            case "pdf" :
                $(this).replaceWith("<i class='icon-file'></i> ");
                break;

        }

    });

}
function getFileExtensionCSS(extension)
{
	var CSS = "bg-grey-800";
	switch(extension.toLowerCase())
	{
		case "jpg" :
		case "jpeg" :
		case "jpe" :
			CSS = "bg-orange-400";
			break;
		case "png" :
		case "gif" :
		case "bmp" :
		case "tiff" :
			CSS = "bg-orange-400";
			break;
		case "msg" :
			CSS = "bg-amber-600";
			break;
		case "doc" :
		case "dot" :
		case "dotx" :
		case "docx" :
			CSS = "bg-lightblue-900";
			break;
		case "xls" :
		case "xlt" :
		case "xlm" :
		case "xld" :
		case "xla" :
		case "xlc" :
		case "xlw" :
		case "xll" :
		case "xlsx" :
		case "xltx" :
			CSS = "bg-lightgreen-900";
			break;
		case "ppt" :
		case "pps" :
		case "pptx" :
		case "potx" :
			CSS = "bg-deeporange-700";
			break;
		case "rtf" :
			CSS = "bg-lightblue-900";
			break;
		case "pdf" :
			CSS = "bg-red-600";
			break;
		case "txt" :
			CSS = "bg-lightblue-900";
			break;
		case "zip" :
			CSS = "bg-amber";
			break;
		case "tar" :
			CSS = "bg-amber";
			break;
	}
	
	return CSS;
}

function getAvatar(name, css, length, avatarimage) {
	
	if(exists(avatarimage))
	{
		return "";
	}
	else
	{
		if(!exists(length) || length ==null)
		{
			length = 2;
		}
		
		var Initials = getInitials(name, length);//'SU';//$this->getInitials($Name);
		var Alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'Ü', 'Ö', 'Ä', 'ß'];
		
		var Weight1 = Alphabet.findIndex(obj => obj == Initials.charAt(0));
		//var Weight2 = Alphabet.findIndex(obj => obj == Initials.charAt(1));
		var Weight2 = Alphabet.findIndex(obj => obj == Initials.slice(-1));

		if(Weight1 == -1)
		{
			Weight1=0;
		}			
		if(Weight2 == -1)
		{
			Weight2=0;
		}
		
		var ColorArray = ['amber','blue','brown','cyan','deeporange','deeppurple','green','grey','indigo','lightblue','lightgreen','lime','orange','pink','purple','red','slate','teal','violet'];
		var ColorWeightArray = ['300','400','600','700','800'];
		
		ColorPos = (ColorArray.length/100)*(100/Alphabet.length*((Weight1+Weight2)/2));
		ColorWeightPos = Math.abs((ColorWeightArray.length/100)*(100/Alphabet.length*((Weight1+Weight2)/2))-1);
		//console.log(ColorWeightPos);
		return '<div class="avatar '+ css +' bg-'+ ColorArray[Math.floor(ColorPos)] +'-'+ ColorWeightArray[Math.floor(ColorWeightPos)] +'" title="'+ name +'">'+Initials+'</div>';
		
	}	

}
function getInitials(name,length)
{
	var NameParts = name.split(" ");
	if(exists(length) && length==4)
	{
		return (NameParts.length == 1 ? NameParts[0].substr(0,4) : NameParts[0].substr(0,2)+NameParts[1].substr(0,2)).toUpperCase();
	}
	else
	{
		return (NameParts.length == 1 ? NameParts[0].substr(0,2) : NameParts[0].charAt(0)+NameParts[1].charAt(0)).toUpperCase();
	}
}	
function isInteger(value) {
    if (value.length == 0) {
        return false;
    }

    var intValue = parseInt(value);
    if (intValue == Number.NaN) {
        return false;
    }

    if (intValue <= 0) {
        return false;
    }
    return true;
}

function roundNumber(rnum, rlength) {// Arguments: number to round, number of decimal places
    var newnumber = Math.round(rnum * Math.pow(10, rlength)) / Math.pow(10, rlength);
    return newnumber;
};

function shadeColor(color, percent) {

    var R = parseInt(color.substring(1,3),16);
    var G = parseInt(color.substring(3,5),16);
    var B = parseInt(color.substring(5,7),16);

    R = parseInt(R * (100 + percent) / 100);
    G = parseInt(G * (100 + percent) / 100);
    B = parseInt(B * (100 + percent) / 100);

    R = (R<255)?R:255;  
    G = (G<255)?G:255;  
    B = (B<255)?B:255;  

    var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
    var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
    var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));

    return "#"+RR+GG+BB;
}


function dateDiffInDays(a, b) {
  var _MS_PER_DAY = 1000 * 60 * 60 * 24;
  // Discard the time and time-zone information.
  var utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
  var utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());

  return Math.floor((utc1 - utc2) / _MS_PER_DAY);
}
function getDatefromString(dateString)
{
    if(dateString == null)
    {
        return null;
    }


    if(dateString.length == 19)
    {
      var reggie = /(\d{2}).(\d{2}).(\d{4}) (\d{2}):(\d{2}):(\d{2})/g;
      var dateArray = reggie.exec(dateString); 
      if(dateArray == null) // anderes Datumsformat
      {
          var reggie = /(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})/g;
          var dateArray = reggie.exec(dateString); 
          var thisDate = new Date(Date.UTC(
              (+dateArray[1]),
              (+dateArray[2])-1, // Careful, month starts at 0!
              (+dateArray[3]),
              (+dateArray[4]),
              (+dateArray[5]),
              (+dateArray[6])));
      }
      else{
          var thisDate = new Date(Date.UTC(
              (+dateArray[3]),
              (+dateArray[2])-1, // Careful, month starts at 0!
              (+dateArray[1]),
              (+dateArray[4]),
              (+dateArray[5]),
              (+dateArray[6])));
      }
    }
    else if(dateString.length == 10)
    {
      var reggie = /(\d{2}).(\d{2}).(\d{4})/g;
      var dateArray = reggie.exec(dateString); 
      if(dateArray == null) // anderes Datumsformat
      {
          var reggie = /(\d{4})-(\d{2})-(\d{2})/g;
          var dateArray = reggie.exec(dateString); 
          var thisDate = new Date(Date.UTC(
              (+dateArray[1]),
              (+dateArray[2])-1, // Careful, month starts at 0!
              (+dateArray[3]),
              0,
              0,
              0));
      }
      else{
      /*
          var thisDate = new Date(Date.UTC(
              (+dateArray[3]),
              (+dateArray[2])-1, // Careful, month starts at 0!
              (+dateArray[1]),
              0,
              0,
              0));
              */
          var thisDate = new Date(Date.UTC(
              (+dateArray[3]),
              (+dateArray[2])-1, // Careful, month starts at 0!
              (+dateArray[1]),
              0,
              0,
              0));              
      }    
    }
    else
    {
      return null;
    }
    return thisDate;	
}
function getTimestampOnlyDate(d) {
    
 	if(d == null)
 	{
 		return "";
    }

    var year = d.getFullYear();
    var month = d.getMonth()+1;
    var date = d.getDate();
    var hour = d.getHours();
    var min = d.getMinutes();
    var sec = d.getSeconds();
    
    var formatted = year + '' + ("0" + (month)).slice(-2) +'' + ("0" + (date)).slice(-2);
         
    return formatted;
}
function getDateOnlyFormat(d) {
    
 	if(d == null)
 	{
 		return null;
 	}
    var months = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];
    
    var year = d.getFullYear();
    //var month = months[d.getMonth()];
	var month = d.getMonth()+1;
    var day = d.getDate();
    var hour = d.getHours();
    var min = d.getMinutes();
    var sec = d.getSeconds();
    //var formatted = date + '.' + month +' ' + year;
	var formatted = ("0" + (day)).slice(-2) + '.' + ("0"+ month).slice(-2) +'.' + year;
     
    return formatted;
 }
 
function getDateTimeFormat(d) {
    
 	if(d == null)
 	{
 		return null;
 	}
    var months = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];
    
    var year = d.getFullYear();
    var month = months[d.getMonth()];
    var date = d.getDate();
    var hour = d.getHours();
    var min = d.getMinutes();
    var sec = d.getSeconds();
    var formatted = ("0" + (date)).slice(-2) + '.' + month +' ' + year + ' ' + ("0" + (hour)).slice(-2) +':'+ ("0" + (min)).slice(-2);
     
    return formatted;
 }
function getDateTimeFormatWithMonthName(d) {
    
 	if(d == null)
 	{
 		return null;
 	}
    var months = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];
    
    var year = d.getFullYear();
    var month = months[d.getMonth()];
    var date = d.getDate();
    var hour = d.getHours();
    var min = d.getMinutes();
    var sec = d.getSeconds();
    var formatted = ("0" + (date)).slice(-2) + '.' + month +' ' + year + ' ' + ("0" + (hour)).slice(-2) +':'+ ("0" + (min)).slice(-2);
     
    return formatted;
 }
function getDateTimeFormatWithOutMonthName(d) {
    
 	if(d == null)
 	{
 		return null;
 	}
    //var months = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];
    
    var year = d.getFullYear();
    var month = d.getMonth()+1;
    var date = d.getDate();
    var hour = d.getHours();
    var min = d.getMinutes();
    var sec = d.getSeconds();
    var formatted = ("0" + (date)).slice(-2) + '.' + ("0" + (month)).slice(-2) +' ' + year + ' ' + ("0" + (hour)).slice(-2) +':'+ ("0" + (min)).slice(-2);
     
    return formatted;
 }
function getDate4Week(kw, year, dayofweek) {
    if(!exists(dayofweek)){
        dayofweek = 5;
    }
    if(!exists(year)){
        year = new Date().getFullYear();
    }	
    // Ersten Tag des Jahres
    var df = new Date(year,0,1);
    
    var dayofset = 5-df.getDay()+1; // 5= Freitag
    var d = new Date(year,0,dayofset+((kw-1)*7));

    return d;
}function getTimestampOnlyDate(d) {
    
 	if(d == null)
 	{
 		return "";
    }

    var year = d.getFullYear();
    var month = d.getMonth()+1;
    var date = d.getDate();
    var hour = d.getHours();
    var min = d.getMinutes();
    var sec = d.getSeconds();
    
    var formatted = year + '' + ("0" + (month)).slice(-2) +'' + ("0" + (date)).slice(-2);
         
    return formatted;
}
function getDateOnlyFormat(d) {
    
 	if(d == null)
 	{
 		return null;
 	}
    var months = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];
    
    var year = d.getFullYear();
    //var month = months[d.getMonth()];
	var month = d.getMonth()+1;
    var day = d.getDate();
    var hour = d.getHours();
    var min = d.getMinutes();
    var sec = d.getSeconds();
    //var formatted = date + '.' + month +' ' + year;
	var formatted = ("0" + (day)).slice(-2) + '.' + ("0"+ month).slice(-2) +'.' + year;
     
    return formatted;
 }
function getDateTimeFormat(d) {
    
 	if(d == null)
 	{
 		return null;
 	}
    var months = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];
    
    var year = d.getFullYear();
    var month = months[d.getMonth()];
    var date = d.getDate();
    var hour = d.getHours();
    var min = d.getMinutes();
    var sec = d.getSeconds();
    var formatted = ("0" + (date)).slice(-2) + '.' + month +' ' + year + ' ' + ("0" + (hour)).slice(-2) +':'+ ("0" + (min)).slice(-2);
     
    return formatted;
 }
function getDateTimeFormatWithMonthName(d) {
    
 	if(d == null)
 	{
 		return null;
 	}
    var months = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];
    
    var year = d.getFullYear();
    var month = months[d.getMonth()];
    var date = d.getDate();
    var hour = d.getHours();
    var min = d.getMinutes();
    var sec = d.getSeconds();
    var formatted = ("0" + (date)).slice(-2) + '.' + month +' ' + year + ' ' + ("0" + (hour)).slice(-2) +':'+ ("0" + (min)).slice(-2);
     
    return formatted;
 }
function getDateTimeFormatWithOutMonthName(d) {
    
 	if(d == null)
 	{
 		return null;
 	}
    //var months = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];
    
    var year = d.getFullYear();
    var month = d.getMonth()+1;
    var date = d.getDate();
    var hour = d.getHours();
    var min = d.getMinutes();
    var sec = d.getSeconds();
    var formatted = ("0" + (date)).slice(-2) + '.' + ("0" + (month)).slice(-2) +' ' + year + ' ' + ("0" + (hour)).slice(-2) +':'+ ("0" + (min)).slice(-2);
     
    return formatted;
 }
function getDate4Week(kw, year, dayofweek) {
    if(!exists(dayofweek)){
        dayofweek = 5;
    }
    if(!exists(year)){
        year = new Date().getFullYear();
    }	
    // Ersten Tag des Jahres
    var df = new Date(year,0,1);
    
    var dayofset = 5-df.getDay()+1; // 5= Freitag
    var d = new Date(year,0,dayofset+((kw-1)*7));

    return d;
}

/* Helper Funktionen*/
function exists(tocheck){
    if(typeof(tocheck) != "undefined")
    {
        return true;
    }
    return false;
}
function getGUID() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
  }
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
    s4() + '-' + s4() + s4() + s4();
}
function WSEncode(data){
    
    data = data.replace("&","&amp;");
    data = data.replace('<','&lt;');
    data = data.replace('>','&gt;');
    data = data.replace("€","&euro;");
    return data;
    //return unescape(encodeURIComponent(data));
}
function IfStringNull(string){
    if(string == null)
    {
        
        return "";
    }
    return string;
}
function IfNumberNull(tocheck){
    if(tocheck == 0 || tocheck == 0,0  || tocheck == 0.0 || tocheck == "0" || tocheck == "0,0" || tocheck == "0.0" || tocheck == "0,00" || tocheck == "0.00" || tocheck == "0,000" || tocheck == "0.000")
    {
        
        return true;
    }
    return false;
}
function IfNumberNullClear(tocheck){
    
    if(IfNumberNull(tocheck))
    {
        
        return "";
    }
    return tocheck;
}
function ValidateNumber(num, precision, scale){
    var mynumber = parseFloat(num.toString().replace(",","."));
    if(isNaN(mynumber))
    {
        return "0";
    }
    else
    {
        mynumber = parseFloat(mynumber.toPrecision(precision));
        mynumber = mynumber.toFixed(scale);
        return mynumber.toString().replace(".",",");
    }

}
function dateDiffInDays(a, b) {
  var _MS_PER_DAY = 1000 * 60 * 60 * 24;
  // Discard the time and time-zone information.
  var utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
  var utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());

  return Math.floor((utc1 - utc2) / _MS_PER_DAY);
}
function getDatefromString(dateString){
    if(dateString == null)
    {
        return null;
    }


    if(dateString.length == 19)
    {
      var reggie = /(\d{2}).(\d{2}).(\d{4}) (\d{2}):(\d{2}):(\d{2})/g;
      var dateArray = reggie.exec(dateString); 
      if(dateArray == null) // anderes Datumsformat
      {
          var reggie = /(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})/g;
          var dateArray = reggie.exec(dateString); 
          var thisDate = new Date(Date.UTC(
              (+dateArray[1]),
              (+dateArray[2])-1, // Careful, month starts at 0!
              (+dateArray[3]),
              (+dateArray[4]),
              (+dateArray[5]),
              (+dateArray[6])));
      }
      else{
          var thisDate = new Date(Date.UTC(
              (+dateArray[3]),
              (+dateArray[2])-1, // Careful, month starts at 0!
              (+dateArray[1]),
              (+dateArray[4]),
              (+dateArray[5]),
              (+dateArray[6])));
      }
    }
    else if(dateString.length == 10)
    {
      var reggie = /(\d{2}).(\d{2}).(\d{4})/g;
      var dateArray = reggie.exec(dateString); 
      if(dateArray == null) // anderes Datumsformat
      {
          var reggie = /(\d{4})-(\d{2})-(\d{2})/g;
          var dateArray = reggie.exec(dateString); 
          var thisDate = new Date(Date.UTC(
              (+dateArray[1]),
              (+dateArray[2])-1, // Careful, month starts at 0!
              (+dateArray[3]),
              0,
              0,
              0));
      }
      else{
      /*
          var thisDate = new Date(Date.UTC(
              (+dateArray[3]),
              (+dateArray[2])-1, // Careful, month starts at 0!
              (+dateArray[1]),
              0,
              0,
              0));
              */
          var thisDate = new Date(Date.UTC(
              (+dateArray[3]),
              (+dateArray[2])-1, // Careful, month starts at 0!
              (+dateArray[1]),
              0,
              0,
              0));              
      }    
    }
    else
    {
      return null;
    }
    return thisDate;	
}
function getDateForWS(d){
    if(d == null)
    {
        return null;
    }
    return d.getFullYear() + "-" + ("0" + (d.getMonth()+1)).slice(-2) + "-" + ("0" + (d.getDate())).slice(-2) + "T" + ("0" + (d.getHours())).slice(-2) + ":" + ("0" + (d.getMinutes())).slice(-2) + ":00";	
}
function getBoolForWS(b){
    if(b != null) {
    
        if(parseInt(b) == 0) {
            return 0;
        } else if (parseInt(b) == 1) {
            return 1;
        }
        
    } else {
        return 0;
    }
}
function getFloatForWS(f){
    if(f != null) {
    
        return f.toString().replace(',','.');
        
    } else {
        return null;
    }
}
function getDateForDB(d){
    //MSSQL Format YYYY-MM-DD HH:MM:SS
    if(d == null)
    {
        return null;
    }
    return d.getUTCFullYear() + "-" + ("0" + (d.getUTCMonth()+1)).slice(-2) + "-" + ("0" + (d.getUTCDate())).slice(-2) + "T" + ("0" + (d.getUTCHours())).slice(-2) + ":" + ("0" + (d.getUTCMinutes())).slice(-2) + ":00";	
    
}
function getDateForDBNullTime(d){
    if(d == null)
    {
        return null;
    }
    return ("0" + (d.getDate())).slice(-2) + "."+ ("0" + (d.getMonth()+1)).slice(-2) + "." + d.getFullYear() + " 00:00:00";
    
}
function getUnixTimestampForDB(d) {
    
    var time = d.getTime() / 1000;
     
    return parseInt(time);
 }
function getTimestampOnlyDate(d) {
    
 	if(d == null)
 	{
 		return "";
    }

    var year = d.getFullYear();
    var month = d.getMonth()+1;
    var date = d.getDate();
    var hour = d.getHours();
    var min = d.getMinutes();
    var sec = d.getSeconds();
    
    var formatted = year + '' + ("0" + (month)).slice(-2) +'' + ("0" + (date)).slice(-2);
         
    return formatted;
}
function getDateOnlyFormat(d) {
    
 	if(d == null)
 	{
 		return null;
 	}
    var months = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];
    
    var year = d.getFullYear();
    //var month = months[d.getMonth()];
	var month = d.getMonth()+1;
    var day = d.getDate();
    var hour = d.getHours();
    var min = d.getMinutes();
    var sec = d.getSeconds();
    //var formatted = date + '.' + month +' ' + year;
	var formatted = ("0" + (day)).slice(-2) + '.' + ("0"+ month).slice(-2) +'.' + year;
     
    return formatted;
 }
function getDateTimeFormat(d) {
    
 	if(d == null)
 	{
 		return null;
 	}
    var months = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];
    
    var year = d.getFullYear();
    var month = months[d.getMonth()];
    var date = d.getDate();
    var hour = d.getHours();
    var min = d.getMinutes();
    var sec = d.getSeconds();
    var formatted = ("0" + (date)).slice(-2) + '.' + month +' ' + year + ' ' + ("0" + (hour)).slice(-2) +':'+ ("0" + (min)).slice(-2);
     
    return formatted;
 }
function getDateTimeFormatWithMonthName(d) {
    
 	if(d == null)
 	{
 		return null;
 	}
    var months = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];
    
    var year = d.getFullYear();
    var month = months[d.getMonth()];
    var date = d.getDate();
    var hour = d.getHours();
    var min = d.getMinutes();
    var sec = d.getSeconds();
    var formatted = ("0" + (date)).slice(-2) + '.' + month +' ' + year + ' ' + ("0" + (hour)).slice(-2) +':'+ ("0" + (min)).slice(-2);
     
    return formatted;
 }
function getDateTimeFormatWithOutMonthName(d) {
    
 	if(d == null)
 	{
 		return null;
 	}
    //var months = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];
    
    var year = d.getFullYear();
    var month = d.getMonth()+1;
    var date = d.getDate();
    var hour = d.getHours();
    var min = d.getMinutes();
    var sec = d.getSeconds();
    var formatted = ("0" + (date)).slice(-2) + '.' + ("0" + (month)).slice(-2) +' ' + year + ' ' + ("0" + (hour)).slice(-2) +':'+ ("0" + (min)).slice(-2);
     
    return formatted;
 }
function getDate4Week(kw, year, dayofweek) {
    if(!exists(dayofweek)){
        dayofweek = 5;
    }
    if(!exists(year)){
        year = new Date().getFullYear();
    }	
    // Ersten Tag des Jahres
    var df = new Date(year,0,1);
    
    var dayofset = 5-df.getDay()+1; // 5= Freitag
    var d = new Date(year,0,dayofset+((kw-1)*7));

    return d;
}
/*Dropzone*/
function AddDropZoneToGrid(GridNameClear,options){
	
	AddDropZoneToObject("gbox_"+GridNameClear,options)	
}


function AddDropZoneToObject(ObjectID,options){
	
	if(!exists(options) || options ==null)
	{
		options = {}
	}	
	var settings = { 
	Small: false,
	Clickable : true,
	Cover: false,
	Message: "Dateien hierher ziehen.",
	Class: "" };
	
	//Optionen übernehmen
	jQuery.extend(settings, options);	
	if(settings.Cover)
	{
		settings.Class += " droparea-cover";
	}
	else if(settings.Small)
	{
		settings.Class += " droparea-small";
	}
	
	$("#"+ObjectID).prepend("<div class=\"droparea"+settings.Class+"\" id=\"dropzone_"+ObjectID+"\"><div class=\"droparea-message\"><span>"+settings.Message+"</span><form><input id=\"dropzone_"+ObjectID+"_file\" type=\"file\"></form></div>");
	
	$("#dropzone_"+ObjectID).off();
	$("#dropzone_"+ObjectID).on("dragover", function(event) {
		event.preventDefault();  
		event.stopPropagation();
		$(this).addClass('dropareaover');

	});

	$("#dropzone_"+ObjectID).on("dragleave", function(event) {
		event.preventDefault();  
		event.stopPropagation();
		$(this).removeClass('dropareaover');
	});	
	if(settings.Clickable)
	{
		$("#dropzone_"+ObjectID).on("click", function(event) {
			$("#dropzone_"+ObjectID+" :input").trigger( "click" );
		});	
		$("#dropzone_"+ObjectID+" :input").on("click", function(event) {
			event.stopPropagation();
		});
		$("#dropzone_"+ObjectID+" :input").on("change", function(event) {
			
			//console.log($(this).prop('files'));
			//var f = new File([""], "filename.txt", {type: "text/plain", lastModified: date})

			
			
			$("#dropzone_"+ObjectID).trigger('drop', { files: $(this).prop('files')});
			
		});
	}
	
}



/*Offcanvar*/
function OpenOffCanvar(title, url , options)
{
	if(!exists(options) || options ==null)
	{
		options = {}
	}	
	var settings = { 
	clickdelay: 200,
	handledblclick : true,
	handlerightclick : true,};
	
	//Optionen übernehmen
	jQuery.extend(settings, options);
	
	if(settings.handledblclick || handlerightclick)
	{
		DoubleClick = false;
		RightClick = false;
		setTimeout(function() {
			// console.log(DoubleClick);
			if(!DoubleClick)
			{
				_OpenOffCanvar(title, url , settings);
			}
			//DoubleClick = false;
		}, settings.clickdelay);
	}
	else
	{
		_OpenOffCanvar(title, url , settings);
	}
	
	
}
function _OpenOffCanvar(title, url , options){
	
	if(!exists(options) || options ==null)
	{
		options = {}
	}	
	var settings = { 
	size: "large-canvas",
	side : "right",
	container: "",
	animation: true,
	overlay: true,
	class: "" };
	
	//Optionen übernehmen
	jQuery.extend(settings, options);
	if(settings.overlay && !$(".bs-canvas-overlay").length)
	{
		$('body').prepend('<div class="bs-canvas-overlay bg-dark position-fixed w-100 h-100" style="top:0;"></div>');
	}
	if(settings.side == 'right')
	{
		container = '.bs-canvas-right';
	}
	else
	{
		container = '.bs-canvas-left';
	}
	
	$('.bs-canvas-header .title',container).html(title);
	
	$(container).removeClass("splitview1").removeClass("splitview2").removeClass("splitview3").removeClass("splitview4").removeClass("splitview5");
	$(container).removeClass("small-canvas").removeClass("medium-canvas").removeClass("large-canvas").removeClass("xlarge-canvas").removeClass("xxlarge-canvas").removeClass("fullsize-canvas").addClass(settings.size);

	if(url != "")
	{
		$('.bs-canvas-content',container).html('<div id="" class="w-100 text-center"><i class="icon-spinner10 spinner mr-1"></i>Loading...</div>');
	    //console.log(url);
	
	
		$.ajax({
			url: url,//TODO divID übergeben
			success: function(response){
				$('.bs-canvas-content',container).html(response);
			}
		});	
	}

	var updateclass = "";
	if(settings.side == 'right')
	{
		updateclass = 'mr-0';
		//$(container).addClass('mr-0');
	}
	else
	{
		updateclass = 'ml-0';
		//$(container).addClass('ml-0');
	}
	
	if($(container).hasClass(updateclass))
	{
		//Anzeige animieren
		if(settings.animation)
		{
			$(container).removeClass(updateclass);
			setTimeout(function(){$(container).addClass(updateclass);}, 300);
		}
	}
	else
	{
		$(container).addClass(updateclass);
	}
	return container;
	//console.log($(container));
}
function CloseOffCanvar(options){

	if(!exists(options) || options ==null)
	{
		options = {}
	}	
	var settings = { side : "" };

	jQuery.extend(settings, options);

	if(settings.side !== "")
	{
		if(settings.side === "left")
		{
			$(".bs-canvas-close",".bs-canvas-left").trigger('click');
		}
		else
		{
			$(".bs-canvas-close",".bs-canvas-right").trigger('click');
		}
	}
	else
	{
		$(this).closest('.bs-canvas').find('.bs-canvas-close').trigger('click');
	}
}
function changeOffCanvarTitle(title, options, container = null){
	if(!exists(options) || options ==null)
	{
		options = {}
	}	
	var settings = { 
	side : ""};
	
	jQuery.extend(settings, options);

	var $container = container ? $(container) : $(this);

	if(settings.side != "")
	{

		if(settings.side == "left")
		{
			$(".bs-canvas-header .title",".bs-canvas-left").html(title);
		}
		else
		{
			$(".bs-canvas-header .title",".bs-canvas-right").html(title);
		}
	}
	else
	{
		$container.closest('.bs-canvas').find('.bs-canvas-header .title').html(title);
	}
}	
/*Grid*/
function HideEditNavButtons(GridNameClear){
	$("#pData, #nData", "#TblGrid_"+GridNameClear+"_2").hide();  
}
function jqGridFilter(GridName, filtersparam) {
	GridName.setGridParam({
		postData: {
			filters: filtersparam
		},
		search: true
	});
	GridName.trigger("reloadGrid");
}
function getColumnName4SelectRow(grid, e)
{
	var name = $(e.target).closest("td").attr('aria-describedby'); 
	name = name.split(grid.p.id+"_");
    name = name[1];	
	return name;
}

function getColumnModel4ColumnName(grid, columnName)
{
    var cm = grid.p.colModel,i=0,l=cm.length;
    for (; i<l; i++) 
	{
        if (cm[i].name===columnName) 
		{
            return cm[i]; 
        }
    }
    return -1;
}
function getColumnModel4ColumnID(grid, columnID)
{
	var cm = grid.p.colModel,i=0,l=cm.length;
	return cm[columnID];
}
function getColumnIndexByName(grid, columnName) {
    var cm = grid.p.colModel,i=0,l=cm.length;
    for (; i<l; i++) 
	{
        if (cm[i].name===columnName) 
		{
            return i; 
        }
    }
    return -1;
}
function getColumnIndexByNameOLD(grid, columnName) {
    var cm = grid.jqGrid('getGridParam','colModel'),i=0,l=cm.length;
    for (; i<l; i++) {
        if (cm[i].name===columnName) {
            return i; 
// return the index
        }
    }
    return -1;
}
function AddColumnChooser4Grid(GridNameClear,ChooserID){
	if(!exists(ChooserID))
	{
		ChooserID = GridNameClear+'ColumnChooser div';
	}

	/*
	var columnNames = $('#'+GridNameClear).jqGrid('getGridParam','colNames');
	var allColumnCount = columnNames.length;
	*/
	var colModel = $('#'+GridNameClear).jqGrid('getGridParam','colModel');	
	var allColumnCount = 0;

	for(var i = 0; i < colModel.length; i++){
		if(exists(colModel[i].hidedlg) && colModel[i].hidedlg){
		}
		else
		{
			allColumnCount++;
		}
	}	
	
	//var hiddencolumnCount = $('#gview_'+GridNameClear+' table.ui-jqgrid-htable thead tr.ui-jqgrid-labels th').filter(":hidden").size();
	//var ActivCount = allColumnCount - hiddencolumnCount;
	var ActivCount = $('#gview_'+GridNameClear+' table.ui-jqgrid-htable thead tr.ui-jqgrid-labels th').filter(":visible").size();


	$('#'+ChooserID+'').append('&nbsp;(' + ActivCount + ' / ' +  allColumnCount +  ')');  
  
}
function UpdateColumnChooser4Grid(GridNameClear,ScriptName,ChooserID){
	if(!exists(ChooserID))
	{
		ChooserID = GridNameClear+'ColumnChooser div';
	}

	/*
	var columnNames = $('#'+GridNameClear).jqGrid('getGridParam','colNames');
	var allColumnCount = columnNames.length;
	*/
	
	var colModel = $('#'+GridNameClear).jqGrid('getGridParam','colModel');	
	var allColumnCount = 0;

	for(var i = 0; i < colModel.length; i++){
		if(exists(colModel[i].hidedlg) && colModel[i].hidedlg){
		}
		else
		{
			allColumnCount++;
		}
	}	
	
	//var hiddencolumnCount = $('#gview_'+GridNameClear+' table.ui-jqgrid-htable thead tr.ui-jqgrid-labels th').filter(':hidden').size();
	//var ActivCount = allColumnCount - hiddencolumnCount;
	var ActivCount = $('#gview_'+GridNameClear+' table.ui-jqgrid-htable thead tr.ui-jqgrid-labels th').filter(":visible").size();
	
	$('#'+ChooserID+'').html('<span class=\"ui-icon column\"></span>Spalten&nbsp;(' + ActivCount + ' / ' +  allColumnCount +  ')');
	//Einstellung Speichern
	
	saveUserGridConfig(''+ScriptName+'','#gview_'+GridNameClear+' table.ui-jqgrid-htable thead tr.ui-jqgrid-labels th');
}
function MarkSearchedFields4Grid(GridNameClear,Marktype){

  if(!exists(Marktype))
  {
    Marktype='both';
  }

  var Filters = $('#'+GridNameClear).getGridParam("postData").filters;
  //console.log(Filters);
  //unmark all field
  var colModel = $('#'+GridNameClear).getGridParam('colModel');

  $.each( colModel, function( key, Column ) {
  
    $('#'+GridNameClear+'_'+Column.index).removeClass('HighlightSearchColumn');
	$('#gsh_'+GridNameClear+'_'+Column.index).removeClass('HighlightSearchColumn');
    $('#gview_'+GridNameClear+' #gs_'+Column.index).removeClass('HighlightSearchField');
  
  });
  if(typeof(Filters) != "undefined" && Filters != "" && Filters != null && Filters != "null")
  {
    var FiltersObj = JSON.parse(Filters);
    //console.log(FiltersObj);
    
    $.each( FiltersObj.rules, function( key, value ) {
      if(Marktype=='toolbar')
      {
        $('#gs_'+value.field).addClass('HighlightSearchField');
      }
      else if(Marktype=='column')
      {
        $('#'+GridNameClear+'_'+value.field).addClass('HighlightSearchColumn');
      }
      else
      {
      
        $('#gview_'+GridNameClear+' #gs_'+value.field+':first').addClass('HighlightSearchField');
        $('#gsh_'+GridNameClear+'_'+value.field).addClass('HighlightSearchColumn');
		$('#'+GridNameClear+'_'+value.field).addClass('HighlightSearchColumn');
      }
      
      
    }); 

	if(exists(FiltersObj.groups))
	{
		$.each( FiltersObj.groups, function( gkey, gvalue ) {

			$.each( gvalue.rules, function( key, value ) {
				
			  if(Marktype=='toolbar')
			  {
				$('#gs_'+value.field).addClass('HighlightSearchField');
			  }
			  else if(Marktype=='column')
			  {
				$('#'+GridNameClear+'_'+value.field).addClass('HighlightSearchColumn');
			  }
			  else
			  {
				$('#gview_'+GridNameClear+' #gs_'+value.field+':first').addClass('HighlightSearchField');
				$('#gsh_'+GridNameClear+'_'+value.field).addClass('HighlightSearchColumn');
				$('#'+GridNameClear+'_'+value.field).addClass('HighlightSearchColumn');
			  }

			}); 			
		});
		
	}
  }
  else
  {
    //console.log('undef');
  }
}
function ResizeGrid(GridNameClear,WOffset,HOffset){
  //console.log('ResizeGrid');
	var innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
	var innerHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

	
	if($( "#main" ).hasClass( "BeamerView" ))
	{
		$('#'+GridNameClear).setGridWidth(innerWidth-20);
		$('#'+GridNameClear).setGridHeight(innerHeight-180);
		
	}
	else
	{
		$('#'+GridNameClear).setGridWidth(innerWidth-WOffset);
		$('#'+GridNameClear).setGridHeight(innerHeight-HOffset);
	}
}
function CenterGridDialog(GridNameClear){
	var dlgDiv = $("#editmod" + GridNameClear);
	/*
	var parentDiv = dlgDiv.parent(); // div#gbox_list
	var dlgWidth = dlgDiv.width();
	var parentWidth = parentDiv.width();
	var dlgHeight = dlgDiv.height();
	var parentHeight = parentDiv.height();
	// TODO: change parentWidth and parentHeight in case of the grid
	//       is larger as the browser window
	*/
	//dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
	
	//richtig
	//dlgDiv[0].style.top = Math.round(( $(window).height() - dlgDiv.height() ) / 2+$(window).scrollTop()/2) + "px";
	
	//test
	dlgDiv[0].style.top = Math.round(( $(window).height() - dlgDiv.height() ) / 2+$(window).scrollTop()) + "px";

	//dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
}

/*TABs*/
function closeTab(tabID, index){

	$.post("eventhandler.php?type=tabhandler&action=delete", { tabID: tabID.substr(6) } );
	$("#tab_main_head").tabs("remove", index);		
}
function getSelectedTabID() { 
    
	tabs = $("#tab_main_head");		
    tabIndex = tabs.currentBSTabID();
    
	/*
	console.log($tabIndex);

	   
    var $selected = $("#tab_main_head >li a").eq($tabIndex).attr('href');
	
	console.log($tabIndex);
	console.log($selected);
	 if(String($selected).length>6)
	 {
		$selected = String($selected).substr(6);
	 }
	 else
	 {
		$selected = null;
	 }
	 */
	 console.log(tabIndex);
    return tabIndex;
}
function closeCurrentTab(URLParameter){
  console.log("closeCurrentTab");
  //var tabIndex = $("#tab_main_head").tabs('option', 'selected');
  //closeTab(getSelectedTabID(), tabIndex);

  

    tab = tabs.getBSTabByID(getSelectedTabID());
    tab.removeBSTab();
	
   // Load Last Tab

        var tabelem = $('#tab_main_head a').last();

        var href = tabelem.attr('href');
        var url = tabelem.attr('data-url');
		processURL4MenuItem(url);
		
        // Before Show, check if already exist

        if ($(href).is(':empty')) {

            $(href).load(url, function(result) {
                $('#tab_main_head a').last().tab('show');
            });

            var tabID = $('#tab_main_head a').last().attr('href');

            tabID = tabID.substring(7);

            $.post("eventhandler.php?type=tabhandler&action=select", {
                tabID : tabID
            });

        } else {

            var tabID = $('#tab_main_head a').last().attr('href');

            tabID = tabID.substring(7);

            $.post("eventhandler.php?type=tabhandler&action=select", {
                tabID : tabID
            });

            $('#tab_main_head a').last().tab('show');

        }	
	
	
	/*
	console.log(SubTabName);
	console.log(SubTabIndex);
	if(typeof SubTabName !== 'undefined' && typeof SubTabIndex !== 'undefined')
	{
    console.log($(SubTabName));
    
    $().ready(function() {
      $(SubTabName).tabs('select', SubTabIndex);	
      console.log($(SubTabName));
    });
	}
	*/
}
function refreshCurrentTab(URLParameter){
	refreshTab(getSelectedTabID(),URLParameter);
	/*
	console.log(SubTabName);
	console.log(SubTabIndex);
	if(typeof SubTabName !== 'undefined' && typeof SubTabIndex !== 'undefined')
	{
    console.log($(SubTabName));
    
    $().ready(function() {
      $(SubTabName).tabs('select', SubTabIndex);	
      console.log($(SubTabName));
    });
	}
	*/
}
function refreshTab(tabID,URLParameter){
	console.log("refreshTab");
	console.log(tabID);
	
	if(tabID != null)
	{
		HideAllValidationPrompt();
		var script = $("a[href^='#"+ tabID +"']").data('url');
		if(exists(URLParameter) && URLParameter!= null)
		{
			  if(script.indexOf("?") != -1) // Im Script sind bereits Parameter
			  {
				script = script+'&'+URLParameter;
			  }
			  else
			  {
				script = script+'?'+URLParameter;
			  }
		}
		var pane = $("#" + tabID);
		$("#" + tabID).load(script, function(result){
			pane.tab('show');
		});
	}
}
function HideAllValidationPrompt(){
	 $('.formError').remove();
}
/*Clipboard - Zwischenablage*/
function copyToClipboard(elementId) {

  copyTextToClipboard(document.getElementById(elementId).innerHTML);
}
function copyTextToClipboard(Text) {

  // Create a "hidden" input
  var aux = document.createElement("input");

  // Assign it the value of the specified element
  aux.setAttribute("value", Text);

  // Append it to the body
  document.body.appendChild(aux);

  // Highlight its content
  aux.select();

  // Copy the highlighted text
  document.execCommand("copy");

  // Remove it from the body
  document.body.removeChild(aux);
	$.notify(
				{message: "In Zwischenablage kopiert"},
				{type: 'success'});  
 

}	
function openInstantDialog(Title,URL,options,object)
{
	if(!exists(options) || options ==null)
	{
		options = {}
	}	
	var settings = { 
	IDPostfix: "", 
	width: 200, 
	height: 300,
	position: { my: "right top", at: "right top", of: object }};
	
	//Optionen übernehmen
	jQuery.extend(settings, options);
	
	var DialogName = 'instantdialog'+settings.IDPostfix;
	$('#'+DialogName).remove();
	//$('#content').prepend('<div id=\"'+DialogName+'\"><p></p></div>');	
	$('body').prepend('<div id=\"'+DialogName+'\"><p></p></div>');	
	if(URL.indexOf("?")>=0)
	{
		URL += "&";
	}
	else
	{
		URL += "?";
	}
	URL += "DialogName="+DialogName;

	$( '#'+DialogName).load('php/'+URL);
	$( '#'+DialogName).dialog({
		draggable: false,
		resizable: false,
		width:settings.width,
		height:settings.height,
		modal: true,
		title: Title,
		position: settings.position,
		show: { effect: "blind", duration: 350, direction: "vertical"  },
		hide: { effect: "blind", duration: 350, direction: "vertical" },
		options: settings,
		open: function ()
		{
			$('.ui-widget-overlay').on('click', function() {
				$('#'+DialogName).dialog('close');
			});
		},		
		buttons: {		
		'Schließen': function() 
			{
				$(this).dialog( 'close' );
				$(this).dialog('destroy');
				$(this).remove();
			}
		}
		});
}
function openMouseOverDialog(Title,URL,options,object)
{
	if(!exists(options) || options ==null)
	{
		options = {}
	}	
	var settings = { 
	IDPostfix: "", 
	width: 200, 
	height: 300 };
	
	//Optionen übernehmen
	jQuery.extend(settings, options);
	
	var DialogName = 'ddialog'+settings.IDPostfix;
	if ($('#'+DialogName).hasClass('ui-dialog-content')) {
		$('#'+DialogName).dialog( 'close' );
		$('#'+DialogName).dialog('destroy');
		$('#'+DialogName).remove();	
	}	

	$('#content').prepend('<div id=\"'+DialogName+'\"><p></p></div>');	

	if(URL.indexOf("?")>=0)
	{
		URL += "&";
	}
	else
	{
		URL += "?";
	}
	URL += "DialogName="+DialogName;

	$( '#'+DialogName).load('php/'+URL);
	$( '#'+DialogName).dialog({
		dialogClass: 'ClearDialog',
		draggable: false,
		resizable: false,
		width:settings.width,
		height:settings.height,
		modal: false,
		title: Title,
		position: [0,0],//{ my: "right top", at: "right top", of: object },
		/*
		show: { effect: "blind", duration: 350, direction: "vertical"  },
		hide: { effect: "blind", duration: 350, direction: "vertical" },
		*/
		options: settings,
		open: function ()
		{

		},		
		buttons: {		
		}
		});
}
function OpenPrintDialog(URL,options)
{
  //window.open("Print.php?"+URL, "DruckFenster", "directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=800");
  
  
  var URLParameter = "";
  var isPDFPrint = false;

  console.log(options);
  if(exists(options) && options !=null)
  {
    if(exists(options.isPDFPrint) && options.isPDFPrint !=null)
    {
		isPDFPrint += options.isPDFPrint;
		URLParameter += '&Print=PDF';
	}
	else
	{
		URLParameter += '&Print=Paper';
	}
    if(exists(options.HideContent) && options.HideContent !=null)
    {
      URLParameter += '&'+ jQuery.param( options.HideContent );
    }
	if(exists(options.FormData) && options.FormData !=null)
    {
      URLParameter += '&'+ jQuery.param( options.FormData );
    }
  }
  
  
  
  
  var config   = 'directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=1,scrollbars=1,resizable=0,width=1060,height=800,left='+((screen.width - 800)/2);
  //"directories=1,titlebar=1,toolbar=1,location=1,status=1,menubar=1,scrollbars=1,resizable=1,width=800"
  if(isPDFPrint)
  {
	window.open(URL+URLParameter, 'DruckFenster', config);
  }
  else
  {
	window.open("Print.php?"+URL+URLParameter, 'DruckFenster', config);
  }
  
  
  
  
  //window.open("Print.php?"+URL, "DruckFenster", "width=800");
}
function openDialog(Title,URL,options, data)
{
	if(!exists(options) || options ==null)
	{
		options = {}
	}
	if(!exists(data) || data ==null)
	{
		data = {}
	}		
	var settings = { 
	IDPostfix: "", 
	width: 200, 
	height: 300,
	position: { my: "top+50", at: "top" },
	iFrame: false};
	
	//Optionen übernehmen
	jQuery.extend(settings, options);
	
	var DialogName = 'ddialog'+settings.IDPostfix;
	$('#'+DialogName).remove();
	//$('#content').prepend('<div id=\"'+DialogName+'\"><p></p></div>');	
	$('body').prepend('<div id=\"'+DialogName+'\"><p></p></div>');	

	if(URL.indexOf("?")>=0)
	{
		URL += "&";
	}
	else
	{
		URL += "?";
	}
	URL += "DialogName="+DialogName;

	
	if(settings.iFrame)
	{
		//$( '#'+DialogName).append($("<iframe />").attr("src", 'php/'+URL));//.html('<iframe src="php/'+URL+'" title=""></iframe>');
		$( '#'+DialogName).append('<iframe src="php/'+URL+'" title="" width="100%" height="100%" style="border:none;"></iframe>');//.html('<iframe src="php/'+URL+'" title=""></iframe>');
	}
	else
	{
		$( '#'+DialogName).load('php/'+URL, data);
	}
	
	$( '#'+DialogName).dialog({
		draggable: false,
		resizable: false,
		width:settings.width,
		height:settings.height,
		modal: true,
		title: Title,
		position: settings.position,
		show: { effect: "blind", duration: 350, direction: "vertical"  },
		hide: { effect: "blind", duration: 350, direction: "vertical" },
		options: settings,
		data:data,
		open: function ()
		{
			$('.ui-widget-overlay').on('click', function() {
				$('#'+DialogName).dialog('close');
			});
		},		
		buttons: {		
		'Schließen': function() 
			{
				$(this).dialog( 'close' );
				$(this).dialog('destroy');
				$(this).remove();
			}
		}
		});
}

function nextDialog(options)
{
	if(!exists(options) || options ==null)
	{
		options = {}
	}
	
	if(exists(options.DialogQueue) && options.DialogQueue.length>0)
	{
		var CurrentDialog = options.DialogQueue[0];
		console.log(CurrentDialog);
		options.DialogQueue.shift();
		openDialog(CurrentDialog.Name,CurrentDialog.URL,options);
	}	
}
function getDialogQueueCount(options)
{
	if(!exists(options) || options ==null)
	{
		options = {}
	}
	
	if(exists(options.DialogQueue))
	{
		return options.DialogQueue.length;
	}

	return 0;
}
function init()
{
	//ConditionStyleBadge
	$(document).off('click', '.ConditionStyleBadge');
	$(document).on('click', '.ConditionStyleBadge', function() {	

		options= $(this).data('options');
		var URL = options.URL;
		var IDName = "rowid";
		
		if(URL.indexOf("?")>=0)
		{
			URL += "&";
		}
		else
		{
			URL += "?";
		}
		URL += options.IDName+"="+$(this).data('id')+"&rowid="+options.RowID+"&ParentID="+$(this).data('parentid')+"&Mode=Dialog";
		//URL += options.IDName+"="+options.RowID+"&ParentID="+$(this).data('parentid')+"&Mode=Dialog";
		openInstantDialog(options.WindowTitle,URL,options,this);
	});
	//ConditionStyleCell
	$(document).off('click', '.ConditionStyleCell');
	$(document).on('click', '.ConditionStyleCell', function() {	

		options= $(this).data('options');
		var URL = options.URL;
		var IDName = "rowid";
		
		if(URL.indexOf("?")>=0)
		{
			URL += "&";
		}
		else
		{
			URL += "?";
		}
		URL += options.IDName+"="+$(this).data('id')+"&rowid="+options.RowID+"&ParentID="+$(this).data('parentid')+"&Mode=Dialog";
		//URL += options.IDName+"="+options.RowID+"&ParentID="+$(this).data('parentid')+"&Mode=Dialog";
		openInstantDialog(options.WindowTitle,URL,options,this);
	});
	//ConditionStyleCell
	$(document).off('click', '.InlineContextMenu');
	$(document).on('click', '.InlineContextMenu', function() {	

		options= $(this).data('options');
		var URL = options.URL;
		var IDName = "rowid";
		
		if(URL.indexOf("?")>=0)
		{
			URL += "&";
		}
		else
		{
			URL += "?";
		}
		URL += options.IDName+"="+$(this).data('id')+"&rowid="+options.RowID+"&ParentID="+$(this).data('parentid')+"&Mode=Dialog";
		//URL += options.IDName+"="+options.RowID+"&ParentID="+$(this).data('parentid')+"&Mode=Dialog";
		openInstantDialog(options.WindowTitle,URL,options,this);
	});

}

/* Chartkomponenten */
var StatisticWidgets = new  function() {


    //
    // Setup module components
    //

    // Messages area chart
    var _areaChartWidget = function(element, chartHeight, color) {
        if (typeof d3 == 'undefined') {
            console.warn('Warning - d3.min.js is not loaded.');
            return;
        }

        // Initialize chart only if element exsists in the DOM
        if(element) {


            // Basic setup
            // ------------------------------

            // Define main variables
            var d3Container = d3.select(element),
                margin = {top: 0, right: 0, bottom: 0, left: 0},
                width = d3Container.node().getBoundingClientRect().width - margin.left - margin.right,
                height = chartHeight - margin.top - margin.bottom;

            // Date and time format
            var parseDate = d3.time.format('%Y-%m-%d').parse;


            // Create SVG
            // ------------------------------

            // Container
            var container = d3Container.append('svg');

            // SVG element
            var svg = container
                .attr('width', width + margin.left + margin.right)
                .attr('height', height + margin.top + margin.bottom)
                .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


            // Construct chart layout
            // ------------------------------

            // Area
            var area = d3.svg.area()
                .x(function(d) { return x(d.date); })
                .y0(height)
                .y1(function(d) { return y(d.value); })
                .interpolate('monotone');


            // Construct scales
            // ------------------------------

            // Horizontal
            var x = d3.time.scale().range([0, width ]);

            // Vertical
            var y = d3.scale.linear().range([height, 0]);


            // Load data
            // ------------------------------

            d3.json("../../../../global_assets/demo_data/dashboard/monthly_sales.json", function (error, data) {

                // Show what's wrong if error
                if (error) return console.error(error);

                // Pull out values
                data.forEach(function (d) {
                    d.date = parseDate(d.date);
                    d.value = +d.value;
                });

                // Get the maximum value in the given array
                var maxY = d3.max(data, function(d) { return d.value; });

                // Reset start data for animation
                var startData = data.map(function(datum) {
                    return {
                        date: datum.date,
                        value: 0
                    };
                });


                // Set input domains
                // ------------------------------

                // Horizontal
                x.domain(d3.extent(data, function(d, i) { return d.date; }));

                // Vertical
                y.domain([0, d3.max( data, function(d) { return d.value; })]);



                //
                // Append chart elements
                //

                // Add area path
                svg.append("path")
                    .datum(data)
                    .attr("class", "d3-area")
                    .style('fill', color)
                    .attr("d", area)
                    .transition() // begin animation
                        .duration(1000)
                        .attrTween('d', function() {
                            var interpolator = d3.interpolateArray(startData, data);
                            return function (t) {
                                return area(interpolator (t));
                            };
                        });


                // Resize chart
                // ------------------------------

                // Call function on window resize
                window.addEventListener('resize', messagesAreaResize);

                // Call function on sidebar width change
                var sidebarToggle = document.querySelector('.sidebar-control');
                sidebarToggle && sidebarToggle.addEventListener('click', messagesAreaResize);

                // Resize function
                // 
                // Since D3 doesn't support SVG resize by default,
                // we need to manually specify parts of the graph that need to 
                // be updated on window resize
                function messagesAreaResize() {

                    // Layout variables
                    width = d3Container.node().getBoundingClientRect().width - margin.left - margin.right;


                    // Layout
                    // -------------------------

                    // Main svg width
                    container.attr("width", width + margin.left + margin.right);

                    // Width of appended group
                    svg.attr("width", width + margin.left + margin.right);

                    // Horizontal range
                    x.range([0, width]);


                    // Chart elements
                    // -------------------------

                    // Area path
                    svg.selectAll('.d3-area').datum( data ).attr("d", area);
                }
            });
        }
    };

    // Simple bar charts
    var _barChartWidget = function(element, barQty, height, animate, easing, duration, delay, color, tooltip) {
        if (typeof d3 == 'undefined') {
            console.warn('Warning - d3.min.js is not loaded.');
            return;
        }

        // Initialize chart only if element exsists in the DOM
        if(element) {


            // Basic setup
            // ------------------------------

            // Add data set
            var bardata = [];
            for (var i=0; i < barQty; i++) {
                bardata.push(Math.round(Math.random() * 10) + 10);
            }

            // Main variables
            var d3Container = d3.select(element),
                width = d3Container.node().getBoundingClientRect().width;
            


            // Construct scales
            // ------------------------------

            // Horizontal
            var x = d3.scale.ordinal()
                .rangeBands([0, width], 0.3);

            // Vertical
            var y = d3.scale.linear()
                .range([0, height]);



            // Set input domains
            // ------------------------------

            // Horizontal
            x.domain(d3.range(0, bardata.length));

            // Vertical
            y.domain([0, d3.max(bardata)]);



            // Create chart
            // ------------------------------

            // Add svg element
            var container = d3Container.append('svg');

            // Add SVG group
            var svg = container
                .attr('width', width)
                .attr('height', height)
                .append('g');



            //
            // Append chart elements
            //

            // Bars
            var bars = svg.selectAll('rect')
                .data(bardata)
                .enter()
                .append('rect')
                    .attr('class', 'd3-random-bars')
                    .attr('width', x.rangeBand())
                    .attr('x', function(d,i) {
                        return x(i);
                    })
                    .style('fill', color);



            // Tooltip
            // ------------------------------

            // Initiate
            var tip = d3.tip()
                .attr('class', 'd3-tip')
                .offset([-10, 0]);

            // Show and hide
            if(tooltip == "hours" || tooltip == "goal" || tooltip == "members") {
                bars.call(tip)
                    .on('mouseover', tip.show)
                    .on('mouseout', tip.hide);
            }

            // Daily meetings tooltip content
            if(tooltip == "hours") {
                tip.html(function (d, i) {
                    return "<div class='text-center'>" +
                            "<h6 class='mb-0'>" + d + "</h6>" +
                            "<span class='font-size-sm'>meetings</span>" +
                            "<div class='font-size-sm'>" + i + ":00" + "</div>" +
                        "</div>";
                });
            }

            // Statements tooltip content
            if(tooltip == "goal") {
                tip.html(function (d, i) {
                    return "<div class='text-center'>" +
                            "<h6 class='mb-0'>" + d + "</h6>" +
                            "<span class='font-size-sm'>statements</span>" +
                            "<div class='font-size-sm'>" + i + ":00" + "</div>" +
                        "</div>";
                });
            }

            // Online members tooltip content
            if(tooltip == "members") {
                tip.html(function (d, i) {
                    return "<div class='text-center'>" +
                            "<h6 class='mb-0'>" + d + "0" + "</h6>" +
                            "<span class='font-size-sm'>members</span>" +
                            "<div class='font-size-sm'>" + i + ":00" + "</div>" +
                        "</div>";
                });
            }



            // Bar loading animation
            // ------------------------------

            // Choose between animated or static
            if(animate) {
                withAnimation();
            } else {
                withoutAnimation();
            }

            // Animate on load
            function withAnimation() {
                bars
                    .attr('height', 0)
                    .attr('y', height)
                    .transition()
                        .attr('height', function(d) {
                            return y(d);
                        })
                        .attr('y', function(d) {
                            return height - y(d);
                        })
                        .delay(function(d, i) {
                            return i * delay;
                        })
                        .duration(duration)
                        .ease(easing);
            }

            // Load without animateion
            function withoutAnimation() {
                bars
                    .attr('height', function(d) {
                        return y(d);
                    })
                    .attr('y', function(d) {
                        return height - y(d);
                    });
            }



            // Resize chart
            // ------------------------------

            // Call function on window resize
            window.addEventListener('resize', barsResize);

            // Call function on sidebar width change
            var sidebarToggle = document.querySelector('.sidebar-control');
            sidebarToggle && sidebarToggle.addEventListener('click', barsResize);

            // Resize function
            // 
            // Since D3 doesn't support SVG resize by default,
            // we need to manually specify parts of the graph that need to 
            // be updated on window resize
            function barsResize() {

                // Layout variables
                width = d3Container.node().getBoundingClientRect().width;


                // Layout
                // -------------------------

                // Main svg width
                container.attr("width", width);

                // Width of appended group
                svg.attr("width", width);

                // Horizontal range
                x.rangeBands([0, width], 0.3);


                // Chart elements
                // -------------------------

                // Bars
                svg.selectAll('.d3-random-bars')
                    .attr('width', x.rangeBand())
                    .attr('x', function(d,i) {
                        return x(i);
                    });
            }
        }
    };

    // Simple line chart
    var _lineChartWidget = function(element, chartHeight, lineColor, pathColor, pointerLineColor, pointerBgColor) {
        if (typeof d3 == 'undefined') {
            console.warn('Warning - d3.min.js is not loaded.');
            return;
        }

        // Initialize chart only if element exsists in the DOM
        if(element) {


            // Basic setup
            // ------------------------------

            // Add data set
            var dataset = [
                {
                    "date": "04/13/14",
                    "alpha": "60"
                }, {
                    "date": "04/14/14",
                    "alpha": "35"
                }, {
                    "date": "04/15/14",
                    "alpha": "65"
                }, {
                    "date": "04/16/14",
                    "alpha": "50"
                }, {
                    "date": "04/17/14",
                    "alpha": "65"
                }, {
                    "date": "04/18/14",
                    "alpha": "20"
                }, {
                    "date": "04/19/14",
                    "alpha": "60"
                }
            ];

            // Main variables
            var d3Container = d3.select(element),
                margin = {top: 0, right: 0, bottom: 0, left: 0},
                width = d3Container.node().getBoundingClientRect().width - margin.left - margin.right,
                height = chartHeight - margin.top - margin.bottom,
                padding = 20;

            // Format date
            var parseDate = d3.time.format("%m/%d/%y").parse,
                formatDate = d3.time.format("%a, %B %e");


            // Add tooltip
            // ------------------------------

            var tooltip = d3.tip()
                .attr('class', 'd3-tip')
                .html(function (d) {
                    return "<ul class='list-unstyled mb-1'>" +
                        "<li>" + "<div class='font-size-base my-1'><i class='icon-check2 mr-2'></i>" + formatDate(d.date) + "</div>" + "</li>" +
                        "<li>" + "Sales: &nbsp;" + "<span class='font-weight-semibold float-right'>" + d.alpha + "</span>" + "</li>" +
                        "<li>" + "Revenue: &nbsp; " + "<span class='font-weight-semibold float-right'>" + "$" + (d.alpha * 25).toFixed(2) + "</span>" + "</li>" + 
                    "</ul>";
                });


            // Create chart
            // ------------------------------

            // Add svg element
            var container = d3Container.append('svg');

            // Add SVG group
            var svg = container
                    .attr('width', width + margin.left + margin.right)
                    .attr('height', height + margin.top + margin.bottom)
                    .append("g")
                        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
                        .call(tooltip);


            // Load data
            // ------------------------------

            dataset.forEach(function (d) {
                d.date = parseDate(d.date);
                d.alpha = +d.alpha;
            });


            // Construct scales
            // ------------------------------

            // Horizontal
            var x = d3.time.scale()
                .range([padding, width - padding]);

            // Vertical
            var y = d3.scale.linear()
                .range([height, 5]);


            // Set input domains
            // ------------------------------

            // Horizontal
            x.domain(d3.extent(dataset, function (d) {
                return d.date;
            }));

            // Vertical
            y.domain([0, d3.max(dataset, function (d) {
                return Math.max(d.alpha);
            })]);


            // Construct chart layout
            // ------------------------------

            // Line
            var line = d3.svg.line()
                .x(function(d) {
                    return x(d.date);
                })
                .y(function(d) {
                    return y(d.alpha);
                });


            //
            // Append chart elements
            //

            // Add mask for animation
            // ------------------------------

            // Add clip path
            var clip = svg.append("defs")
                .append("clipPath")
                .attr("id", "clip-line-small");

            // Add clip shape
            var clipRect = clip.append("rect")
                .attr('class', 'clip')
                .attr("width", 0)
                .attr("height", height);

            // Animate mask
            clipRect
                  .transition()
                      .duration(1000)
                      .ease('linear')
                      .attr("width", width);


            // Line
            // ------------------------------

            // Path
            var path = svg.append('path')
                .attr({
                    'd': line(dataset),
                    "clip-path": "url(#clip-line-small)",
                    'class': 'd3-line d3-line-medium'
                })
                .style('stroke', lineColor);

            // Animate path
            svg.select('.line-tickets')
                .transition()
                    .duration(1000)
                    .ease('linear');


            // Add vertical guide lines
            // ------------------------------

            // Bind data
            var guide = svg.append('g')
                .selectAll('.d3-line-guides-group')
                .data(dataset);

            // Append lines
            guide
                .enter()
                .append('line')
                    .attr('class', 'd3-line-guides')
                    .attr('x1', function (d, i) {
                        return x(d.date);
                    })
                    .attr('y1', function (d, i) {
                        return height;
                    })
                    .attr('x2', function (d, i) {
                        return x(d.date);
                    })
                    .attr('y2', function (d, i) {
                        return height;
                    })
                    .style('stroke', pathColor)
                    .style('stroke-dasharray', '4,2')
                    .style('shape-rendering', 'crispEdges');

            // Animate guide lines
            guide
                .transition()
                    .duration(1000)
                    .delay(function(d, i) { return i * 150; })
                    .attr('y2', function (d, i) {
                        return y(d.alpha);
                    });


            // Alpha app points
            // ------------------------------

            // Add points
            var points = svg.insert('g')
                .selectAll('.d3-line-circle')
                .data(dataset)
                .enter()
                .append('circle')
                    .attr('class', 'd3-line-circle d3-line-circle-medium')
                    .attr("cx", line.x())
                    .attr("cy", line.y())
                    .attr("r", 3)
                    .style({
                        'stroke': pointerLineColor,
                        'fill': pointerBgColor
                    });

            // Animate points on page load
            points
                .style('opacity', 0)
                .transition()
                    .duration(250)
                    .ease('linear')
                    .delay(1000)
                    .style('opacity', 1);

            // Add user interaction
            points
                .on("mouseover", function (d) {
                    tooltip.offset([-10, 0]).show(d);

                    // Animate circle radius
                    d3.select(this).transition().duration(250).attr('r', 4);
                })

                // Hide tooltip
                .on("mouseout", function (d) {
                    tooltip.hide(d);

                    // Animate circle radius
                    d3.select(this).transition().duration(250).attr('r', 3);
                });

            // Change tooltip direction of first point
            d3.select(points[0][0])
                .on("mouseover", function (d) {
                    tooltip.offset([0, 10]).direction('e').show(d);

                    // Animate circle radius
                    d3.select(this).transition().duration(250).attr('r', 4);
                })
                .on("mouseout", function (d) {
                    tooltip.direction('n').hide(d);

                    // Animate circle radius
                    d3.select(this).transition().duration(250).attr('r', 3);
                });

            // Change tooltip direction of last point
            d3.select(points[0][points.size() - 1])
                .on("mouseover", function (d) {
                    tooltip.offset([0, -10]).direction('w').show(d);

                    // Animate circle radius
                    d3.select(this).transition().duration(250).attr('r', 4);
                })
                .on("mouseout", function (d) {
                    tooltip.direction('n').hide(d);

                    // Animate circle radius
                    d3.select(this).transition().duration(250).attr('r', 3);
                });


            // Resize chart
            // ------------------------------

            // Call function on window resize
            $(window).on('resize', lineChartResize);

            // Call function on sidebar width change
            $(document).on('click', '.sidebar-control', lineChartResize);

            // Resize function
            // 
            // Since D3 doesn't support SVG resize by default,
            // we need to manually specify parts of the graph that need to 
            // be updated on window resize
            function lineChartResize() {

                // Layout variables
                width = d3Container.node().getBoundingClientRect().width - margin.left - margin.right;


                // Layout
                // -------------------------

                // Main svg width
                container.attr("width", width + margin.left + margin.right);

                // Width of appended group
                svg.attr("width", width + margin.left + margin.right);

                // Horizontal range
                x.range([padding, width - padding]);


                // Chart elements
                // -------------------------

                // Mask
                clipRect.attr("width", width);

                // Line path
                svg.selectAll('.d3-line').attr("d", line(dataset));

                // Circles
                svg.selectAll('.d3-line-circle').attr("cx", line.x());

                // Guide lines
                svg.selectAll('.d3-line-guides')
                    .attr('x1', function (d, i) {
                        return x(d.date);
                    })
                    .attr('x2', function (d, i) {
                        return x(d.date);
                    });
            }
        }
    };

    // Simple sparklines
    var _sparklinesWidget = function(element, chartType, qty, chartHeight, interpolation, duration, interval, color) {
        if (typeof d3 == 'undefined') {
            console.warn('Warning - d3.min.js is not loaded.');
            return;
        }

        // Initialize chart only if element exsists in the DOM
        if(element) {


            // Basic setup
            // ------------------------------

            // Define main variables
            var d3Container = d3.select(element),
                margin = {top: 0, right: 0, bottom: 0, left: 0},
                width = d3Container.node().getBoundingClientRect().width - margin.left - margin.right,
                height = chartHeight - margin.top - margin.bottom;


            // Generate random data (for demo only)
            var data = [];
            for (var i=0; i < qty; i++) {
                data.push(Math.floor(Math.random() * qty) + 5);
            }


            // Construct scales
            // ------------------------------

            // Horizontal
            var x = d3.scale.linear().range([0, width]);

            // Vertical
            var y = d3.scale.linear().range([height - 5, 5]);


            // Set input domains
            // ------------------------------

            // Horizontal
            x.domain([1, qty - 3]);

            // Vertical
            y.domain([0, qty]);
                

            // Construct chart layout
            // ------------------------------

            // Line
            var line = d3.svg.line()
                .interpolate(interpolation)
                .x(function(d, i) { return x(i); })
                .y(function(d, i) { return y(d); });

            // Area
            var area = d3.svg.area()
                .interpolate(interpolation)
                .x(function(d,i) { 
                    return x(i); 
                })
                .y0(height)
                .y1(function(d) { 
                    return y(d); 
                });


            // Create SVG
            // ------------------------------

            // Container
            var container = d3Container.append('svg');

            // SVG element
            var svg = container
                .attr('width', width + margin.left + margin.right)
                .attr('height', height + margin.top + margin.bottom)
                .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


            // Add mask for animation
            // ------------------------------

            // Add clip path
            var clip = svg.append("defs")
                .append("clipPath")
                .attr('id', function(d, i) { return "load-clip-" + element.substring(1); });

            // Add clip shape
            var clips = clip.append("rect")
                .attr('class', 'load-clip')
                .attr("width", 0)
                .attr("height", height);

            // Animate mask
            clips
                .transition()
                    .duration(1000)
                    .ease('linear')
                    .attr("width", width);


            //
            // Append chart elements
            //

            // Main path
            var path = svg.append("g")
                .attr("clip-path", function(d, i) { return "url(#load-clip-" + element.substring(1) + ")"; })
                .append("path")
                    .datum(data)
                    .attr("transform", "translate(" + x(0) + ",0)");

            // Add path based on chart type
            if(chartType == "area") {
                path.attr("d", area).attr('class', 'd3-area').style("fill", color); // area
            }
            else {
                path.attr("d", line).attr("class", "d3-line d3-line-medium").style('stroke', color); // line
            }

            // Animate path
            path
                .style('opacity', 0)
                .transition()
                    .duration(500)
                    .style('opacity', 1);



            // Set update interval. For demo only
            // ------------------------------

            setInterval(function() {

                // push a new data point onto the back
                data.push(Math.floor(Math.random() * qty) + 5);

                // pop the old data point off the front
                data.shift();

                update();

            }, interval);



            // Update random data. For demo only
            // ------------------------------

            function update() {

                // Redraw the path and slide it to the left
                path
                    .attr("transform", null)
                    .transition()
                        .duration(duration)
                        .ease("linear")
                        .attr("transform", "translate(" + x(0) + ",0)");

                // Update path type
                if(chartType == "area") {
                    path.attr("d", area).attr('class', 'd3-area').style("fill", color);
                }
                else {
                    path.attr("d", line).attr("class", "d3-line d3-line-medium").style('stroke', color);
                }
            }



            // Resize chart
            // ------------------------------

            // Call function on window resize
            window.addEventListener('resize', resizeSparklines);

            // Call function on sidebar width change
            var sidebarToggle = document.querySelector('.sidebar-control');
            sidebarToggle && sidebarToggle.addEventListener('click', resizeSparklines);

            // Resize function
            // 
            // Since D3 doesn't support SVG resize by default,
            // we need to manually specify parts of the graph that need to 
            // be updated on window resize
            function resizeSparklines() {

                // Layout variables
                width = d3Container.node().getBoundingClientRect().width - margin.left - margin.right;


                // Layout
                // -------------------------

                // Main svg width
                container.attr("width", width + margin.left + margin.right);

                // Width of appended group
                svg.attr("width", width + margin.left + margin.right);

                // Horizontal range
                x.range([0, width]);


                // Chart elements
                // -------------------------

                // Clip mask
                clips.attr("width", width);

                // Line
                svg.select(".d3-line").attr("d", line);

                // Area
                svg.select(".d3-area").attr("d", area);
            }
        }
    };

    // Animated progress with icon
    var _progressIcon = function(element, radius, border, foregroundColor, end, iconClass) {
        if (typeof d3 == 'undefined') {
            console.warn('Warning - d3.min.js is not loaded.');
            return;
        }

        // Initialize chart only if element exsists in the DOM
        if(element) {


            // Basic setup
            // ------------------------------

            // Main variables
            var d3Container = d3.select(element),
                startPercent = 0,
                iconSize = 32,
                endPercent = end,
                twoPi = Math.PI * 2,
                formatPercent = d3.format('.0%'),
                boxSize = radius * 2;

            // Values count
            var count = Math.abs((endPercent - startPercent) / 0.01);

            // Values step
            var step = endPercent < startPercent ? -0.01 : 0.01;


            // Create chart
            // ------------------------------

            // Add SVG element
            var container = d3Container.append('svg');

            // Add SVG group
            var svg = container
                .attr('width', boxSize)
                .attr('height', boxSize)
                .append('g')
                    .attr('transform', 'translate(' + (boxSize / 2) + ',' + (boxSize / 2) + ')');


            // Construct chart layout
            // ------------------------------

            // Arc
            var arc = d3.svg.arc()
                .startAngle(0)
                .innerRadius(radius)
                .outerRadius(radius - border)
                .cornerRadius(20);


            //
            // Append chart elements
            //

            // Paths
            // ------------------------------

            // Background path
            svg.append('path')
                .attr('class', 'd3-progress-background')
                .attr('d', arc.endAngle(twoPi))
                .style('fill', foregroundColor)
                .style('opacity', 0.1);

            // Foreground path
            var foreground = svg.append('path')
                .attr('class', 'd3-progress-foreground')
                .attr('filter', 'url(#blur)')
                .style({
                    'fill': foregroundColor,
                    'stroke': foregroundColor
                });

            // Front path
            var front = svg.append('path')
                .attr('class', 'd3-progress-front')
                .style({
                    'fill': foregroundColor,
                    'fill-opacity': 1
                });


            // Text
            // ------------------------------

            // Percentage text value
            var numberText = d3.select('.progress-percentage')
                    .attr('class', 'pt-1 mt-2 mb-1');

            // Icon
            d3.select(element)
                .append("i")
                    .attr("class", iconClass + " counter-icon")
                    .style({
                        'color': foregroundColor,
                        'top': ((boxSize - iconSize) / 2) + 'px'
                    });


            // Animation
            // ------------------------------

            // Animate path
            function updateProgress(progress) {
                foreground.attr('d', arc.endAngle(twoPi * progress));
                front.attr('d', arc.endAngle(twoPi * progress));
                numberText.text(formatPercent(progress));
            }

            // Animate text
            var progress = startPercent;
            (function loops() {
                updateProgress(progress);
                if (count > 0) {
                    count--;
                    progress += step;
                    setTimeout(loops, 10);
                }
            })();
        }
    };

    // Animated progress with percentage count
    //this.progressPercentage = function(element, radius, border, foregroundColor, end, iconClass) {
	this.progressPercentage = function(element, end, options) {		
        if (typeof d3 == 'undefined') {
            console.warn('Warning - d3.min.js is not loaded.');
            return;
        }
		this.element = element;
		if(!exists(options) || options ==null)
		{
			options = {};
		}			
			
		/*
		this.radius = radius;
		this.border = border;
		this.foregroundColor = foregroundColor;
		
		this.foregroundColor = foregroundColor;
		*/
		this.end = end;
		this.currentPercent = 0;
		this.settings = {
		radius : 40,
		border : 3,
		foreColor : "#66bb6a",
		fontSize : 22
		};
		
		//Optionen übernehmen
		
		jQuery.extend(this.settings, options);		
        // Initialize chart only if element exsists in the DOM
        if(element) {


            // Basic setup
            // ------------------------------

            // Main variables
            var d3Container = d3.select(element),
                startPercent = 0,
                endPercent = end,
                twoPi = Math.PI * 2,
                formatPercent = d3.format('.0%'),
                boxSize = this.settings.radius * 2;

            // Values count
            var count = Math.abs((endPercent - startPercent) / 0.01);

            // Values step
            var step = endPercent < startPercent ? -0.01 : 0.01;


            // Create chart
            // ------------------------------

            // Add SVG element
            var container = d3Container.append('svg');

            // Add SVG group
            var svg = container
                .attr('width', boxSize)
                .attr('height', boxSize)
                .append('g')
                    .attr('transform', 'translate(' + this.settings.radius + ',' + this.settings.radius + ')');


            // Construct chart layout
            // ------------------------------

            // Arc
            var arc = d3.svg.arc()
                .startAngle(0)
                .innerRadius(this.settings.radius)
                .outerRadius(this.settings.radius - this.settings.border)
                .cornerRadius(20);


            //
            // Append chart elements
            //

            // Paths
            // ------------------------------

            // Background path
            svg.append('path')
                .attr('class', 'd3-progress-background')
                .attr('d', arc.endAngle(twoPi))
                .style('fill', this.settings.foreColor)
                .style('opacity', 0.1);

            // Foreground path
            var foreground = svg.append('path')
                .attr('class', 'd3-progress-foreground')
                .attr('filter', 'url(#blur)')
                .style({
                    'fill': this.settings.foreColor,
                    'stroke': this.settings.foreColor
                });

            // Front path
            var front = svg.append('path')
                .attr('class', 'd3-progress-front')
                .style({
                    'fill': this.settings.foreColor,
                    'fill-opacity': 1
                });


            // Text
            // ------------------------------

            // Percentage text value
            var numberText = svg
                .append('text')
                    .attr('dx', 0)
                    .attr('dy', (this.settings.fontSize / 2) - this.settings.border)
                    .style({
                        'font-size': this.settings.fontSize + 'px',
                        'line-height': 1,
                        'fill': this.settings.foreColor,
                        'text-anchor': 'middle'
                    });


            // Animation
            // ------------------------------

            // Update
            this.update = function(endPercent) {

				//var startPercent = this.currentPercentage;
				endPercent = endPercent;
				var progress = this.currentPercent;
				var count = Math.abs((endPercent - this.currentPercent) / 0.01);
				var step = endPercent < this.currentPercent ? -0.01 : 0.01;
				this.currentPercent = endPercent;
				(function loops() {
					//console.log(count+"-"+step+"#"+progress+"/"+endPercent);
					updateProgress(progress);
					/*
					if(endPercentprogress)
					{
						progress += step;
						setTimeout(loops, 10);						
					}
					*/
					//this.currentPercentage = progress;
					
					if (count > 0) {
						count--;
						progress += step;
						setTimeout(loops, 10);
					}
					
				})();
            };
            // Animate path
            function updateProgress(progress) {
                foreground.attr('d', arc.endAngle(twoPi * progress));
                front.attr('d', arc.endAngle(twoPi * progress));
                numberText.text(formatPercent(progress));
            }
			this.update(endPercent);
            // Animate text
			/*
            var progress = startPercent;
            (function loops() {
                updateProgress(progress);
                if (count > 0) {
                    count--;
                    progress += step;
                    setTimeout(loops, 10);
                }
            })();
			*/
			
			return this;
        }
    };

    // Simple pie
    var _animatedPie = function(element, size) {
        if (typeof d3 == 'undefined') {
            console.warn('Warning - d3.min.js is not loaded.');
            return;
        }

        // Initialize chart only if element exsists in the DOM
        if(element) {

            // Add data set
            var data = [
                {
                    "status": "Pending tickets",
                    "icon": "<i class='icon-history text-blue mr-2'></i>",
                    "value": 938,
                    "color": "#29B6F6"
                }, {
                    "status": "Resolved tickets",
                    "icon": "<i class='icon-checkmark3 text-success mr-2'></i>",
                    "value": 490,
                    "color": "#66BB6A"
                }, {
                    "status": "Closed tickets",
                    "icon": "<i class='icon-cross2 text-danger mr-2'></i>",
                    "value": 789,
                    "color": "#EF5350"
                }
            ];

            // Main variables
            var d3Container = d3.select(element),
                distance = 2, // reserve 2px space for mouseover arc moving
                radius = (size/2) - distance,
                sum = d3.sum(data, function(d) { return d.value; });


            // Tooltip
            // ------------------------------

            var tip = d3.tip()
                .attr('class', 'd3-tip')
                .offset([-10, 0])
                .direction('e')
                .html(function (d) {
                    return "<ul class='list-unstyled mb-1'>" +
                        "<li>" + "<div class='font-size-base my-1'>" + d.data.icon + d.data.status + "</div>" + "</li>" +
                        "<li>" + "Total: &nbsp;" + "<span class='font-weight-semibold float-right'>" + d.value + "</span>" + "</li>" +
                        "<li>" + "Share: &nbsp;" + "<span class='font-weight-semibold float-right'>" + (100 / (sum / d.value)).toFixed(2) + "%" + "</span>" + "</li>" +
                    "</ul>";
                });


            // Create chart
            // ------------------------------

            // Add svg element
            var container = d3Container.append("svg").call(tip);
            
            // Add SVG group
            var svg = container
                .attr("width", size)
                .attr("height", size)
                .append("g")
                    .attr("transform", "translate(" + (size / 2) + "," + (size / 2) + ")");  


            // Construct chart layout
            // ------------------------------

            // Pie
            var pie = d3.layout.pie()
                .sort(null)
                .startAngle(Math.PI)
                .endAngle(3 * Math.PI)
                .value(function (d) { 
                    return d.value;
                }); 

            // Arc
            var arc = d3.svg.arc()
                .outerRadius(radius);


            //
            // Append chart elements
            //

            // Group chart elements
            var arcGroup = svg.selectAll(".d3-arc")
                .data(pie(data))
                .enter()
                .append("g") 
                    .attr("class", "d3-arc d3-slice-border")
                    .style({
                        'cursor': 'pointer'
                    });
            
            // Append path
            var arcPath = arcGroup
                .append("path")
                .style("fill", function (d) {
                    return d.data.color;
                });

            // Add tooltip
            arcPath
                .on('mouseover', function (d, i) {

                    // Transition on mouseover
                    d3.select(this)
                    .transition()
                        .duration(500)
                        .ease('elastic')
                        .attr('transform', function (d) {
                            d.midAngle = ((d.endAngle - d.startAngle) / 2) + d.startAngle;
                            var x = Math.sin(d.midAngle) * distance;
                            var y = -Math.cos(d.midAngle) * distance;
                            return 'translate(' + x + ',' + y + ')';
                        });
                })
                .on("mousemove", function (d) {
                    
                    // Show tooltip on mousemove
                    tip.show(d)
                        .style("top", (d3.event.pageY - 40) + "px")
                        .style("left", (d3.event.pageX + 30) + "px");
                })
                .on('mouseout', function (d, i) {

                    // Mouseout transition
                    d3.select(this)
                    .transition()
                        .duration(500)
                        .ease('bounce')
                        .attr('transform', 'translate(0,0)');

                    // Hide tooltip
                    tip.hide(d);
                });

            // Animate chart on load
            arcPath
                .transition()
                    .delay(function(d, i) { return i * 500; })
                    .duration(500)
                    .attrTween("d", function(d) {
                        var interpolate = d3.interpolate(d.startAngle,d.endAngle);
                        return function(t) {
                            d.endAngle = interpolate(t);
                            return arc(d);  
                        }; 
                    });


            //
            // Append counter
            //

            // Append element
            d3Container
                .append('h2')
                .attr('class', 'pt-1 mt-2 mb-1 font-weight-semibold');

            // Animate counter
            d3Container.select('h2')
                .transition()
                .duration(1500)
                .tween("text", function(d) {
                    var i = d3.interpolate(this.textContent, sum);

                    return function(t) {
                        this.textContent = d3.format(",d")(Math.round(i(t)));
                    };
                });
        }
    };

    // Pie with legend
    var _animatedPieWithLegend = function(element, size) {
        if (typeof d3 == 'undefined') {
            console.warn('Warning - d3.min.js is not loaded.');
            return;
        }

        // Initialize chart only if element exsists in the DOM
        if(element) {

            // Add data set
            var data = [
                {
                    "status": "New",
                    "value": 578,
                    "color": "#29B6F6"
                }, {
                    "status": "Pending",
                    "value": 983,
                    "color": "#66BB6A"
                }, {
                    "status": "Shipped",
                    "value": 459,
                    "color": "#EF5350"
                }
            ];

            // Main variables
            var d3Container = d3.select(element),
                distance = 2, // reserve 2px space for mouseover arc moving
                radius = (size/2) - distance,
                sum = d3.sum(data, function(d) { return d.value; });


            // Create chart
            // ------------------------------

            // Add svg element
            var container = d3Container.append("svg");
            
            // Add SVG group
            var svg = container
                .attr("width", size)
                .attr("height", size)
                .append("g")
                    .attr("transform", "translate(" + (size / 2) + "," + (size / 2) + ")");  


            // Construct chart layout
            // ------------------------------

            // Pie
            var pie = d3.layout.pie()
                .sort(null)
                .startAngle(Math.PI)
                .endAngle(3 * Math.PI)
                .value(function (d) { 
                    return d.value;
                }); 

            // Arc
            var arc = d3.svg.arc()
                .outerRadius(radius);


            //
            // Append chart elements
            //

            // Group chart elements
            var arcGroup = svg.selectAll(".d3-arc")
                .data(pie(data))
                .enter()
                .append("g") 
                    .attr("class", "d3-arc d3-slice-border")
                    .style({
                        'cursor': 'pointer'
                    });
            
            // Append path
            var arcPath = arcGroup
                .append("path")
                .style("fill", function (d) {
                    return d.data.color;
                });


            // Add interactions
            arcPath
                .on('mouseover', function (d, i) {

                    // Transition on mouseover
                    d3.select(this)
                    .transition()
                        .duration(500)
                        .ease('elastic')
                        .attr('transform', function (d) {
                            d.midAngle = ((d.endAngle - d.startAngle) / 2) + d.startAngle;
                            var x = Math.sin(d.midAngle) * distance;
                            var y = -Math.cos(d.midAngle) * distance;
                            return 'translate(' + x + ',' + y + ')';
                        });

                    // Animate legend
                    $(element + ' [data-slice]').css({
                        'opacity': 0.3,
                        'transition': 'all ease-in-out 0.15s'
                    });
                    $(element + ' [data-slice=' + i + ']').css({'opacity': 1});
                })
                .on('mouseout', function (d, i) {

                    // Mouseout transition
                    d3.select(this)
                    .transition()
                        .duration(500)
                        .ease('bounce')
                        .attr('transform', 'translate(0,0)');

                    // Revert legend animation
                    $(element + ' [data-slice]').css('opacity', 1);
                });

            // Animate chart on load
            arcPath
                .transition()
                    .delay(function(d, i) { return i * 500; })
                    .duration(500)
                    .attrTween("d", function(d) {
                        var interpolate = d3.interpolate(d.startAngle,d.endAngle);
                        return function(t) {
                            d.endAngle = interpolate(t);
                            return arc(d);  
                        }; 
                    });


            //
            // Append counter
            //

            // Append element
            d3Container
                .append('h2')
                .attr('class', 'pt-1 mt-2 mb-1 font-weight-semibold');

            // Animate counter
            d3Container.select('h2')
                .transition()
                .duration(1500)
                .tween("text", function(d) {
                    var i = d3.interpolate(this.textContent, sum);

                    return function(t) {
                        this.textContent = d3.format(",d")(Math.round(i(t)));
                    };
                });


            //
            // Append legend
            //

            // Add element
            var legend = d3.select(element)
                .append('ul')
                .attr('class', 'chart-widget-legend')
                .selectAll('li').data(pie(data))
                .enter().append('li')
                .attr('data-slice', function(d, i) {
                    return i;
                })
                .attr('style', function(d, i) {
                    return 'border-bottom: 2px solid ' + d.data.color;
                })
                .text(function(d, i) {
                    return d.data.status + ': ';
                });

            // Add value
            legend.append('span')
                .text(function(d, i) {
                    return d.data.value;
                });
        }
    };

    // Pie arc with legend
    var _pieArcWithLegend = function(element, size) {
        if (typeof d3 == 'undefined') {
            console.warn('Warning - d3.min.js is not loaded.');
            return;
        }

        // Initialize chart only if element exsists in the DOM
        if(element) {


            // Basic setup
            // ------------------------------

            // Add data set
            var data = [
                {
                    "status": "Pending",
                    "icon": "<i class='icon-history text-blue mr-2'></i>",
                    "value": 720,
                    "color": "#29B6F6"
                }, {
                    "status": "Resolved",
                    "icon": "<i class='icon-checkmark3 text-success mr-2'></i>",
                    "value": 990,
                    "color": "#66BB6A"
                }, {
                    "status": "Closed",
                    "icon": "<i class='icon-cross2 text-danger mr-2'></i>",
                    "value": 720,
                    "color": "#EF5350"
                }
            ];

            // Main variables
            var d3Container = d3.select(element),
                distance = 2, // reserve 2px space for mouseover arc moving
                radius = (size/2) - (distance * 2),
                sum = d3.sum(data, function(d) { return d.value; });



            // Tooltip
            // ------------------------------

            var tip = d3.tip()
                .attr('class', 'd3-tip')
                .offset([-10, 0])
                .direction('e')
                .html(function (d) {
                    return "<ul class='list-unstyled mb-1'>" +
                        "<li>" + "<div class='font-size-base my-1'>" + d.data.icon + d.data.status + "</div>" + "</li>" +
                        "<li>" + "Total: &nbsp;" + "<span class='font-weight-semibold float-right'>" + d.value + "</span>" + "</li>" +
                        "<li>" + "Share: &nbsp;" + "<span class='font-weight-semibold float-right'>" + (100 / (sum / d.value)).toFixed(2) + "%" + "</span>" + "</li>" +
                    "</ul>";
                });



            // Create chart
            // ------------------------------

            // Add svg element
            var container = d3Container.append("svg").call(tip);
            
            // Add SVG group
            var svg = container
                .attr("width", size)
                .attr("height", size / 2)
                .append("g")
                    .attr("transform", "translate(" + (size / 2) + "," + (size / 2) + ")");  



            // Construct chart layout
            // ------------------------------

            // Pie
            var pie = d3.layout.pie()
                .sort(null)
                .startAngle(-Math.PI / 2)
                .endAngle(Math.PI / 2)
                .value(function (d) { 
                    return d.value;
                }); 

            // Arc
            var arc = d3.svg.arc()
                .outerRadius(radius)
                .innerRadius(radius / 1.3);



            //
            // Append chart elements
            //

            // Group chart elements
            var arcGroup = svg.selectAll(".d3-arc")
                .data(pie(data))
                .enter()
                .append("g") 
                    .attr("class", "d3-arc d3-slice-border")
                    .style({
                        'cursor': 'pointer'
                    });

            // Append path
            var arcPath = arcGroup
                .append("path")
                .style("fill", function (d) {
                    return d.data.color;
                });


            //
            // Interactions
            //

            // Mouse
            arcPath
                .on('mouseover', function(d, i) {

                    // Transition on mouseover
                    d3.select(this)
                    .transition()
                        .duration(500)
                        .ease('elastic')
                        .attr('transform', function (d) {
                            d.midAngle = ((d.endAngle - d.startAngle) / 2) + d.startAngle;
                            var x = Math.sin(d.midAngle) * distance;
                            var y = -Math.cos(d.midAngle) * distance;
                            return 'translate(' + x + ',' + y + ')';
                        });

                    $(element + ' [data-slice]').css({
                        'opacity': 0.3,
                        'transition': 'all ease-in-out 0.15s'
                    });
                    $(element + ' [data-slice=' + i + ']').css({'opacity': 1});
                })
                .on('mouseout', function(d, i) {

                    // Mouseout transition
                    d3.select(this)
                    .transition()
                        .duration(500)
                        .ease('bounce')
                        .attr('transform', 'translate(0,0)');

                    $(element + ' [data-slice]').css('opacity', 1);
                });

            // Animate chart on load
            arcPath
                .transition()
                    .delay(function(d, i) {
                        return i * 500;
                    })
                    .duration(500)
                    .attrTween("d", function(d) {
                        var interpolate = d3.interpolate(d.startAngle,d.endAngle);
                        return function(t) {
                            d.endAngle = interpolate(t);
                            return arc(d);  
                        }; 
                    });


            //
            // Append total text
            //

            svg.append('text')
                // .attr('class', 'text-muted')
                .attr({
                    'class': 'half-donut-total d3-text opacity-50',
                    'text-anchor': 'middle',
                    'dy': -33
                })
                .text('Total');


            //
            // Append count
            //

            // Text
            svg
                .append('text')
                .attr('class', 'half-conut-count d3-text')
                .attr('text-anchor', 'middle')
                .attr('dy', -5)
                .style({
                    'font-size': '21px',
                    'font-weight': 500
                });

            // Animation
            svg.select('.half-conut-count')
                .transition()
                .duration(1500)
                .ease('linear')
                .tween("text", function(d) {
                    var i = d3.interpolate(this.textContent, sum);

                    return function(t) {
                        this.textContent = d3.format(",d")(Math.round(i(t)));
                    };
                });


            //
            // Legend
            //

            // Add legend list
            var legend = d3.select(element)
                .append('ul')
                .attr('class', 'chart-widget-legend')
                .selectAll('li')
                .data(pie(data))
                .enter()
                .append('li')
                .attr('data-slice', function(d, i) {
                    return i;
                })
                .attr('style', function(d, i) {
                    return 'border-bottom: solid 2px ' + d.data.color;
                })
                .text(function(d, i) {
                    return d.data.status + ': ';
                });

            // Legend text
            legend.append('span')
                .text(function(d, i) {
                    return d.data.value;
                });
        }
    };

    // Simple donut
    var _animatedDonut = function(element, size) {
        if (typeof d3 == 'undefined') {
            console.warn('Warning - d3.min.js is not loaded.');
            return;
        }

        // Initialize chart only if element exsists in the DOM
        if(element) {

            // Add data set
            var data = [
                {
                    "status": "Pending tickets",
                    "icon": "<i class='icon-history text-blue mr-2'></i>",
                    "value": 567,
                    "color": "#29B6F6"
                }, {
                    "status": "Resolved tickets",
                    "icon": "<i class='icon-checkmark3 text-success mr-2'></i>",
                    "value": 234,
                    "color": "#66BB6A"
                }, {
                    "status": "Closed tickets",
                    "icon": "<i class='icon-cross2 text-danger mr-2'></i>",
                    "value": 642,
                    "color": "#EF5350"
                }
            ];

            // Main variables
            var d3Container = d3.select(element),
                distance = 2, // reserve 2px space for mouseover arc moving
                radius = (size/2) - distance,
                sum = d3.sum(data, function(d) { return d.value; });


            // Tooltip
            // ------------------------------

            var tip = d3.tip()
                .attr('class', 'd3-tip')
                .offset([-10, 0])
                .direction('e')
                .html(function (d) {
                    return "<ul class='list-unstyled mb-1'>" +
                        "<li>" + "<div class='font-size-base my-1'>" + d.data.icon + d.data.status + "</div>" + "</li>" +
                        "<li>" + "Total: &nbsp;" + "<span class='font-weight-semibold float-right'>" + d.value + "</span>" + "</li>" +
                        "<li>" + "Share: &nbsp;" + "<span class='font-weight-semibold float-right'>" + (100 / (sum / d.value)).toFixed(2) + "%" + "</span>" + "</li>" +
                    "</ul>";
                });


            // Create chart
            // ------------------------------

            // Add svg element
            var container = d3Container.append("svg").call(tip);
            
            // Add SVG group
            var svg = container
                .attr("width", size)
                .attr("height", size)
                .append("g")
                    .attr("transform", "translate(" + (size / 2) + "," + (size / 2) + ")");  


            // Construct chart layout
            // ------------------------------

            // Pie
            var pie = d3.layout.pie()
                .sort(null)
                .startAngle(Math.PI)
                .endAngle(3 * Math.PI)
                .value(function (d) { 
                    return d.value;
                }); 

            // Arc
            var arc = d3.svg.arc()
                .outerRadius(radius)
                .innerRadius(radius / 1.5);


            //
            // Append chart elements
            //

            // Group chart elements
            var arcGroup = svg.selectAll(".d3-arc")
                .data(pie(data))
                .enter()
                .append("g") 
                    .attr("class", "d3-arc d3-slice-border")
                    .style({
                        'cursor': 'pointer'
                    });
            
            // Append path
            var arcPath = arcGroup
                .append("path")
                .style("fill", function (d) {
                    return d.data.color;
                });

            // Add tooltip
            arcPath
                .on('mouseover', function (d, i) {

                    // Transition on mouseover
                    d3.select(this)
                    .transition()
                        .duration(500)
                        .ease('elastic')
                        .attr('transform', function (d) {
                            d.midAngle = ((d.endAngle - d.startAngle) / 2) + d.startAngle;
                            var x = Math.sin(d.midAngle) * distance;
                            var y = -Math.cos(d.midAngle) * distance;
                            return 'translate(' + x + ',' + y + ')';
                        });
                })
                .on("mousemove", function (d) {
                    
                    // Show tooltip on mousemove
                    tip.show(d)
                        .style("top", (d3.event.pageY - 40) + "px")
                        .style("left", (d3.event.pageX + 30) + "px");
                })
                .on('mouseout', function (d, i) {

                    // Mouseout transition
                    d3.select(this)
                    .transition()
                        .duration(500)
                        .ease('bounce')
                        .attr('transform', 'translate(0,0)');

                    // Hide tooltip
                    tip.hide(d);
                });

            // Animate chart on load
            arcPath
                .transition()
                    .delay(function(d, i) { return i * 500; })
                    .duration(500)
                    .attrTween("d", function(d) {
                        var interpolate = d3.interpolate(d.startAngle,d.endAngle);
                        return function(t) {
                            d.endAngle = interpolate(t);
                            return arc(d);  
                        }; 
                    });


            //
            // Append counter
            //

            // Append text
            svg
                .append('text')
                .attr('class', 'd3-text')
                .attr('text-anchor', 'middle')
                .attr('dy', 6)
                .style({
                    'font-size': '17px',
                    'font-weight': 500
                });

            // Animate text
            svg.select('text')
                .transition()
                .duration(1500)
                .tween("text", function(d) {
                    var i = d3.interpolate(this.textContent, sum);
                    return function(t) {
                        this.textContent = d3.format(",d")(Math.round(i(t)));
                    };
                });
        }
    };

    // Donut with legend
    var _animatedDonutWithLegend = function(element, size) {
        if (typeof d3 == 'undefined') {
            console.warn('Warning - d3.min.js is not loaded.');
            return;
        }

        // Initialize chart only if element exsists in the DOM
        if(element) {

            // Add data set
            var data = [
                {
                    "status": "New",
                    "value": 790,
                    "color": "#29B6F6"
                }, {
                    "status": "Pending",
                    "value": 850,
                    "color": "#66BB6A"
                }, {
                    "status": "Shipped",
                    "value": 760,
                    "color": "#EF5350"
                }
            ];

            // Main variables
            var d3Container = d3.select(element),
                distance = 2, // reserve 2px space for mouseover arc moving
                radius = (size/2) - distance,
                sum = d3.sum(data, function(d) { return d.value; });


            // Create chart
            // ------------------------------

            // Add svg element
            var container = d3Container.append("svg");
            
            // Add SVG group
            var svg = container
                .attr("width", size)
                .attr("height", size)
                .append("g")
                    .attr("transform", "translate(" + (size / 2) + "," + (size / 2) + ")");  


            // Construct chart layout
            // ------------------------------

            // Pie
            var pie = d3.layout.pie()
                .sort(null)
                .startAngle(Math.PI)
                .endAngle(3 * Math.PI)
                .value(function (d) { 
                    return d.value;
                }); 

            // Arc
            var arc = d3.svg.arc()
                .outerRadius(radius)
                .innerRadius(radius / 1.5);


            //
            // Append chart elements
            //

            // Group chart elements
            var arcGroup = svg.selectAll(".d3-arc")
                .data(pie(data))
                .enter()
                .append("g") 
                    .attr("class", "d3-arc d3-slice-border")
                    .style({
                        'cursor': 'pointer'
                    });
            
            // Append path
            var arcPath = arcGroup
                .append("path")
                .style("fill", function (d) {
                    return d.data.color;
                });


            // Add interactions
            arcPath
                .on('mouseover', function (d, i) {

                    // Transition on mouseover
                    d3.select(this)
                    .transition()
                        .duration(500)
                        .ease('elastic')
                        .attr('transform', function (d) {
                            d.midAngle = ((d.endAngle - d.startAngle) / 2) + d.startAngle;
                            var x = Math.sin(d.midAngle) * distance;
                            var y = -Math.cos(d.midAngle) * distance;
                            return 'translate(' + x + ',' + y + ')';
                        });

                    // Animate legend
                    $(element + ' [data-slice]').css({
                        'opacity': 0.3,
                        'transition': 'all ease-in-out 0.15s'
                    });
                    $(element + ' [data-slice=' + i + ']').css({'opacity': 1});
                })
                .on('mouseout', function (d, i) {

                    // Mouseout transition
                    d3.select(this)
                    .transition()
                        .duration(500)
                        .ease('bounce')
                        .attr('transform', 'translate(0,0)');

                    // Revert legend animation
                    $(element + ' [data-slice]').css('opacity', 1);
                });

            // Animate chart on load
            arcPath
                .transition()
                    .delay(function(d, i) {
                        return i * 500;
                    })
                    .duration(500)
                    .attrTween("d", function(d) {
                        var interpolate = d3.interpolate(d.startAngle,d.endAngle);
                        return function(t) {
                            d.endAngle = interpolate(t);
                            return arc(d);  
                        }; 
                    });


            //
            // Append counter
            //

            // Append text
            svg
                .append('text')
                .attr('class', 'd3-text')
                .attr('text-anchor', 'middle')
                .attr('dy', 6)
                .style({
                    'font-size': '17px',
                    'font-weight': 500
                });

            // Animate text
            svg.select('text')
                .transition()
                .duration(1500)
                .tween("text", function(d) {
                    var i = d3.interpolate(this.textContent, sum);
                    return function(t) {
                        this.textContent = d3.format(",d")(Math.round(i(t)));
                    };
                });


            //
            // Append legend
            //

            // Add element
            var legend = d3.select(element)
                .append('ul')
                .attr('class', 'chart-widget-legend')
                .selectAll('li').data(pie(data))
                .enter().append('li')
                .attr('data-slice', function(d, i) {
                    return i;
                })
                .attr('style', function(d, i) {
                    return 'border-bottom: 2px solid ' + d.data.color;
                })
                .text(function(d, i) {
                    return d.data.status + ': ';
                });

            // Add value
            legend.append('span')
                .text(function(d, i) {
                    return d.data.value;
                });
        }
    };

    // Donut with details
    var _donutWithDetails = function(element, size) {
        if (typeof d3 == 'undefined') {
            console.warn('Warning - d3.min.js is not loaded.');
            return;
        }

        // Initialize chart only if element exsists in the DOM
        if(element) {


            // Basic setup
            // ------------------------------

            // Add data set
            var data = [
                {
                    "status": "Pending",
                    "icon": "<i class='badge badge-mark border-blue-300 mr-2'></i>",
                    "value": 720,
                    "color": "#29B6F6"
                }, {
                    "status": "Resolved",
                    "icon": "<i class='badge badge-mark border-success-300 mr-2'></i>",
                    "value": 990,
                    "color": "#66BB6A"
                }, {
                    "status": "Closed",
                    "icon": "<i class='badge badge-mark border-danger-300 mr-2'></i>",
                    "value": 720,
                    "color": "#EF5350"
                }
            ];

            // Main variables
            var d3Container = d3.select(element),
                distance = 2, // reserve 2px space for mouseover arc moving
                radius = (size/2) - distance,
                sum = d3.sum(data, function(d) { return d.value; });


            // Tooltip
            // ------------------------------

            var tip = d3.tip()
                .attr('class', 'd3-tip')
                .offset([-10, 0])
                .direction('e')
                .html(function (d) {
                    return "<ul class='list-unstyled mb-1'>" +
                        "<li>" + "<div class='font-size-base my-1'>" + d.data.icon + d.data.status + "</div>" + "</li>" +
                        "<li>" + "Total: &nbsp;" + "<span class='font-weight-semibold float-right'>" + d.value + "</span>" + "</li>" +
                        "<li>" + "Share: &nbsp;" + "<span class='font-weight-semibold float-right'>" + (100 / (sum / d.value)).toFixed(2) + "%" + "</span>" + "</li>" +
                    "</ul>";
                });


            // Create chart
            // ------------------------------

            // Add svg element
            var container = d3Container.append("svg").call(tip);
            
            // Add SVG group
            var svg = container
                .attr("width", size)
                .attr("height", size)
                .append("g")
                    .attr("transform", "translate(" + (size / 2) + "," + (size / 2) + ")");  


            // Construct chart layout
            // ------------------------------

            // Pie
            var pie = d3.layout.pie()
                .sort(null)
                .startAngle(Math.PI)
                .endAngle(3 * Math.PI)
                .value(function (d) { 
                    return d.value;
                }); 

            // Arc
            var arc = d3.svg.arc()
                .outerRadius(radius)
                .innerRadius(radius / 1.35);


            //
            // Append chart elements
            //

            // Group chart elements
            var arcGroup = svg.selectAll(".d3-arc")
                .data(pie(data))
                .enter()
                .append("g") 
                    .attr("class", "d3-arc d3-slice-border")
                    .style({
                        'cursor': 'pointer'
                    });
            
            // Append path
            var arcPath = arcGroup
                .append("path")
                .style("fill", function (d) {
                    return d.data.color;
                });


            //
            // Add interactions
            //

            // Mouse
            arcPath
                .on('mouseover', function(d, i) {

                    // Transition on mouseover
                    d3.select(this)
                    .transition()
                        .duration(500)
                        .ease('elastic')
                        .attr('transform', function (d) {
                            d.midAngle = ((d.endAngle - d.startAngle) / 2) + d.startAngle;
                            var x = Math.sin(d.midAngle) * distance;
                            var y = -Math.cos(d.midAngle) * distance;
                            return 'translate(' + x + ',' + y + ')';
                        });

                    $(element + ' [data-slice]').css({
                        'opacity': 0.3,
                        'transition': 'all ease-in-out 0.15s'
                    });
                    $(element + ' [data-slice=' + i + ']').css({'opacity': 1});
                })
                .on('mouseout', function(d, i) {

                    // Mouseout transition
                    d3.select(this)
                    .transition()
                        .duration(500)
                        .ease('bounce')
                        .attr('transform', 'translate(0,0)');

                    $(element + ' [data-slice]').css('opacity', 1);
                });

            // Animate chart on load
            arcPath
                .transition()
                .delay(function(d, i) {
                    return i * 500;
                })
                .duration(500)
                .attrTween("d", function(d) {
                    var interpolate = d3.interpolate(d.startAngle,d.endAngle);
                    return function(t) {
                        d.endAngle = interpolate(t);
                        return arc(d);  
                    }; 
                });


            //
            // Add text
            //

            // Total
            svg.append('text')
                .attr({
                    'class': 'half-donut-total d3-text opacity-50',
                    'text-anchor': 'middle',
                    'dy': -13
                })
                .text('Total');

            // Count
            svg
                .append('text')
                .attr('class', 'half-donut-count d3-text')
                .attr('text-anchor', 'middle')
                .attr('dy', 14)
                .style({
                    'font-size': '21px',
                    'font-weight': 500
                });

            // Animate count
            svg.select('.half-donut-count')
                .transition()
                .duration(1500)
                .ease('linear')
                .tween("text", function(d) {
                    var i = d3.interpolate(this.textContent, sum);

                    return function(t) {
                        this.textContent = d3.format(",d")(Math.round(i(t)));
                    };
                });


            //
            // Add legend
            //

            // Append list
            var legend = d3.select(element)
                .append('ul')
                .attr('class', 'chart-widget-legend')
                .selectAll('li')
                .data(pie(data))
                .enter()
                .append('li')
                .attr('data-slice', function(d, i) {
                    return i;
                })
                .attr('style', function(d, i) {
                    return 'border-bottom: solid 2px ' + d.data.color;
                })
                .text(function(d, i) {
                    return d.data.status + ': ';
                });

            // Append text
            legend.append('span')
                .text(function(d, i) {
                    return d.data.value;
                });
        }
    };

    // Progress arc - single color
    var _progressArcSingle = function(element, size) {
        if (typeof d3 == 'undefined') {
            console.warn('Warning - d3.min.js is not loaded.');
            return;
        }

        // Initialize chart only if element exsists in the DOM
        if(element) {

            // Main variables
            var d3Container = d3.select(element),
                radius = size,
                thickness = 20,
                color = '#29B6F6';


            // Create chart
            // ------------------------------

            // Add svg element
            var container = d3Container.append("svg");
            
            // Add SVG group
            var svg = container
                .attr('width', radius * 2)
                .attr('height', radius + 20)
                .attr('class', 'gauge');


            // Construct chart layout
            // ------------------------------

            // Pie
            var arc = d3.svg.arc()
                .innerRadius(radius - thickness)
                .outerRadius(radius)
                .startAngle(-Math.PI / 2);


            // Append chart elements
            // ------------------------------

            //
            // Group arc elements
            //

            // Group
            var chart = svg.append('g')
                .attr('transform', 'translate(' + radius + ',' + radius + ')');

            // Background
            var background = chart.append('path')
                .datum({
                    endAngle: Math.PI / 2
                })
                .attr({
                    'd': arc,
                    'class': 'd3-state-empty'
                });

            // Foreground
            var foreground = chart.append('path')
                .datum({
                    endAngle: -Math.PI / 2
                })
                .style('fill', color)
                .attr('d', arc);

            // Counter value
            var value = svg.append('g')
                .attr('transform', 'translate(' + radius + ',' + (radius * 0.9) + ')')
                .append('text')
                .text(0 + '%')
                .attr({
                    'class': 'd3-text',
                    'text-anchor': 'middle'
                })
                .style({
                    'font-size': 19,
                    'font-weight': 400
                });


            //
            // Min and max text
            //

            // Group
            var scale = svg.append('g')
                .attr('transform', 'translate(' + radius + ',' + (radius + 15) + ')')
                .attr('class', 'd3-text opacity-75')
                .style({
                    'font-size': 12
                });

            // Max
            scale.append('text')
                .text(100)
                .attr({
                    'text-anchor': 'middle',
                    'x': (radius - thickness / 2)
                });

            // Min
            scale.append('text')
                .text(0)
                .attr({
                    'text-anchor': 'middle',
                    'x': -(radius - thickness / 2)
                });


            //
            // Animation
            //

            // Interval
            setInterval(function() {
                update(Math.random() * 100);
            }, 1500);

            // Update
            function update(v) {
                v = d3.format('.0f')(v);
                foreground.transition()
                    .duration(750)
                    .call(arcTween, v);

                value.transition()
                    .duration(750)
                    .call(textTween, v);
            }

            // Arc
            function arcTween(transition, v) {
                var newAngle = v / 100 * Math.PI - Math.PI / 2;
                transition.attrTween('d', function(d) {
                    var interpolate = d3.interpolate(d.endAngle, newAngle);
                    return function(t) {
                        d.endAngle = interpolate(t);
                        return arc(d);
                    };
                });
            }

            // Text
            function textTween(transition, v) {
                transition.tween('text', function() {
                    var interpolate = d3.interpolate(this.innerHTML, v),
                        split = (v + '').split('.'),
                        round = (split.length > 1) ? Math.pow(10, split[1].length) : 1;
                    return function(t) {
                        this.innerHTML = d3.format('.0f')(Math.round(interpolate(t) * round) / round) + '<tspan>%</tspan>';
                    };
                });
            }
        }
    };

    // Progress arc - multiple colors
    var _progressArcMulti = function(element, size, goal) {
        if (typeof d3 == 'undefined') {
            console.warn('Warning - d3.min.js is not loaded.');
            return;
        }

        // Initialize chart only if element exsists in the DOM
        if(element) {

            // Main variables
            var d3Container = d3.select(element),
                radius = size,
                thickness = 20,
                startColor = '#66BB6A',
                midColor = '#FFA726',
                endColor = '#EF5350';

            // Colors
            var color = d3.scale.linear()
                .domain([0, 70, 100])
                .range([startColor, midColor, endColor]);


            // Create chart
            // ------------------------------

            // Add svg element
            var container = d3Container.append("svg");
            
            // Add SVG group
            var svg = container
                .attr('width', radius * 2)
                .attr('height', radius + 20);


            // Construct chart layout
            // ------------------------------

            // Pie
            var arc = d3.svg.arc()
                .innerRadius(radius - thickness)
                .outerRadius(radius)
                .startAngle(-Math.PI / 2);


            // Append chart elements
            // ------------------------------

            //
            // Group arc elements
            //

            // Group
            var chart = svg.append('g')
                .attr('transform', 'translate(' + radius + ',' + radius + ')');

            // Background
            var background = chart.append('path')
                .datum({
                    endAngle: Math.PI / 2
                })
                .attr({
                    'd': arc,
                    'class': 'd3-state-empty'
                });

            // Foreground
            var foreground = chart.append('path')
                .datum({
                    endAngle: -Math.PI / 2
                })
                .style('fill', startColor)
                .attr('d', arc);

            // Counter value
            var value = svg.append('g')
                .attr('transform', 'translate(' + radius + ',' + (radius * 0.9) + ')')
                .append('text')
                .text(0 + '%')
                .attr({
                    'class': 'd3-text',
                    'text-anchor': 'middle'
                })
                .style({
                    'font-size': 19,
                    'font-weight': 400
                });


            //
            // Min and max text
            //

            // Group
            var scale = svg.append('g')
                .attr('transform', 'translate(' + radius + ',' + (radius + 15) + ')')
                .attr('class', 'd3-text opacity-75')
                .style({
                    'font-size': 12
                });

            // Max
            scale.append('text')
                .text(100)
                .attr({
                    'text-anchor': 'middle',
                    'x': (radius - thickness / 2)
                });

            // Min
            scale.append('text')
                .text(0)
                .attr({
                    'text-anchor': 'middle',
                    'x': -(radius - thickness / 2)
                });


            //
            // Animation
            //

            // Interval
            setInterval(function() {
                update(Math.random() * 100);
            }, 1500);

            // Update
            function update(v) {
                v = d3.format('.0f')(v);
                foreground.transition()
                    .duration(750)
                    .style('fill', function() {
                        return color(v);
                    })
                    .call(arcTween, v);

                value.transition()
                    .duration(750)
                    .call(textTween, v);
            }

            // Arc
            function arcTween(transition, v) {
                var newAngle = v / 100 * Math.PI - Math.PI / 2;
                transition.attrTween('d', function(d) {
                    var interpolate = d3.interpolate(d.endAngle, newAngle);
                    return function(t) {
                        d.endAngle = interpolate(t);
                        return arc(d);
                    };
                });
            }

            // Text
            function textTween(transition, v) {
                transition.tween('text', function() {
                    var interpolate = d3.interpolate(this.innerHTML, v),
                        split = (v + '').split('.'),
                        round = (split.length > 1) ? Math.pow(10, split[1].length) : 1;
                    return function(t) {
                        this.innerHTML = d3.format('.0f')(Math.round(interpolate(t) * round) / round) + '<tspan>%</tspan>';
                    };
                });
            }
        }
    };

    // Rounded progress - single arc
    var _roundedProgressSingle = function(element, size, goal, color) {
        if (typeof d3 == 'undefined') {
            console.warn('Warning - d3.min.js is not loaded.');
            return;
        }

        // Initialize chart only if element exsists in the DOM
        if(element) {

            // Add random data
            var dataset = function () {
                return [
                    {percentage: Math.random() * 100}
                ];
            };

            // Main variables
            var d3Container = d3.select(element),
                padding = 2,
                strokeWidth = 16,
                width = size,
                height = size,
                τ = 2 * Math.PI;


            // Create chart
            // ------------------------------

            // Add svg element
            var container = d3Container.append("svg");
            
            // Add SVG group
            var svg = container
                .attr("width", width)
                .attr("height", height)
                .append("g")
                    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


            // Construct chart layout
            // ------------------------------

            // Foreground arc
            var arc = d3.svg.arc()
                .startAngle(0)
                .endAngle(function (d) {
                    return d.percentage / 100 * τ;
                })
                .innerRadius((size / 2) - strokeWidth)
                .outerRadius((size / 2) - padding)
                .cornerRadius(20);

            // Background arc
            var background = d3.svg.arc()
                .startAngle(0)
                .endAngle(τ)
                .innerRadius((size / 2) - strokeWidth)
                .outerRadius((size / 2) - padding);


            // Append chart elements
            // ------------------------------

            //
            // Group arc elements
            //

            // Group
            var field = svg.selectAll("g")
                .data(dataset)
                .enter().append("g");

            // Foreground arc
            field
                .append("path")
                .attr("class", "arc-foreground")
                .attr('fill', color);

            // Background arc
            field
                .append("path")
                .attr("d", background)
                .style({
                    "fill": color,
                    "opacity": 0.2
                });


            //
            // Text
            //

            // Goal
            field
                .append("text")
                .text("Out of " + goal)
                .attr({
                    'class': 'd3-text opacity-50',
                    'transform': 'translate(0,20)'
                })
                .style({
                    'font-size': 11,
                    'font-weight': 500,
                    'text-transform': 'uppercase',
                    'text-anchor': 'middle'
                });

            // Count
            field
                .append("text")
                .attr('class', 'arc-goal-completed d3-text')
                .attr("transform", "translate(0,0)")
                .style({
                    'font-size': 23,
                    'font-weight': 500,
                    'text-anchor': 'middle'
                });


            //
            // Animate elements
            //

            // Add transition
            d3.transition().duration(2500).each(update);


            // Animation
            function update() {
                field = field
                    .each(function (d) {
                        this._value = d.percentage;
                    })
                    .data(dataset)
                    .each(function (d) {
                        d.previousValue = this._value;
                    });

                // Foreground arc
                field
                    .select(".arc-foreground")
                    .transition()
                    .duration(600)
                    .ease("easeInOut")
                    .attrTween("d", arcTween);
                    
                // Update count text
                field
                    .select(".arc-goal-completed")
                    .text(function (d) {
                        return Math.round(d.percentage /100 * goal);
                    });

                // Animate count text
                svg.select('.arc-goal-completed')
                    .transition()
                    .duration(600)
                    .tween("text", function(d) {
                        var i = d3.interpolate(this.textContent, d.percentage);
                        return function(t) {
                            this.textContent = Math.floor(d.percentage/100 * goal);
                        };
                    });

                // Update every 4 seconds (for demo)
                setTimeout(update, 4000);
            }

            // Arc animation
            function arcTween(d) {
                var i = d3.interpolateNumber(d.previousValue, d.percentage);
                return function (t) {
                    d.percentage = i(t);
                    return arc(d);
                };
            }
        }
    };

    // Rounded progress - multiple arcs
    var _roundedProgressMultiple = function(element, size) {
        if (typeof d3 == 'undefined') {
            console.warn('Warning - d3.min.js is not loaded.');
            return;
        }

        // Initialize chart only if element exsists in the DOM
        if(element) {

            // Add random data
            var data = [
                    {index: 0, name: 'Memory', percentage: 0},
                    {index: 1, name: 'CPU', percentage: 0},
                    {index: 2, name: 'Sessions', percentage: 0}
                ];

            // Main variables
            var d3Container = d3.select(element),
                padding = 2,
                strokeWidth = 8,
                width = size,
                height = size,
                τ = 2 * Math.PI;

            // Colors
            var colors = ['#78909C', '#F06292', '#4DB6AC'];


            // Create chart
            // ------------------------------

            // Add svg element
            var container = d3Container.append("svg");
            
            // Add SVG group
            var svg = container
                .attr("width", width)
                .attr("height", height)
                .append("g")
                    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


            // Construct chart layout
            // ------------------------------

            // Foreground arc
            var arc = d3.svg.arc()
                .startAngle(0)
                .endAngle(function (d) {
                    return d.percentage / 100 * τ;
                })
                .innerRadius(function (d) {
                    return (size / 2) - d.index * (strokeWidth + padding);
                })
                .outerRadius(function (d) {
                    return ((size / 2) - d.index * (strokeWidth + padding)) - strokeWidth;
                })
                .cornerRadius(20);

            // Background arc
            var background = d3.svg.arc()
                .startAngle(0)
                .endAngle(τ)
                .innerRadius(function (d) {
                    return (size / 2) - d.index * (strokeWidth + padding);
                })
                .outerRadius(function (d) {
                    return ((size / 2) - d.index * (strokeWidth + padding)) - strokeWidth;
                });


            // Append chart elements
            // ------------------------------

            //
            // Group arc elements
            //

            // Group
            var field = svg.selectAll("g")
                .data(data)
                .enter().append("g");

            // Foreground arcs
            field
                .append("path")
                .attr("class", "arc-foreground")
                .style("fill", function (d, i) {
                    return colors[i];
                });

            // Background arcs
            field
                .append("path")
                .style("fill", function (d, i) {
                    return colors[i];
                })
                .style("opacity", 0.1)
                .attr("d", background);


            //
            // Add legend
            //

            // Append list
            var legend = d3.select(element)
                .append('ul')
                .attr('class', 'chart-widget-legend d3-text')
                .selectAll('li')
                .data(data)
                .enter()
                .append('li')
                .attr('data-slice', function(d, i) {
                    return i;
                })
                .attr('style', function(d, i) {
                    return 'border-bottom: solid 2px ' + colors[i];
                })
                .text(function(d, i) {
                    return d.name;
                });


            //
            // Animate elements
            //

            // Add transition
            d3.transition().each(update);

            // Animation
            function update() {
                field = field
                    .each(function (d) {
                        this._value = d.percentage;
                    })
                    .data(data)
                    .each(function (d) {
                        d.previousValue = this._value;
                        d.percentage = Math.round(Math.random() * 100) + 1;
                    });

                // Foreground arcs
                field
                    .select("path.arc-foreground")
                    .transition()
                    .duration(750)
                    .ease("easeInOut")
                    .attrTween("d", arcTween);
                    
                // Update every 4 seconds
                setTimeout(update, 4000);
            }

            // Arc animation
            function arcTween(d) {
                var i = d3.interpolateNumber(d.previousValue, d.percentage);
                return function (t) {
                    d.percentage = i(t);
                    return arc(d);
                };
            }
        }
    };

    // Pie with progress bar
    var _pieWithProgress = function(element, size) {
        if (typeof d3 == 'undefined') {
            console.warn('Warning - d3.min.js is not loaded.');
            return;
        }

        // Initialize chart only if element exsists in the DOM
        if(element) {

            // Demo dataset
            var dataset = [
                    { name: 'New', count: 639 },
                    { name: 'Pending', count: 255 },
                    { name: 'Shipped', count: 215 }
                ];

            // Main variables
            var d3Container = d3.select(element),
                total = 0,
                width = size,
                height = size,
                progressSpacing = 6,
                progressSize = (progressSpacing + 2),
                arcSize = 20,
                outerRadius = (width / 2),
                innerRadius = (outerRadius - arcSize);

            // Colors
            var color = d3.scale.ordinal()
                .range(['#EF5350', '#29b6f6', '#66BB6A']);


            // Create chart
            // ------------------------------

            // Add svg element
            var container = d3Container.append("svg");
            
            // Add SVG group
            var svg = container
                .attr("width", width)
                .attr("height", height)
                .append("g")
                    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


            // Construct chart layout
            // ------------------------------

            // Add dataset
            dataset.forEach(function(d){
                total+= d.count;
            });

            // Pie layout
            var pie = d3.layout.pie()
                .value(function(d){ return d.count; })
                .sort(null);

            // Inner arc
            var arc = d3.svg.arc()
                .innerRadius(innerRadius)
                .outerRadius(outerRadius);

            // Line arc
            var arcLine = d3.svg.arc()
                .innerRadius(innerRadius - progressSize)
                .outerRadius(innerRadius - progressSpacing)
                .startAngle(0);


            // Append chart elements
            // ------------------------------

            //
            // Animations
            //
            var arcTween = function(transition, newAngle) {
                transition.attrTween("d", function (d) {
                    var interpolate = d3.interpolate(d.endAngle, newAngle);
                    var interpolateCount = d3.interpolate(0, dataset[0].count);
                    return function (t) {
                        d.endAngle = interpolate(t);
                        middleCount.text(d3.format(",d")(Math.floor(interpolateCount(t))));
                        return arcLine(d);
                    };
                });
            };


            //
            // Donut paths
            //

            // Donut
            var path = svg.selectAll('path')
                .data(pie(dataset))
                .enter()
                .append('path')
                .attr('class', 'd3-slice-border')
                .attr('d', arc)
                .attr('fill', function(d, i) {
                    return color(d.data.name);
                })
                .style({
                    'cursor': 'pointer'
                });

            // Animate donut
            path
                .transition()
                .delay(function(d, i) { return i; })
                .duration(600)
                .attrTween("d", function(d) {
                    var interpolate = d3.interpolate(d.startAngle, d.endAngle);
                    return function(t) {
                        d.endAngle = interpolate(t);
                        return arc(d);  
                    }; 
                });


            //
            // Line path 
            //

            // Line
            var pathLine = svg.append('path')
                .datum({endAngle: 0})
                .attr('d', arcLine)
                .style({
                    fill: color('New')
                });

            // Line animation
            pathLine.transition()
                .duration(600)
                .delay(300)
                .call(arcTween, (2 * Math.PI) * (dataset[0].count / total));


            //
            // Add count text
            //

            var middleCount = svg.append('text')
                .datum(0)
                .attr({
                    'class': 'd3-text', 
                    'dy': 6
                })
                .style({
                    'font-size': '21px',
                    'font-weight': 500,
                    'text-anchor': 'middle'
                })
                .text(function(d){
                    return d;
                });            


            //
            // Add interactions
            //

            // Mouse
            path
                .on('mouseover', function(d, i) {
                    $(element + ' [data-slice]').css({
                        'opacity': 0.3,
                        'transition': 'all ease-in-out 0.15s'
                    });
                    $(element + ' [data-slice=' + i + ']').css({'opacity': 1});
                })
                .on('mouseout', function(d, i) {
                    $(element + ' [data-slice]').css('opacity', 1);
                });


            //
            // Add legend
            //

            // Append list
            var legend = d3.select(element)
                .append('ul')
                .attr('class', 'chart-widget-legend')
                .selectAll('li')
                .data(pie(dataset))
                .enter()
                .append('li')
                .attr('data-slice', function(d, i) {
                    return i;
                })
                .attr('style', function(d, i) {
                    return 'border-bottom: solid 2px ' + color(d.data.name);
                })
                .text(function(d, i) {
                    return d.data.name + ': ';
                });

            // Append legend text
            legend.append('span')
                .text(function(d, i) {
                    return d.data.count;
                });
        }
    };

    // Segmented gauge
    var _segmentedGauge = function(element, size, min, max, sliceQty) {
        if (typeof d3 == 'undefined') {
            console.warn('Warning - d3.min.js is not loaded.');
            return;
        }

        // Initialize chart only if element exsists in the DOM
        if(element) {

            // Main variables
            var d3Container = d3.select(element),
                width = size,
                height = (size / 2) + 20,
                radius = (size / 2),
                ringInset = 15,
                ringWidth = 20,

                pointerWidth = 10,
                pointerTailLength = 5,
                pointerHeadLengthPercent = 0.75,
                
                minValue = min,
                maxValue = max,
                
                minAngle = -90,
                maxAngle = 90,
                
                slices = sliceQty,
                range = maxAngle - minAngle,
                pointerHeadLength = Math.round(radius * pointerHeadLengthPercent);

            // Colors
            var colors = d3.scale.linear()
                .domain([0, slices - 1])
                .interpolate(d3.interpolateHsl)
                .range(['#66BB6A', '#EF5350']);


            // Create chart
            // ------------------------------

            // Add SVG element
            var container = d3Container.append('svg');

            // Add SVG group
            var svg = container
                .attr('width', width)
                .attr('height', height);


            // Construct chart layout
            // ------------------------------
            
            // Donut  
            var arc = d3.svg.arc()
                .innerRadius(radius - ringWidth - ringInset)
                .outerRadius(radius - ringInset)
                .startAngle(function(d, i) {
                    var ratio = d * i;
                    return deg2rad(minAngle + (ratio * range));
                })
                .endAngle(function(d, i) {
                    var ratio = d * (i + 1);
                    return deg2rad(minAngle + (ratio * range));
                });

            // Linear scale that maps domain values to a percent from 0..1
            var scale = d3.scale.linear()
                .range([0, 1])
                .domain([minValue, maxValue]);
                
            // Ticks
            var ticks = scale.ticks(slices);
            var tickData = d3.range(slices)
                .map(function() {
                    return 1 / slices;
                });

            // Calculate angles
            function deg2rad(deg) {
                return deg * Math.PI / 180;
            }
                
            // Calculate rotation angle
            function newAngle(d) {
                var ratio = scale(d);
                var newAngle = minAngle + (ratio * range);
                return newAngle;
            }


            // Append chart elements
            // ------------------------------

            //
            // Append arc
            //

            // Wrap paths in separate group
            var arcs = svg.append('g')
                .attr('class', 'd3-slice-border')
                .attr('transform', "translate(" + radius + "," + radius + ")");

            // Add paths
            arcs.selectAll('path')
                .data(tickData)
                .enter()
                .append('path')
                .attr('fill', function(d, i) {
                    return colors(i);
                })
                .attr('d', arc);


            //
            // Text labels
            //

            // Wrap text in separate group
            var arcLabels = svg.append('g')
                .attr('transform', "translate(" + radius + "," + radius + ")");

            // Add text
            arcLabels.selectAll('text')
                .data(ticks)
                .enter()
                .append('text')
                .attr('class', 'd3-text opacity-50')
                .attr('transform', function(d) {
                    var ratio = scale(d);
                    var newAngle = minAngle + (ratio * range);
                    return 'rotate(' + newAngle + ') translate(0,' + (10 - radius) + ')';
                })
                .style({
                    'text-anchor': 'middle',
                    'font-size': 11
                })
                .text(function(d) { return d + "%"; });


            //
            // Pointer
            //

            // Line data
            var lineData = [
                [pointerWidth / 2, 0], 
                [0, -pointerHeadLength],
                [-(pointerWidth / 2), 0],
                [0, pointerTailLength],
                [pointerWidth / 2, 0]
            ];

            // Create line
            var pointerLine = d3.svg.line()
                .interpolate('monotone');

            // Wrap all lines in separate group
            var pointerGroup = svg
                .append('g')
                .data([lineData])
                .attr('transform', "translate(" + radius + "," + radius + ")");

            // Paths
            pointer = pointerGroup
                .append('path')
                .attr('d', pointerLine)
                .attr('transform', 'rotate(' + minAngle + ')');


            // Random update
            // ------------------------------

            // Update values
            function update() {
                var ratio = scale(Math.random() * max);
                var newAngle = minAngle + (ratio * range);
                pointer.transition()
                    .duration(2500)
                    .ease('elastic')
                    .attr('transform', 'rotate(' + newAngle + ')');
            }
            update();

            // Update values every 5 seconds
            setInterval(function() {
                update();
            }, 5000);
        }
    };


};
/* /Chartkomponenten */


// Autocomplete
$.ui.autocomplete.prototype.options.template = "default";
function autocompleteHighlightText(text, $node) {

	if($node.get(0).firstChild != null)
	{
		//console.log($node.get(0).firstChild);
		var searchText = $.trim(text).toLowerCase(), currentNode = $node.get(0).firstChild, matchIndex, newTextNode, newSpanNode;
		
		if(exists(currentNode.data))
		{
			while ((matchIndex = currentNode.data.toLowerCase().indexOf(searchText)) >= 0) {
				newTextNode = currentNode.splitText(matchIndex);
				currentNode = newTextNode.splitText(searchText.length);
				newSpanNode = document.createElement("span");
				newSpanNode.className = "highlight";
				currentNode.parentNode.insertBefore(newSpanNode, currentNode);
				newSpanNode.appendChild(newTextNode);
			}
		}
	}
}
$.ui.autocomplete.prototype._resizeMenu = function () {
	var ul = this.menu.element;

	//console.log(this);
	if(exists(this.options.width))
	{
		ul.outerWidth(this.options.width);
	}
	else
	{
		ul.outerWidth(this.element.outerWidth());  
	}
}
$.ui.autocomplete.prototype.__renderItem = $.ui.autocomplete.prototype._renderItem;
$.ui.autocomplete.prototype._renderItem  = function(ul, item) {
	
	if(this.options.template == "default")
	{
		/*
		var $div = $("<div></div>").append("<span></span>").text(item.label);
		autocompleteHighlightText(this.term, $div);
		$div.html("<span>"+$div.html()+"</span>");
		return $("<li></li>").append($div).appendTo(ul);
		*/
		var $div = $("<div></div>").append("<div></div>").text(item.label).append("<div class=\"ui-menu-item-description\"></div>").text(item.label);
		autocompleteHighlightText(this.term, $div);
		var $divDescription = $("<div></div>").append("<div></div>").text(item.description);
		autocompleteHighlightText(this.term, $divDescription);		
		
		var $divThumbnail = "";
		if(exists(item.thumbnail) && item.thumbnail != "" && item.thumbnail != null)
		{
			$divThumbnail = "<div class = \"AutocompleteThumbnail\"><img src='data:image/png;base64,"+item.thumbnail+"' alt='Thumbnail' title='"+item.label+"'></div>";
		}
		else if(exists(item.thumbnailURL) && item.thumbnailURL != "" && item.thumbnailURL != null)
		{
			$divThumbnail = "<div class = \"AutocompleteThumbnail\"><img src='"+item.thumbnailURL+"' alt='Thumbnail' title='"+item.label+"'></div>";
		}
		/*
		var $divBadge = "";
		if(exists(item.badgecss) && item.badgecss != "" && item.badgecss != null)
		{
			var moreCss="";
			if(item.description == "")
			{
				moreCss = " t--2";
			}
			$divBadge = "<div class = \"AutocompleteBadge"+moreCss+"\"><span class=\""+item.badgecss+"\">"+item.badgetext+"</span></div>";
		}
		*/
		var $divAvatar = "";
		if(exists(item.avatar) && item.avatar != "" && item.avatar != null)
		{
			var moreCss="";
			if(item.description == "")
			{
				moreCss = " t--2";
			}			
			$divAvatar = "<div class = \"AutocompleteAvatar"+moreCss+"\">"+getAvatar(item.avatar, 'xl',2)+"</div>";
		}
		
		//rbadge = Rechte Badges
		var $divRightBadge = "";
		//normalen Badge injecten
		if(exists(item.badge) && item.badge != "" && item.badge != null)
		{
			let CSS = exists(item.badgeCSS) !== "undefined" ? item.badgeCSS : "badge bg-grey-800";
			
			$divRightBadge += "<span class=\""+CSS+" ml-1\">"+item.badge+"</span>";
		}		
		for (let i = 1; i <= 6; i++)
		{
			if(eval(`typeof item.rbadge${i}`) !== "undefined" && eval(`item.rbadge${i}`) != "" && eval(`item.rbadge${i}`) != null)
			{
				let CSS = eval(`typeof item.rbadge${i}CSS`) !== "undefined" ? eval(`item.rbadge${i}CSS`) : "badge bg-grey-800";
				
				$divRightBadge += "<span class=\""+CSS+" ml-1\">"+eval(`item.rbadge${i}`)+"</span>";
			}
		}
		if($divRightBadge != "")
		{
			var moreCss="";
			if(item.description == "")
			{
				//moreCss = " t--2";
			}			
			$divRightBadge = "<div class=\"AutocompleteBadge"+moreCss+"\">"+$divRightBadge+"</div>";
		}		
		//tbadge => TitleBadge
		var $titleBadge = "";
		for (let i = 1; i <= 6; i++)
		{
			if(eval(`typeof item.tbadge${i}`) !== "undefined" && eval(`item.tbadge${i}`) != "" && eval(`item.tbadge${i}`) != null)
			{
				let CSS = eval(`typeof item.tbadge${i}CSS`) !== "undefined" ? eval(`item.tbadge${i}CSS`) : "badge bg-grey-800";
				
				$titleBadge += "<span class=\""+CSS+" xs ml-1\">"+eval(`item.tbadge${i}`)+"</span>";
			}
		}
		//dbadge => DescriptionBadge
		var $descriptionBadge = "";
		for (let i = 1; i <= 6; i++)
		{
			if(eval(`typeof item.dbadge${i}`) !== "undefined" && eval(`item.dbadge${i}`) != "" && eval(`item.dbadge${i}`) != null)
			{
				let CSS = eval(`typeof item.dbadge${i}CSS`) !== "undefined" ? eval(`item.dbadge${i}CSS`) : "badge bg-grey-800";
				
				$descriptionBadge += "<span class=\""+CSS+" xs ml-1\">"+eval(`item.dbadge${i}`)+"</span>";
			}
		}
		
		var $divBottomBadge = "";
		for (let i = 1; i <= 6; i++)
		{

			if(eval(`typeof item.badge${i}`) !== "undefined" && eval(`item.badge${i}`) != "" && eval(`item.badge${i}`) != null)
			{
				let CSS = eval(`typeof item.badge${i}CSS`) !== "undefined" ? eval(`item.badge${i}CSS`) : "badge bg-grey-800";
				
				$divBottomBadge += "<span class=\""+CSS+" xs mr-05\">"+eval(`item.badge${i}`)+"</span>";
			}
		}
		if($divBottomBadge != "")
		{
			$divBottomBadge = "<div class=\"ui-menu-item-bottombadge\">"+$divBottomBadge+"</div>";
		}
		
		
		
		$div.html($divAvatar+$divRightBadge+$divThumbnail+"<div>"+$div.html()+$titleBadge+"</div><div class=\"ui-menu-item-description\">"+$divDescription.html()+$descriptionBadge+"</div>"+$divBottomBadge);
		
		/*
		var $divDescription = $("<div></div>").append("<div></div>").text(item.label);
		autocompleteHighlightText(this.term, $divDescription);
		$divDescription.html("<div class=\"ui-menu-item-description\">"+$divDescription.html()+"</div>");		
		*/
		return $("<li></li>").append($div).appendTo(ul);		
	}
	else
	{
		return this.__renderItem(ul, item);	
	}
	/*
	console.log(this.options);
	return this.__renderItem(ul, item);
	*/
};
/*
$.ui.autocomplete.prototype._renderMenu = function(ul, items) {
	var that = this,
	currentCategory = '';

	$.each( items, function(index, item) {
		var li;
		if (item.category != currentCategory) {
			ul.append('<li class="ui-autocomplete-category">' + item.category + '</li>');
			currentCategory = item.category;
		}
		li = that._renderItemData(ul, item);
		if (item.category) {
			li.attr('aria-label', item.category + ' : ' + item.label);
		}
	});
};
*/
$.ui.autocomplete.prototype.options.select = function(event, ui) {
	if(ui.item != null)
	{
		$(this).data("id", ui.item.ID);
	}
	else
	{
		$(this).data("id", "");
		$(this).val("");
	}
};
$.ui.autocomplete.prototype.options.change = function(event, ui) {	
	if(ui.item != null)
	{
		$(this).data("id", ui.item.ID);
	}
	else
	{
		$(this).data("id", "");
		$(this).val("");
	}
	/*
	console.log(this);
	console.log("change");
	console.log(event);
	console.log(ui);
	*/
};
GridAutocompleteSelect = function( event, ui ) 
{
	var IDElement = $(this).attr("IDElement");
	$(IDElement).autocomplete( 'disable' );
	if($(this).attr("module") == "inline")
	{
		IDElement = $(this).attr("rowid")+"_"+IDElement;
	}	
	$(this).val(ui.item.label);
	$(IDElement).val(ui.item.value).trigger("input");
	return false;
}
GridAutocompleteChange = function( event, ui ) 
{
	var IDElement = $(this).attr("IDElement");
	$(IDElement).autocomplete( 'disable' );
	if($(this).attr("module") == "inline")
	{
		IDElement = $(this).attr("rowid")+"_"+IDElement;
	}	
	$(this).val(ui.item.label);
	$(IDElement).val(ui.item.value).trigger("input");
}
GridAutocompleteFocus = function( event, ui ) 
{
	var IDElement = $(this).attr("IDElement");
	$(IDElement).autocomplete( 'disable' );
	if($(this).attr("module") == "inline")
	{
		IDElement = "#"+$(this).attr("rowid")+"_"+IDElement.substring(1);
	}
	$(this).val(ui.item.label);
	$(IDElement).val(ui.item.value).trigger("input");
}
// /Autocomplete


// Dialogs
/*
function AddEditDialog(FieldNameClear,Title,BindingElementNameClear)
{

	Title = typeof Title !== 'undefined' ? Title : 'Bearbeiten';
	BindingElementNameClear = typeof BindingElementNameClear !== 'undefined' ? BindingElementNameClear : '';
	console.log(FieldNameClear);
	console.log($("#"+FieldNameClear));
//	console.log(BindingElementNameClear != '');
	$("#"+FieldNameClear).attr( "title", Title);
	if(BindingElementNameClear != '')
	{
		$("#"+BindingElementNameClear).addClass("ui-editdialog-input");
		$("#"+BindingElementNameClear).attr( "title", Title);
		$("#"+BindingElementNameClear).attr( "origin", FieldNameClear);

	}
	else
	{
		$("#"+FieldNameClear).addClass("ui-editdialog-input");
		$("#"+FieldNameClear).attr( "title", Title);		

	}
	
	if(BindingElementNameClear != '')
	{
		if(!$("#"+FieldNameClear).prop("disabled"))
		{
			$("#"+BindingElementNameClear).off("dblclick");
			$("#"+BindingElementNameClear).on("dblclick", function(event) {
				
				OpenEditDialog($(this).attr( "origin"));//FieldNameClear);
			});	
		}
		else
		{
			$("#"+BindingElementNameClear).off("dblclick");
			$("#"+BindingElementNameClear).on("dblclick", function(event) {
				
				OpenViewDialog($(this).attr( "origin"));//FieldNameClear);
			});					
		}	
		

	}
	else
	{
		if($("#"+FieldNameClear).is(':enabled'))
		{

			$("#"+FieldNameClear).off("dblclick");
			$("#"+FieldNameClear).on("dblclick", function(event) {
				
				//OpenEditDialog($(this).attr( "id"));//FieldNameClear);
				OpenEditDialog(FieldNameClear);//FieldNameClear);
			});	
			
		}
		else
		{
			AddViewDialog4Disabled(FieldNameClear);					
		}		
	}

}
*/
function AddEditDialog($elField,Title,$elBindingElement)
{

	Title = typeof Title !== 'undefined' ? Title : 'Bearbeiten';
	//BindingElementNameClear = typeof BindingElementNameClear !== 'undefined' ? BindingElementNameClear : '';
	//console.log($elField);
	
//	console.log(BindingElementNameClear != '');
	$elField.attr( "title", Title);
	if(typeof $elBindingElement !== 'undefined')
	{
		$($elBindingElement).addClass("ui-editdialog-input");
		$($elBindingElement).attr( "title", Title);
		$($elBindingElement).attr( "origin", FieldNameClear);

		if(!$elField.prop("disabled"))
		{
			$("#"+BindingElementNameClear).off("dblclick");
			$("#"+BindingElementNameClear).on("dblclick", function(event) {
				
				//OpenEditDialog($(this).attr( "origin"));//FieldNameClear);
				OpenViewDialog($elField);
			});	
		}
		else
		{
			$("#"+BindingElementNameClear).off("dblclick");
			$("#"+BindingElementNameClear).on("dblclick", function(event) {
				
				//OpenViewDialog($(this).attr( "origin"));//FieldNameClear);
				OpenViewDialog($elField);
			});					
		}	

	}
	else
	{
		$elField.addClass("ui-editdialog-input");
		$elField.attr( "title", Title);	
		if($elField.is(':enabled'))
		{

			$elField.off("dblclick");
			$elField.on("dblclick", function(event) {
				
				//OpenEditDialog($(this).attr( "id"));//FieldNameClear);
				OpenEditDialog($elField);//FieldNameClear);
			});	
			
		}
		else
		{
			AddViewDialog4Disabled($elField);					
		}
	}
	

}
function AddSourceEditDialog(FieldNameClear,Title)
{

	Title = typeof Title !== 'undefined' ? Title : 'Bearbeiten';
	$("#"+FieldNameClear).addClass("ui-editdialog-input");
	
	$("#"+FieldNameClear).attr( "title", Title);
	
	if($("#"+FieldNameClear).is(':enabled'))
	{
		$("#"+FieldNameClear).off("dblclick");
		$("#"+FieldNameClear).on("dblclick", function(event) {
			console.log("#"+FieldNameClear+" dblclick");
			OpenSourceEditDialog($(this).attr( "id"));//FieldNameClear);
		});	
	}
	else
	{
		AddViewDialog4Disabled(FieldNameClear);		
		
	}
}
function AddViewDialog(FieldNameClear,Title)
{

	Title = typeof Title !== 'undefined' ? Title : 'Bearbeiten';
	$("#"+FieldNameClear).addClass("ui-editdialog-input");
	
	$("#"+FieldNameClear).attr( "title", Title);
	
	if($("#"+FieldNameClear).is(':enabled'))
	{
		$("#"+FieldNameClear).off("dblclick");
		$("#"+FieldNameClear).on("dblclick", function(event) {
			
			OpenViewDialog($(this).attr( "id"));//FieldNameClear);
		});	
	}
	else
	{
		AddViewDialog4Disabled(FieldNameClear);
		/*
		$('#'+FieldNameClear).wrap('<div style="position:relative"></div>');
		$('<div id="clickarea_'+FieldNameClear+'" origin="'+FieldNameClear+'" style="position: absolute; left: 0px; right: 0px; bottom: 0px; top: 0px;"></div>').insertBefore('#'+FieldNameClear);
		
		$("#clickarea_"+FieldNameClear).off("dblclick");
		$("#clickarea_"+FieldNameClear).on("dblclick", function(event) {
			
			OpenViewDialog($(this).attr( "origin"));//FieldNameClear);
		});			
		*/
	}
}
/*
function AddViewDialog4Disabled(FieldNameClear)
{

	$('#'+FieldNameClear).wrap('<div style="position:relative"></div>');
	$('<div id="clickarea_'+FieldNameClear+'" origin="'+FieldNameClear+'" style="position: absolute; left: 0px; right: 0px; bottom: 0px; top: 0px;"></div>').insertBefore('#'+FieldNameClear);
	
	$("#clickarea_"+FieldNameClear).off("dblclick");
	$("#clickarea_"+FieldNameClear).on("dblclick", function(event) {
		
		OpenViewDialog($(this).attr( "origin"));//FieldNameClear);
	});			
		
}
*/
function AddViewDialog4Disabled($elField)
{
	var FieldID = $elField.attr('id');
	$elField.wrap('<div style="position:relative"></div>');
	
	$('<div id="clickarea_'+FieldID+'" origin="'+FieldID+'" style="position: absolute; left: 0px; right: 0px; bottom: 0px; top: 0px;"></div>').insertBefore($elField);
	
	$("#clickarea_"+FieldID).off("dblclick");
	$("#clickarea_"+FieldID).on("dblclick", function(event) {
		
		OpenViewDialog($elField);//FieldNameClear);
	});			
		
}
function OpenViewDialog($elField)
{
	var FieldID = $elField.attr('id');
	$("#dialog_"+FieldID).remove();	
	
	$elField.after("<div id=\"dialog_"+FieldID+"\" origin=\""+FieldID+"\"><p></p></div>");
	
	var Title = $elField.attr( "title");
	
  	$("#dialog_"+FieldID).html('<textarea style="width:100%;height:100%;" readonly>'+ $elField.val() +'</textarea>');
	$("#dialog_"+FieldID).dialog({
		resizable: false,
		width:'90%',
		height:600,
		modal: true,
		title: Title+' [Betrachtungsmodus]',
		buttons: {
		'Schließen': function() {
			
			$( this ).dialog( 'close' );			 

		}
		}
		});	
}
/*
function OpenViewDialog(FieldNameClear)
{
	$("#dialog_"+FieldNameClear).remove();
	
	$("#"+FieldNameClear).after("<div id=\"dialog_"+FieldNameClear+"\" origin=\""+FieldNameClear+"\"><p></p></div>");
	
	var Title = $("#"+FieldNameClear).attr( "title");
	
  	$("#dialog_"+FieldNameClear).html('<textarea style="width:100%;height:500px;" readonly>'+ $("#"+FieldNameClear).val() +'</textarea>');
	$("#dialog_"+FieldNameClear).dialog({
		resizable: false,
		width:'90%',
		height:600,
		modal: true,
		title: Title+' [Betrachtungsmodus]',
		buttons: {
		'Schließen': function() {
			
			$( this ).dialog( 'close' );			 

		}
		}
		});	
}
*/

function OpenEditDialog($elField)
{
	//console.log($elField);
	var FieldID = $elField.attr('id');
	$("#dialog_"+FieldID).remove();
	
	$elField.after("<div id=\"dialog_"+FieldID+"\" origin=\""+FieldID+"\"><p></p></div>");
	
	var Title = $elField.attr( "title");
	
  	$("#dialog_"+FieldID).html('<p><b>Bitte nach Eingabe speichern</b></p><textarea id=\"text_'+FieldID+'\" style="width:100%;height:420px;">'+ $elField.val() +'</textarea>');
	$("#dialog_"+FieldID).dialog({
		resizable: false,
		width:'90%',
		height:600,
		modal: true,
		title: Title,
		buttons: {
		'Übernehmen': function() {
			
			$( this ).dialog( 'close' );
			//var Origin = $(this).attr( "origin");
			
			$elField.val($(this).children('textarea').val());
			$elField.change();
		 

		},
		'Abbrechen': function() {
			
			$( this ).dialog( 'close' );			 

		}
		}
		});	
		
		$("#text_"+FieldID).focus();
}
function OpenSourceEditDialog(FieldNameClear)
{
	console.log(FieldNameClear);
	console.log($(FieldNameClear));
	$("#dialog_"+FieldNameClear).remove();
	$('#main').prepend("<div id=\"dialog_"+FieldNameClear+"\" origin=\""+FieldNameClear+"\"><p></p></div>");	
	
	//$("#"+FieldNameClear).after("<div id=\"dialog_"+FieldNameClear+"\" origin=\""+FieldNameClear+"\"><p></p></div>");
	
	var Title = 'TEST';//$("#"+FieldNameClear).attr( "title");
	
  	//$("#dialog_"+FieldNameClear).html('<p><b>Sourcecode bitte im JSON Format eintragen</b></p><textarea id=\"text_'+FieldNameClear+'\" style="width:100%;height:470px;">'+ $("#"+FieldNameClear).val() +'</textarea>');
	$("#dialog_"+FieldNameClear).html('<p><b>Sourcecode bitte im JSON Format eintragen</b></p><textarea id=\"text_'+FieldNameClear+'\" style="width:100%;height:470px;"></textarea>');
	$("#dialog_"+FieldNameClear).dialog({
		resizable: false,
		width:'90%',
		height:600,
		modal: true,
		title: Title,
		buttons: {
		'Übernehmen': function() {
			
			
			$( this ).dialog( 'close' );
			var Origin = $(this).attr( "origin");
			
			$("#"+Origin).val($(this).children('textarea').val());
			
			

		},
		'Abbrechen': function() {
			
			$( this ).dialog( 'close' );			 

		}
		}
		});	
		
		//$("#text_"+FieldNameClear).focus();
}
// /Dialogs