document.observe('dom:isloaded', function(){
	// si no hay div en el que cargar el calendario, no continuamos
	if (! $('calendars')) {return};
	
	// instanciamos el objeto global SeamDisp
	seamdisp = new SeamDisp();
	
	// No continuamos hasta que el objeto seamdisp cargue los datos de disponibilidad via ajax
	$('calendars').observe('seamdisp:dates', function(){
		// instanciamos el calendario, con lo que se dibujara en la pagina y llamara al metodo addDayStyle(date)
		tmfrm = new Timeframe('calendars', {
			months: 2,
			// format: 'ddd dd MMMM yyyy',
       		// startField: 'startField', endField: 'endField',
       		format: 'dd/MM/yyyy',
       		startField: 'fromcalInputDate', endField: 'tocalInputDate',
			previousButton:'previous', todayButton:'today' , nextButton:'next', resetButton: 'reset',
			earliest: 'today', latest: 't + 1 y'
		});
	});

	// limitamos el desplazamiento del calendario a 12 meses del mes actual
	$('next').observe('click', function(event){
		var nextYear = Date.today().add(10).months();
		if (tmfrm.date.getTime() > nextYear.getTime())
			event.stop();
	});
	$('previous').observe('click', function(event){
		if (tmfrm.date.getMonth() == new Date().getMonth() && tmfrm.date.getFullYear() == new Date().getFullYear())
			event.stop();
	});
});

	// don't display the loading indicator
	Seam.Remoting.displayLoadingMessage = function() {};
	Seam.Remoting.hideLoadingMessage = function() {};
		
	// clase para manejar los datos de disponibilidad
	function SeamDisp() {
		// componente capaz de enviar llamadas AJAX 
		this.component = Seam.Component.getInstance('disponibilidad');
		
		// Map que tiene como key el dia del año (1-365) y como value el estado (0-ocupado, 1-libre)
		this.dates = null;
	
		// Auto cargamos las fechas con su estado haciendo la llamada ajax
		this.component.getDateMap(function(m){
			seamdisp.dates = m;
			// lanzamos un evento para informar de que los datos están cargados
			$('calendars').fire('seamdisp:dates');
		});
	}
	
	// Devuelve el estado (libre,ocupado) del dia correspondiente a la fecha pasada
	SeamDisp.prototype.getDateDisp = function(thedate) {
		var dayOfYear = thedate.getDOY();
		return this.dates.get(dayOfYear);
	}
	
	// devolvemos un string con la clase css a aplicar dependiendo del estado de la tarea
	SeamDisp.prototype.getStyle = function(thedate){
		var style = '';
		if (thedate.getTime() < new Date().getTime()) {
		 	style += 'unselectable disabled past';
		} else {
			var status = this.getDateDisp(thedate);
			if (status == null || status == 0) style = 'unselectable ocupado';
			else if (status == 1) style = 'selectable libre';
			else if (status == 2) style = 'unselectable cerrado';
		}
		return style;
	}

	// esta funcion se invoca desde el script del calendario para cada dia del año.
	// devuelve la clase css a aplicar a la celda correspondiente a la fecha pasada 
	function addDayStyle(thedate) {
		return seamdisp.getStyle(thedate);
	}
		
	// extendemos la clase Date de javascript con un metodo para devolver el dia del año (1-365) correspondiente a la fecha 
	Date.prototype.getDOY = function() {
		var onejan = new Date(this.getFullYear(),0,1);
		return Math.ceil((this - onejan) / 86400000);
	}

	// variable global de la clase Seamdisp
	var seamdisp;
	
	// variable global del objeto Timeframe que representa el calendario
	var tmfrm;
	
	var todayDate = null;
	
	// fecha de inicio seleccionada en el calendario de richfaces
	function fromselected() {
		// FIXME	
		var startdate = $('fromcal').component.getSelectedDate();
		var enddate = $('tocal').component.getSelectedDate();
		var start = $F('fromcalInputDate');
		var end = $F('tocalInputDate');

	}
	
	// fecha de fin seleccionada en el calendario de richfaces
	function toselected() {
		// FIXME	
		var startdate = $('fromcal').component.getSelectedDate();
		var enddate = $('tocal').component.getSelectedDate();
	}
	
	// fecha de inicio o fin seleccionada en el calendario de richfaces
	function iscomplete() {
		// FIXME		
		var startdate = $('fromcal').component.getSelectedDate();
		var enddate = $('tocal').component.getSelectedDate();
		var start = $F('fromcalInputDate');
		var end = $F('tocalInputDate');
		for (var i in $('fromcal').component) console.log(i + ': ' + $('fromcal').component[i]);
		tmfrm.validateRange(startdate, enddate);
		tmfrm.refreshRange();
	}