// This function will be called for submitting the comment

var siteName = 'aw'; //change to appropriate site
var rateImage = 'icon-greyrate.gif'; //change to an image filename
var highlightRateImage = 'icon-bluestar.gif'; //change to an image filename


Ext.onReady(function() {
    function submitForm(){
          Ext.Ajax.request({
	      disableCaching: true,
	      failure: function( response , options ) {
	           Ext.MessageBox.hide();
	      },
	      method: 'POST',
	      success: function( response , options ) {
	      var errorlist = document.getElementById("errorlist-div");
	         if(typeof Ext.util.JSON.decode(response.responseText).errors != "undefined"){
				  errorlist.innerHTML = Ext.util.JSON.decode(response.responseText).errors;
				  errorlist.style.display = 'block';
				  }
			 else if(typeof Ext.util.JSON.decode(response.responseText).status != "undefined"){
			 	   errorlist.innerHTML = Ext.util.JSON.decode(response.responseText).status;
			 	   if(Ext.util.JSON.decode(response.responseText).status  == "SUCCESS"){
					  var commentEntityId = (document.forms['usercommentform']).elements['commentEntityId'].value;
					  var siteId = (document.forms['usercommentform']).elements['siteId'].value;
					  errorlist.style.display = 'none';
					  showComments(commentEntityId,siteId);
					  document.forms['usercommentform'].reset();
					  //document.getElementById('comment_rating_selection').style.width = '0px';
					  document.getElementById('comment_article_rating').value = '';
			 	   }
			 }
	    },
	    params:{
	      	  action:'doAddComment',
	      	  siteId :(document.forms['usercommentform']).elements['siteId'].value,
	      	  commentEntityId :(document.forms['usercommentform']).elements['commentEntityId'].value,
              commentTypeId :(document.forms['usercommentform']).elements['commentTypeId'].value,
	      	  userName :(document.forms['usercommentform']).elements['userName'].value,
	      	  rating :(document.forms['usercommentform']).elements['rating'].value,
	      	  description :(document.forms['usercommentform']).elements['description'].value,
	      	  activeFlag :(document.forms['usercommentform']).elements['activeFlag'].value
	      	  },
	    timeout: '60000',
	    url: '/'+siteName+'/updateComments/ajaxCall.do'
	 });

    }


// This function will show the comments for a passed article Id.
//This can be attached to any div with an event listner  example  Ext.get('showcommentbutton-div').on('click', submitForm);
function showComments(commentEntityId,siteId) {
	var store = new Ext.data.Store({
			proxy: new Ext.data.HttpProxy({
				 url: '/'+siteName+'/usercomment/usercommentlisting_json.jsp',timeout:'60000'
			}),

			reader: new Ext.data.JsonReader({
				root: 'records',
				fields: [
					'commentId','commentTypeId','commentEntityId', 'postedDate', 'description', 'userName','rating'
				]
			})
		});
        
   Ext.apply(store.baseParams, {
	   
	commentEntityId:commentEntityId,
    siteId:siteId
   });
	store.load();
	//store.on('loadexception', function(o, response, e){
			  // var myDiv = document.getElementById("listcomment-div");
			  // myDiv.innerHTML = "Data is not available";
			  // Ext.Msg.hide();
	 	    // });
 	store.on('load', function(store, records, options) {
//		Ext.MessageBox.alert('Message', 'load completed');
 		var myDiv = document.getElementById("listcomment-div");
		var commentListing = "" ;
// The user comment Listing can be formated the way it needs to be deplayed on the front end
		commentListing += "<ul>";
			
		var commentCount = 0;
		var totalRating = 0;
		var averageRating = 0;
		var wordRating;
		var noRatingCommentCount =0
		
		store.each(function(record)	{
			  commentCount += 1;
			 
			 if (record.get('rating')==0){
			      noRatingCommentCount +=1;
			  }
			  
			  record.fields.each(function(field) {
		//	   commentListing += "field.name :" + field.name;
			
			   if(field.name=='userName') {
			   commentListing += "<li><div class=\"userName\"><span class=\"black\"><strong>"+record.get('userName')+"</strong></span></div>";
			  
			  
			  
			   commentListing += "<div class=\"commentDate\">"+ record.get('postedDate') +"</div>";
			 
			   
			
			   
			   if(record.get('rating')==1) {
			   commentListing += "<div class=\"rating\"><img src=\"/"+siteName+"/images/"+highlightRateImage+"\" border=\"0\"/><img src=\"/"+siteName+"/images/"+rateImage+"\" border=\"0\"/><img src=\"/"+siteName+"/images/"+rateImage+"\" border=\"0\"/><img src=\"/"+siteName+"/images/"+rateImage+"\" border=\"0\"/><img src=\"/"+siteName+"/images/"+rateImage+"\" border=\"0\"/></div>";
			   }
			   
			   if(record.get('rating')==2) {
			   commentListing += "<div class=\"rating\"><img src=\"/"+siteName+"/images/"+highlightRateImage+"\" border=\"0\"/><img src=\"/"+siteName+"/images/"+highlightRateImage+"\" border=\"0\"/><img src=\"/"+siteName+"/images/"+rateImage+"\" border=\"0\"/><img src=\"/"+siteName+"/images/"+rateImage+"\" border=\"0\"/><img src=\"/"+siteName+"/images/"+rateImage+"\" border=\"0\"/></div>";
			   }
			
			   if(record.get('rating')==3) {
			   commentListing += "<div class=\"rating\"><img src=\"/"+siteName+"/images/"+highlightRateImage+"\" border=\"0\"/><img src=\"/"+siteName+"/images/"+highlightRateImage+"\" border=\"0\"/><img src=\"/"+siteName+"/images/"+highlightRateImage+"\" border=\"0\"/><img src=\"/"+siteName+"/images/"+rateImage+"\" border=\"0\"/><img src=\"/"+siteName+"/images/"+rateImage+"\" border=\"0\"/></div>";
			   }
			
			   if(record.get('rating')==4) {
			   commentListing += "<div class=\"rating\"><img src=\"/"+siteName+"/images/"+highlightRateImage+"\" border=\"0\"/><img src=\"/"+siteName+"/images/"+highlightRateImage+"\" border=\"0\"/><img src=\"/"+siteName+"/images/"+highlightRateImage+"\" border=\"0\"/><img src=\"/"+siteName+"/images/"+highlightRateImage+"\" border=\"0\"/><img src=\"/"+siteName+"/images/"+rateImage+"\" border=\"0\"/></div>";
			   }
			   
			   if(record.get('rating')==5) {
			   commentListing += "<div class=\"rating\"><img src=\"/"+siteName+"/images/"+highlightRateImage+"\" border=\"0\"/><img src=\"/"+siteName+"/images/"+highlightRateImage+"\" border=\"0\"/><img src=\"/"+siteName+"/images/"+highlightRateImage+"\" border=\"0\"/><img src=\"/"+siteName+"/images/"+highlightRateImage+"\" border=\"0\"/><img src=\"/"+siteName+"/images/"+highlightRateImage+"\" border=\"0\"/></div>";
			   }
			   
			 
			   
			 
			   commentListing += "<div class=\"commentText\">"+ record.get('description') +"</div></li>";
			   
			  
			   }
			  });
			  
				totalRating +=  eval(record.get('rating'));
				
			    
			   }, this);
			   
			   
		 if(commentCount > 0) {
		 	averageRating = Math.round((totalRating/(commentCount-noRatingCommentCount))*100)/100;
			
			if(averageRating >= 0 && averageRating < 1.5) {
			wordRating = 'Bad';
			}
			if(averageRating >= 1.5 && averageRating < 2.5) {
			wordRating = 'Poor';
			}
			if(averageRating >= 2.5 && averageRating < 3.5) {
			wordRating = 'Good';
			}
			
			if(averageRating >= 3.5 && averageRating < 4.5) {
			wordRating = 'Great';
			}
			
			if(averageRating >= 4.5 && averageRating <= 5) {
			wordRating = 'Perfect';
			}
		 }
		commentListing += "</ul>"; 
		
		if (isNaN(averageRating) == true || typeof(averageRating)=="undefined" ) {
		myDiv.innerHTML =  "<div class=\"red\">" + commentCount +" Comments</div><div id=\"commentBox\">" + commentListing +"</div>";
		} else {
		myDiv.innerHTML =  "<div class=\"overallRating\">Comments: <div class=\"rating\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td> ( " + averageRating +"</td><td><img src=\"/"+siteName+"/images/"+highlightRateImage+"\" border=\"0\"/></td><td> ) "+wordRating+" </td></tr></table></div></div><br/><br/><table width=\"100%\" cellpadding=\"2\" cellspacing=\"0\" border=\"0\"><tr><td><div class=\"red\">" + commentCount +" Comments</div></td></tr><tr><td><div id=\"commentBox\">" + commentListing +"</div></td></tr></table>";
		}
   });
  }
 
 if (Ext.get('submitcomment-div')) {
		Ext.get('submitcomment-div').on('click', submitForm);
	}
 
 if ((document.forms['usercommentform'])) {
 var commentEntityId =(document.forms['usercommentform']).elements['commentEntityId'].value
 var siteId =(document.forms['usercommentform']).elements['siteId'].value
 showComments(commentEntityId,siteId);
   
   }
});