Event.observe(window, 'load', function(){
	
		$('postCommentForm').observe('sumbit', function (e) {
			e.stop();
			validateAndSubmitComment(
				$('postCommentForm')
			);
			return false;
		});
	
		$('postComment').observe('click', function (e) {
			e.stop();
			validateAndSubmitComment(
				$('postCommentForm')
			);
			return false;
		});
	
		
	}, false);

	function validateAndSubmitComment(form) {
		form = $(form);
	
		// preform validation.. all good.. then we .. 
		// um	fire the ajax request.. otherwise friendly error messages in a pop up of some kind..
		var parentIsValid = false, emailIsValid = false, commentIsValid = false;
		
		var parent = $F('parent');
		if (  0 == parent.length ){
			$('parentValidationError').show();
		} else {
			//hide
			$('parentValidationError').hide();
			parentIsValid = true;

		}
		
		var email = $F('emailAddress');
		if (0 == email.length || ! email.toUpperCase().match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/) ){
			//show... 
			$('emailValidationError').show();
		} else {
			//hide
			$('emailValidationError').hide();
			emailIsValid = true;
		}
		
		var comment = $F('comment');
		if (0 == comment.length) {
			//show the comment validation error
			$('commentValidationError').show();
		} else {
			//hide it..
			$('commentValidationError').hide();
			commentIsValid = true;
		}
		
		var isValid = commentIsValid && emailIsValid  && parentIsValid;		
		if (isValid){
		
			// do the submit..
			new Ajax.Request('/js/virtualExhibitionComment.php?submit=yes', {
				method: 'post',
				asynchronous: true,
				postBody: form.serialize(),
				onFailure: function(request) {
					commentHasNotBeenPosted( request );
				},
				onComplete: function(request) {
					if (request.status == 200) {
						commentHasBeenPosted( request );
					}
				}
	  		});
						
		}
	}
	
	function commentHasBeenPosted(request){

		var postings = request.responseJSON;
		if (null == postings)
			return;
		
		var commentList = $('commentList');
		for (var i=0, c=postings.length; i < c; i++){
			var comment = postings[i];	
			if (null == $( 'commentId_' + comment.id )){
				var li = new Element('li', { id: 'commentId_' +comment.id });
				if (null != comment.artwork) {
					var actualArtworkLink = $('artworkLink_' + comment.artwork.id );
					if (null == comment.artwork.title )
						comment.artwork.title = "No title specified";
						
					if (null == actualArtworkLink) {
						li.insert('<strong>' +  + ( comment.artwork.artist ? " by "+ comment.artwork.artist.firstname + " " + comment.artwork.artist.lastname : "" ) +'</strong>');
					} else {
						var artworkLink = new Element('a',{href: $('artworkLink_' + comment.artwork.id ).href });
						artworkLink.insert(
							'<strong>' + comment.artwork.title + ( comment.artwork.artist ? " by "+ comment.artwork.artist.firstname + " " + comment.artwork.artist.lastname : "" ) +'</strong>'
						);
						li.insert(artworkLink);
					}
					
					li.insert('<br/>');
				}
				
				if (null == comment.author || !comment.author ) {
					li.insert(
						new Element("span", {"class": "subText"}).update("Guest")
					);
				} else {
					var authorLink = new Element('a',{href: "#"} );
					authorLink.insert( comment.author.firstname + ' ' + comment.author.lastname );
					li.insert(authorLink);
					
				}
				
				var dateSpan = new Element("span", {"class": "subText"});
				dateSpan.insert(" | " + comment.formatteddate + " | " + comment.formattedtime);
				
				li.insert(dateSpan);
				li.insert('<br/>');
				li.insert( comment.comment );
				li.insert('<br /><br />');
				
				li.hide();
				commentList.insert( {top: li});
				new Effect.BlindDown( li );			
				
			}
		}
		
		if ( null == $('isMember') || "yes" != $F('isMember')) {
			if ( null != $('parent').selectedIndex )
				$('parent').selectedIndex = 0;
		}

		if ( null == $('isMember') || "yes" != $F('isMember')){
			$('emailAddress').value = "";
		}
		
		$('comment').value ="";
		
	}
	
	function commentHasNotBeenPosted(request){
		alert( ((request.status!=500 || request.status!=403) ? 'Comment Error '+request.status+' : '+request.statusText+'\n' : '')+request.responseText);	
	}