var Observer = new Class({

	Implements: [Options, Events],

	options: {
		periodical: false,
		delay: 1000
	},

	initialize: function(el, onChanged, options){
		this.element = $(el) || $$(el);
		this.setOptions(options);
		this.bound = this.changed.bind(this);
		this.onChanged = onChanged;
		this.resume();
	},

	changed: function() {
		var value = this.element.get('value');
		if ($equals(this.value, value)) return;
		//this.clear();
		this.value = value;
		//this.timeout = this.onFired.delay(this.options.delay, this);
		this.onChanged(value);
	},

	resume: function(){
		this.value = this.element.get('value');
		if (this.options.periodical) this.timer = this.changed.periodical(this.options.periodical, this);
		else this.element.addEvent('keyup', this.bound);
		return this;
	}

});

var $equals = function(obj1, obj2) {
	return (obj1 == obj2 || JSON.encode(obj1) == JSON.encode(obj2));
}

var Autocompleter = new Class({

	Implements: [Options, Events],

	options: {
		resultDiv: null
	},

	initialize: function(el, options) {
		this.element = $(el) || $$(el);
		this.setOptions(options);
		this.observer = new Observer(this.element, this.inputChanged.bind(this), {});
		this.resultDiv = $(this.options.resultDiv) || $$(this.options.resultDiv);

		this.request =  new Request.JSON({
	    url: 'query_jobs.php', 
			resultDiv: this.resultDiv,
	    onSuccess: function(responseJSON, responseText) {

				if(responseText == "[]") {
					this.options.resultDiv.setStyle('display', 'none');
					return;
				}


				this.data = "<div class=\"result-list\">";
				this.data += "<ul>";
				responseJSON.each(function(item) {
					
					//alert(item.id);
					//this.options.resultDiv.innerHTML = 'input changed: ' + item.id;
					//return;

					this.data += "<li>";
					this.data += "<a class=\"result-entry\" href=\"" + item.url + "\">";
					this.data += "<span>";
					this.data += item.name;
					this.data += "</span>";
					this.data += "</a>";
					this.data += "</li>";

				}, this);

				this.data += "</ul>";
				this.data += "</div>";

				this.options.resultDiv.innerHTML = this.data;
				this.options.resultDiv.setStyle('display', 'block');
		 	}
		});

	},

	inputChanged: function(value) {
		this.request.send('search=' + value);
	}

});

window.addEvent('domready', function() {

	new Autocompleter('job-search-input', {'resultDiv' : 'job-search-result'});

	startScroller();
});


function jobDetails(id) {
	tr = $('job-aussteller-' + id);

	if(tr.getStyle('display') == 'none') {
		tr.setStyle('display', '');
	}
	else {
		tr.setStyle('display', 'none');
	}
}






function startScroller() {
 // log("start scroller");

  var scroller = $('scroller-container').getElement("div");
  var items = scroller.getElements("div");

  var itemHeight = 70;

	var scrollFX = new Fx.Scroll($('scroller-container'), {fps: 50, duration: 2000}); //, transition: 'linear'});

  var doScroll = function() {		
    // item oben rausgescrollt
    if($('scroller-container').getScroll().y > 0) {
			var firstItem = $('scroller').getFirst("div").dispose();
			firstItem.inject($('scroller'), 'bottom');
			scrollFX.set(0, 0);
    }
		scrollFX.start(0, 70).chain(startScroll);
  }

  function startScroll() {
    setTimeout(doScroll, 2000);
  }

  startScroll();
}