/**
 * @author florian
 */

MUIL.AjaxFilter = Class.create({
	/**
	 * @param {Element} filterContainer, form to use as filter
	 * @param {Element} contentContainer, Element to hold the new data
	 * @param {String} url to use as api url
	 */
	initialize: function(filterContainer, contentContainer, url){
		this.filters = $(filterContainer);
		this.contentContainer = $(contentContainer);
		this.apiUrl = url;
		this.parameters = $H();
		
		this.addHandler(this.filters, 'input', 'click', this.filterHandler);
		this.addHandler(this.contentContainer, '.chunk a', 'click', this.chunkHandler);
	},
	filterHandler: function(){
		this.parameters = this.filters.serialize(true);
		this.ajaxCall();
	},
	chunkHandler: function(event){
		event.preventDefault();
		event.stopPropagation();
		this.parameters = event.element().readAttribute('href').toQueryParams();
		this.ajaxCall();
	},
	updateContent: function(newContent){
//		var container = this.contentContainer.up('div');
//		var minheight = container.getHeight() - container.getStyle('padding-bottom').replace('px', '') - container.getStyle('padding-top').replace('px', '');
//		container.setStyle({height: minheight + 'px'});
		
		new Effect.Morph(this.contentContainer,{
			style: 'opacity:0;',
			duration: 0.5,
			afterFinish: function(){
				this.contentContainer.update(newContent);
			}.bind(this),
			queue:{
				scope: 'updateAnimation',
				position: 'end'
			}
		})
		new Effect.Morph(this.contentContainer, {
			style: 'opacity:1;',
			duration: 0.5,
			queue:{
				scope: 'updateAnimation',
				position: 'end'
			}
		})
	},
	
	ajaxCall: function(){
		new Ajax.Request(this.apiUrl, {
			parameters: this.parameters,
			onSuccess: function(transport){
				this.updateContent(transport.responseText);
			}.bind(this),
			onFailure: function(){
				console.log('Ajax request failure');
			}
		});
	},
	/**
	 * Add an event handler
	 * @param {Element} listener
	 * @param {String} selector, css selector
	 * @param {String} event, event to listen to
	 * @param {Function} callback
	 */
	addHandler: function(listener,selector,event,callback) {
		// If no handler for this selector exists, add it
		if (!this.eventHandlers[selector]) {
			this.eventHandlers[selector] = {};
		}
		// Add the handler for this selector-event combination
		this.eventHandlers[selector][event] = callback.bindAsEventListener(this);
		// Have the listener observe for this event
		listener.observe(event, this.eventDelegate.bindAsEventListener(this));
	},
	/**
	 * Event handlers
	 */
	eventHandlers: {},
    /**
     * Delegate event handler, dispatches to handlers in InteractiveMap.eventHandlers
     * @param Event The DOM event
     */
    eventDelegate: function(event) {
        var me = event.element();
        for (var selector in this.eventHandlers) {
            if (me.match(selector)) {
                var handler = this.eventHandlers[selector][event.type];
                if (handler) {
                    return handler.bindAsEventListener(this)(event);
                }
            }
        }
    }
})

var filter = {
    '#vacature_filter': function(el){
		var filter = new MUIL.AjaxFilter(this, 'ajax_results', 'ajax.php?action=getVacancies');
	}
}

Event.addBehavior(filter);