modelos = {
	
	init: function() {
		
		modelos.img_f = new Image();
		modelos.img_f.onload = modelos.onloadImage;
		modelos.img_f.onerror = modelos.onloadImage;
		modelos.img_f.abort = modelos.onloadImage;		
		modelos.img_f.id = 'temp_field';
		modelos.img_v = new Image();
		modelos.img_v.onload = modelos.onloadImage;
		modelos.img_v.onerror = modelos.onloadImage;
		modelos.img_v.onabort = modelos.onloadImage;
		modelos.img_v.id = 'temp_vector';
		modelos.img_c = new Image();
		modelos.img_c.onload = modelos.onloadImage;
		modelos.img_c.onerror = modelos.onloadImage;
		modelos.img_c.onabort = modelos.onloadImage;
		modelos.img_c.id = 'temp_contour';		
		
		modelos.setSelect('selmodelo', 'PROMES');
		
		modelos.setModelo('PROMES');
		
		$("select#selmodelo").bind('change', modelos.changeModelo);
		$("select.selhorizonte").bind('change', modelos.changeHorizon);
		$("span#next_horizon").bind('click', modelos.nextHorizon);
		$("span#prev_horizon").bind('click', modelos.prevHorizon);
		$("span#start_anim").bind('click', modelos.startAnimation);
		
		$("select[@id^=layer_]").bind('change', function() {
			modelos.setHorizon(modelos.getHorizon());
			var type = this.id.split("_")[1];
			modelos.updateLabel(type);
		});
		$("input[@id^=chk_]").bind('click', function() {			
			var s = this.id.split("_");			
			modelos.clickCheckbox(s[1]);
		});
		
		$("input#chk_field").attr('checked', 'checked');
		$("input#chk_contour").attr('checked', '');
		$("input#chk_vector").attr('checked', '');
		modelos.clickCheckbox('field');
		modelos.clickCheckbox('contour');
		modelos.clickCheckbox('vector');
		
		
		
	},
	weekDays : ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
	months: ['Enero', 'Feb', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto',
			 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
	
	url: {},
	sim: null,
	horizon: null,
	varTypes: ['vector', 'contour', 'field'],
	
	clickCheckbox: function(t) {
			var c = document.getElementById("chk_"+t);
			
			if (c.checked) {
				
				d = "block";
				$("select#layer_"+t).removeAttr('disabled');
			}
			else {
				
				d = "none";
				$("select#layer_"+t).attr('disabled', 'disabled');
			}
			$("img#img_"+t).css('display', d);
			if (t=='field') {				
				$("img#img_dummyfield").css('display', d);
			}
		
		modelos.updateLabel(t);
	},
	changeModelo: function() {
		var modelo = this.options[this.selectedIndex].value;
		modelos.setModelo(modelo);
	},
	setModelo: function(modelo) {
		modelos.modelo = modelo;
		
		if (modelo=='PROMES'){
			$("ul.model").removeClass("gfs").addClass("promes");
			$("img#map").attr('src', '/img/modelos_promes.gif');
			$("ul.model li.map").css({ width : 548, height: 474 });
			$("ul.model li.map img").css({ width : 548, height: 474 });
		}
		else if (modelo=='GFS'){
			$("ul.model").removeClass("promes").addClass("gfs");
			$("img#map").attr('src', '/img/modelos_gfs.gif');
			$("ul.model li.map").css({ width : 621, height: 400 });
			$("ul.model li.map img").css({ width : 621, height: 400 });
			}
		$("li.dateandtime").empty();
		modelos.drawSims();
		modelos.drawHorizs();
		modelos.drawVars();
		modelos.calculateBaseMillis();
		modelos.setFirstHorizon();
	},
	
	drawSims: function() {
		$("select#selsim").empty();
		var first = true, firstvalue;
		if (sims[modelos.modelo] == undefined) return;
		for (var i=0; i<sims[modelos.modelo].length; i++) {
			var cad = sims[modelos.modelo][i];
			var s = cad.split("_");
			if (first) {
				firstvalue = cad;
				first = false;
			}
			modelos.appendOption("selsim", cad, s[0]+" "+s[1]);
			
		}
		
		modelos.setSelect('selsim', firstvalue); 
		modelos.sim = firstvalue;
		
		$("select#selsim").bind('change', function() {				
			modelos.storeSelectValues();
			modelos.drawHorizs();
			modelos.drawVars();					
			modelos.restoreSelectValues();
			modelos.sim = this.value;	
			modelos.calculateBaseMillis();
			modelos.setFirstHorizon();				
			modelos.setSimulationTimeLegend();
		});
	},
	storeSelectValues: function() {
		modelos.selectValues = {
			horiz: modelos.getHorizon(),
			field: modelos.getVar('field'),
			contour: modelos.getVar('contour'),
			vector: modelos.getVar('vector')
			
		};
	},
	restoreSelectValues: function() {
		
		modelos.setHorizon(modelos.selectValues.horiz);		
		for (var i=0; i<modelos.varTypes.length; i++) {
			var type = modelos.varTypes[i];
			
			modelos.setSelect('layer_'+type, modelos.selectValues[type]);
		
		}
	},
	
	getFechaSim: function() {		
		var sel = document.getElementById("selsim");
		if (sel.selectedIndex==-1) return null;
		return sel.options[sel.selectedIndex].value;
	},
	getVar: function(type) {
		var sel = document.getElementById("layer_"+type);
		if (sel.options.length==0) return null;
		return sel.options[sel.selectedIndex].value;
	},
	drawHorizs: function() {
		$("li.horizonte select").empty();
		var fechasim = modelos.getFechaSim();
		if (!fechasim) return;
		var h = files[modelos.modelo][fechasim]['horiz'];
		
		h.step = parseInt(h.step);
		h.firstHoriz = parseInt(h.firstHoriz);
		h.lastHoriz = parseInt(h.lastHoriz);
		
		if (!h.step || (h.firstHoriz >= h.lastHoriz)) {
			
			return false;
		}				
		
		$("span.available_horizon").empty().append(h.lastHoriz);
		
		for (var n = h.firstHoriz; n<=h.lastHoriz; n=n+(h.step)) {
			modelos.appendOption("selhorizonte", n, n);
		}
	},
	
	drawVars: function() {
		for (var i=0; i<modelos.varTypes.length; i++) {
						
			var type = modelos.varTypes[i];
			$("select#layer_"+type).empty();
			var fechasim = modelos.getFechaSim();
			if (!fechasim) continue;
			
			var vars = files[modelos.modelo][fechasim]['types'][type];
			var first = null;
			
			for (var v in vars) {
				if (!first) first = v;
				
				modelos.appendOption("layer_"+type, v, vars[v].descr);
			}
			if (first!=null) modelos.setSelect('layer_'+type, first);
			
			modelos.updateLabel(type);
			
		}
	},
	updateLabel: function(type) {
		var sel = document.getElementById("layer_"+type);
		
		if ($(sel).attr('disabled')) {
			var text = "--------";
		} else {
			var text = text = sel.options[sel.selectedIndex].text;
		}
		$("span#label_"+type).text(text);
	},
	getHorizon: function() {
		var sel = document.getElementById("selhorizonte");
		if (sel.selectedIndex==-1) return null;
		return parseInt(sel.options[sel.selectedIndex].value);
	},
	changeHorizon: function() {
		modelos.setHorizon(this.value);
	},
	setFirstHorizon: function() {
		var sel = document.getElementById("selhorizonte");
		if (sel.options.length == 0) return null;
		this.setHorizon(sel.options[0].value);
	},
	setHorizon: function(horizon) {
		
		modelos.setSelect('selhorizonte', horizon);
		$("span.current_horizon").empty().append(horizon+"");
		
		for (var i=0; i<modelos.varTypes.length; i++) {
			var type = modelos.varTypes[i];
			var fechasim = modelos.getFechaSim();
			if (!fechasim) {
				modelos.url[type] = '/img/pixel.gif';
				continue;
			}
			var vars = files[modelos.modelo][fechasim]['types'][type];
			
			var selectedVar = modelos.getVar(type);
			
			if (selectedVar) {
				var templateUrl = vars[selectedVar]['url'];
				modelos.url[type] = templateUrl.replace("HOR", horizon);
			}
			else modelos.url[type] = '/img/pixel.gif';
		}
		
		modelos.preload();
	},
	nextHorizon: function() {
		modelos.stepHorizon(1);		
	},
	prevHorizon: function() {
		modelos.stepHorizon(-1);
	},
	stepHorizon: function(sign) {
		var fechasim = modelos.getFechaSim();
		var h = files[modelos.modelo][fechasim]['horiz'];
		
		if (!h.step || h.firstHoriz >= h.lastHoriz)
			return false;
		
		var current = modelos.getHorizon();
		
		current = current + parseInt(h.step) * sign;
		
		if (current > h.lastHoriz) {
			current = h.firstHoriz;
		}
		else if (current < h.firstHoriz) {
			current = h.lastHoriz;
		}
		
		modelos.setHorizon(current);
	},
	calculateBaseMillis: function() {
		if (!modelos.sim) return;
		s = modelos.sim.split("_");
		
		d = s[0].split("-");
		f = new Date();
		f.setUTCFullYear(d[0]);
		f.setUTCMonth(d[1]-1);
		f.setUTCDate(d[2]);
		f.setUTCHours(s[1]);
		
		
		modelos.baseMillis = f.valueOf();
	
	},
	setSimulationTimeLegend : function() {
		var t = new Date(modelos.baseMillis);		
		var cad = modelos.weekDays[t.getUTCDay()];
		cad+=" "+t.getUTCDate();
		cad+=" de "+modelos.months[t.getUTCMonth()];
		cad+=" "+t.getUTCFullYear();
		cad+=" - "+t.getUTCHours()+"h GMT";		
		$("span#simulationtime").empty().append(cad);
	},
	setDateAndTimeLegend: function() {
		
		var t = new Date(modelos.baseMillis+modelos.getHorizon()*3600*1000 );		
		var cad = modelos.weekDays[t.getDay()];
		cad+=" "+t.getDate();
		cad+=" de "+modelos.months[t.getMonth()];
		cad+=" "+t.getFullYear();
		cad+=" - "+t.getHours()+"h hora local";
		$("span#dateandtime").empty().append(cad);
		
	},
	preload: function() {		
		modelos.loaded = [];
		modelos.error = [];
		modelos.img_f.src = modelos.url['field'];
		modelos.img_v.src = modelos.url['vector'];
		modelos.img_c.src = modelos.url['contour'];		
	},
	
	onloadImage: function() {
		var s = this.id.split("_");
		var type = s[1];
		modelos.loaded.push(type);	
		modelos.checkAllLoaded();
	},
	onErrorImage: function() {
		var s = this.id.split("_");
		var type = s[1];
		modelos.error.push(type);
		modelos.checkAllLoaded();
	},
	checkAllLoaded: function() {
		
		if ( (modelos.loaded.length+modelos.error.length) == 3) 
			modelos.showNewImages();
	},
	showNewImages: function() {
		
		if ($("input#chk_field").attr('checked')) {
			$("img#img_dummyfield").attr('src', modelos.url['field']).fadeIn(400, function() {
				$("img#img_field").attr('src', modelos.url['field']);
				$("img#img_dummyfield").hide();
				$("img#img_contour").attr('src', modelos.url['contour']);
				$("img#img_vector").attr('src', modelos.url['vector']);
				modelos.setSimulationTimeLegend();
				modelos.setDateAndTimeLegend();
			});
		}
		
		else {		
				$("img#img_vector").attr('src', modelos.url['vector']);
				$("img#img_field").attr('src', modelos.url['field']);
				$("img#img_contour").attr('src', modelos.url['contour']);			
				modelos.setSimulationTimeLegend();
				modelos.setDateAndTimeLegend();
		}
		
		
		if (modelos.animation)
			modelos.anim = setTimeout("modelos.nextHorizon();", 1000);
			
		//modelos.cacheNextHorizon();
		
	},
	cacheNextHorizon: function() {
		var fechasim = modelos.getFechaSim();
		if (!files[modelos.modelo] || !files[modelos.modelo][fechasim]) return;
		var h = files[modelos.modelo][fechasim]['horiz'];
		var step = parseInt(h.step);
		var lastHoriz = parseInt(h.lastHoriz);
		var nexthoriz = modelos.getHorizon() + step;
		if (nexthoriz > lastHoriz) return;
		
		for (var i=0; i<modelos.varTypes.length; i++) {
			var type = modelos.varTypes[i];
			var fechasim = modelos.getFechaSim();
			
			if (!fechasim) {				
				continue;
			}
			var vars = files[modelos.modelo][fechasim]['types'][type];
			
			var selectedVar = modelos.getVar(type);
			
			if (selectedVar) {
				var templateUrl = vars[selectedVar]['url'];
				modelos["cache_"+type] = new Image();
				var url = templateUrl.replace("HOR", nexthoriz);				
				
				modelos["cache_"+type].src = url;
			}
			
		}
	},
	
	startAnimation: function() {
		if (modelos.anim) {
			modelos.animation = false;
			clearInterval(modelos.anim);
			delete modelos.anim;
			$("span#start_anim").removeClass("pause").addClass("play");
			$("span.animated").fadeOut(200, function(){$("select.selhorizonte").fadeIn(200);});
			return;
		}
		if (!modelos.sim) return;
		$("select.selhorizonte").fadeOut(200, function(){$("span.animated").fadeIn(200);});
		$("span#start_anim").removeClass("play").addClass("pause");		
		modelos.animation = true;
		modelos.nextHorizon();
		
	},
	
	setSelect: function(id, value) {
		
		sel = document.getElementById(id);		
		if (!sel) return;
		
		for (i=0; i<sel.options.length; i++) {
			
			if (sel.options[i].value == value) {			
				sel.selectedIndex = i;
				
				return;
			}
			
		}
	},
	
	appendOption: function(id,value, text) {
    	var elOptNew = document.createElement('option');
    	elOptNew.text = text;
    	elOptNew.value = value;
    	elSel = document.getElementById(id);
    	try {
    		elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
  		}
  		catch(ex) {
   	 		elSel.add(elOptNew); // IE only
  		}
	}
	
		
};

jQuery(document).ready(function() { modelos.init(); });