// JavaScript Document
function SuggestionControl(oTB,oData)
{
	
	this.textBox=oTB;
    this.source=oData;
    
    this.userText=this.textBox.value;
	this.data=this.source.value;
	
	this.layer=null;
	this.cur=-1;
	this.init();	
}

//-------------------------------------------------------------------------------------------------------------------
SuggestionControl.prototype.init=function()
{
  oThis=this;
  
  this.textBox.onkeyup=function(oEvent)
  {
	oEvent=oEvent||window.event;
	var iKeyCode=oEvent.keyCode;
    oThis.userText=this.value;
    alert(oThis.data);
    if(iKeyCode==8 ||iKeyCode==46)
  	  oThis.requestSuggestion(false);  
    else if( (iKeyCode!=16 && iKeyCode<32) || (iKeyCode>=33 && iKeyCode<=46) || (iKeyCode>=112 && iKeyCode<=123));
    else
      oThis.requestSuggestion(true);
	
	
	
  };
  this.textBox.onkeydown=function(oEvent)
  {
	oEvent=oEvent || window.event;
	oThis.handleKeyDown(oEvent);
  };
  this.textBox.onblur=function()
  {
	  oThis.hideSuggestion();
  };
  this.createDropDown();  
}
//-------------------------------------------------------------------------------------------------------------------
SuggestionControl.prototype.handleKeyDown=function(oEvent)
{
  switch (oEvent.keyCode)
  {
	case 38://UP
			 this.gotoSuggestion(-1);
			 break;
	case 40://DOWN
			 this.gotoSuggestion(1);
			 break;
	case 27: //ESC
	    	 this.textBox.value=this.userText;
			 this.selectRange(this.userText.length,0);
			 break;
	case 13: //ENTER 
			 this.hideSuggestion();
			 oEvent.returnValue=false;
			 if(oEvent.preventDefault)
			    oEvent.preventDefault();
			break;	
   }
}
//-------------------------------------------------------------------------------------------------------------------
SuggestionControl.prototype.handleKeyUp=function(oEvent)
{
  var iKeyCode=oEvent.keyCode;
  this.userText=this.textBox.value;
  oThis=this;
  if(iKeyCode==8 ||iKeyCode==46)
  	oThis.requestSuggestion(false);  
  else if( (iKeyCode!=16 && iKeyCode<32) || (iKeyCode>=33 && iKeyCode<=46) || (iKeyCode>=112 && iKeyCode<=123));
  else
    oThis.requestSuggestion(true);
}
//-------------------------------------------------------------------------------------------------------------------
SuggestionControl.prototype.autoSuggest=function(aSuggestions,bTypeAhead)
{
  this.cur=-1;	
  alert(aSuggestions);
  if(aSuggestions.length>0)
	{
	  if(bTypeAhead)
	    this.typeAhead(aSuggestions[0]);
	  this.showSuggestion(aSuggestions);
	}
  else
     this.hideSuggestion();
}
//-------------------------------------------------------------------------------------------------------------------
SuggestionControl.prototype.typeAhead=function(sSuggestion)
{
  if(this.textBox.createTextRange || this.textBox.setSelectionRange)
  {
	this.textBox.value=sSuggestion;
	this.selectRange(this.userText.length,sSuggestion.length);
  }
}
//-------------------------------------------------------------------------------------------------------------------
SuggestionControl.prototype.showSuggestion=function(aSuggestions)
{
  this.layer.innerHTML="";
  
  if(aSuggestions.length >=5)//if records are more than 5 set the box height to 80px let's it be scroolable
    this.layer.style.height="80px";
  else
    this.layer.style.height="";//else just leave it as dynamic height
  
  for(var i=0;i<aSuggestions.length;i++)
  {
	var oDiv=document.createElement("div");
	oDiv.appendChild(document.createTextNode(aSuggestions[i]));
	this.layer.appendChild(oDiv);
  }
  this.layer.style.left=this.getLeft()+"px";
  this.layer.style.top=this.getTop()+20+"px";
  this.layer.style.display="block";
}
//-------------------------------------------------------------------------------------------------------------------
SuggestionControl.prototype.createDropDown=function()
{
 	var oDiv=document.createElement("div");
	this.layer=oDiv;
	this.layer.style.dispaly="block";
	this.layer.className="suggestion";
	this.layer.style.width=this.textBox.offsetWidth+"px";
	document.body.appendChild(this.layer);
	oThis=this;
	this.layer.onmousedown=this.layer.onmouseover =this.layer.onmouseup =function(oEvent)
	{
	  oEvent=oEvent||window.event;
	  oTarget=oEvent.target ||oEvent.srcElement; //who fired the event
	  if(oTarget!=this) //this <=> oThis.layer
	  {
		
	  	if(oEvent.type=="mousedown" ) // make sure event fire on child just div ,so we can scroll down
	   	  {
		    oThis.textBox.value=oTarget.firstChild.nodeValue;
			oThis.hideSuggestion();
	      }
	    else if(oEvent.type=="mouseover")
	       	oThis.highLightSuggestionNode(oTarget);
	  	
	  }	
	};
};
//-------------------------------------------------------------------------------------------------------------------
SuggestionControl.prototype.gotoSuggestion=function(iDir)
{
 var aSuggestions=this.layer.childNodes;
 if(aSuggestions.length)
   {
	 var oNode=null;  
	 if(iDir>0)
	  {
		if(this.cur<aSuggestions.length-1)
			 oNode=aSuggestions[++this.cur];
	  }
	else
	  {
	    if(this.cur>0)
	      oNode=aSuggestions[--this.cur];
	  }
	if(oNode)
	  {
	    this.highLightSuggestionNode(oNode);
	    this.textBox.value=oNode.firstChild.nodeValue;
	  }
   }
};
//-------------------------------------------------------------------------------------------------------------------
SuggestionControl.prototype.hideSuggestion=function()
{
  this.layer.style.display="none";	
};
//--------------------------------------------------------------------------------------------------------------------
SuggestionControl.prototype.getLeft=function()
{
   var iLeft=0;
   var oCurrentNode=this.textBox;
   while(oCurrentNode!=document.body)
      {
		   iLeft+=oCurrentNode.offsetLeft;
		   oCurrentNode=oCurrentNode.offsetParent;
	  }
   return iLeft;	  
};
//--------------------------------------------------------------------------------------------------------------------
SuggestionControl.prototype.getTop=function()
{
   var iTop=0;
   var oCurrentNode=this.textBox;
   while(oCurrentNode!=document.body)
      {
		   iTop+=oCurrentNode.offsetTop;
		   oCurrentNode=oCurrentNode.offsetParent;
	  }
   return iTop;	  
};
//--------------------------------------------------------------------------------------------------------------------
SuggestionControl.prototype.highLightSuggestionNode=function(oNode)
{
	 var iLength=this.layer.childNodes.length;
	 for(var i=0;i<iLength;i++)
	   {
		 if(this.layer.childNodes[i]==oNode)
		 {
		   oNode.className="current";
		   this.cur=i;
		 }
		 else if(this.layer.childNodes[i].className=="current")
		   this.layer.childNodes[i].className="";
	   }
};
//--------------------------------------------------------------------------------------------------------------------
SuggestionControl.prototype.selectRange=function(iStart,iEnd)
{
  if(this.textBox.setSelectionRange)
     this.textBox.setSelectionRange(iStart,iEnd);
  else if(this.textBox.createTextRange)
   {
	   oRange=this.textBox.createTextRange();
	   oRange.moveStart("character",iStart);
	   oRange.moveEnd("character",iEnd-this.textBox.value.length);
	   oRange.select();
   }
  this.textBox.focus();     
};
//-----------------------------------------------------------------------
SuggestionProvider=function()
{
	
}
//-------------------------------------------------------------------------------------------------------------------
SuggestionControl.requestSuggestion=function(bTypeAhead)
{
	var text=this.userText;
	alert(text);
	alert(this.data);
	if(text=="")
	  return;
	var dataShow=[];
	for(var i=0;i<this.data.length;i++)
	  if(this.data[i].indexOf(text)==0)
	  {
	  	dataShow.push(this.data[i]);
	  }
	dataShow.sort();
	this.autoSuggest(dataShow,bTypeAhead);
};
//--------------------------------------------------------------------------------------------------------------------