1<script type="text/x-jquery-tmpl" id="tmpl-item-row-<?= GRAPH_TYPE_NORMAL ?>">
2	<tr id="items_#{number}" class="sortable">
3		<!-- icon + hidden -->
4		<?php if ($readonly): ?>
5			<td>
6		<?php else: ?>
7			<td class="<?= ZBX_STYLE_TD_DRAG_ICON ?>">
8				<div class="<?= ZBX_STYLE_DRAG_ICON ?>"></div>
9				<span class="ui-icon ui-icon-arrowthick-2-n-s move"></span>
10		<?php endif ?>
11			<input type="hidden" id="items_#{number}_gitemid" name="gitemid" value="#{gitemid}">
12			<input type="hidden" id="items_#{number}_itemid" name="itemid" value="#{itemid}">
13			<input type="hidden" id="items_#{number}_sortorder" name="sortorder" value="#{sortorder}">
14			<input type="hidden" id="items_#{number}_flags" name="flags" value="#{flags}">
15			<input type="hidden" id="items_#{number}_type" name="type" value="<?= GRAPH_ITEM_SIMPLE ?>">
16			<input type="hidden" id="items_#{number}_drawtype" name="drawtype" value="#{drawtype}">
17			<input type="hidden" id="items_#{number}_yaxisside" name="yaxisside" value="#{yaxisside}">
18		</td>
19
20		<!-- row number -->
21		<td>
22			<span id="items_#{number}_number" class="items_number">#{number_nr}:</span>
23		</td>
24
25		<!-- name -->
26		<td>
27			<?php if ($readonly): ?>
28				<span id="items_#{number}_name">#{name}</span>
29			<?php else: ?>
30				<a href="javascript:void(0)"><span id="items_#{number}_name">#{name}</span></a>
31			<?php endif ?>
32		</td>
33
34		<!-- function -->
35		<td>
36			<select id="items_#{number}_calc_fnc" name="calc_fnc">
37				<option value="<?= CALC_FNC_ALL ?>"><?= _('all') ?></option>
38				<option value="<?= CALC_FNC_MIN ?>"><?= _('min') ?></option>
39				<option value="<?= CALC_FNC_AVG ?>"><?= _('avg') ?></option>
40				<option value="<?= CALC_FNC_MAX ?>"><?= _('max') ?></option>
41			</select>
42		</td>
43
44		<!-- drawtype -->
45		<td>
46			<select name="drawtype">
47			<?php foreach (graph_item_drawtypes() as $drawtype): ?>
48				<option value="<?= $drawtype ?>"><?= graph_item_drawtype2str($drawtype) ?></option>
49			<?php endforeach ?>
50			</select>
51		</td>
52
53		<!-- yaxisside -->
54		<td>
55			<select name="yaxisside">
56				<option value="<?= GRAPH_YAXIS_SIDE_LEFT ?>"><?= _('Left') ?></option>
57				<option value="<?= GRAPH_YAXIS_SIDE_RIGHT ?>"><?= _('Right') ?></option>
58			</select>
59		</td>
60
61		<td>
62			<?= (new CColor('color', '#{color}', 'color_#{number}'))->appendColorPickerJs(false) ?>
63		</td>
64
65		<?php if (!$readonly): ?>
66			<td class="<?= ZBX_STYLE_NOWRAP ?>">
67				<button type="button" class="<?= ZBX_STYLE_BTN_LINK ?>" id="items_#{number}_remove" data-remove="#{number}" onclick="removeItem(this);"><?= _('Remove') ?></button>
68			</td>
69		<?php endif ?>
70	</tr>
71</script>
72
73<script type="text/x-jquery-tmpl" id="tmpl-item-row-<?= GRAPH_TYPE_STACKED ?>">
74	<tr id="items_#{number}" class="sortable">
75		<!-- icon + hidden -->
76		<?php if ($readonly): ?>
77			<td>
78		<?php else: ?>
79			<td class="<?= ZBX_STYLE_TD_DRAG_ICON ?>">
80				<div class="<?= ZBX_STYLE_DRAG_ICON ?>"></div>
81				<span class="ui-icon ui-icon-arrowthick-2-n-s move"></span>
82		<?php endif ?>
83			<input type="hidden" id="items_#{number}_gitemid" name="gitemid" value="#{gitemid}">
84			<input type="hidden" id="items_#{number}_itemid" name="itemid" value="#{itemid}">
85			<input type="hidden" id="items_#{number}_sortorder" name="sortorder" value="#{sortorder}">
86			<input type="hidden" id="items_#{number}_flags" name="flags" value="#{flags}">
87			<input type="hidden" id="items_#{number}_type" name="type" value="<?= GRAPH_ITEM_SIMPLE ?>">
88			<input type="hidden" id="items_#{number}_drawtype" name="drawtype" value="#{drawtype}">
89			<input type="hidden" id="items_#{number}_yaxisside" name="yaxisside" value="#{yaxisside}">
90		</td>
91
92		<!-- row number -->
93		<td>
94			<span id="items_#{number}_number" class="items_number">#{number_nr}:</span>
95		</td>
96
97		<!-- name -->
98		<td>
99			<?php if ($readonly): ?>
100				<span id="items_#{number}_name">#{name}</span>
101			<?php else: ?>
102				<a href="javascript:void(0)"><span id="items_#{number}_name">#{name}</span></a>
103			<?php endif ?>
104		</td>
105
106		<!-- function -->
107		<td>
108			<select id="items_#{number}_calc_fnc" name="calc_fnc">
109				<option value="<?= CALC_FNC_MIN ?>"><?= _('min') ?></option>
110				<option value="<?= CALC_FNC_AVG ?>"><?= _('avg') ?></option>
111				<option value="<?= CALC_FNC_MAX ?>"><?= _('max') ?></option>
112			</select>
113		</td>
114
115		<!-- yaxisside -->
116		<td>
117			<select name="yaxisside">
118				<option value="<?= GRAPH_YAXIS_SIDE_LEFT ?>"><?= _('Left') ?></option>
119				<option value="<?= GRAPH_YAXIS_SIDE_RIGHT ?>"><?= _('Right') ?></option>
120			</select>
121		</td>
122
123		<td>
124			<?= (new CColor('color', '#{color}', 'color_#{number}'))->appendColorPickerJs(false) ?>
125		</td>
126
127		<?php if (!$readonly): ?>
128			<td class="<?= ZBX_STYLE_NOWRAP ?>">
129				<button type="button" class="<?= ZBX_STYLE_BTN_LINK ?>" id="items_#{number}_remove" data-remove="#{number}" onclick="removeItem(this);"><?= _('Remove') ?></button>
130			</td>
131		<?php endif ?>
132	</tr>
133</script>
134
135<script type="text/x-jquery-tmpl" id="tmpl-item-row-<?= GRAPH_TYPE_PIE ?>">
136	<tr id="items_#{number}" class="sortable">
137		<!-- icon + hidden -->
138		<?php if ($readonly): ?>
139			<td>
140		<?php else: ?>
141			<td class="<?= ZBX_STYLE_TD_DRAG_ICON ?>">
142				<div class="<?= ZBX_STYLE_DRAG_ICON ?>"></div>
143				<span class="ui-icon ui-icon-arrowthick-2-n-s move"></span>
144		<?php endif ?>
145			<input type="hidden" id="items_#{number}_gitemid" name="gitemid" value="#{gitemid}">
146			<input type="hidden" id="items_#{number}_itemid" name="itemid" value="#{itemid}">
147			<input type="hidden" id="items_#{number}_sortorder" name="sortorder" value="#{sortorder}">
148			<input type="hidden" id="items_#{number}_flags" name="flags" value="#{flags}">
149			<input type="hidden" id="items_#{number}_type" name="type" value="<?= GRAPH_ITEM_SIMPLE ?>">
150			<input type="hidden" id="items_#{number}_drawtype" name="drawtype" value="#{drawtype}">
151			<input type="hidden" id="items_#{number}_yaxisside" name="yaxisside" value="#{yaxisside}">
152		</td>
153
154		<!-- row number -->
155		<td>
156			<span id="items_#{number}_number" class="items_number">#{number_nr}:</span>
157		</td>
158
159		<!-- name -->
160		<td>
161			<?php if ($readonly): ?>
162				<span id="items_#{number}_name">#{name}</span>
163			<?php else: ?>
164				<a href="javascript:void(0)"><span id="items_#{number}_name">#{name}</span></a>
165			<?php endif ?>
166		</td>
167
168		<!-- type -->
169		<td>
170			<select name="type">
171				<option value="<?= GRAPH_ITEM_SIMPLE ?>"><?= _('Simple') ?></option>
172				<option value="<?= GRAPH_ITEM_SUM ?>"><?= _('Graph sum') ?></option>
173			</select>
174		</td>
175
176		<!-- function -->
177		<td>
178			<select id="items_#{number}_calc_fnc" name="calc_fnc">
179				<option value="<?= CALC_FNC_MIN ?>"><?= _('min') ?></option>
180				<option value="<?= CALC_FNC_AVG ?>"><?= _('avg') ?></option>
181				<option value="<?= CALC_FNC_MAX ?>"><?= _('max') ?></option>
182				<option value="<?= CALC_FNC_LST ?>"><?= _('last') ?></option>
183			</select>
184		</td>
185
186		<td>
187			<?= (new CColor('color', '#{color}', 'color_#{number}'))->appendColorPickerJs(false) ?>
188		</td>
189
190		<?php if (!$readonly): ?>
191			<td class="<?= ZBX_STYLE_NOWRAP ?>">
192				<button type="button" class="<?= ZBX_STYLE_BTN_LINK ?>" id="items_#{number}_remove" data-remove="#{number}" onclick="removeItem(this);"><?= _('Remove') ?></button>
193			</td>
194		<?php endif ?>
195	</tr>
196</script>
197
198<script type="text/x-jquery-tmpl" id="tmpl-item-row-<?= GRAPH_TYPE_EXPLODED ?>">
199	<tr id="items_#{number}" class="sortable">
200		<!-- icon + hidden -->
201		<?php if ($readonly): ?>
202			<td>
203		<?php else: ?>
204			<td class="<?= ZBX_STYLE_TD_DRAG_ICON ?>">
205				<div class="<?= ZBX_STYLE_DRAG_ICON ?>"></div>
206				<span class="ui-icon ui-icon-arrowthick-2-n-s move"></span>
207		<?php endif ?>
208			<input type="hidden" id="items_#{number}_gitemid" name="gitemid" value="#{gitemid}">
209			<input type="hidden" id="items_#{number}_itemid" name="itemid" value="#{itemid}">
210			<input type="hidden" id="items_#{number}_sortorder" name="sortorder" value="#{sortorder}">
211			<input type="hidden" id="items_#{number}_flags" name="flags" value="#{flags}">
212			<input type="hidden" id="items_#{number}_type" name="type" value="<?= GRAPH_ITEM_SIMPLE ?>">
213			<input type="hidden" id="items_#{number}_drawtype" name="drawtype" value="#{drawtype}">
214			<input type="hidden" id="items_#{number}_yaxisside" name="yaxisside" value="#{yaxisside}">
215		</td>
216
217		<!-- row number -->
218		<td>
219			<span id="items_#{number}_number" class="items_number">#{number_nr}:</span>
220		</td>
221
222		<!-- name -->
223		<td>
224			<?php if ($readonly): ?>
225				<span id="items_#{number}_name">#{name}</span>
226			<?php else: ?>
227				<a href="javascript:void(0)"><span id="items_#{number}_name">#{name}</span></a>
228			<?php endif ?>
229		</td>
230
231		<!-- type -->
232		<td>
233			<select name="type">
234				<option value="<?= GRAPH_ITEM_SIMPLE ?>"><?= _('Simple') ?></option>
235				<option value="<?= GRAPH_ITEM_SUM ?>"><?= _('Graph sum') ?></option>
236			</select>
237		</td>
238
239		<!-- function -->
240		<td>
241			<select id="items_#{number}_calc_fnc" name="calc_fnc">
242				<option value="<?= CALC_FNC_MIN ?>"><?= _('min') ?></option>
243				<option value="<?= CALC_FNC_AVG ?>"><?= _('avg') ?></option>
244				<option value="<?= CALC_FNC_MAX ?>"><?= _('max') ?></option>
245				<option value="<?= CALC_FNC_LST ?>"><?= _('last') ?></option>
246			</select>
247		</td>
248
249		<td>
250			<?= (new CColor('color', '#{color}', 'color_#{number}'))->appendColorPickerJs(false) ?>
251		</td>
252
253		<?php if (!$readonly): ?>
254			<td class="<?= ZBX_STYLE_NOWRAP ?>">
255				<button type="button" class="<?= ZBX_STYLE_BTN_LINK ?>" id="items_#{number}_remove" data-remove="#{number}" onclick="removeItem(this);"><?= _('Remove') ?></button>
256			</td>
257		<?php endif ?>
258	</tr>
259</script>
260
261<script type="text/javascript">
262	colorPalette.setThemeColors(<?= CJs::encodeJson(explode(',', getUserGraphTheme()['colorpalette'])) ?>);
263	var graphs = JSON.parse('<?= json_encode([
264		'graphtype' =>  $data['graphtype'],
265		'readonly' => $readonly,
266		'hostid' => $data['hostid'],
267		'groupid' => $data['groupid'],
268		'is_template' => $data['is_template'],
269		'normal_only' => $data['normal_only'],
270		'parent_discoveryid' => $data['parent_discoveryid'],
271		'CALC_FNC_AVG' => CALC_FNC_AVG,
272		'ZBX_FLAG_DISCOVERY_PROTOTYPE' => ZBX_FLAG_DISCOVERY_PROTOTYPE,
273		'ZBX_STYLE_DRAG_ICON' => ZBX_STYLE_DRAG_ICON,
274		'GRAPH_YAXIS_TYPE_CALCULATED' => GRAPH_YAXIS_TYPE_CALCULATED,
275		'GRAPH_YAXIS_TYPE_FIXED' => GRAPH_YAXIS_TYPE_FIXED,
276		'GRAPH_TYPE_NORMAL' => GRAPH_TYPE_NORMAL,
277		'GRAPH_TYPE_PIE' => GRAPH_TYPE_PIE,
278		'GRAPH_TYPE_EXPLODED' => GRAPH_TYPE_EXPLODED
279	]) ?>');
280
281	function loadItem(number, gitemid, itemid, name, type, calc_fnc, drawtype, yaxisside, color, flags) {
282		var item = {
283				number: number,
284				number_nr: number + 1,
285				gitemid: gitemid,
286				itemid: itemid,
287				calc_fnc: calc_fnc,
288				color: color,
289				sortorder: number,
290				flags: flags,
291				name: name
292			},
293			itemTpl = new Template(jQuery('#tmpl-item-row-' + graphs.graphtype).html()),
294			$row = jQuery(itemTpl.evaluate(item));
295
296		$row.find('[name="type"]').val(type);
297		$row.find('[name="drawtype"]').val(drawtype);
298		$row.find('[name="yaxisside"]').val(yaxisside);
299
300		var $calc_fnc = $row.find('[name="calc_fnc"]');
301		$calc_fnc.val(calc_fnc);
302		if ($calc_fnc[0].selectedIndex < 0) {
303			$calc_fnc[0].selectedIndex = 0;
304		}
305
306		jQuery('#itemButtonsRow').before($row);
307		$row.find('.input-color-picker input').colorpicker();
308
309		colorPalette.incrementNextColor();
310
311		!graphs.readonly && rewriteNameLinks();
312	}
313
314	function addPopupValues(list) {
315		if (!isset('object', list) || list.object != 'itemid') {
316			return false;
317		}
318		var itemTpl = new Template(jQuery('#tmpl-item-row-' + graphs.graphtype).html()),
319			$row;
320
321		for (var i = 0; i < list.values.length; i++) {
322			var number = jQuery('#itemsTable tr.sortable').length,
323				item = {
324					number: number,
325					number_nr: number + 1,
326					gitemid: null,
327					itemid: list.values[i].itemid,
328					calc_fnc: null,
329					drawtype: 0,
330					yaxisside: 0,
331					sortorder: number,
332					flags: (typeof list.values[i].flags === 'undefined') ? 0 : list.values[i].flags,
333					color: colorPalette.getNextColor(),
334					name: list.values[i].name
335				};
336			$row = jQuery(itemTpl.evaluate(item));
337
338			$row.find('[name="calc_fnc"]').val(graphs.CALC_FNC_AVG);
339			jQuery('#itemButtonsRow').before($row);
340			$row.find('.input-color-picker input').colorpicker();
341		}
342
343		if (!graphs.readonly) {
344			activateSortable();
345			rewriteNameLinks();
346		}
347	}
348
349	function getOnlyHostParam() {
350		return graphs.is_template
351			? {only_hostid: graphs.hostid}
352			: {real_hosts: '1'};
353	}
354
355	function rewriteNameLinks() {
356		var size = jQuery('#itemsTable tr.sortable').length;
357
358		for (var i = 0; i < size; i++) {
359			var popup_options = {
360				srcfld1: 'itemid',
361				srcfld2: 'name',
362				dstfrm: 'graphForm',
363				dstfld1: 'items_' + i + '_itemid',
364				dstfld2: 'items_' + i + '_name',
365				numeric: 1,
366				with_webitems: 1,
367				writeonly: 1
368			};
369			if (jQuery('#items_' + i + '_flags').val() == graphs.ZBX_FLAG_DISCOVERY_PROTOTYPE) {
370				popup_options['srctbl'] = 'item_prototypes',
371				popup_options['srcfld3'] = 'flags',
372				popup_options['dstfld3'] = 'items_' + i + '_flags',
373				popup_options['parent_discoveryid'] = graphs.parent_discoveryid;
374			}
375			else {
376				popup_options['srctbl'] = 'items';
377			}
378
379			if (graphs.normal_only !== '') {
380				popup_options['normal_only'] = '1';
381			}
382
383			if (!graphs.parent_discoveryid && graphs.groupid && graphs.hostid) {
384				popup_options['groupid'] = graphs.groupid,
385				popup_options['hostid'] = graphs.hostid;
386			}
387
388			var nameLink = 'PopUp("popup.generic",'
389				+ 'jQuery.extend('+ JSON.stringify(popup_options) +',getOnlyHostParam()), null, this);';
390			jQuery('#items_' + i + '_name').attr('onclick', nameLink);
391		}
392	}
393
394	function removeItem(obj) {
395		var number = jQuery(obj).data('remove');
396
397		jQuery('#items_' + number).find('*').remove();
398		jQuery('#items_' + number).remove();
399
400		recalculateSortOrder();
401		!graphs.readonly && activateSortable();
402	}
403
404	function recalculateSortOrder() {
405		var i = 0;
406
407		// rewrite ids, set "tmp" prefix
408		jQuery('#itemsTable tr.sortable').find('*[id]').each(function() {
409			var obj = jQuery(this);
410
411			obj.attr('id', 'tmp' + obj.attr('id'));
412		});
413
414		jQuery('#itemsTable tr.sortable').each(function() {
415			var obj = jQuery(this);
416
417			obj.attr('id', 'tmp' + obj.attr('id'));
418		});
419
420		// rewrite ids to new order
421		jQuery('#itemsTable tr.sortable').each(function() {
422			var obj = jQuery(this);
423
424			// rewrite ids in input fields
425			obj.find('*[id]').each(function() {
426				var obj = jQuery(this),
427					id = obj.attr('id').substring(3),
428					part1 = id.substring(0, id.indexOf('items_') + 5),
429					part2 = id.substring(id.indexOf('items_') + 6);
430
431				part2 = part2.substring(part2.indexOf('_') + 1);
432
433				obj.attr('id', part1 + '_' + i + '_' + part2);
434
435				// set sortorder
436				if (part2 === 'sortorder') {
437					obj.val(i);
438				}
439			});
440
441			// rewrite ids in <tr>
442			var id = obj.attr('id').substring(3),
443				part1 = id.substring(0, id.indexOf('items_') + 5);
444
445			obj.attr('id', part1 + '_' + i);
446
447			i++;
448		});
449
450		i = 0;
451
452		jQuery('#itemsTable tr.sortable').each(function() {
453			// set row number
454			jQuery('.items_number', this).text((i + 1) + ':');
455
456			// set remove number
457			jQuery('#items_' + i + '_remove').data('remove', i);
458
459			i++;
460		});
461
462		!graphs.readonly && rewriteNameLinks();
463	}
464
465	function initSortable() {
466		var itemsTable = jQuery('#itemsTable'),
467			itemsTableWidth = itemsTable.width(),
468			itemsTableColumns = jQuery('#itemsTable .header td'),
469			itemsTableColumnWidths = [];
470
471		itemsTableColumns.each(function() {
472			itemsTableColumnWidths[itemsTableColumnWidths.length] = jQuery(this).width();
473		});
474
475		itemsTable.sortable({
476			disabled: (jQuery('#itemsTable tr.sortable').length < 2),
477			items: 'tbody tr.sortable',
478			axis: 'y',
479			containment: 'parent',
480			cursor: IE ? 'move' : 'grabbing',
481			handle: 'div.' + graphs.ZBX_STYLE_DRAG_ICON,
482			tolerance: 'pointer',
483			opacity: 0.6,
484			update: recalculateSortOrder,
485			create: function() {
486				// force not to change table width
487				itemsTable.width(itemsTableWidth);
488			},
489			helper: function(e, ui) {
490				ui.children().each(function(i) {
491					var td = jQuery(this);
492
493					td.width(itemsTableColumnWidths[i]);
494				});
495
496				// when dragging element on safari, it jumps out of the table
497				if (SF) {
498					// move back draggable element to proper position
499					ui.css('left', (ui.offset().left - 2) + 'px');
500				}
501
502				itemsTableColumns.each(function(i) {
503					jQuery(this).width(itemsTableColumnWidths[i]);
504				});
505
506				return ui;
507			},
508			start: function(e, ui) {
509				jQuery(ui.placeholder).height(jQuery(ui.helper).height());
510			}
511		});
512	}
513
514	function activateSortable() {
515		jQuery('#itemsTable').sortable({disabled: (jQuery('#itemsTable tr.sortable').length < 2)});
516	}
517
518	jQuery(function($) {
519		$('#tabs').on('tabsactivate', function(event, ui) {
520			if (ui.newPanel.attr('id') === 'previewTab') {
521				var preview_chart = $('#previewChart'),
522					src = new Curl('chart3.php');
523
524				if (preview_chart.find('.preloader').length) {
525					return false;
526				}
527
528				src.setArgument('period', '3600');
529				src.setArgument('name', $('#name').val());
530				src.setArgument('width', $('#width').val());
531				src.setArgument('height', $('#height').val());
532				src.setArgument('graphtype', $('#graphtype').val());
533				src.setArgument('legend', $('#show_legend').is(':checked') ? 1 : 0);
534
535				if (graphs.graphtype == graphs.GRAPH_TYPE_PIE || graphs.graphtype == graphs.GRAPH_TYPE_EXPLODED) {
536					src.setPath('chart7.php');
537					src.setArgument('graph3d', $('#show_3d').is(':checked') ? 1 : 0);
538				}
539				else {
540					if (graphs.graphtype == graphs.GRAPH_TYPE_NORMAL) {
541						src.setArgument('percent_left', $('#percent_left').val());
542						src.setArgument('percent_right', $('#percent_right').val());
543					}
544					src.setArgument('ymin_type', $('#ymin_type').val());
545					src.setArgument('ymax_type', $('#ymax_type').val());
546					src.setArgument('yaxismin', $('#yaxismin').val());
547					src.setArgument('yaxismax', $('#yaxismax').val());
548					src.setArgument('ymin_itemid', $('#ymin_itemid').val());
549					src.setArgument('ymax_itemid', $('#ymax_itemid').val());
550					src.setArgument('showworkperiod', $('#show_work_period').is(':checked') ? 1 : 0);
551					src.setArgument('showtriggers', $('#show_triggers').is(':checked') ? 1 : 0);
552				}
553
554				$('#itemsTable tr.sortable').each(function(i, node) {
555					var short_fmt = [];
556					$(node).find('*[name]').each(function(_, input) {
557						if (!$.isEmptyObject(input) && input.name != null) {
558							short_fmt.push((input.name).substr(0, 2) + ':' + input.value);
559						}
560					});
561					src.setArgument('i[' + i + ']', short_fmt.join(','));
562				});
563
564				var image = $('img', preview_chart);
565
566				if (image.length != 0) {
567					image.remove();
568				}
569
570				preview_chart.append($('<div>').addClass('preloader'));
571
572				$('<img />')
573					.attr('src', src.getUrl())
574					.on('load', function() {
575						preview_chart.html($(this));
576					});
577			}
578		});
579
580		if (graphs.readonly) {
581			$('#itemsTable').sortable({disabled: true}).find('input').prop('readonly', true);
582			$('select', '#itemsTable').prop('disabled', true);
583
584			var size = $('#itemsTable tr.sortable').length;
585
586			for (var i = 0; i < size; i++) {
587				$('#items_' + i + '_color').removeAttr('onchange');
588				$('#lbl_items_' + i + '_color').removeAttr('onclick');
589			}
590		}
591
592		// Y axis min clean unused fields
593		$('#ymin_type').change(function() {
594			switch ($(this).val()) {
595				case graphs.GRAPH_YAXIS_TYPE_CALCULATED:
596					$('#yaxismin').val('');
597					$('#ymin_name').val('');
598					$('#ymin_itemid').val('0');
599					break;
600
601				case graphs.GRAPH_YAXIS_TYPE_FIXED:
602					$('#ymin_name').val('');
603					$('#ymin_itemid').val('0');
604					break;
605
606				default:
607					$('#yaxismin').val('');
608			}
609
610			$('form[name="graphForm"]').submit();
611		});
612
613		// Y axis max clean unused fields
614		$('#ymax_type').change(function() {
615			switch ($(this).val()) {
616				case graphs.GRAPH_YAXIS_TYPE_CALCULATED:
617					$('#yaxismax').val('');
618					$('#ymax_name').val('');
619					$('#ymax_itemid').val('0');
620					break;
621
622				case graphs.GRAPH_YAXIS_TYPE_FIXED:
623					$('#ymax_name').val('');
624					$('#ymax_itemid').val('0');
625					break;
626
627				default:
628					$('#yaxismax').val('');
629			}
630
631			$('form[name="graphForm"]').submit();
632		});
633
634		var $form = $('form[name="graphForm"]');
635		$form.on('submit', function(e) {
636			$form
637				.find('tr.sortable[id^="items_"]')
638				.each(function(i, node) {
639					var item = {};
640
641					$(node)
642						.find('input, select')
643						.each(function(_, node) {
644							item[node.name] = node.value;
645						})
646						.remove();
647
648					item.sortorder = i + 1;
649
650					$form.append($('<input />', {
651						type: 'hidden',
652						name: 'items[' + i + ']',
653						value: JSON.stringify(item)
654					}));
655				})
656		});
657
658		!graphs.readonly && initSortable();
659	});
660</script>
661