var counter=5;
var index=0;
var feedback;
var split;
function setVars()
{
	feedback = document.getElementById("feedback").innerHTML;
	split = feedback.split(' ');
	counter = split.length;
}

function countdown(prev_word)
{
if(counter>0)
{
   counter--;            
   if(counter == 0)
   {
      document.getElementById("feedback").innerHTML = feedback;
   }
   if(counter > 0)
   {
      temp = document.getElementById("feedback").innerHTML = prev_word+" "+split[index];
      setTimeout('countdown(temp)',150);
   }
   index++;
}
}


//change the pattern when spell words or sentences
function enter_input(evt,current_tf_num,direction,num_of_tf,char_code)
{
        //var charCode;
        //alert(current_tf_num+", "+direction+", "+num_of_tf+", "+char_code);
        if(char_code==-1)
           var charCode = (evt.which) ? evt.which : event.keyCode;
        else
          var charCode = char_code;
        //alert(charCode);
	    userInput = document.getElementById('user_input'+current_tf_num).value; 
	    //remove spaces if user press the space buttons
	    space_index = userInput.indexOf(" ");
	    if(space_index!=-1)
	    {	
	    	empty_space_str = userInput.substr(0,space_index);	
	        document.getElementById('user_input'+current_tf_num).value = empty_space_str;
	    }
	    var wordPattern = document.getElementById('word_pattern'+current_tf_num).innerHTML;
	    var completePattern = document.getElementById('completing'+current_tf_num).innerHTML;	
		var completePatternLen = completePattern.length;
		var total_length = completePattern.length+wordPattern.length;
		var allPattern = completePattern+wordPattern;
		var completePattern =  allPattern.substring(0,userInput.length);
		var newPattern =  allPattern.substring(userInput.length,total_length);	    	    
	    //set the new pattern and completed letters
	    document.getElementById('completing'+current_tf_num).innerHTML = completePattern;	   
		document.getElementById('word_pattern'+current_tf_num).innerHTML = newPattern;	
		//alert(completePattern+newPattern);
		//when the user delete the last word in a textfield - move the cursor to the prev textfiels		 
		if(charCode==8 || charCode==37 || charCode==39)
		{
		   cursor_location =  document.getElementById('user_input'+current_tf_num).selectionStart;
		   //alert(userInput.length+", "+current_tf_num);
		   if(current_tf_num>0)
		   {
		       //the position of the cursor inside a TF		       		       
		       //go back to prev TF when pressenig the arrow buttons
			   if(cursor_location==0 && ((charCode==39 && direction=="rtl") || (charCode==37 && direction=="ltr")))
			   {			         
				   priv_num = current_tf_num-1;
				   prevUserInput = document.getElementById('user_input'+priv_num);
				   setFocus(prevUserInput,num_of_tf,priv_num);//,document.getElementById('both'+current_tf_num));
			   }
			   //go back to prev TF when pressenig the delete button
			   if(userInput.length==0 && charCode==8)
			   {
			       priv_num = current_tf_num-1;
				   prevUserInput = document.getElementById('user_input'+priv_num);
				   setFocus(prevUserInput,num_of_tf,priv_num);//,document.getElementById('both'+current_tf_num));
			   }
		   }
		   //go to the next TF when pressenig the arrow buttons
		   if(userInput.length==total_length && cursor_location==total_length)
		   {
			   if((charCode==37 && direction=="rtl") || (charCode==39 && direction=="ltr"))
			   {
			      next_num = current_tf_num+1;
			      nextUserInput = document.getElementById('user_input'+next_num);
			      setFocus(nextUserInput,num_of_tf,next_num);//,document.getElementById('both'+current_tf_num));
			   }
		   }		   
		}//move to the next textfield			
		if(wordPattern.length<1 && charCode!=46 && charCode!=8 && charCode!=16 && charCode!=18 && charCode!=17 && charCode!=37 && charCode!=39)
		{		
		   next_num = current_tf_num+1;
		   nextUserInput = document.getElementById('user_input'+next_num);
		   setFocus(nextUserInput,num_of_tf,next_num);//,document.getElementById('both'+current_tf_num));
	    }
}

function setFocus(new_tf,num_of_tf,new_tf_num)
{
//set anew red border for the current TF
if(new_tf!=null)
{
   new_tf.focus();
   new_tf.style.border = "solid 2px #593477";
   document.getElementById('both'+new_tf_num).style.border = "solid 2px #593477";  
}
//set to rest of the TF a black border
for(var i=0;i<num_of_tf;i++)
{
 userInput = document.getElementById('user_input'+i);
 both_pattern = document.getElementById('both'+i)
 if(userInput!=null && new_tf_num!=i)
 {
    userInput.style.border = "solid 1px #3f6186";
    both_pattern.style.border = "solid 1px #3f6186";    
 }
}
}

function validateSpellSettings(fromLang, toLang,error_message)
{
if(fromLang==toLang)
{
  alert(error_message);
  return false;
}
else
  return true;
}

//open first settings for spell words or sentences  
function showSpellitOption()
{
  var form = document.getElementById('spellitoptions');
  if(form.style.display=="none")  
  {
     form.style.display="";     
  }
  else
  {
   form.style.display="none";
  }
}

function displayKeyboard()
{
var kb = document.getElementById('virtual_keyboard');
if(kb.style.display=="none")  
  {
    kb.style.display="";
  }
  else
  {
    kb.style.display="none";
  }
}

function addChar(event,char,direction,num_of_tf,char_code,isRightClick)
{
	var index;
	for(index=0;index<num_of_tf;index++)
	{
		var text_field= document.getElementById('user_input'+index);
		var value = text_field.value;
		if(value.length<text_field.size)
		   break;	  
	}
	if(value.length<text_field.size)
	{	  
	   if(isRightClick)
	     char = char.toUpperCase();
	   text_field.value+=char;
	   enter_input(event,index,direction,num_of_tf,char_code);
	   setFocus(text_field,num_of_tf,index);	  	
	}
}

function _onMouseIn(button){
button.style.background='#593477';
button.style.color='white';
button.style.border='solid 1px black';
}

function _onMouseOut(button){
button.style.background='';
button.style.color='blue';
button.style.border='solid 1px black';
}
