/* <?php apf_require_class('PageHelper'); ?> */
/*
 *  Ajax Autocomplete for Prototype, version 1.0.4
 *  (c) 2010 Tomas Kirda
 *
 *  Ajax Autocomplete for Prototype is freely distributable under the terms of an MIT-style license.
 *  For details, see the web site: http://www.devbridge.com/projects/autocomplete/
 */

var Autocomplete = function(el, options){
	this.el = $(el);
	this.id = this.el.identify();
	this.el.setAttribute('autocomplete','off');
	this.suggestions = [];
	this.commids = [];
	this.areaids = [];
	this.blockids= [];
	this.data = [];
	this.badQueries = [];
	this.selectedIndex = -1;
	this.currentValue = this.el.value;
	this.intervalId = 0;
	this.cachedResponse = [];
	this.instanceId = null;
	this.onChangeInterval = null;
	this.ignoreValueChange = false;
	this.serviceUrl = options.serviceUrl;
	this.options = {
		autoSubmit:false,
	    minChars:1,
	    maxHeight:300,
	    deferRequestBy:0,
	    width:0,
	    container:null,
	    pre:'',
	    next:'',
	    count:''
	};
	if(options){ Object.extend(this.options, options); }
	if(Autocomplete.isDomLoaded){
		this.initialize();
	}else{
		Event.observe(document, 'dom:loaded', this.initialize.bind(this), false);
	}
};

Autocomplete.instances = [];
Autocomplete.isDomLoaded = false;

Autocomplete.getInstance = function(id){
	var instances = Autocomplete.instances;
	var i = instances.length;
	while(i--){ if(instances[i].id === id){ return instances[i]; }}
};

Autocomplete.highlight = function(value, re){
	return value.replace(re, function(match){ return '<strong>' + match + '<\/strong>' });
};

Autocomplete.prototype = {

	killerFn: null,

	initialize: function() {
    	var me = this;
    	this.killerFn = function(e) {
    		if (!$(Event.element(e)).up('.autocomplete')) {
    			me.killSuggestions();
    			me.disableKillerFn();
    		}
    	} .bindAsEventListener(this);

    	if (!this.options.width) { this.options.width = this.el.getWidth(); }

    	var div = new Element('div', { style: 'position:absolute;' });
    	div.update('<div class="autocomplete-w1" style="position:relative;width:300px;"><iframe id="autocomplete-iframe" frameborder="0" scrolling="no" style="height:0px;position:absolute;z-index:10px;width:290px;left:0px;"></iframe><div class="autocomplete-w2"><div class="autocomplete" id="Autocomplete_' + this.id + '" style="display:none; width:' + this.options.width + 'px;position:relative;z-index:900px;"></div></div><div id="autocomplete-w3" class="autocomplete-w3" style="display:none;"></div>');

    	this.options.container = $(this.options.container);
    	if (this.options.container) {
    		this.options.container.appendChild(div);
    		this.fixPosition = function() { };
    	} else {
    		document.body.appendChild(div);
    	}

	    this.mainContainerId = div.identify();
	    this.container = $('Autocomplete_' + this.id);
	    this.fixPosition();
    
	    Event.observe(this.el, window.opera ? 'keypress':'keydown', this.onKeyPress.bind(this));
	    Event.observe(this.el, 'keyup', this.onKeyUp.bind(this));
	    Event.observe(this.el, 'blur', this.enableKillerFn.bind(this));
	    Event.observe(this.el, 'focus', this.fixPosition.bind(this));
	    this.container.setStyle({ maxHeight: this.options.maxHeight + 'px' });
	    this.instanceId = Autocomplete.instances.push(this) - 1;
  	},

  	fixPosition: function() {
  		var offset = this.el.cumulativeOffset();
  		$(this.mainContainerId).setStyle({ top: (offset.top + this.el.getHeight() + 5) + 'px', left: offset.left + 'px' });
  	},

  	enableKillerFn: function() {
  		if(this.next != 1){
  			Event.observe(document.body, 'click', this.killerFn);
  		}
  	},

  	disableKillerFn: function() {
  		Event.stopObserving(document.body, 'click', this.killerFn);
  	},

  	killSuggestions: function() {
	    this.stopKillSuggestions();
	    this.intervalId = window.setInterval(function() { this.hide(); this.stopKillSuggestions(); } .bind(this), 300);
  	},

  	stopKillSuggestions: function() {
  		window.clearInterval(this.intervalId);
  	},

  	onKeyPress: function(e) {
  		if (!this.enabled) { return; }
  		// return will exit the function
  		// and event will not fire
  		switch (e.keyCode) {
  			case Event.KEY_ESC:
  				this.el.value = this.currentValue;
  				this.hide();
  				break;
  			case Event.KEY_TAB:
  			case Event.KEY_RETURN:
  				if (this.selectedIndex === -1) {
  					this.hide();
  					return;
  				}
  				this.select(this.selectedIndex);
  				if (e.keyCode === Event.KEY_TAB) { return; }
  				break;
  			case Event.KEY_UP:
  				this.moveUp();
  				break;
  			case Event.KEY_DOWN:
  				this.moveDown();
  				break;
  			default:
  				return;
  		}
  		Event.stop(e);
  	},

  	onKeyUp: function(e) {
  		switch (e.keyCode) {
  			case Event.KEY_UP:
  			case Event.KEY_DOWN:
  				return;
  		}
  		clearInterval(this.onChangeInterval);
  		if (this.currentValue !== this.el.value) {
  			if (this.options.deferRequestBy > 0) {
  				// Defer lookup in case when value changes very quickly:
  				this.onChangeInterval = setInterval((function() {
  					this.onValueChange();
  				}).bind(this), this.options.deferRequestBy);
  			} else {
  				this.onValueChange();
  			}
  		}
  	},

  	onValueChange: function() {
  		clearInterval(this.onChangeInterval);
  		this.currentValue = this.el.value;
  		this.selectedIndex = -1;
  		if (this.ignoreValueChange) {
  			this.ignoreValueChange = false;
  			return;
  		}
  		if (this.currentValue === '' || this.currentValue.length < this.options.minChars) {
  			this.hide();
  		} else {
  			this.getSuggestions();
  		}
  	},

  	getSuggestions: function(page, flg) {
  		var page = page || 0;
  		var cr = this.cachedResponse[this.currentValue+"_"+page];
  		if (cr && Object.isArray(cr.suggestions)) {
  			this.suggestions = cr.suggestions;
  			this.data	= cr.data;
  			this.pre 	= cr.pre;
	    	this.next 	= cr.next;
	    	this.count	= cr.count;
	    	this.commids = cr.commids;
	    	this.areaids = cr.areaids;
	    	this.blockids = cr.blockids;
  			this.suggest(flg);
  		} else if (!this.isBadQuery(this.currentValue)) {
  			new Ajax.Request(this.serviceUrl, {
  				parameters: { query: this.currentValue, p: page },
  				onComplete: function(response){this.processResponse(response, page, flg)}.bind(this),
  				method: 'get'
  			});
  		}
  	},

  	isBadQuery: function(q) {
  		var i = this.badQueries.length;
  		while (i--) {
  			if (q.indexOf(this.badQueries[i]) === 0) { return true; }
  		}
  		return false;
  	},

  	hide: function() {
	    this.enabled = false;
	    this.selectedIndex = -1;
	    this.container.hide();
	    $('autocomplete-w3').hide();
		$("autocomplete-iframe").setStyle({ height:'0px'});
		$("autocomplete-iframe").hide();
  	},

  	suggest: function(flg) {
	    if (this.suggestions.length === 0) {
	    	this.hide();
	    	$("autocomplete-iframe").setStyle({ height:'0px'});
	    	$("autocomplete-iframe").hide();
	    	return;
	    }
	    $("autocomplete-iframe").show();
	    var content = [];
	    //var re = new RegExp('\\b' + this.currentValue.match(/\w+/g).join('|\\b'), 'gi');
	    this.suggestions.each(function(value, i) {
	    	commname = value.replace(/<span>.*<\/span>/gi, '');
	    	if(flg==true){
	    		content.push('<div', ' title="', commname, '" onclick="Autocomplete.instances[', this.instanceId, '].select(', i, ');" onmouseover="Autocomplete.instances[', this.instanceId, '].activate(', i, ');">', value, '</div>');
	    	}else{
	    		content.push((this.selectedIndex === i ? '<div class="selected"' : '<div'), ' title="', commname, '" onclick="Autocomplete.instances[', this.instanceId, '].select(', i, ');" onmouseover="Autocomplete.instances[', this.instanceId, '].activate(', i, ');">', value, '</div>');
	    	}
	    } .bind(this));
	    this.enabled = true;
	    //this.container.show();
	    //this.container.innerHTML = content.join('');
	    this.container.update(content.join('')).show();
	    //autocomplete-iframe
	    var offset = this.el.cumulativeOffset();
  		$("autocomplete-iframe").setStyle({ height:this.container.getHeight() + 'px'});
	    // 清空小区值
	    $(this.options.htmlid+'_commid').value = '';
	    $(this.options.htmlid+'_comm_type').value = '';
	    this.multiPage();
  	},

  	processResponse: function(xhr, page, flg) {
  		var page = page || 0;
	    var response;
	    try {
	      	response = xhr.responseText.evalJSON();
	      	if (!Object.isArray(response.data)) { response.data = []; }
	    } catch (err) { return; }
	    this.cachedResponse[response.query+"_"+page] = response;
	    if (response.suggestions.length === 0) { this.badQueries.push(response.query); }
	    if (response.query === this.currentValue) {
	    	this.suggestions	= response.suggestions;
	    	this.data 			= response.data;
	    	this.pre 			= response.pre;
	    	this.next 			= response.next;
	    	this.count			= response.count;
	    	this.commids		= response.commids;
	    	this.areaids		= response.areaids;
	    	this.blockids		= response.blockids;
	    	this.suggest(flg); 
	    }
  	},

  	activate: function(index) {
	    var divs = this.container.childNodes;
	    var activeItem;
	    // Clear previous selection:
	    if (this.selectedIndex !== -1 && divs.length > this.selectedIndex) {
	    	divs[this.selectedIndex].className = '';
	    }
	    this.selectedIndex = index;
	    if (this.selectedIndex !== -1 && divs.length > this.selectedIndex) {
	      	activeItem = divs[this.selectedIndex]
	      	activeItem.className = 'selected';
	    }
	    return activeItem;
  	},

  	deactivate: function(div, index) {
  		div.className = '';
    	if (this.selectedIndex === index) { this.selectedIndex = -1; }
  	},

  	select: function(i) {
  		this.clickComm();
	    var selectedValue = this.suggestions[i];
	    commname = selectedValue.replace(/<span>.*<\/span>/gi, '');
	    var address = selectedValue.replace(/(.*?)<span>/gi, '');
	    address = address.replace(/<\/span>/gi, '').strip();
	    if (commname) {
	    	if(address){
	    		$(this.options.htmlid+"_f47").value = address;
	    		var f4 = this.options.htmlid+"_f47";
	    		if($(f4).hasClassName('red_color')){
	    			$(f4).removeClassName('red_color');
	    		}
	    		if($(f4).hasClassName('blue_color')){
	    			$(f4).removeClassName('blue_color');
	    		}
	    		$(this.options.htmlid+"_err_f47").update("<span class='okinfo'>&nbsp;&nbsp;</span>");
	    	}
	    	if(this.commids[i] > 0){
	    		$(this.options.htmlid+'_commid').value = this.commids[i];
	    	}
	    	if(this.areaids[i]){
	    		var area = $(this.options.htmlid+'_f3');
	        	var len = area.length;
	          	for (var j = 0; j < len; j++) {
	          		if(area[j].value == this.areaids[i]){
	          			area.options[j].selected = true;
	          			break;
	          		}
	          	}
	          	obj.getBlockList(this.areaids[i], this.options.cityid, 'option', this.blockids[i]);
	          	//$(this.options.htmlid+"_err_f4").update("<div class='my_prop_okinfo'>&nbsp;&nbsp;</div>");
	    	}
	    	this.el.value = commname;
	    	if (this.options.autoSubmit && this.el.form) {
	    		this.el.form.submit();
	      	}
	    	this.ignoreValueChange = true;
	    	this.hide();
	    	this.onSelect(i);
	    	// 小区选中ok
	    	// $(this.options.htmlid+"_err_f6").update("<div class='my_prop_okinfo'>&nbsp;&nbsp;</div>");
	    	$("autocomplete-iframe").setStyle({ height:'0px'});
	    }
  	},
  	
  	clickComm:function(){
  		id = this.options.htmlid+"_f6";
  		if($(id).hasClassName('red_color')){
			$(id).removeClassName('red_color');
		}
		if($(id).hasClassName('blue_color')){
			$(id).removeClassName('blue_color');
		}
		$(this.options.htmlid+"_err_f6").innerHTML = "<span class='okinfo'>&nbsp;&nbsp;&nbsp;</span>";
  	},

  	moveUp: function() {
	    if (this.selectedIndex === -1) { return; }
	    if (this.selectedIndex === 0) {
	    	this.container.childNodes[0].className = '';
	      	this.selectedIndex = -1;
	      	this.el.value = this.currentValue;
	      	return;
	    }
	    this.adjustScroll(this.selectedIndex - 1);
  	},

  	moveDown: function() {
  		if (this.selectedIndex === (this.suggestions.length - 1)) { return; }
  		this.adjustScroll(this.selectedIndex + 1);
  	},

  	adjustScroll: function(i) {
	    var container = this.container;
	    var activeItem = this.activate(i);
	    var offsetTop = activeItem.offsetTop;
	    var upperBound = container.scrollTop;
	    var lowerBound = upperBound + this.options.maxHeight - 25;
	    if (offsetTop < upperBound) {
	    	container.scrollTop = offsetTop;
	    } else if (offsetTop > lowerBound) {
	    	container.scrollTop = offsetTop - this.options.maxHeight + 25;
	    }
	    var html = this.suggestions[i];
	    html = html.replace(/<span>.*<\/span>/gi, '');
	    this.el.value = html;
  	},

  	onSelect: function(i) {
  		(this.options.onSelect || Prototype.emptyFunction)(this.suggestions[i], this.data[i]);
  	},
  	
  	multiPage: function(){
  		$("autocomplete-w3").innerHTML = '';
  		var mp = '';
  		if(this.pre != '-1' || this.next != '-1'){
	  		if(this.pre != '-1'){
	  			mp += '<span><a href="javascript:void(0)" hidefocus="true" onclick="Autocomplete.instances['+this.instanceId+'].getSuggestions('+this.pre+','+true+');">上一页</a><img src="http://pages.haozu.com/img/icon/icon_gray_down_18x16.gif" /></span>';
	  		}else{
	  			mp += '<span>上一页<img src="http://pages.haozu.com/img/icon/icon_gray_down_18x16.gif" /></span>';
	  		}
	  		var first = (this.pre==-1)?1:(this.pre+2);
	  		mp += '<span>'+first+'/'+this.count+'</span>';
	  		if(this.next != '-1'){
	  			mp += '<span><a href="javascript:void(0)" hidefocus="true" onclick="Autocomplete.instances['+this.instanceId+'].getSuggestions('+this.next+','+true+');">下一页</a><img src="http://pages.haozu.com/img/icon/icon_gray_up_18x16.gif" /></span>';
	  		}else{
	  			mp += '<span>下一页<img src="http://pages.haozu.com/img/icon/icon_gray_up_18x16.gif" /></span>';
	  		}
  		}
  		if(mp != ''){
  			var heightdiv = this.container.getHeight()+34;
  			$("autocomplete-iframe").setStyle({ height:heightdiv + 'px'});
  			$('autocomplete-w3').show();
  			$(this.container).style.borderBottom="0";
  		}else{
  			$('autocomplete-w3').hide();
  			$(this.container).style.borderBottom="1px solid #999";
  		}
  		new Insertion.Bottom('autocomplete-w3', mp);
  	}
};

Event.observe(document, 'dom:loaded', function(){ Autocomplete.isDomLoaded = true; }, false);