// JavaScript Document

Element.extend({
	highlight: function () {
		var currColor = '#F3F3F3';
		var hightLight = '#fbff93';
		var effect = new Fx.Style(this, 'background-color', {wait: false, duration: 2000, transition: Fx.Transitions.quintOut});
		
		this.setStyle('background-color', hightLight);
		
		(function () { effect.start(currColor)}).delay(3000);
		this.removeClass('new');
	}
});

var Addon = new Class({
	
	html: null,
	container: null,
	inner: null,
	addButton: null,
	form: null,
	view: null,
	
	initialize: function (el) {		
		var container, clone, addButton;

		container = new Element('div').addClass('moobox');
		this.inner = new Element('div').addClass('mooinner');
		container.adopt(this.inner);
		
		$E('body').adopt(container);	

		addButton = el.getElement('.btnadd');

		this.addButton = addButton;
		this.container = container;
		this.view = el;
			
		this.setEvents();
	},
	setEvents: function () {
		this.addButton = this.view.getElement('.btnadd');
		this.addButton.removeEvents('click');
		this.addButton.addEvent('click', this.addButton_onClick.bind(this));
				
		this.view.getElement('tbody').removeEvents('click');
		this.view.getElement('tbody').addEvent('click', function (e) {
			var url, target;
			
			target = (e.target) ? e.target : $(e.srcElement);

			if (target.hasClass('btnremove')) {
				url = target.getProperty('rel');
				this.removeItem(url);
			}
			
			Window.stopEvent(e);								   
		}.bind(this));
	},
	addButton_onClick: function (e) {
		var url;
		
		if (this.html == null) {
			this.getHTML();			
		} else {
			this.show();
		}
		
		Window.stopEvent(e);
	},
	getHTML: function () {
		var url;

		url = this.addButton.getProperty('href');
		
		new Ajax(url, {update: this.inner, onComplete: function (response) {
			this.html = response;
			this.form = this.container.getElement('form');
			this.actions();
			this.show();
		}.bind(this)}).request();
		
	},
	show: function () {
		this.reset();
		this.moobox = new Moobox(this.container);
	},
	actions: function () {
		var actions, rel;
		
		actions = $ES('.addOnActions');

		for(i = 0; i < actions.length; i++) {
			rel = actions[0].getProperty('rel').split(' ');
			actions[i].addEvent(rel[0], this[rel[1]].bind(this));			
		}
		
		this.actions = actions;
	},
	submit: function (e) {
		
		this.form.send({onComplete: function (obj) {
			var json = Json.evaluate(obj);
			
			switch (json.response.type) {
			
			case 'error':
				this.onError(json.response.item.errors);
				break;
			case 'success':
				this.onSuccess(json.response.item);
				break;
			}

		}.bind(this)});
		
		Window.stopEvent(e);
	},
	removeItem: function (url) {
		var target;
		
		var myAjax = new Ajax(url, {onComplete: function (obj) {
						
			this.view.getElements('tbody tr').each(function (el) {
				if (el.getElement('.btnremove')) {
					if (el.getElement('.btnremove').getProperty('rel') == url) target = el;
				}
			});
			
			target.remove();
			
			if (this.view.getElements('tbody tr').length <= 1) this.view.getElement('tr.empty').removeClass('hide');
						
		}.bind(this)}).request();
		
	},
	onError: function (errors) {

		this.form.getElements('.error').each(function (el) {
			el.removeClass('error');											  
		});
				
		errors.each(function (e) {
			this.form.getElements('label').each(function (el) {
				if (el.getProperty('for') == e) el.addClass('error');
			});
			if ($(e)) $(e).addClass('error');
		}.bind(this));
	},
	onSuccess: function (item) {
		var tbody, tr, rel;
				
		tbody = this.view.getElement('tbody');
		tr = new Element('tr').addClass('new');
		
		this.view.getElements('th').each(function (el) {			
			rel = el.getProperty('rel');
			if (rel) tr.adopt(new Element('td').setHTML(item[rel]));
		});
		
		// remove empty tr
		if (tbody.getElement('tr.empty')) tbody.getElement('tr.empty').addClass('hide');
		tbody.adopt(tr);
		
		this.moobox.deactivate();
		this.setEvents();
		this.view.getElement('.new').highlight();
	},
	reset: function () {
		if (this.form) this.form.reset();
		this.container.getElement('.errors').setHTML('');
		this.form.getElements('.error').each(function (el) {
			el.removeClass('error');											  
		});
	}
});

window.addEvent('load', function () {
	$$('.addon').each(function (el) {
		new Addon(el);
	});	
});