var frase = '';

var box_num_oriz = 25;
var box_num_vert = 3; 

var box_width = 20;
var box_height = 40;
var box_border_size = 1;

var big_box_padding = 3;

//css classes(solo per i colori)
var big_box_class = 'big_wheel_box';
var box_class = 'wheelbox';

var panel_title_height = 20;
var panel_control_height = 100; 

var baseURL = 'wheel.php';

var active = 0;

//numero massimo di caratteri richiedibili
var max_vovel_choices = 2;
var max_other_choices = 3;
var max_choices = (max_vovel_choices+max_other_choices);


var vovels = new Array('A','E','I','O','U');


//array dei caratteri ok
var choices = new Array();


//array dei richiesti non presenti
var assenti_richiesti = new Array();


//se settato a true conta come scelta anche quelle che non sono presenti
var hardmode = true;


//evento di controllo input da tastiera
var controlevent;


var activeevent=true;


var debugflag = false;


var panel = 
	'<table width="100%">'+
		'<tr>'+
			'<td colspan="3" align="center">'+
				'<span style="color:white; font-size:10px">'+
					'Digita le tue scelte sulla tastiera. Poi scrivi la soluzione nel riquadro che appare e premi "Invia soluzione"'+
				'</span>'+
			'</td>'+
		'</tr>'+
		'<tr>'+
			'<!--<td width="15%" align="left">->>'+
				'<!--<input type="button" class="button" id="button_new" value="new">-->'+
			'<!--</td>-->'+
			'<td width="100%" colspan="3"> '+
				'<span class="msg1">Scelte: </span>'+
				'<span class="msg1" id="msg1"></span><img src="wheel/img/spinner.gif" id="loading" style="display:none"><span id="dbg"></span>'+
			'</td>'+
			'<!--<td width="15%" align="right">-->'+
				'<!--<input type="button" class="button" id="button_exit" value="exit">-->'+
			'<!--</td>-->'+
		'</tr>'+
		'<tr id="pannello_down">'+
			'<td width="15%" align="left">'+
				'<input type="button" class="button" id="button_reset" value="reset">'+
			'</td>'+
			'<td width="85%" align="right">'+
				'<input type="text" id="textbox" maxlenght="200"/>&nbsp;<input type="button" class="button" id="button_eval" value="invia soluzione">'+
			'</td>'+
		'</tr>'+
		
	'</table>';



//oggetto principale
var wheel = function(){

	//carica la mappa
	var load_map = function(){
		debug('... creating map');

		var extwidth = box_num_oriz*(box_width+2*(box_border_size));
		var extheight = box_num_vert*(box_height+2*(box_border_size));
		var out =
			'<div id="xxx" class="'+
			(big_box_class)+
			'" style="width:'+(extwidth)+'px; *width:'+(extwidth-45)+'px; height:'+(extheight+panel_control_height+panel_title_height)+'px;  padding:'+(big_box_padding)+'px;    ">';
		 																// padding:'+(big_box_padding)+'px
		//inserisco il div per il titolo
		out+='<div id="tit" style="height:'+(panel_title_height)+'"></div>';
		
			
			
		for (var i = 0; i < box_num_vert; i++) {			
			for (var j = 0; j < box_num_oriz; j++) {
				out += '<div class="'+(box_class)+'" style=" float:left; width:'+(box_width)+
				'px; height:'+(box_height)+
				'px; border: '+(box_border_size)+'px solid black;'+
				'" id="'+(i)+'_'+(j)+'" ></div>';		
			}
		}
		
		//inserisco il div per il pannello di controllo
		out+='</br><div id="panel" style=" float:left; width:'+(extwidth)+'px; *width:'+(extwidth-50)+'px; height:'+(panel_control_height)+'px">'+(panel)+'</div>';
		
		out+='</div>';
		jQuery("#ruota").html(out);		
	}
	
	
	
	
	
	
	
	//crea la frase xxx e riempie le caselle
	var fill_map = function(){
		
		debug('... getting title');
		
		///ajax per creare la frase
		jQuery.post(
			"wheel/ajreq.php",
			{ act: "get_title", w:""+(box_num_oriz), h :""+(box_num_vert) },
			function(data){
				//console.debug(data);//("Data Loaded: " + data);
				//carico la frase nel titolo
				jQuery('#tit').html(data);
			}
		);
		
		debug('... getting vacuums');
		//console.debug('parte json');
		//ora devo ottenere l'array JSON dei vuoti da colorare
		jQuery.getJSON(
			"wheel/ajreq.php",
			{act: "get_vacuums", w:""+(box_num_oriz), h :""+(box_num_vert) },
			function(data){
				for (var i = 0; i<data.length; i++) 
					for (var j = 0; j < data[i].length; j++) 
						if (data[i][j] == '1') 
							jQuery('#' + i + '_' + j).css({	'background-color': 'white'	});
			} 
		);				
		//console.debug('finito json');
	}
	
	
	
	

	
	//setta tutti gli eventi e inizia il gioco
	var start_game = function(){
		debug('... starting game');
		
		num_choices = 0;
		//inizializzo il listener sulla tastiera
		active = 1;
		
		controlevent = jQuery(document).keyup(
			function(event){ 
				if(!activeevent)return;
				  
				if(!event) event = window.event;
				//pulisco messaggio di debug
				jQuery('#dbg').html('');
			
			    
				//se non ha raggiunto il top
				if(choices.length < max_choices){
					//console.debug(choices.length);
				//	console.debug(max_choices);
					
					var carattere = String.fromCharCode(event.keyCode).toUpperCase() ;
					var codice = event.keyCode;

     
					//se ha scelto giusto (nel rispetto di vocali e consonanti)
					//è vocale o consonante ?
					
					
					var vocale = ( vovels.toString()).search(carattere.toUpperCase());
					var dove = '';
					if(vocale!=-1)	//è una vocale
						dove ="vocale";
					else
						dove="consonante";
					
					
					var this_elem_limit = (dove=='vocale')?max_vovel_choices:max_other_choices;
					
					//numero di vocali o consonanti che ha inserito finora (a seconda del caso)
					var this_voc_num = 0;
					var this_oth_num = 0;
					
					//scorro negli inserimenti e conto consonanti e vocali
					for(var t = 0; t<choices.length; t++){
						if((vovels.toString()).search(choices[t]) != -1 )
							this_voc_num++;
						else
							this_oth_num++;
					}
					var this_elem_num_which = (dove=='vocale')?this_voc_num:this_oth_num;
					
					


					
					
					//console.debug(choices);
					if(this_elem_num_which < this_elem_limit){
						//se il carattere è consentito
						if(codice>=65 && codice <=90){
							
							var charUP = carattere.toUpperCase();
						
							//se non è stato gia scelto
							if(choices.toString().search(charUP)==-1){
								
								//console.debug(carattere);
					
								//funzione che aggiorna il tabellone e internamente chiama la funzione per i messaggi (notify_request)
								// e aggiorna l'array delle scelte
								refresh_tab(carattere);						
							}
							else{
								jQuery('#dbg').html(carattere+ ' gia scelto!');
							}
						}
					}
					else{
						//non puo fare questa scelta (limite di tipo raggiunto)
						jQuery('#dbg').html('Non puoi pi&ugrave; selezionare una '+dove);
					}
					
				
					
					
					if (event.keyCode == 27) { 
						//alert('escaped!'); 
					} 
					//console.debug(choices);
					
					
					
					//if(choices.length == max_choices-1)enable_solution();
					


				}   
				else{
					//console.debug('calling enablesol');
					 jQuery(document).unbind('keyup');
					//controlevent = null;
					enable_solution();
					return;
				}				
			}
		);
	}
	
	//funzione che mostra a video la scelta fatta
	var notify_request = function(carattere){
	
		var assenti_richiesti_string = assenti_richiesti.toString();
		var nonesiste = assenti_richiesti_string.search(carattere.toUpperCase());
		var charUP = carattere.toUpperCase();

		//console.debug(howmany);


		//console.debug(assenti_richiesti);		
		var out=jQuery('#msg1').html();
		
		// è nei richiesti
		if(nonesiste!=-1){
			debug('non presente: '+(choices.length));
			if(hardmode==true){
				//num_choices++;
				choices.push(charUP);
				debug('aggiunto lo stesso: '+(choices.length));
			}	
			out+='<span class="non_presente">'+carattere+'</span> ';
		}
		else{
			//num_choices++;
			out+='<span class="presente">'+carattere+'</span> ';
			//inserisco la scelta nell'array generico
			
			//aggiorno la scelta
			choices.push(charUP);
			debug('presente: '+(choices.length));	
		}	
		
	
		//console.debug(out);
		jQuery('#msg1').html(out);
		
		
		if(choices.length == max_choices){
			debug('right enabling');
			enable_solution();
		}
		
	}
	
	
	
	
	
	
	
	
	//funzione che aggiorna il tabellone
	var refresh_tab = function(carattere){
	
		//disattivo eventi keyup
		disable();
		
		//ora devo ottenere l'array JSON dei caratteri da riempire	
		jQuery.getJSON(
			"wheel/ajreq.php",
			{act: "get_vals", w:""+(box_num_oriz), h :""+(box_num_vert), character:""+(carattere) },
			function(data){
				/*
				data contiene le occorrenze del carattere oppure null se il carattere non viene trovato
				*/				
				if(data!='null'){

					for (var i = 0; i < data.length; i++) 
						for (var j = 0; j < data[i].length; j++) 
							if (data[i][j] == '1'){
								jQuery('#' + i + '_' + j).html("<div class='letter'>"+carattere+'</div>');

							}
				}
				else{
					jQuery('#dbg').html(carattere+' non presente!');
					assenti_richiesti.push(carattere);
					//console.debug('inserito '+carattere+' in assenti_richiesti');
				}
				//funzione che mostra a video la scelta fatta
				notify_request(carattere);
				
				//riattivo keyup
				enable();
			},
			{async:false} 
		);
		//console.debug('finito refresh_tab');		
	}

	
	
	
	//abilita l'invio della soluzione
	var enable_solution = function(){
		debug('enabling solution');
	
	
		//console.debug(choices.length);
		//console.debug(max_choices);
		
		jQuery('#dbg').html('DAI LA SOLUZIONE!!!');
		jQuery('#button_eval').fadeIn();;
		jQuery('#textbox').fadeIn();
		jQuery('#textbox').css({'border':'3px solid red'});
		controlevent = null;
	
		jQuery('#button_eval').click(
			function(){
				var inserita = jQuery('#textbox').val();
			
				jQuery.post(
					"wheel/ajreq.php",
					{ act: "verify", w:""+(box_num_oriz), h :""+(box_num_vert), inserita :""+(inserita) },
					function(data){
						data +='&nbsp;<a href="wheel.php?reset">Rigioca!</a>';
						jQuery('#pannello_down').remove();
						jQuery('#dbg').html(data);
					}
				);				
			
			}
		);
			
	}
	
	
	 
	//costruttore
	this.init = function(){
		jQuery.ajax({
			url: "wheel/getone.php",
			success: function(data){
				this.frase = data;
				load_map();
				fill_map();
				start_game();
				//jQuery("#ruota").append(data);
			},
			async: false
			
		});	
		
			
	}	
	
	var debug = function(val){
		if(debugflag) console.debug(val);	
	}
	var enable = function(){
		debug('...enabling keyup');
		activeevent = true;
	}
	var disable = function(){
		debug('...disabling keyup');
		activeevent = false;
	}
	

	
	
}











jQuery(
	function(){
		
		var wheel_obj = new wheel();
		wheel_obj.init();
		//console.debug('wheel inizializzata');
		//alla pressione del bottone reset chiamo con ajax la funnzione per il reset
		
		jQuery('#button_reset').click(
			function(){
				//console.debug('resetting...');
				window.location = baseURL+'?reset';
			}
		);
		
		jQuery("#loading").ajaxStart(function(){ jQuery(this).show(); });
		jQuery("#loading").ajaxStop(function(){ jQuery(this).hide(); });
		
	}
);



//jQuery(
//	function(){
//		
//		jQuery('.'+big_box_class).css('padding',big_box_padding);
//				
//		jQuery('.wheelbox').mouseover(
//			function(){
//				jQuery(this).css('cursor','pointer');
//				jQuery(this).css('background-color','white');
//			}
//		).mouseout(
//			function(){
//				jQuery(this).css('background-color','');
//			}
//		);

//	}
//);