var Comment = {
	default_value: "Your comment here...",
	product_id: null,
	user_id: null,
	tstamp: 0,
	
	template: new Template(
			'<div class="comment comment-#{id} #{odd}">' +
			'  <img src="http://www.gravatar.com/avatar/#{hash}?s=35&r=r&d=mm" width="35" height="35" />' +
			'  <div class="username">#{username}</div>' +
			'  <div class="comment-created">LIVE</div>' +
			'  <div class="comment-value">#{comment_value}</div>' +
			'</div>'),
			
	init: function() {
		document.observe('dom:loaded', function() {
			$$('textarea.comment-value').invoke('observe', 'focus', Comment.clear);
			$$('textarea.comment-value').invoke('observe', 'blur', Comment.fill);
			$$('.comments-refresh').invoke('observe', 'click', Comment.updateClick);
			
			if( $('comment-form') ) $('comment-form').observe('submit', Comment.submit);
		});
	},
	
	clear: function(e) {
		if(e.target.value == Comment.default_value) {
			e.target.removeClassName('error');
			e.target.value = '';
		}
	},
	
	fill: function(e) {
		if(e.target.value == '') {
			e.target.removeClassName('error');
			e.target.value = Comment.default_value;
		}
	},
	
	submit: function(e) {
		// I should submit a comment now
		e.stop();
		
		$('comment-value').removeClassName('error');
		
		if( !Comment.isValid($('comment-value').value) ) {
			$('comment-value').addClassName('error');
			return;
		}
		
		Layout.loading(true);
		
		$('comment-value').disable();
		$('comment-submit').disable();
		
		new Ajax.Request($('comment-form').action + '/format/json', {
			method : 'post',
			onComplete: Comment.response,
			parameters : {
				comment_value : $('comment-value').value
			}
		});
	},
	
	response: function(response) {
		Layout.loading(false);
		
		$('comment-value').enable();
		$('comment-submit').enable();
		
		if( response.status == 200 ) {
			if( response.responseJSON && response.responseJSON.success ) {
				// We did good.
				$('comment-value').value = Comment.default_value;
				Comment.update();
			} else {
				Layout.debug(response.responseText);
			} 
		}
	},
	
	updateClick: function(e) {
		Comment.update();
		e.stop();
	},
	
	update: function() {		
		Layout.loading(true);
		
		var id = '';
		
		if( Comment.product_id != '' ) {
			id = 'product_id/'+Comment.product_id;
		}
		
		if( Comment.user_id != '' ) {
			id = 'user_id/'+Comment.user_id;
		}
		
		new Ajax.Request('/comment/update/format/json/' + id, {
			method:		'post',		
			onComplete: Comment.updateResponse,
			parameters: {
				tstamp: Comment.tstamp
			}
		});
	},
	
	updateResponse: function(response) {
		Layout.loading(false);

		if( response.status == 200 ) {
			if( response.responseJSON ) {
				var res = response.responseJSON;
				if( res.comments && res.comments.length ) {
					res.comments.each(Comment.addComment);
				}
				
				if( res.tstamp ) {
					Comment.tstamp = res.tstamp;
				}
			} else {
				Layout.debug(response.responseText);
			}
		}
	},
	
	addComment: function(comment) {		
		comment.odd = $('comments-area').firstDescendant('.comment').hasClassName('odd') ? '' : 'odd';

		$('comments-area').insert({top: Comment.template.evaluate(comment)});
	},
	
	isValid: function(value) {
		if( value == Comment.default_value ) {
			return false;
		}
		
		if( value == '' ) {
			return false;
		}
		
		return true;
	}
};

Comment.init();