//var QueryVisualSuggester = Class.create(); 
//QueryVisualSuggester.prototype = Object.extend(new QuerySuggester(), {   
var QueryVisualSuggester = Class.create(QuerySuggester, {	
	initialize: function($super, suggestionUrl, tooltipId, queryId) {
		$super(suggestionUrl, tooltipId, queryId);
		if (this.__enabled) {
			if (this.__query) {
				//Event.observe(this.__query, 'change', this.propertyChange.bind(this), false);	
				//(this.__query).observe('change', this.propertyChange.bind(this)); // <== RIGHT 
				//Event.observe(this.__query, 'change', this.propertyChange.bind(this), false);
				//Event.observe(this.__query, 'propertychange', this.propertyChange.bind(this), false);
				
				/*if(Prototype.Browser.IE) {
					Event.observe(this.__query, 'propertychange', this.propertyChange.bind(this), false);
				} else {
					this.__query.watch("value", this.propertyChange.bind(this));   
				}*/				
			}
		}
		this.__queryValue = this.__query.value;
	},
	
	parseSuggestions : function(matches) {
		var startIndex = matches.indexOf("<!--------");
		if(startIndex >= 0) {
			var endIndex = matches.indexOf("--------->", startIndex);
			var query = matches.substring(startIndex + 10, endIndex);
			matches = matches.substring(endIndex + 10);
			
			startIndex = matches.indexOf("<!--------");
			endIndex = matches.indexOf("--------->", startIndex);
			var pageNo = matches.substring(startIndex + 10, endIndex);
			matches = matches.substring(endIndex + 10);
			
			if(pageNo == "1")
				pageNo = null;
			
			var cacheKey = query + ((pageNo) ? "___pageno=" + pageNo : "");
			
			if(cacheKey != "") {
				this.saveCache(cacheKey, matches);

				this.displaySuggestions(matches, query, pageNo);
			}
		}
	},
	
	displaySuggestions : function(matches, query, pageNo) {
		if(this.__prev != query || (this.__prePageNo != pageNo)) {
			if(this.isDebug()) {
				this.debug(this.id + ":qvs:displaySuggestions:__prev='" + this.__prev + "' query='" + query + "' " +
						"__prePageNo='" + this.__prePageNo + "'  pareNo='" + pageNo + "'");
	    	}
			//this.hide();
	        return;
	    }

		matches = this.trim(matches);
		if (this.__tooltip && this.__query && matches.length > 0) {
			this.buildSuggestionsHtml(matches);
			this.show();
		} else {
			this.hide();
		}
	},
	
	buildSuggestionsHtml : function(matches) {
		this.__tooltip.innerHTML = matches;
		
		if (match = matches.match(/<script[^>]*>(([^<]|\n|\r|<[^\/])+)<\/script>/)) {
			eval.call(window, match[1]);
		}
	},

	mouseClick : function(index) {
		if (!this.__enabled) return;
		
		if (index >= 0) {
			this.updateSuggestions(index, -1);
			this.submitForm(index);
		} else {
		    this.hide();
		}
	},
	
	keyDown : function($super, event) {
		//$super(event);
	},
	
	keyUp : function($super, event) {
		if(this.isDebug()) {
			if(event) 
				this.debug(this.id + ":qvs:keyUp:" + event + ":" + event.keyCode + ": __queryValue: '" + this.__queryValue + "'  __query.value: '" + this.__query.value + "'");
    	}
		
		switch (event.keyCode) {
        case 9 : // Tab
        case 27 : // Escape
            this.hide();
            return;
        /*case 8 : // Backspace
        case 46 : // Delete
            this.__deletePressed = true;
            timeout = 200;
            break;*/
        case 13 : // Enter
        case 16 : // Shift
        case 17 : // Ctrl
        case 18 : // Alt
        case 20 : // Caps Lock
        case 33 : // Page up
        case 34 : // Page down
        case 35 : // End
        case 36 : // Home
        case 37 : // Arrow left
        //case 38 : // Arrow up
        case 39 : // Arrow right
        //case 40 : // Arrow down
        case 45 : // Insert
        case 229 : // onClick
            return;
        default :
            //timeout = 100;
            break;
    }
		
		//$super(event);
		if(this.__queryValue != this.__query.value) {
			this.__queryValue = this.__query.value;
			this.propertyChange(event);
		}
	},
	
	getCaretPosition : function() {
		return this.__query.value.length;
	},
		
	propertyChange : function(event) {
		if(this.isDebug()) {
    		this.debug(this.id + ":qvs:propertyChange");
    	}
		
        if (this.__timeout) {
            clearTimeout(this.__timeout);
            this.__timeout = false;
        }
        
        var timeout = 200;
        this.__index = -1;
        var qc = this;
        this.__timeout = setTimeout(function() {qc.fetchAndDisplaySuggestions();}, timeout);
	},
	
	pageNavigation : function(query, pageNo) {
		if(this.isDebug()) {
    		this.debug(this.id + ":qvs:pageNavigation:query='" + query + "'  pageNo='" + pageNo + "'");
    	}
		this.__query.value = query;
		if(!(pageNo > 1)) {
			pageNo = null;
		}
		
        if (this.__timeout) {
            clearTimeout(this.__timeout);
            this.__timeout = false;
        }
        
        var timeout = 200;
        this.__index = -1;
        var qc = this;
        this.__timeout = setTimeout(function() {qc.fetchAndDisplaySuggestions(pageNo);}, timeout);
	}
	
});