/********************************************
***             GD AUTOCOMPLETER          ***
********************************************/

 var gd_autocompleter = new Class({
	options: {
		minLength: 2,
		className: 'mouseover',
		url: "json.aspx?val="
	},

	initialize: function(el, result, valueField, options) {
		this.setOptions(options);
		this.element = el;
		this.results = result;
		this.valueField = valueField;

		this.upit_selected = -1;
		this.upit_results = 0;
		this.query = "";
		this.url = this.options.url;

		this.periodical = "";

		this.ieORwebkit = (window.ie || window.webkit420 | window.webkit419);

		this.build();
	},

	build: function(){
		this.element.setAttribute("res", this.element.value);
        this.element.setProperty("autocomplete", "off");
        
		this.element.addEvent(this.ieORwebkit ? 'keydown' : 'keypress', this.handleKey.bindWithEvent(this) );
		this.element.addEvent("blur", function(){
			this.results.setStyle("display", "none");
		}.bind(this));
		

		this.element.addEvent("keyup", function(e){
			var e = new Event(e);
			//alert(e.code);
			if(this.element.value == "") this.valueField.value=""
			if(this.valueField.value!=""){
				this.element.setStyle("border", "1px solid #0F0")
			}
			else{
				this.element.setStyle("border", "1px solid #F00")
			}
			if((e.key.length==1 || e.key=="backspace" || e.key=="delete") && e.code != 16){
				this.valueField.value="";
				if (this.element.value.length>1){
				    this.query = this.element.value;
					$clear(this.periodical);
					this.periodical = this.fnAjax.bind(this).periodical(500);
				}
				else{
					this.results.setStyle("display", "none");
					this.valueField.value="";
				}
				return;
			}
		}.bind(this))
		
		this.results.addEvent("focus", function(){
			this.results.setStyle("display", "block");
		}.bind(this));

	},

	handleKey: function(e){
		var e = new Event(e);
		if(e.key && !e.shift && !e.control) switch(e.key){

			case "enter":
				e.stop();
				if(this.valueField.value!="") {
					this.element.setStyle("border", "1px solid #0F0");
				}
				else{
					this.element.setStyle("border", "1px solid #F00");
				}
				this.results.setStyle("display", "none");
				return;
			case "up":
				e.stop();
				this.upit_selected--;
				if(this.upit_selected<0) this.upit_selected = 0;
				this.moveSelection(this.upit_selected, this.element, this.valueField);
				return;
			case "down":
				e.stop();
				this.upit_selected++;
				if(this.upit_selected>this.upit_results-1) this.upit_selected = this.upit_results-1;
				this.moveSelection(this.upit_selected, this.element, this.valueField);
				return;
			case "esc":
				e.stop();
				this.results.setStyle("display", "none");
				return;
			default:
			    return;
		}

	},

	moveSelection: function(indx, source, target) {
        $$("div.rezultati" + target.id).each(function(el){
			if(el.getProperty("cnt")==indx) {
				source.value = el.getAttribute("res2"); //this.element
				target.value = el.getAttribute("res");  //this.valueField
				el.addClass("mouseover");
			}
			else{
				el.removeClass("mouseover");
			}
		})
	},

	addInfo: function(lista){
		var rr = "";
		var i = 0;
		var upit = this.query;
		var re = new RegExp(upit, "gi");		
		upit_selected = -1;
		//var value_div = this.element.id;
		lista.each(function(val){
			try{
			//	if(this.query==this.valueField) {
					rr += "<div class='rezultati" + this.valueField.id +"' res='" + val.id + "' res2='" + val.naziv + "' cnt=" + i + ">" + val.naziv + "</div>";
			//	}
				i++;
			}
			catch(e){}

		}.bind(this));
		this.upit_results = i;
		if(i<1){ //nema rezultata
			rr = "<div class='rezultati" + this.valueField.id + "' res='' res2='' cnt='0'>Ne postoji</div>"
		}
		this.results.empty().innerHTML = rr;
		$$("div.rezultati"+this.valueField.id).each(function(el){
			el.setStyle("cursor", "pointer");
			el.addEvents({
				"click" : function(){
					if(el.getAttribute("res")!="") {
						this.valueField.value = el.getAttribute("res");
						this.element.value = el.getAttribute("res2");
						this.valueField.addClass("classic");
					}
					else{
						this.element.setStyle("border", "1px solid #F00");
					}
					this.results.setStyle("display", "none");


				}.bind(this),
				"mouseover" : function(){
					this.valueField.value = el.getAttribute("res");
					this.element.value = el.getAttribute("res2");
					this.element.setStyle("border", "1px solid #0F0");
					$$("div.rezultati"+this.valueField.id).each(function(el){
						if(el.getProperty("cnt")==upit_selected) el.removeClass("mouseover");
					})
					upit_selected=el.getProperty("cnt");
					el.addClass("mouseover");

				}.bind(this),
				"mouseout" : function(){el.removeClass("mouseover");}
			})
			if(this.upit_results==1){
				this.valueField.value = el.getAttribute("res");
				this.element.value = el.getAttribute("res2");
				this.results.setStyle("display", "none");
				this.element.setStyle("border", "1px solid #0F0");
			};
			if(el.getAttribute("res2").toUpperCase()==upit.toUpperCase()){
				this.valueField.value = el.getAttribute("res");
				this.element.value = el.getAttribute("res2");
				this.results.setStyle("display", "none");
				this.element.setStyle("border", "1px solid #0F0");
			};
		}.bind(this))
	},

	fnAjax : function(){
		var upit = this.query;
		var re = /%u([0-9a-fA-F]{4})/g;
  		upit = upit.replace(re, function(m){return this.zamijeni(m)}.bind(this));
		$clear(this.periodical);
		if (upit.length>this.options.minLength-1){
			this.results.setStyle("display", "block");
			var url = this.url + escape(upit);
			this.results.empty().innerHTML = "<img src='img/spinner.gif' />...";
			var request = new Json.Remote(url, {
				onComplete: function(json) {this.addInfo(json.Lista)}.bind(this)
			}).send();

		}
	},

	zamijeni: function(x){
        x = x.replace("%u","");
		return escape("&#" + parseInt("0x" + x, 16) + ";");
	}
});

gd_autocompleter.implement(new Options, new Events);