var AutoCompleteCart = Class.create(
	{
	  objectName: '',
	  inputId: '',
	  input: null,
	  urlQueryString: '',
	  selectedElement: null,
	  div:'',
	  currentID:'',
	  
	  
	  //==========================================
	  //===============   INIT   =================
	  //==========================================
	  initialize: 
	  function( objectName, inputId, urlQueryString, divHeight )
		{
			this.objectName = objectName;
			this.inputId 		= inputId;	
			this.urlQueryString = urlQueryString;
			this.input			= $(inputId);
			this.input.writeAttribute( 'autocomplete', 'off' );
			
			this.searchTerm			= this.input.value;
			
			this.initializeEvents();		
			this.initializeDiv( divHeight );
			
		},
		
		
		
	   initializeEvents : 
	   function()
		{
			this.input.observe( 'click', 	this.inputClick.bind(this) );
			this.input.onkeydown 	= 	this.inputKeyDown.bind(this);
			this.input.onkeyup 		= 	this.inputKeyUp.bind(this);
			this.input.observe( 'blur', 	this.inputBlur.bind(this) );
		},
		
	   
	   
	   initializeDiv : 
	   function( divHeight )
		{
			inputOffset = this.input.viewportOffset();
			this.div = new Element( 'div' );
			this.div.addClassName( 'comboBoxContainerSearch' );
			this.div.style.width = ( this.input.getWidth() - 6 ) + 'px';
			this.div.style.height = divHeight;
			this.div.style.left = inputOffset.left + 'px';
			this.div.style.top  = ( inputOffset.top + this.input.getHeight() ) + 'px';
			this.div.hide();
			$('footer').insert( { 'after' : this.div } );
		},
		
		
	   //==========================================
	   //===========   INPUT EVENTS   =============
	   //==========================================
	   inputClick:
	   function( event )
		{
			this.updateList( event );
		},
		
	   inputKeyUp:
	   function( e )
		{
			 if(e){
				  e = e
			 } else {
				  e = window.event
			 }

			 if(e.which){
				  var keyCode = e.which
			 } else {
				  var keyCode = e.keyCode
			 }
			
			if( keyCode == Event.KEY_DOWN )
			{
				this.selectNextItem( );
				return;
			}
			
			if( keyCode == Event.KEY_UP )
			{
				this.selectPreviousItem( );
				return;
			}
			
			if( keyCode == Event.KEY_RETURN )
			{
				return;
			}
			
			this.searchTerm = this.input.value;
			this.selectedElement = null;
			this.updateList( e );
		},
		
		inputKeyDown:
	   function( e )
		{
			if(e){
				  e = e
			 } else {
				  e = window.event
			 }

			 if(e.which){
				  var keyCode = e.which
			 } else {
				  var keyCode = e.keyCode
			 }
			 
			if( keyCode == Event.KEY_RETURN )
			{
				this.setInputValue();
				return false;
			}
		},
		
		
	   inputBlur:
	   function( )
		{
			setTimeout( this.hideDiv.bind(this), 200 );
		},
		
		
		
		
	   //==========================================
	   //===========   ITEMS EVENTS   =============
	   //==========================================
		
		itemMouseOver:
		function( event )
		{
			this.selectItem( Event.element(event) );			
		},
		
		itemMouseOut:
		function( event )
		{
			this.deselectItem( Event.element(event) );			
		},
		
		
		itemKeyUp:
		function( event )
		{
			//var element = Event.element(event);
			//element.removeClassName( 'itemMouseOver' );
		},
		
		
		itemClick:
		function( event )
		{
			this.setInputValue();
		},
		
		
		
		
		
		
		selectNextItem:
		function( )
		{
			this.div.show();
			if( this.selectedElement == null )
			{
				this.selectItem( this.div.firstDescendant() );
			}
			else
			{
				this.selectItem( this.selectedElement.next() );
			}
		},
		
		
		selectPreviousItem:
		function( )
		{
			if( this.selectedElement == null )
			{
				return; 
			}
			else
			{
				this.selectItem( this.selectedElement.previous() );
			}
		},
		
		
		
		selectItem:
		function( element )
		{
			
			if( element == null ) return;
			
			if( this.selectedElement != null )
			{
				this.deselectItem( this.selectedElement );	
			}
			
			element.addClassName( 'itemMouseOver' );
			this.selectedElement = element; 
			
			elementPosition 		= this.selectedElement.positionedOffset();
			
			if( elementPosition.top + this.selectedElement.getHeight() > parseInt( this.div.scrollTop ) + this.div.getHeight() )
			{
				this.div.scrollTop 	= Math.max( 0, elementPosition.top + this.selectedElement.getHeight() - this.div.getHeight() );
			}
			
			if( elementPosition.top < parseInt( this.div.scrollTop ) )
			{
				this.div.scrollTop 	= elementPosition.top;
			}
			
			
		},
		
		
		deselectItem:
		function( element )
		{
			if( element != null )
				element.removeClassName( 'itemMouseOver' );
		},
		
		
		setInputValue:
		function( )
		{
			if( this.selectedElement == null ) return;
			
			this.input.value 		= this.selectedElement.innerHTML;
			this.currentID 			= this.selectedElement.readAttribute( 'optionvalue' );
			
			$('search_cart_product_id').value = this.currentID;
			
			this.hideDiv();
			return false;
		},
		
		
		addValue:
		function( )
		{
			
		},
		
				
		
		
		
	   //==========================================
	   //===========   CONTENT   ==================
	   //==========================================
	   updateList:
	   function( event )
		{
			this.getValues();
		},
		
		
		getValues:
		function()
		{
			var urlParams =  this.urlQueryString + '&searchTerm=' + this.searchTerm;
				
			var thisObject = this;
			
			req = new Ajax.Request(WS_ROOT + '/ajax.php', {
							 evalJSON  : true,	   
							 method    : 'post',
 							 parameters: urlParams,
							 onSuccess : function(transport) 
						  				{
											thisObject.displayValues( transport.responseJSON );
							  			}
							});
		},
		
		
		displayValues:
		function( responseJSON ) 
		{  
			var values = responseJSON.values;
			var nrValues = responseJSON.nrValues;
			
			var thisObject = this;
			
			this.div.update();
						
			if( nrValues > 0 )
			{
				values.each(
								function(o)
								{
									var newDiv = new Element( 'div' );
									newDiv.addClassName( 'comboBoxItem' );
									newDiv.writeAttribute( 'optionvalue', o.value );
									//newDiv.style.width = ( thisObject.input.getWidth() - 6 ) + 'px';
									newDiv.update( o.name.toString() );
									newDiv.observe( 'mouseover', thisObject.itemMouseOver.bind(thisObject) );
									newDiv.observe( 'mouseout', thisObject.itemMouseOut.bind(thisObject) );
									newDiv.observe( 'keyup', thisObject.itemKeyUp.bind(thisObject) );
									newDiv.observe( 'click', thisObject.itemClick.bind(thisObject) );
									thisObject.div.insert( newDiv );
								}
							);
				this.showDiv();
			}
			else
				this.hideDiv();

				
			this.div.style.width = this.input.getWidth();
		},
		
		
		
		
		
		showDiv:
		function()
		{
			this.div.show();
			this.div.scrollTop = 0;
		},
		
		
		
		hideDiv:
		function()
		{
			this.div.hide();
			
			this.deselectItem( this.selectedElement );
			this.selectedElement = null;
		}
	}
	 
);