var Commentary = new Class({
	Implements: [Events, Options, Chain],
	options: {
		comment_form : ""
	},
	initialize: function(container, options) {
		this.setOptions(options);
		this.container = container;
		this.definition_id = this.options.definition_id;
		this.toggler = this.options.toggler;
		this.el_storage = this.options.el_storage;

		this.comments_forms_fx = {};

		this.hide_comments();
		this.set_add_comment_handler();
		this.set_hide_show_comments_handler();
		this.show_hide_reply();

	},
	debug: function() {
		console.log(this);
	},
	/*
		Creates for for creating root comments
	*/
	init_form: function(container) {

		if (SLANGRN.user.status == 'logged_in') {
			_container = (container.getElement('ul')) ? container.getElement('ul') : container;

			MyCommentForm = new SubtleTemplate($('_comment_form').clone());
			comment_form = new MyCommentForm( {
				'id' : this.definition_id,
				'user_id' : SLANGRN.user.id,
				'authenticity_token' : window._token,
				'parent_id' : 0
			}).inject(_container);

			comment_form.element.setStyle('display', 'none');

			$(comment_form.element).set('reveal', {
				mode: 'vertical',
				transition: 'bounce:out',
				onComplete: this.fix_heights.bind(this)
			}).reveal();

			this.handle_comments_create(comment_form.element, container.getElement('ul'));
		} else {
			this.display_login_form(container);
		}

	},
	/*
	* function that displays comments form
	* container
	* el - number in the storage to retrieve id
	*/
	display_comments_form: function(container, el) {

		parent_id = $defined(el) && $defined(el.getParent('li[rel=comment]')) ? SLANGRN.words.retrieve('comments').get(el.getParent('li[rel=comment]').id) : 0;

		MyCommentForm = new SubtleTemplate($('_comment_form').clone());
		comment_form = new MyCommentForm({
			'id' : this.definition_id,
			'user_id' : SLANGRN.user.id,
			'authenticity_token' : window._token,
			'parent_id' : parent_id
		}).inject(container);

		comment_form.element.setStyle('display', 'none');

		$(comment_form.element).set('reveal', {
			mode: 'vertical',
			transition: 'bounce:out',
			onComplete: this.fix_heights.bind(this)
		}).reveal();

		comment_form.element.addEvent('submit', function(ef) {
			ef.preventDefault();

			ef.target.set('send', {url: '/comments/create', method: 'post',
				onSuccess: function(responseText, responseXML) {
					alert('test');
				}.bind(this)
			});
			ef.target.send(); //Sends the form.
		}.bind(this));

		// this.handle_comments_create(comment_form.element, container);

	},
	handle_comments_create: function(el, container) {
		el.addEvent('submit', function(ef) {
			ef.preventDefault();

			$(ef.target).set('send', {
				url: '/comments/create',
				method: 'post',
				onSuccess: function(responseText, responseXML) {
					xml_response = new Element('xml', {
						html : responseText
					});

					el.nix(true);

					_container = (container.getParent('li[rel=comment]')) ? container.getParent('li[rel=comment]') : container;
					tier = (container.getParent('li[rel=comment]')) ? SLANGRN.words.retrieve('tiers').get(container.getParent('li[rel=comment]').id).toInt()+1 : 1;

					MyComment = new SubtleTemplate($('_comment').clone());
					comment = new MyComment({
						'content' : xml_response.getElement('content').get('html'),
						'user' : SLANGRN.user.login,
						'definition_id' : this.definition_id,
						'tier' : tier,
						'date' : 'today'
					}).inject(_container);

				}.bind(this)
			});
			$(ef.target).send(); //Sends the form.

		}.bind(this));
	},
	/*
		method that displays login form
		takes container and el as parameter
		container - Element that form is going to be injected in
		el - toggler that opens/closes the container
	*/
	display_login_form: function(container, el) {

		MyLoginForm = new SubtleTemplate($('_login_form').clone().setStyle('display', 'block'));
		var login_form = new MyLoginForm({
			'authenticity_token' : window._token
		}).inject(container);

		login_form.element.setStyle('display', 'none');

		$(login_form.element).set('reveal', {
			mode: 'vertical',
			transition: 'bounce:out',
			onComplete: this.fix_heights.bind(this)
		}).reveal();

		login_form.element.addEvent('submit', function(ef) {
			ef.preventDefault();

			ef.target.set('send', {url: '/users/login', method: 'post',
				onSuccess: function(responseText, responseXML) {
					response = JSON.decode(responseText);
					if (response.status == 200) {
						SLANGRN.user.id = response.user_id;
						SLANGRN.user.login = response.login;
						SLANGRN.user.status = 'logged_in';
						SLANGRN.user.fresh_login = 1;

						this.container.getElement('form').nix(true);
						this.display_comments_form(this.container, el);
					} else {
						$$('div.error')[0].set('html', 'Login unsuccessful. Please try again');
					}
				}.bind(this)
			});
			ef.target.send(); //Sends the form.
		}.bind(this));

	},
	set_add_comment_handler: function() {
		var status = [];
		var label = {
			'open' : 'Add Comment',
			'closed' : 'Close'
		};

		if ($defined(this.toggler)) {
			this.toggler.addEvent('click', function(e) {

				if (!$defined(status[e.target.id])) status[e.target.id] = 'closed';
				e.target.set('html', label.closed);

				if (SLANGRN.user.status == 'logged_in') {
					if (status[e.target.id] == 'closed') {
						this.display_comments_form(e.target.getParent('div'), e.target);
						status[e.target.id] = 'open';
					} else {
						status[e.target.id] = 'closed';
						e.target.set('html', label.open);
						e.target.getNext('form').nix(true);
					}
				} else {
					if (status[e.target.id] == 'closed') {
						this.display_login_form(e.target.getParent('div'), e.target);
						status[e.target.id] = 'open';
					} else {
						e.target.getNext('form').nix(true);
						status[e.target.id] = 'closed';
						e.target.set('html', label.open);
					}
				}
				e.stop();
				e.target.getParent('div').focus();
			}.bind(this));
		}
	},
	hide_comments: function() {
		var commentary_block = this.container.getFirst('ul.commentary_block');
		if ($defined(commentary_block)) {
			this.container.getElement('ul.commentary_block').set('reveal', {
				transition: 'bounce:out'
			}).dissolve();
		}
	},
	show_hide_reply: function() {
		this.container.getElements('div.paragraphs').addEvents({
			'mouseenter' : function(e) {
				if ($defined($(e.target).getParent('div.comment').getElement('p.reply'))) {
					$(e.target).getParent('div.comment').getElement('p.reply').setStyle('visibility', 'visible');
				}
			}.bind(this),
			'mouseleave' : function(e) {
				if ($defined($(e.target).getParent('div.comment').getElement('p.reply'))) {
					$(e.target).getParent('div.comment').getElement('p.reply').setStyle('visibility', 'hidden');
				}
			}.bind(this)
		});
	},
	/*
		attaches handler to clamshell
	*/
	set_hide_show_comments_handler: function() {
		var toggle_comment = this.container.getElements('img.toggle_comment, h3');

		if ($defined(this.container.getElement('ul.commentary_block'))) {
			toggle_comment.addEvent('click', function(e) {

				commentary_block = this.container.getElement('ul.commentary_block');

				commentary_block.set('reveal', {
					onComplete: function() {
						if (!commentary_block.get('reveal').hidden) {
							this.init_form(this.container);
						} else {
							this.container.getElement('form').nix(true);
						}
						this.fix_heights.bind(this);
					}.bind(this)
				}).get('reveal').toggle();

			}.bind(this));
		}
	},
	fix_heights: function() {
		var heightValue = (window.ie6) ? '100%' : '';
		var element = this.container;
		if (element && element.offsetHeight>0) element.getElement('form').setStyle('height', heightValue);
	}
});