var intervaleCount = 0;
var isShown = false;

jQuery(function($) {
	$(window).load(function() {
		$el = $('#intervale-content');
		$el.hide();
	});
});

function addInterval() {
	console.log(intervaleCount);
	jQuery(function($) {
		
		
		$el = $('#intervale-content');
		
		if(!isShown) {
			$el.show();
			isShown = true;
		}
		
		$el.append('<div id="intervaleWrapper'+ intervaleCount +'">'
			+ '<div style="vertical-align: middle; display: inline-block">'
			+ '<input id="dataProducereInterval'+ intervaleCount +'" style="width:100px;" type="text" name="dataProducereInterval">'
			+ '<img id="dataProducereInterval'+ intervaleCount +'-trigger" src="/emid-lpod/resources/images/cal.gif" border="0" alt="Calendar" style="margin-left: 3px;float: right;cursor: pointer">'
			+ '</div>'
			+ '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Data realimentare:&nbsp;'
			+ '<div style="vertical-align: middle; display: inline-block">'
			+ '<input id="dataRealimentareInterval'+ intervaleCount +'" style="width:100px;" type="text" name="dataRealimentareInterval">'
			+ '<img id="dataRealimentareInterval'+ intervaleCount +'-trigger" src="/emid-lpod/resources/images/cal.gif" border="0" alt="Calendar" style="margin-left: 3px;float: right;cursor: pointer">'
			+ '</div>'
			+ '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Consumatori alimentati:&nbsp;'
			+ '<div style="vertical-align: middle; display: inline-block">'
			+ '<input id="consumatoriAlimentati'+ intervaleCount +'" style="width:100px;" type="text" name="consumatoriAlimentati" value="0">'
			+ '</div>'
			+ '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Consumatori nealimentati:&nbsp;'
			+ '<div style="vertical-align: middle; display: inline-block">'
			+ '<input id="consumatoriNealimentati'+ intervaleCount +'" style="width:100px;" type="text" name="consumatoriNealimentati" value="0">'
			+ '</div>'
			+ '&nbsp;&nbsp;&nbsp;<a href="javascript:" onclick="deleteInterval(\'intervaleWrapper'+ intervaleCount +'\')">Sterge</a>'
			+ '<br>'
			+ '</div>');
	
		initCalendarField("dataProducereInterval" + intervaleCount)
		initCalendarField("dataRealimentareInterval" + intervaleCount)
		
		intervaleCount++;
	});
}

function initCalendarField(id) {
	
	Calendar.setup({
		inputField  : id,         // ID of the input field
		ifFormat    : "%d.%m.%Y %H:%M",       // the date format
		button      : id +"-trigger",         // ID of the button
		showsTime   : true
	});	
}

function deleteInterval(id) {
	
	jQuery(function($) {
		console.log($('#' + id));
		$('#' + id).remove();
	});
}

function showHideIntervale() {
	jQuery(function($) {
		$el = $('#intervale-content');
		
		if(isShown) {
			$el.hide();
			isShown = false;
		} else {
			$el.show();
			isShown = true;
		}
	});
	
}