var Autoobj = new Array();
var currentIndicator;

var genresSelect = Class.create();
genresSelect.prototype = {
	initialize: function(container, prefix, id) {
		var tmp = genresTpl.evaluate({prefix:prefix,cnt:id});
		$(container).insert(tmp, $(container));
	}
};

var genresSelect2 = Class.create();
genresSelect2.prototype = {
	initialize: function(container, prefix, id) {
	    while($('genre'+id)){
	       id++;
	    }
		var tmp = genresTpl2.evaluate({prefix:prefix,cnt:id});
		$(container).insert(tmp, $(container));
	}
};

var filterSelectIndex = Class.create();
filterSelectIndex.prototype = {
	initialize: function(container, prefix, id, defValue) {
		this.zInd = 1000-parseInt(id,10);
		var tpl = new Template(
			'<div id="inputControl#{id}" class="inputControlIndex">'+
			' <input type="text" name="#{prefix}#{id}" id="#{prefix}#{id}" value="#{val}" class="inputControl" onfocus="if (this.value == \'Enter City\') this.value = \'\';" />'+
			' <div id="reqIndicator#{id}" class="indicator" style="display:none;"><img src="/img/progress.gif" width="16" height="16" border="0" /></div>'+
			'</div>'+
			'<div id="autocmpl#{id}" class="autocompleter" style="z-index:#{zInd};display:block;"></div>');
		var tmp = tpl.evaluate({prefix:prefix,id:id,val:defValue,zInd:this.zInd});
		$(container).insert(tmp, $(container));
		this.element = prefix+id;
		this.completer = 'autocmpl'+id;
		$('autocmpl'+id).setStyle({zIndex: this.zInd});
		Autoobj[this.element] = new Ajax.Autocompleter(this.element, this.completer, "/utils/ajax_search_dj2_controller?action=listZIP", {minChars: 1, paramName:'val', updateElement: this.updateElement, parameters: 'id='+this.element, indicator:'reqIndicator'+id});
		//this.element = $(prefix+id);
	}
};

var filterSelect = Class.create();
filterSelect.prototype = {
	initialize: function(container, prefix, id, defValue) {
		this.zInd = 1000-parseInt(id,10);
		var tpl = new Template(
			'<div id="inputControl#{id}" class="inputControl">'+
			' <input type="text" name="#{prefix}#{id}" id="#{prefix}#{id}" value="#{val}" class="inputControl" onfocus="if (this.value == \'Enter City\') this.value = \'\';" />'+
			' <div id="reqIndicator#{id}" class="indicator" style="display:none;"><img src="/img/progress.gif" width="16" height="16" border="0" /></div>'+
			'</div>'+
			'<div id="autocmpl#{id}" class="autocompleter" style="z-index:#{zInd};"></div>'
			);
		var tmp = tpl.evaluate({prefix:prefix,id:id,val:defValue,zInd:this.zInd});
		$(container).insert(tmp, $(container));
		this.element = prefix+id;
		this.completer = 'autocmpl'+id;
		$('autocmpl'+id).setStyle({zIndex: this.zInd});
		Autoobj[this.element] = new Ajax.Autocompleter(this.element, this.completer, "/utils/ajax_search_dj2_controller?action=listZIP", {minChars: 1, paramName:'val', updateElement: this.updateElement, parameters: 'id='+this.element, indicator:'reqIndicator'+id});
	}

};


var filterSelect2 = Class.create();
filterSelect2.prototype = {
	initialize: function(container, prefix, id, defValue) {
		this.zInd = 1000-parseInt(id);
		var tpl = new Template(
			'<div id="newTo#{id}">'+
			'  <label>'+
			'   <a href="javascript:void(0)" onclick="removeCityElem(#{id})" class="remove" style="float: right;">remove</a>'+
			'  </label>'+
			'  <div id="inputControl#{id}" class="inputControl">'+
			'   <input type="text" name="#{prefix}#{id}" id="#{prefix}#{id}" value="#{val}" class="inputControl" onfocus="if (this.value == \'#{val}\') this.value = \'\';" />'+
			'   <div id="reqIndicator#{id}" class="indicator" style="display:none;"><img src="/img/progress.gif" width="16" height="16" border="0" /></div>'+
			'  </div>'+
			'  <div id="autocmpl#{id}" class="autocompleter" style="z-index:#{zInd};"></div>'+
			' <br />'+
			'</div>');
		var tmp = tpl.evaluate({prefix:prefix,id:id,val:defValue,zInd:this.zInd});
		$(container).insert(tmp, $(container));
		this.element = prefix+id;
		this.completer = 'autocmpl'+id;
		this.arrow = $('varselect'+id);
		$('autocmpl'+id).setStyle({zIndex: this.zInd});
		Autoobj[this.element] = new Ajax.Autocompleter(this.element, this.completer, "/utils/ajax_search_dj2_controller?action=listZIP", {minChars: 1, paramName:'val', updateElement: this.updateElement, parameters: 'id='+this.element, indicator:'reqIndicator'+id});
	}

};

Object.extend(Object.extend(Ajax.Autocompleter.prototype, Autocompleter.Base.prototype), {

  updateChoices: function(choices) {

	var newdiv = document.createElement("div");
	newdiv.innerHTML = choices;
	Element.cleanWhitespace(newdiv);
	Element.cleanWhitespace(newdiv.down());
	this.update.innerHTML = '';
	var container = this.update;
	if(newdiv.firstChild) {
		container.appendChild(newdiv.firstChild);
	}
	if(this.update.firstChild && this.update.down().childNodes) {
		this.entryCount =
		this.update.down().childNodes.length;
		for (var i = 0; i < this.entryCount; i++) {
			var entry = this.getEntry(i);
			entry.autocompleteIndex = i;
			this.addObservers(entry);
		}
	} else {
		this.entryCount = 0;
	}

	this.stopIndicator();
	this.index = 0;

	if(this.entryCount==1 && this.options.autoSelect) {
		this.selectEntry();
		this.hide();
	} else {
		this.render();
	}
  },

  render: function() {
    if(this.entryCount > 0) {
      for (var i = 0; i < this.entryCount; i++) {
        (this.index==i) ?
          Element.addClassName(this.getEntry(i),"selected") :
          Element.removeClassName(this.getEntry(i),"selected");
      }
      this.show();
      this.active = true;
    } else {
      this.active = false;
      this.hide();
    }
  },
  onComplete: function(request) {
    this.updateChoices(request.responseText);
  },
  onBlur: function(event) {
    if (navigator.appVersion.match(/\bMSIE\b/) && !window.opera &&
      Element.getStyle(this.update, 'display') != 'none')
    {  // fix for IE: don't blur when clicking the vertical scrollbar (if there is one)
      var verticalScrollbarWidth = this.update.offsetWidth - this.update.clientWidth -
        this.update.clientLeft - (parseInt(this.update.currentStyle['borderRightWidth']) || 0);
      if (verticalScrollbarWidth) {
        var x = event.clientX, y = event.clientY, parent = this.update.offsetParent,
          sbLeft = this.update.offsetLeft + this.update.clientLeft + this.update.clientWidth,
          sbTop = this.update.offsetTop + this.update.clientTop,
          sbRight = sbLeft + verticalScrollbarWidth,
          sbBottom = sbTop + this.update.clientHeight;
        while (parent) {
          var offs = parent.offsetLeft + parent.clientLeft, scrollOffs = offs - parent.scrollLeft;
          sbLeft = (sbLeft += scrollOffs) < offs ? offs : sbLeft;
          sbRight = (sbRight += scrollOffs) < offs ? offs : sbRight;
          offs = parent.offsetTop + parent.clientTop; scrollOffs = offs - parent.scrollTop;
          sbTop = (sbTop += scrollOffs) < offs ? offs : sbTop;
          sbBottom = (sbBottom += scrollOffs) < offs ? offs : sbBottom;
          parent = parent.offsetParent;
        }
        if (x >= sbLeft && x < sbRight && y >= sbTop && y < sbBottom) {
          this.element.setActive();
          return;
        }
      }
    }
    setTimeout(this.hide.bind(this), 250);
    this.hasFocus = false;
    this.active = false;
  },
  hide: function() {
    this.stopIndicator();
    if(Element.getStyle(this.update, 'display')!='none') this.options.onHide(this.element, this.update);
    if(this.iefix) Element.hide(this.iefix);
    this.update.scrollTop = 0;
  },
	updateElement: function(item) {
		var val = item.innerHTML;
		var id  = this.element.id;

		var periodat = val.search(',');
		if (periodat > 0){
			$(id).value = val;
			return true;
		} else {
			var numbers = val.split('-');
			new Ajax.Request("/utils/ajax_search_dj2_controller?action=listZIP&start=" + numbers[0], {
							method: "post",
							parameters: {val: $(id).value},
						/*	onCreate: function() {
									currentIndicator.style.display = 'block';
								},*/
							onSuccess: function(request) {
									Autoobj[id].updateChoices(request.responseText);
									//currentIndicator.style.display = 'none';
								}
							});
			//currentIndicator.style.display = 'block';
		}
		this.element.focus();
	}
});

    function HTMLEncode(text) {
        if (!text)
            return '';
        text = text.replace( /&/g, '&amp;' );
        text = text.replace( /</g, '&lt;' );
        text = text.replace( />/g, '&gt;' );
        text = text.replace( /"/g, '&quot;' );
        return text;
    }

    function HTMLDecode(text) {
        if (!text)
            return '';
        text = text.replace( /&gt;/g, '>' );
        text = text.replace( /&lt;/g, '<' );
        text = text.replace( /&amp;/g, '&' );
        text = text.replace( /&quot;/g, '"' );
        return text;
    }