document.observe('dom:loaded', function() {

	//enable/disable comments	
		//must be inside a dom:loaded event
	modComments = Class.create({
		initialize: function(containerId, subjectId, loggedInUserId, loggedInUserPic, isOwner) {			
			that = this;
			this.container = $(containerId);
			this.subjectId = subjectId;
			this.loggedInUserId = loggedInUserId;
			this.loggedInUserPic = loggedInUserPic;
			this.isOwner = isOwner;
			this.count = 0;
			
			//check if comments are allowed
			var parameters = '["' + this.subjectId + '"]';
			callStringMethod(
					'doesAllowComments',
					parameters,
					function (response) { //success
						if (typeof response[0] == 'string') {
							that.container.update('<span class="info-message-small">'+response[0]+'</span>');
						} else {
							that.allowComments = response[0];			
							that.get();	
						}
					},
					function(error) { //error
						that.commentsBody.update('<span class="info-message-small">'+error+'</span>');
					},
					function() { //create
						
					}
			)
			
			
		
		},
		get: function() {
			that = this;
			this.commentsHeader = new Element('div', { id: 'comments-header' });
			this.commentsHeaderText = new Element('span').update('Comments <span id="comment-count">('+this.count+')</span>');			
			this.commentsBody = new Element('div', { id: 'comments-body' });
	
			this.commentsHeader.appendChild(this.commentsHeaderText);
			this.container.appendChild(this.commentsHeader);
			this.container.appendChild(this.commentsBody);
			
			//allow comments toggle
			if (this.isOwner) {
				allowCommentsContainer = new Element('span', { id: 'allow-comments-container' });
				allowCommentsLabel = new Element('label', { 'for': 'allow-comments' }).update('Allow new comments?');
				this.allowCommentsToggle = new Element('input', { 'type': 'checkbox', 'name': 'allow-comments', id: 'allow-comments', 'value': 'true' });
				if (this.allowComments) this.allowCommentsToggle.checked = 'checked';
				allowCommentsContainer.appendChild(this.allowCommentsToggle);
				allowCommentsContainer.appendChild(allowCommentsLabel);
				this.commentsHeader.appendChild(allowCommentsContainer);
				
				allowCommentsLabel.observe('click', function() {
					that.updateAllowComments();
				});
				that.allowCommentsToggle.observe('click', function() {
					that.updateAllowComments();
				});
			}
						
			this.commentsHeaderText.observe('click', function() {
				Effect.toggle(that.commentsBody, 'blind', { duration: 0.5 });
				if (that.commentsBody.style.display == 'none') {
					that.commentsHeader.removeClassName('comments-collapsed');
				} else {
					that.commentsHeader.addClassName('comments-collapsed');
				}
			});
			
			var parameters = '["' + this.subjectId + '"]';
			callStringMethod(
					'getComments',
					parameters,
					function (response) { //success
						if (typeof response[0] == 'string') {
							that.commentsBody.update('<span class="info-message-small">'+response[0]+'</span>');
						} else {
							that.build(response[0]);
						}
					},
					function(error) { //error
						that.commentsBody.update('<span class="info-message-small">'+error+'</span>');
					},
					function() { //create
						
					}
			)
		},
		build: function(data) {
			that = this;
			this.data = data;
			if (this.data.length > 0) {				
				this.data.each(function(el, i) {
					that.add(el.id, el.commenter_id, el.commenter, el.date, el.comment, el.commenterProfVol);
				});
			}
			
			if (this.allowComments) {
				this.commentsForm = new Element('div', { 'id': 'new-comment', 'class': 'comment-row' });
				this.newCommentLeft = new Element('div', { 'class': 'comment-left' });
				this.newCommentRight = new Element('div', { 'class': 'comment-right' });
				this.commentsForm.appendChild(this.newCommentLeft);
				this.commentsForm.appendChild(this.newCommentRight);
				
				if (this.loggedInUserId == null || this.loggedInUserPic.length == 0) {
					this.commenterAvatar = new Element('img', { 'src' : '/images/face5.png', 'alt': '', 'class': 'comment-avatar' });	
				} else {
					this.commenterAvatar = new Element('img', { 'src' : '/dyn/pic/'+this.loggedInUserId+'m/'+this.loggedInUserPic, 'alt': 'This is you', 'class': 'comment-avatar' });
				}
				
				this.newCommentLeft.appendChild(this.commenterAvatar);
				this.newCommentLeft;
				
				this.commentsFormBody = new Element('textarea', { 'class': 'comment-textarea blurred', 'maxlength': '255' }).update('Leave a comment...');			
				this.commentsFormSubmit = new Element('button', { 'class': 'comment-submit' }).update('Comment');
				
				this.newCommentRight.appendChild(this.commentsFormBody);
				this.newCommentRight.appendChild(this.commentsFormSubmit);
				
				this.container.appendChild(this.commentsForm);
				this.commentsForm.appendChild(this.newCommentLeft);
				this.commentsForm.appendChild(this.newCommentRight);
				this.commentsForm.appendChild(new Element('div', { 'class': 'clear' }));
				
				this.commentsFormBody.observe('focus', function() {
					if (this.value == 'Leave a comment...') {
						this.value = '';
						this.removeClassName('blurred');
					}
				});
							
				this.commentsFormBody.observe('blur', function() {
					if (this.value.length == 0) {
						this.addClassName('blurred');
						this.value = 'Leave a comment...';
					}
				});
				
				this.commentsFormSubmit.observe('click', function() {
					that.submitComment();
				});
			}
		},
		add: function (theId, commenter_id, theCommenter, theDate, comment, profVol) {
			that = this;
			
			this.count++;
			$('comment-count').update('('+this.count+')');
			//containers
			row = new Element('div', { 'id': theId, 'class': 'comment-row' });
			leftSide = new Element('div', { 'class': 'comment-left' });
			rightSide = new Element('div', { 'class': 'comment-right' });
			row.appendChild(leftSide);
			row.appendChild(rightSide);
			//commenter avatar			
			if (commenter_id == 'anonymous' || commenter_id == 'deleted') {
				commenterAvatar = new Element('img', { 'src' : '/images/face5.png', 'alt': '', 'class': 'comment-avatar' });
				leftSide.appendChild(commenterAvatar);
			} else if (profVol == null) {
				commenterAvatar = new Element('img', { 'src' : '/images/face5.png', 'alt': theCommenter, 'class': 'comment-avatar' });
				anchor = new Element('a', { 'href': '/dyn/prof/'+commenter_id, 'title': theCommenter });
				anchor.appendChild(commenterAvatar);
				leftSide.appendChild(anchor);
			} else {
				commenterAvatar = new Element('img', { 'src' : '/dyn/pic/'+commenter_id+'m/'+profVol, 'alt': theCommenter, 'class': 'comment-avatar' });
				anchor = new Element('a', { 'href': '/dyn/prof/'+commenter_id, 'title': theCommenter });
				anchor.appendChild(commenterAvatar);
				leftSide.appendChild(anchor);
			}
			//name
			nameContainer = new Element('div', { 'class': 'commenter' });
			if (commenter_id == 'anonymous' || commenter_id == 'deleted') {
				nameContainer.update(commenter_id);
			} else {				
				nameAnchor = new Element('a', { 'href': '/dyn/prof/'+commenter_id, 'title': theCommenter }).update(theCommenter);
				nameContainer.appendChild(nameAnchor);
			}
			rightSide.appendChild(nameContainer);
			//entry
			entry = new Element('div', { 'class': 'comment-entry' }).update(comment);
			rightSide.appendChild(entry);
			//entry date
			entryDate = new Element('div', { 'class': 'entry-date' }).update(getFormattedDate(theDate));
			//entryDate = new Element('div', { 'class': 'entry-date' });
			rightSide.appendChild(entryDate);
			//clear row
			row.appendChild(new Element('div', { 'class': 'clear' }));
			this.commentsBody.appendChild(row);
			
			//delete comment
			if (this.isOwner) {
				deleteEntry = new Element('a', { 'href': 'javascript:void(0)', 'class': 'delete-entry' }).update('Delete');
				entryDate.appendChild(deleteEntry);
				deleteEntry.observe('click', function() {
					var proceed = confirm("Are you sure you want to delete this comment?");
					if (proceed) {
						parameters = '["' + theId + '"]';
						callStringMethod(
							'deleteComment',
							parameters,
							function (response) { //success
								if (typeof response[0] == 'string' && response[0] != 'Success') {
									alert(response[0]);
								} else {
									Effect.Fade($(theId), { duration: 0.5 });
								}
							},
							function(error) { //error
								alert(error);
							},
							function() { //create
							}
						);
					}	
				});
			}
		},
		remove: function() {
			
		},
		submitComment: function() {
			that = this;
			strComment = addSlashes(this.commentsFormBody.value);
			parameters = '["' + this.subjectId + '","' + strComment + '"]';
			callStringMethod(
					'addComment',
					parameters,
					function (response) { //success
						if (typeof response[0] == 'string') {
							alert(response[0]);
							that.commentsFormSubmit.disabled = false;
							that.commentsFormBody.disabled = false;
						} else {
							that.add(response[0].id, response[0].commenter_id, response[0].commenter, response[0].date, response[0].comment, response[0].commenterProfVol);
							that.commentsFormBody.addClassName('blurred');
							that.commentsFormBody.value = 'Leave a comment...';
							setTimeout(function() {
								that.commentsFormBody.disabled = false;
								that.commentsFormSubmit.disabled = false;
							}, 1000);
						}
					},
					function(error) { //error
						alert(error);
						that.commentsFormSubmit.disabled = false;
						that.commentsFormBody.disabled = false;
					},
					function() { //create
						that.commentsFormSubmit.disabled = true;
						that.commentsFormBody.disabled = true;
					}
			);
		},
		updateAllowComments: function() {
			that = this;			
			parameters = '["' + this.subjectId + '",' + this.allowCommentsToggle.checked + ']';
			callStringMethod(
					'setAllowComments',
					parameters,
					function (response) { //success
						if (typeof response[0] == 'string' && response[0] != 'Success') {
							alert(response[0]);
						} else {
							if (that.allowCommentsToggle.checked) {
								window.location.reload();
							} else {
								Effect.BlindUp($('new-comment'), { duration: 0.5 });
							}
						}
					},
					function(error) { //error
						alert(error);
					},
					function() { //create
					}
			);	
		}
	});
	var comments = new modComments('comments', subjectId, loggedInUserId, loggedInUserPic, isOwner);
	
});