Groups = {
  nItems:undefined,
  theUser:undefined,
  service: "/api/groups/",
  loader:undefined,
  events: { 'onChange': ['Groups.refreshList']},
  triggerRefresh : function(){
    if(window.User_Details) {
      Groups.theUser=User_Details.joostName;
      Groups.nItems=24;
      Groups.refreshList();
    }
  }
 };

Groups.setUser=function(u,nItems){
  this.theUser=u;
  this.nItems=nItems;
  //this.refreshList();
};


Groups.message=function(text, where){
  if(where && document.getElementById(where)){
    document.getElementById(where).innerHTML = '<p>' + escapeHTML(text) + '</p>';
  }
};

Groups.refreshList=function(){
  jsonRequest(this.service+"getGroupsForUser?count="+this.nItems+"&joostName="+Groups.theUser+"&json_function=Groups.handleGetResp");

  // XXX this should wait for success etc, and provide a waiting message
};

Groups.handleGetResp=function(obj) {
  if (obj.success) {
    if(obj.groups.length>0){
      Groups.message("","groupsMsg");
      Groups.displayResults(obj);
    }else{
      Groups.message("No groups at this time","groupsList");
    }
  } else {
    Groups.message(obj.message,"groupsList");
  }
};

Groups.displayResults=function(obj) {
  var groupsList=document.getElementById("groupsList");
  if(!groupsList){
    return;
  }
  var apiResults=obj.groups;
  var nApiResults=obj.groups.length;
  var outputList=[];

//reverse order
  for (var i=nApiResults-1;i>-1;i--) {
    var title=apiResults[i].group;

    if (!title || title=="") { continue; }

    var num=apiResults[i].number;
    var members="member";
    if(num>1){
      members="members";
    }
    var owner=apiResults[i].owner;
    var o="";
    if(owner && owner==this.theUser){
      o="<br /><b>Group Admin</b>";
    }
    var thumbnail='/static/joost_group_t1.jpg';
    if(apiResults[i].avatar){
      thumbnail=apiResults[i].avatar;
    }

    outputList.push({title:escapeHTML(title),
                     thumbnail:thumbnail,
                     link:'groups/'+apiResults[i].id+'/',
                     type:'group',
                     description: ((num==0) ? o : num+" "+members+""+o)
                     });
  }

  groupsList.innerHTML=renderThumbAndTextList(outputList,'',3);
};

Groups.handleResponse=function(obj) {
  if (!obj.success) {
    errorOrNote(obj.success,obj.message);
  }

  ///Groups.refreshList();
};



var groups = {};
groups.toggleButtons = function (thumbnail, display) {
  if (display) {
    if (document.getElementById(thumbnail + '_buttons')) {
      document.getElementById(thumbnail + '_buttons').style.display = "block";
    }
    if (document.getElementById(thumbnail + '_play')) {
      document.getElementById(thumbnail + '_play').style.visibility = "visible";
    }
  } else {
    if (document.getElementById(thumbnail + '_buttons')) {
      document.getElementById(thumbnail + '_buttons').style.display = "none";
    }
    if (document.getElementById(thumbnail + '_play')) {
      document.getElementById(thumbnail + '_play').style.visibility = "hidden";
    }
  }
};
AddGroup = {
  overlay: undefined,
  AddGroupProvider : "/api/groups/addUserToGroup?json_function=AddGroup.result&joostName=%i&groupName=%j",
  str:"<h3>%s group was <small> created by %n</small></h3><p>%b</p>",
  loader:undefined
};


AddGroup.hideAddGroup=function() {
  if (AddGroup.overlay) {
    AddGroup.overlay.style.display="none";
  }
  if (AddGroup.container) {
    AddGroup.container.style.display="none";
  }
};

AddGroup.addGroup=function(title, joostName) {
  if (!User.loggedIn) { 
    User.promptForLogin('<h1>To join a group, you must be logged in</h1>',function(){ AddGroup.addGroup(title,joostName)});
    return;
  } 
  var url=AddGroup.AddGroupProvider.replace(/%i/gm,joostName).replace(/%j/gm,title);
  jsonRequest(url);
};

AddGroup.result=function(obj) {
  if(document.getElementById('add_group_error_div')) {
    document.getElementById('add_group_error_div').style.display="none";
  }
  
  if (obj.success) {
    errorOrNote(true,"","You have joined the "+obj.group+" Group");
    var el=document.getElementById('joinGroup');
    if (el) {
      el.style.display="none";
      el=document.getElementById('leaveGroup');
      if (el) {
        el.style.display="block";
      }
    }
    el=document.getElementById('numMembers');
    if (el) {
      var num=obj.number;
      var nummem="members";
      if(num<2){
        nummem="member";
      }
      el.innerHTML=num+" "+nummem;
    }
    if(window.Groups){
      Groups.refreshList();
    }
    if(window.Group){
      Group.refreshList();
    }
    
    if(byid('groupCommentBtnHolder')) {
        byid('groupCommentBtnHolder').style.display='block';
    }
    
  } else {
    el=document.getElementById('add_group_error');
    if (el) {
      el.innerHTML=escapeHTML(obj.message);
      var el2=document.getElementById('add_group_error_div');
      if (el2) {
        el2.style.display="block";
      }
    } else {
      errorOrNote(false,escapeHTML(obj.message),"");
    }
  }
};


AddGroup.toggleShowInputAddGroup=function(el) {
  functionBarToggleShow(el,AddGroup,"AddGroup");
};

AddGroup.doAddGroup=function(el) {
  document.forms["addGroupForm"].reset();
  if (!User.loggedIn) { 
    User.promptForLogin('<h1>To create a group, you must be logged in</h1>',AddGroup.doAddGroup);
  } else {
      AddGroup.toggleShowInputAddGroup(el);
  }
};

DeleteGroup = {
  overlay: undefined,
  DeleteGroupProvider : "/api/groups/deleteGroup?json_function=DeleteGroup.result&joostName=%i&groupName=%j",
  str:"<h3>%s group was <small> created by %n</small></h3><p>%b</p>",
  loader:undefined
};

DeleteGroup.cancelDeleteGroup=function() {
  document.getElementById('add_group_error').innerHTML="";
  document.getElementById('add_group_error_div').style.display="none";
};

DeleteGroup.startDeleteGroup=function(title, joostName) {
    var str='<div class="brickForm"><form><div class="row"><div class="intro"><p>Do you really want to delete the group? This action cannot be undone</p></div><div class="input"><input type="button" value="Delete" class="inputSubmit" onclick="DeleteGroup.deleteGroup(\''+title+'\',\''+joostName+'\');"/> <input type="button" value="Cancel" class="inputReset" onclick="DeleteGroup.cancelDeleteGroup();"/></div></div></form></div>';
    document.getElementById('add_group_error').innerHTML=str;
    document.getElementById('add_group_error_div').style.display="block";

};

DeleteGroup.deleteGroup=function(title, joostName) {
  var url=DeleteGroup.DeleteGroupProvider.replace(/%i/gm,encodeURIComponent(joostName)).replace(/%j/gm,encodeURIComponent(title));
  jsonRequest(url);

/*
  if (!DeleteGroup.loader) {
    var newImg=document.createElement('img');
    newImg.alt="Please Wait";
    newImg.src="/static/big-loader.gif";
    DeleteGroup.loader=newImg;
    formSub.parentNode.insertBefore(newImg,formSub);
    DeleteGroup.submitElement=formSub;
  }
*/
};

DeleteGroup.result=function(obj) {

/*
  window.frames["add_group_frame"].location="/blank.html";
  if (DeleteGroup.submitElement) {
    DeleteGroup.submitElement.disabled=false;
  }
  if (DeleteGroup.loader) {
    DeleteGroup.loader.parentNode.removeChild(DeleteGroup.loader);
    DeleteGroup.loader=null;
  }
*/
  document.getElementById('add_group_error_div').style.display="none";
  if (obj.success) {
    alert("You have successfully deleted the group");
    window.location="/groups";
  } else {
    document.getElementById('add_group_error').innerHTML=obj.message;
    document.getElementById('add_group_error_div').style.display="block";
  }
};


/*
DeleteGroup.toggleShowInputDeleteGroup=function(el) {
  functionBarToggleShow(el,DeleteGroup,"DeleteGroup");
};


DeleteGroup.doDeleteGroup=function(el) {
  document.forms["deleteGroupForm"].reset();
  if (!User.loggedIn) { 
    User.promptForLogin('<h1>To remove a group, you must be logged in</h1>',DeleteGroup.doDeleteGroup);
  } else {
      DeleteGroup.toggleShowInputDeleteGroup(el);
  }
};
*/

RemoveFromGroup = {
  overlay: undefined,
  RemoveFromGroupProvider : "/api/groups/removeUserFromGroup?json_function=RemoveFromGroup.result&joostName=%i&groupName=%j",
  RemoveChannelProvider : "/api/groups/removeFromFan?json_function=RemoveFromGroup.resultChannel&publicId=%{publicId}&groupId=%{groupId}",
  str:"<h3>%s group was <small> created by %n</small></h3><p>%b</p>",
  removedChannelId: false,
  loader:undefined
};


RemoveFromGroup.hideRemoveFromGroup=function() {
  if (RemoveFromGroup.overlay) {
    RemoveFromGroup.overlay.style.display="none";
  }
  if (RemoveFromGroup.container) {
    RemoveFromGroup.container.style.display="none";
  }
};


RemoveFromGroup.removeFromGroup=function(title, joostName) {
  var url=RemoveFromGroup.RemoveFromGroupProvider.replace(/%i/gm,joostName).replace(/%j/gm,title);
  jsonRequest(url);

/*
  if (!RemoveFromGroup.loader) {
    var newImg=document.createElement('img');
    newImg.alt="Please Wait";
    newImg.src="/static/big-loader.gif";
    RemoveFromGroup.loader=newImg;
    formSub.parentNode.insertBefore(newImg,formSub);
    RemoveFromGroup.submitElement=formSub;
  }
*/
};

RemoveFromGroup.result=function(obj) {

  document.getElementById('add_group_error_div').style.display="none";
  if (obj.success) {
    errorOrNote(obj.success,"",obj.displayName+" has left the "+obj.group+" Group");
    document.getElementById('joinGroup').style.display="block";
    document.getElementById('leaveGroup').style.display="none";
    var num=obj.number;
    var nummem="members";
    if(num<2){nummem="member";}
    document.getElementById('numMembers').innerHTML=obj.number+" "+nummem;
    if(window.Groups){
      Groups.triggerRefresh();
    }
    if(window.Group){
      removeNode('member-'+obj.user);
      Group.refreshList();
    } else {
      // if the list is generated server side (e.g. /group/members) we remove the id corresponding to the user
      var el=document.getElementById('member-'+obj.user);
      if (el) { el.innerHTML="";}
    }
    
    if(byid('groupCommentBtnHolder')) {
        byid('groupCommentBtnHolder').style.display='none';
    }
    
  } else {
    var err="";
    if(obj.message){
      err=obj.message;
    }
    errorOrNote(obj.success,err,"");
  }
};


RemoveFromGroup.toggleShowInputRemoveFromGroup=function(el) {
  functionBarToggleShow(el,RemoveFromGroup,"RemoveFromGroup");
};

RemoveFromGroup.doRemoveFromGroup=function(el) {
  document.forms["removeFromGroupForm"].reset();
  if (!User.loggedIn) {
    User.promptForLogin('<h1>To create a group, you must be logged in</h1>',RemoveFromGroup.doRemoveFromGroup);
  } else {
      RemoveFromGroup.toggleShowInputRemoveFromGroup(el);
  }
};

RemoveFromGroup.doRemoveChannel=function(groupId,publicId) {
      if (User.loggedIn) {
          RemoveFromGroup.removedChannelId=publicId;
          jsonRequest(substitute(RemoveFromGroup.RemoveChannelProvider, {publicId: publicId, groupId: groupId}));
      }
};

RemoveFromGroup.resultChannel=function(response){
    if(response.success){
        if(RemoveFromGroup.removedChannelId) {
            byid("wrap-" + RemoveFromGroup.removedChannelId).innerHTML = "";;
            RemoveFromGroup.removedChannelId=false;
        }
    }
};CreateGroup = {
  overlay: undefined,
  CreateGroupProvider : "/api/groups/createGroup",
  str:"<h3>%s group was <small> created by %n</small></h3><p>%b</p>",
  loader:undefined

};


CreateGroup.hideCreateGroup=function() {
  if (CreateGroup.overlay) {
    CreateGroup.overlay.style.display="none";
  }
  if (CreateGroup.container) {
    CreateGroup.container.style.display="none";
  }
};

CreateGroup.createGroup=function(form) {
  if (!window.User || !window.User.loggedIn) {
    User.promptForLogin('<h1>To create a group, you must be logged in</h1>');
    return false;
  }
  if (!User.interact) {
    User.promptForConfirmation('<h1>To create a group, you must have confirmed your email address</h1>');
    return false;
  }
  var url=CreateGroup.CreateGroupProvider;
  form.action=url;
  var formSub=form.elements['create_group_submit'];
  formSub.disabled=true;
  if (!CreateGroup.loader) {
    var newImg=document.createElement('img');
    newImg.alt="Please Wait";
    newImg.src="/static/big-loader.gif";
    CreateGroup.loader=newImg;
    formSub.parentNode.insertBefore(newImg,formSub);
    CreateGroup.submitElement=formSub;
  }
};

CreateGroup.result=function(obj) {
  window.frames["create_group_frame"].location="/blank.html";
  if (CreateGroup.submitElement) {
    CreateGroup.submitElement.disabled=false;
  }
  if (CreateGroup.loader) {
    CreateGroup.loader.parentNode.removeChild(CreateGroup.loader);
    CreateGroup.loader=null;
  }
  document.getElementById('create_group_error_div').style.display="none";
  if (obj.success) {
    document.forms["createGroupForm"].reset();
    window.location = "/groups/" + obj.id;
  }
  var err="";
  var msgStr="";
  if(obj.message){
    err=obj.message;
  } else {
    msgStr='Your group was created: <a href="/groups/'+escapeHTML(obj.id)+'/">'+obj.group+'</a>';
  }
  errorOrNote(obj.success,err,msgStr);
};


CreateGroup.toggleShowInputCreateGroup=function(el) {
  functionBarToggleShow(el,CreateGroup,"CreateGroup");
};

CreateGroup.doCreateGroup=function(el) {
  document.forms["createGroupForm"].reset();
  if (!User.loggedIn) { 
    User.promptForLogin('<h1>To create a group, you must be logged in</h1>',CreateGroup.doCreateGroup);
  } else {
    if (!User.interact) {
      User.promptForConfirmation('<h1>To create a group, you must have confirmed your email address</h1>',CreateGroup.doCreateGroup);
    } else {
      CreateGroup.toggleShowInputCreateGroup(el);
    }
  }
};
GroupDesc={

  groupDescSetProvider:"/api/groups/setGroupDescription?groupName=%g&description=%d&json_function=GroupDesc.updated"

};
GroupDesc.set=function(desc,groupName){
  desc=encodeURIComponent(desc);
  var url=GroupDesc.groupDescSetProvider.replace(/%g/gm,encodeURIComponent(groupName)).replace(/%d/gm,desc);
  jsonRequest(url);
};

GroupDesc.updated=function(obj) {
  if (obj.success) {
    var el=document.getElementById("desc1");
    if (el) {
      el.innerHTML=escapeHTML(obj.description);
    }
  }
  el=document.getElementById("desc-with-button");
  if (el) {
    el.style.display="block";
  }
  el=document.getElementById("desc");
  if (el) {
    el.style.display="none";
  }
  errorOrNote(obj.success,"Description was not updated: "+obj.message,"Description updated");
};

GroupDesc.changeButton=function() {
document.getElementById("desc-with-button").style.display="none";
document.getElementById("desc").style.display="block";
};

GroupDesc.changeCancel=function() {
document.getElementById("desc-with-button").style.display="block";
document.getElementById("desc").style.display="none";
};
GroupFavorites= {
  service:"/api/groups/getGroupFavorites?groupName=%n&json_function=GroupFavorites.list"
};

GroupFavorites.display=function(groupName, nItems, format) {
  var url = GroupFavorites.service.replace(/%n/gm, encodeURIComponent(groupName));
  this.format=format;
  if (nItems) { url+="&length="+nItems; }
  jsonRequest(url);
};

GroupFavorites.list = function(obj) {

  if (obj && obj.shows && obj.shows.length>0) {
    var x;
    if (this.format=="wide" && window.renderVideoListWideThumbs) {
      if (GroupFavoritesView=="list") {
        x=renderVideoListWide(obj.shows, [
          {"title": "Add to My Queue", "href": "#", "onclick": "epgPage.addToList(event, 'playlist', '%i', 'video_%i'); return false;", "icon": "miniButtonQueueAdd16","nolabel": "true"}
        ]);
      } else  {
        x=renderVideoListWideThumbs(obj.shows, [
          {"title": "Add to My Queue", "href": "#", "onclick": "epgPage.addToList(event, 'playlist', '%i', 'video_%i'); return false;", "icon": "miniButtonQueueAdd16","nolabel": "true"}
        ]);
      }
    } else {
      x=renderThumbnailsText(obj.shows,'groupFavorites',4, {'desc':	false});
    }
    document.getElementById("groupFavorites").innerHTML=x;
    fixPNG();
  } else {
    document.getElementById("groupFavorites").innerHTML="<p>Members of this group have no favorites at the moment</p>";
  }
};
Group = {
  theGroupName:undefined,
  theGroupId:undefined,
  service: "/api/groups/"
 };

Group.setGroupName=function(gn, nItems, id){
  // gn: groups name
  // nItems: number of group members to display in this brick
  this.theGroupName=gn;
  this.theGroupId=id;
  this.refreshList(nItems);
};

Group.format=function(user) {
  // function used to produce the markup that shows a user
//  var str="<a href='/users/"+escapeHTML(user.screenname)+"'>"+escapeHTML(user.screenname)+"</a><br/>";
  var gender=(user.gender?user.gender.substring(0,1).toUpperCase() + user.gender.substring(1,user.gender.length).toLowerCase():"");
  var age=(user.age&&user.age!=-1?user.age:"");
  var country=(user.country?", "+user.country.toUpperCase():"");
  var mood=(user.mood?"<br/><em>"+escapeHTML(user.mood)+"</em>":"");
  var str=gender+(gender!="" && age!="" ? ", ":"")+age+country+mood;
  if(user.owner){
    str=str+"<br /><b>Group Admin</b>";
  }
  return str;
};

Group.message=function(text, where){
  var el=document.getElementById(where);
  if (el) {
    el.innerHTML = text;
  }
};

Group.refreshList=function(nItems){
  var groupId=this.theGroupId;
  this.count = nItems;
  var url=this.service+"getGroupMembers?groupName="+encodeURIComponent(groupId)+"&json_function=Group.handleGetResponse";
  if (nItems) { url+="&length="+nItems; }
  jsonRequest(url);
  // XXX this should wait for success etc, and provide a waiting message
};

Group.handleGetResponse=function(obj) {
  if (obj.success) {
    Group.displayResults(obj);
  } else {
    Group.message(obj.message,"groupsMsg");
  }
};

Group.displayResults=function(obj) {
  var apiResults=obj.members;
  var nApiResults=obj.members.length;
  var outputList=[];

  if(this.count != nApiResults && byid('groupMembers_more')){
    byid('groupMembers_more').style.display = 'none';
  }

  for (var i=0;i<nApiResults;i++) {
    var joostName=apiResults[i].joostId;
    var avatar = getAvatar(apiResults[i], 'small');
    if (!joostName || joostName=="") {
      break;
    }

    var fbid = 'undefined';
    if(apiResults[i].fbid) {
        fbid=apiResults[i].fbid;
    } else {
        fbid = 'undefined';
    }

    var youIndicator = "";
    if (window.User_Details) {
      if(window.User_Details.joostName == joostName) {
        youIndicator = ' <img src="/static/minilabel-you.png" class="minilabelYou" alt="You"/>';
      }
    }
	
    outputList.push({title: apiResults[i].userName,
                     link:'users/'+joostName+"/",
                     thumbnail:avatar,
                     type:'user',
                     showProfile: apiResults[i].showProfile,
                     fbid: fbid,
                     description:Group.format(apiResults[i]) + youIndicator
                     });
  }
  var el=document.getElementById('groupMembers');
  var el2=document.getElementById('groupMembersList');
  if (el) {
    el.innerHTML=renderThumbAndTextList(outputList);
    setTimeout(FBParseDom,0);
  }
  if (el2){
      displayGroupListAgain();
  }
};


Group.handleResponse=function(obj) {
  if (!obj.success) {
    errorOrNote(obj.success,obj.message);
  }

  Group.refreshList();
};


GroupsFriends = {
  theUser:undefined,
  service: "/api/groups/"
 };

GroupsFriends.setUser=function(u){
  this.theUser=u;
  this.refreshList();
};


GroupsFriends.message=function(text, where){
  document.getElementById(where).innerHTML = escapeHTML(text);
};

GroupsFriends.refreshList=function(){
  jsonRequest(this.service+"getGroupsForUserFriends?json_function=GroupsFriends.handleGetResp"+"&d="+new Date().valueOf());
  // XXX this should wait for success etc, and provide a waiting message
};

GroupsFriends.handleGetResp=function(obj) {
  // remove the throbber
  document.getElementById('groupsListFriends').innerHTML="";

  if (obj.success) {
    if(obj.groups.length>0){
      GroupsFriends.displayResults(obj);
    }else{
      GroupsFriends.message(GroupsFriends.theUser+" has no friends' groups at this time","groupsMsgFriends");
    }
  } else {
//  GroupsFriends.message(obj.message,"groupsMsgFriends");
    GroupsFriends.message(obj.message,"groupsListFriends");
  }
};

GroupsFriends.displayResults=function(obj) {
  var groupsList=document.getElementById("groupsListFriends");
  var apiResults=obj.groups;
  var apiResultsPeople=obj.people;
  var nApiResults=obj.groups.length;
  var outputList=[];
  for (var i=0;i<nApiResults;i++) {

   if(apiResultsPeople[i]){
    var title=apiResults[i].group;
    var num=apiResults[i].number;

    var groupAvatar="/static/joost_group_t1.jpg";

    if(apiResults[i].avatar){
       groupAvatar=apiResults[i].avatar;
    }

    var members="member";
    if(num>1){
      members="members";
    }
    var owner=apiResults[i].owner;
    var o="";
    if(owner && owner==this.theUser){
      o="<br /><b>Group Admin</b>";
    }

    if (!title || title=="") { continue; }
    outputList.push({title:escapeHTML(apiResultsPeople[i].userName)+" joined "+escapeHTML(title),
                       thumbnail:groupAvatar,
                       link:'groups/'+apiResults[i].id+"/",
                       type:'group',
                       description: ((num==0) ? o : num+" "+members+""+o)
                       });
   }
  }
  document.getElementById('groupsListFriends').innerHTML=renderThumbAndTextList(outputList);
};

GroupsFriends.handleResponse=function(obj) {
  if (!obj.success) {
    errorOrNote(obj.success,obj.message);
  }

  GroupsFriends.refreshList();
};

var groupComments = {
  getGroupComments : '/api/comment/group/get?groupId=%{id}&count=%{count}&start=%{start}&json_function=groupComments.handleResponseGroup',
  getUserComments : '/api/comment/user/get?userId=%{id}&count=%{count}&start=%{start}&json_function=groupComments.handleResponseUser',
  
  addCommentsApi : '/api/comment/group/add',
  
  commentsGroupRemoveProvider : '/api/comment/group/remove/%{commentId}?groupId=%{groupId}',
  commentsRemoveProvider : '/api/comment/remove/%{publicId}/%{commentId}/',
  
  flagCommentApi : '/api/flag/comment',
  loader:undefined,

  commentsProvider : "/api/comment/get/%i?json_function=Comments.renderComments",
  commentsSubmitProvider : "/api/comment/add/%i",
  commentTemplate:'<div class="thumbnails"><div class="thumbnail t1"><a href="/users/%{joostName}/" title="%{joostName}"><img src="%{pic}" alt="%{joostName}" class="t1" onerror="changeToFallback(this, \'/static/joost_generic_t1.jpg\');" onload="this.style.visibility=\'visible\'" style="visibility: hidden;"/></a></div><div class="break"></div></div><div class="description"><h3><a href="/users/%{joostName}/">%{joostName}</a></h3><p>%{profile}</p></div><div class="commentBody"><p>%{body}</p></div>%{actions}<div class="break"></div>',
  commentRemoveTemplate: '<p>Are you sure you want to remove this comment?</p><div class="row"><div class="label"></div><div class="input"><form onsubmit="groupComments.removeGroupComment(\'%{groupId}\', %{comment}, this);"><input type="submit" class="inputSubmit" value="Yes" /> <input type="reset" class="inputReset" value="No" onclick="groupComments.resetBtns(\'%{comment}\'); return false;" /></form></div><div class="break"></div>',
  commentRemoveTemplateVideo: '<p>Are you sure you want to remove this comment?</p><div class="row"><div class="label"></div><div class="input"><form onsubmit="groupComments.removeComment(\'%{groupId}\', %{comment}, this);"><input type="submit" class="inputSubmit" value="Yes" /> <input type="reset" class="inputReset" value="No" onclick="groupComments.resetBtns(\'%{comment}\'); return false;" /><input type="hidden" name="publicId" value="%{comment}"/><input type="hidden" name="commentId" value="%{comment}"/></form></div><div class="break"></div>',

  commentFlagTemplate: '<form onsubmit="groupComments.flag(\'%{groupId}\', \'%{comment}\', this);"><div class="hidden"><input type="hidden" name="groupId" value="%{groupId}"/><input type="hidden" name="commentId" value="%{comment}"/></div><div class="row"><div class="intro"><p>Tell us why you think this comment is inappropriate.</p></div><div class="input"><textarea cols="40" rows="4" name="reason" id="flag-comment-%{comment}"></textarea></div></div><div class="row"><div class="label"></div><div class="input"><input type="submit" class="inputSubmit" value="Submit" /> <input type="reset" class="inputReset" value="Cancel" onclick="groupComments.resetBtns(\'%{comment}\'); return false;" /><div class="break"></div></div></form>',
  commentFlagTemplateVideo: '<form onsubmit="groupComments.flag(\'%{groupId}\', \'%{comment}\', this);"><div class="hidden"><input type="hidden" name="publicId" value="%{groupId}"/><input type="hidden" name="commentId" value="%{comment}"/></div><div class="row"><div class="intro"><p>Tell us why you think this comment is inappropriate.</p></div><div class="input"><textarea cols="40" rows="4" name="reason" id="flag-comment-%{comment}"></textarea></div></div><div class="row"><div class="label"></div><div class="input"><input type="submit" class="inputSubmit" value="Submit" /> <input type="reset" class="inputReset" value="Cancel" onclick="groupComments.resetBtns(\'%{comment}\'); return false;" /><div class="break"></div></div></form>'
};

groupComments.update = function(type, id, count, start) {
  var me = groupComments;
  me.count = count;
  var options = {id : id, count : count, start : start};
  if(type == "group"){
    jsonRequest(substitute(me.getGroupComments, options));
  } else if(type == "user") {
    jsonRequest(substitute(me.getUserComments, options));
  } else if(type == "video") {
    jsonRequest(substitute(me.getUserComments, options));
  }
  document.getElementById('commentMessage').innerHTML='<div id="commentLoader"><p><img src="/static/big-loader.gif" alt=""></p></div>';
};

groupComments.toggleButtons = function(element, display) { 
  element.getElementsByTagName('img')[1].style.visibility = display ? 'visible' : 'hidden';
};

groupComments.handleResponse = function(response, type){
  var loader = document.getElementById('commentLoader');
  if(loader){
    loader.parentNode.removeChild(loader);
  }
  if(!response.success) {
    document.getElementById('commentMessage').innerHTML = "<p>Failed to get comments</p>";
    return false;
  }
  if(response.comments.length != groupComments.count && byid("comments_more")) {
    byid("comments_more").style.display = 'none';
  }
  if(response.comments.length == 0) {
    document.getElementById('commentMessage').style.display = "block";
    var comMessagePar = document.createElement('p'); 
    document.getElementById('commentMessage').appendChild(comMessagePar).innerHTML = "No comments yet";
    return false;
  }
  return true;
}

groupComments.handleResponseUser = function(response) {
  var me = groupComments;
  if(!me.handleResponse(response)){
    return;
  }
  var comments = response.comments;
  var user = response.user;
  var fragment = document.createDocumentFragment();
  for(var i = 0; i < comments.length; i++) {
    var data = comments[i];
    var html = new groupComments.UserComment();
    
    var title = (data.type == 'group') ? 'Group : ' + data.title : data.title;
    var href = (data.type == 'group') ? '/groups/' + data.groupId : semanticURLize(data.publicId, data.title);
    
    html.template.id = "commentli_" + data.id;
    
    html.title.innerHTML = escapeHTML(title);
    html.title.href = href;
    
    if(data.type == 'video') {
      html.thumbnailLink.onmouseout = function(){ groupComments.toggleButtons(this, false)};
      html.thumbnailLink.onmouseover = function(){ groupComments.toggleButtons(this, true)};
    }
    html.thumbnailLink.title = title;
    html.thumbnailLink.href = href;
    html.thumbnail.alt = title;
    html.thumbnail.src = data.thumbnail;
    
    html.timeStamp.innerHTML = data.date;
    html.body.innerHTML = makeParas(data.body, true);
    if(data.type == 'group') {
      html.actionsBtns.appendChild(groupComments.appendActionBtn(user.joostName, data.id, data.groupId, false));
    } else {
      html.actionsBtns.appendChild(groupComments.appendActionBtn(user.joostName, data.id, data.publicId, true));
    }
    fragment.appendChild(html.template);
  }
  document.getElementById('commentlistList').appendChild(fragment);
};

groupComments.UserComment = function() {
  var template = document.getElementById('userCommentTemplate').firstChild.cloneNode(true);
  this.template = template;
  
  var linkList = template.getElementsByTagName('a');
  this.thumbnailLink = linkList[0];
  this.title = linkList[1];
  
  var imgList = template.getElementsByTagName('img');
  this.thumbnail = imgList[0];
  this.playIcon = imgList[1];
  
  var textList = template.getElementsByTagName('p');
  this.timeStamp = textList[0];
  
  var divList = template.getElementsByTagName('div');
  this.body = divList[4];
  this.actionsBtns = divList[5];
};

groupComments.handleResponseGroup = function(response) {
  var me = groupComments;
  if(!me.handleResponse(response)){
    return;
  }
  var comments = response.comments;
  var groupObj = response.group;
  var fragment = document.createDocumentFragment();
  for(var i = 0; i < comments.length; i++) {
    var data = comments[i];
    fragment.appendChild(groupComments.createGroupComment(data, groupObj).template);
  }
  document.getElementById('commentlistList').appendChild(fragment);
};

groupComments.createGroupComment = function(data, groupObj) {
  var html = new groupComments.GroupComment();
  if(data.fbid && data.fbid !="" && data.showProfile) {
    var elemi = html.thumbnailLink.parentNode;
    var avatarTemplate = '<span class="thumbnail-t1-fb" style="display:block"><a href="/users/'+data.commenter+'" title="'+data.commenter+'"><fb:profile-pic uid="'+data.fbid+'" size="square" facebook-logo="false" linked="false" class="t1-fb"></fb:profile-pic></a></span><a href="http://www.facebook.com/profile.php?id='+data.fbid+'"><img src="/static/facebook-minilabel-f2.gif" alt="" class="fb-minilabel" /></a>';
    elemi.innerHTML = avatarTemplate;
  } 
  html.template.id = "commentli_" + data.id;
  html.thumbnailLink.href = '/users/' + data.commenter;
  html.thumbnailLink.title = data.commenterName;
  if(!data.commenterProfileImage){
    if(data.commenterGender){
      data.commenterProfileImage = (data.commenterGender == 'Male') ? '/static/joost_male_t1.jpg' : '/static/joost_female_t1.jpg';
    } else {
      data.commenterProfileImage = '/static/joost_generic_t1.jpg';
    }
  }
  html.thumbnail.src = data.commenterProfileImage;
  html.thumbnail.alt = data.commenterName;
  
  html.userInfo.innerHTML = escapeHTML(data.commenterDetails);

  html.displayName.innerHTML = escapeHTML(data.commenterName);
  html.displayName.href = '/users/' + data.commenter;

  html.timeStamp.innerHTML = data.date;
  html.body.innerHTML = makeParas(data.body, true);
  html.actionsBtns.appendChild(groupComments.appendActionBtn(data.commenter, data.id, groupObj.id));
  return html;
};

groupComments.GroupComment = function(){
  var template = document.getElementById('groupCommentTemplate').firstChild.cloneNode(true);
  this.template = template;
  
  var linkList = template.getElementsByTagName('a');
  this.thumbnailLink = linkList[0];
  this.displayName = linkList[1];
  this.title = linkList[2];
  
  var imgList = template.getElementsByTagName('img');
  this.thumbnail = imgList[0];
  this.playIcon = imgList[1];
  
  var textList = template.getElementsByTagName('p');
  this.userInfo = textList[0];
  this.timeStamp = textList[1];
  
  var divList = template.getElementsByTagName('div');
  this.body = divList[5];
  this.actionsBtns = divList[6];
};

groupComments.appendActionBtn = function(commenter, commentId, groupId, isPublicId) {
  if(commenter == (window.User_Details && User_Details.joostName)){
   var template = document.getElementById('groupRemoveBtnTemplate').cloneNode(true);
   template.id = 'commentAction' + commentId;
   template.getElementsByTagName('a')[0].onclick = function() {
                                                     var me = groupComments;
                                                     this.parentNode.style.display = 'none';
                                                     var div = document.createElement('div');
                                                     div.id= "commentBtn_" + commentId;
                                                     div.innerHTML = substitute((isPublicId) ? me.commentRemoveTemplateVideo : me.commentRemoveTemplate, {comment: commentId, groupId: groupId});
                                                     this.parentNode.parentNode.appendChild(div); return false;
                                                   };
    template.getElementsByTagName('a')[0].href = "#";
  } else {
    template = document.getElementById('groupFlagBtnTemplate').cloneNode(true);
    template.id = 'commentAction' + commentId;
    template.getElementsByTagName('a')[0].onclick = function() {
                                                     if (!User.loggedIn) {
                                                       User.promptForLogin('<h1>To flag this comment, you must be logged in</h1>');
                                                       return;
                                                     }
                                                     var me = groupComments;
                                                     this.parentNode.style.display = 'none';
                                                     var div = document.createElement('div');
                                                     div.id= "commentBtn_" + commentId;
                                                     div.innerHTML = substitute((isPublicId) ? me.commentFlagTemplateVideo : me.commentFlagTemplate, {comment: commentId, groupId: groupId});
                                                     this.parentNode.parentNode.appendChild(div); return false;
                                                   };
  template.getElementsByTagName('a')[0].href = "#";
  }
  return template;
};


groupComments.resetBtns = function(commentId) {
  var element = document.getElementById('commentBtn_' + commentId);
  element.parentNode.removeChild(element);
  var action = document.getElementById('commentAction' + commentId);
  if(action){
    action.style.display = "block";
  }
};

groupComments.removeGroupComment = function(groupId, commentId, form){ 
   var cleanup = function(response){
    if(!response || !response.success) {
      groupComments.resetBtns(commentId)
      return;
    }
    removeNode("commentli_" + commentId);
  };
  var url = substitute(groupComments.commentsGroupRemoveProvider, { groupId: groupId, commentId: commentId }, encodeURIComponent);
  jsonPost(url, null, cleanup, form);
};

groupComments.removeComment = function(publicId, commentId, form) {
  var cleanup = function(response){
    if(!response || !response.success) {
      groupComments.resetBtns(commentId)
      return;
    }
    removeNode("commentli_" + commentId);
  };
  var url = substitute(groupComments.commentsRemoveProvider, { publicId: publicId, commentId: commentId }, encodeURIComponent);
  jsonPost(url, null, cleanup, form);
}

groupComments.flag = function(groupId, commentId, form) {
  var cleanup = function(response){
    groupComments.resetBtns(commentId)
  };
  jsonPost(groupComments.flagCommentApi, null, cleanup, form);
};

groupComments.doComments = function(open){
  document.getElementById('groupCommentBtnHolder').style.display = (open) ? 'none' : 'block';
  document.getElementById('commentsInput').style.display = (open) ? 'block' : 'none';
};

groupComments.addComment = function(form, redirect) {
  groupComments.redirect = redirect;
  document.getElementById('commentsNoResult').style.display = 'none';
  document.getElementById('comment_error_div').style.display = "none";
  document.getElementById('commentMessage').style.display = "none";

  form.action = groupComments.addCommentsApi;
  var formSub = form.elements['comment_submit'];
  formSub.disabled=true;
  if (!groupComments.loader) {
    var newImg=document.createElement('img');
    newImg.alt="Please Wait";
    newImg.src="/static/big-loader.gif";
    groupComments.loader=newImg;
    formSub.parentNode.insertBefore(newImg,formSub);
    groupComments.submitElement=formSub;
  }
  var el=document.getElementById('comments');
  if (el) { el.style.display="block"; }
};

groupComments.result=function(response) {
  document.getElementById("comments_frame").src = "/blank.html";
  if (groupComments.submitElement) {
    groupComments.submitElement.disabled=false;
  }
  if (groupComments.loader) {
    groupComments.loader.parentNode.removeChild(groupComments.loader);
    groupComments.loader=null;
  }
  document.getElementById('comment_error_div').style.display="none";
  if (response.success) {
    document.getElementById('newcommentbody').value = "";
    if(groupComments.redirect) {
      window.location.href = groupComments.redirect
      return
    }

    if(document.getElementById('commentlistList') != null){
      var liArray = document.getElementById('commentlistList').getElementsByTagName('li');
      var template = groupComments.createGroupComment(response.comment, response.group).template;
      if(liArray.length) {
        document.getElementById('commentlistList').insertBefore(template, liArray[0]);
      } else {
        document.getElementById('commentlistList').appendChild(template);
      }
      document.getElementById('commentsNoResult').style.display = 'none';
    }
    FBParseDom();
    groupComments.doComments(false);
    
    //add comment to fb
    fbUtils.addGroupComment(response.group.id, response.group.name, response.comment.body);
  } else {
    document.getElementById('comment_error').innerHTML=response.message;
    document.getElementById('comment_error_div').style.display="block";
  }
};
;
var GroupVideos = {
  service:"/api/groups/getGroupEntities?groupId=%g&user=%u&start=0&count=%c&json_function=GroupVideos.list",
  groupEntityComments: "/api/groups/getGroupEntityComments/%{eventId}/?groupId=%{groupId}&json_function=%{callback}&count=%{count}&start=%{start}",
  commentsAdd : '/api/comment/group/addGroupEntity/',
  commentsRemoveProvider : '/api/groups/remove/%{eventId}',
  flagCommentApi : '/api/flag/comment',
  loader:undefined,
  count: 3,
  commentRemoveTemplate: '<div class="buttons">%{miniButtons}</div><div id="remove-confirm-%{comment}" style="display:none"><div class="break"></div><div class="brickForm brickFormRight"><form onsubmit="GroupVideos.remove(%{source}, %{comment}, this);"><div class="row"><div class="intro"><p>Are you sure you want to remove this %{subject}?</p></div></div><div class="row"><div class="label"></div><div class="input"><input type="submit" class="inputSubmit" value="Yes" /><input type="reset" class="inputReset" value="No" onclick="GroupVideos.hideRemove(\'%{source}\', %{comment}, this); return false;" /></div><div class="break"></div></div></form></div></div>',
   commentFlagTemplate: '<div class="buttons">%{miniButtons}</div><div id="flag-confirm-%{comment}" style="display:none"><div class="brickForm brickFormRight"><form onsubmit="return GroupVideos.flag(\'%{source}\', %{comment}, this);"><div class="hidden"><input type="hidden" name="eventId" value="%{source}"/><input type="hidden" name="groupId" value="%{groupId}"/><input type="hidden" name="commentId" value="%{comment}"/></div><div class="row" style="float:right"><div class="intro"><p>Tell us why you think this comment is inappropriate.</p></div><div class="break"></div><div class="input"><textarea cols="40" rows="4" name="reason" id="flag-comment-%{comment}"></textarea></div><div class="break"></div></div><div class="break"></div><div class="row" style="float:right"><div class="label"></div><div class="input"><input type="submit" class="inputSubmit" value="Submit" /> <input type="reset" class="inputReset" value="Cancel" onclick="GroupVideos.hideFlag(\'%{source}\', %{comment}, this); return false;" /></div><div class="break"></div></div><div class="row error" id="flag-comment-warn-%{comment}" style="display:none"><div class="warning" id="flag-comment-warn-body-%{comment}"></div><div class="break"></div></div></form></div></div>',
   commentTemplate:'<div class="thumbnails"><div class="thumbnail t1"><a href="/users/%{joostName}/" title="% title="%{displayName}""><img src="%{pic}" alt="%{displayName}" class="t1" onerror="changeToFallback(this, \'/static/joost_generic_t1.jpg\');" onload="this.style.visibility=\'visible\'" style="visibility: hidden;"/></a></div><div class="break"></div></div><div class="description"><p class="poster">Response by: <strong><a href="/users/%{joostName}/" title="%{displayName}">%{displayName}</a></strong> | <span>%{date}</span></p><p class="comBody">%{body}</p></div>%{actions}<div class="break"></div>',
  commentFBTemplate: '<div class="thumbnails"><div class="thumbnail t1"><div class="thumbnail-t1-fb"><a href="/users/%{joostName}/" title="%{displayName}"><fb:profile-pic uid="%{fbid}" size="square" facebook-logo="false" linked="false" class="t1-fb"></fb:profile-pic></a></div><a href="http://www.facebook.com/profile.php?id=%{fbid}"><img src="/static/facebook-minilabel-f2.gif" class="fb-minilabel"/></a></div><div class="break"></div></div><div class="description"><p class="poster">Response by: <strong><a href="/users/%{joostName}/"  title="%{displayName}">%{displayName}</a></strong> | <span>%{date}</span></p><p class="body">%{body}</p></div>%{actions}<div class="break"></div>',
  postTemplate: '<li eventid="%{eventId}" id="eventid_%{eventId}"><div class="brick brickB4"><div class="outerPadding"><div class="outerBorder"><div class="innerBorder"><div class="innerPadding"><div class="content"><div onmouseover="GroupVideos.toggleButtons(\'videolist_%{eventId}\', true);" onmouseout="GroupVideos.toggleButtons(\'videolist_%{eventId}\', false);"><div class="thumbnails"><div class="thumbnail t2"><a title="%{title}" href="/%{publicId}"><img onload="this.style.visibility=\'visible\'" style="visibility: visible;" alt="%{title}" class="t2" onerror="changeToFallback(this, \'/static/t2.jpg\');" src="%{thumbnail}"><img style="visibility: hidden;" src="/static/p2.png" class="p2" alt="" id="videolist_%{eventId}_play" rel="png"></a></div><div class="break"></div></div><div class="description"><h3><a href="/%{publicId}" title="%{title}" onclick="return epgPage.playNow(\'%{publicId}\', this);">%{shortTitle}</a><div id="videolist_%{eventId}_fauxButtons" class="fauxButtons" style="display: block;"><img class="miniButtonQueueAdd16Faux" src="/static/transparent.gif" alt=""><img class="miniButtonAddToFavorites16Faux" src="/static/transparent.gif" alt=""></div><div id="videolist_%{eventId}_buttons" class="fauxButtons" style="display: none;"><a class="miniButtonQueueAdd16" title="Add to My Queue" onclick="epgPage.addToList(event, \'playlist\', \'%{publicId}\', \'videolist_%{eventId}\'); return false;" href="#"><img alt="Add to My Queue" src="/static/transparent.gif"></a> <a class="miniButtonAddToFavorites16" title="Add to favorites" onclick="epgPage.addToList(event, \'favorites\', \'%{publicId}\', \'videolist_%{eventId}\'); return false;" href="#"><img alt="Add to favorites" src="/static/transparent.gif"></a></div><div class="break"></div></h3><div class="break"></div>%{validity}</p><p class="poster">Posted by: <strong><a href="/users/%{joostname}">%{displayName}</a></strong> | <span>%{postDate}</span></p><p class="comBody">%{commentBody}</p></div><div class="break"></div></div></div></div></div></div></div></div><div class="break"></div><div class="comCountBox">%{actions}<strong><a href="#" onclick="GroupVideos.showMoreComments(%{eventId},\'groupcom_%{eventId}\',\'%{groupId}\', this); return false;" class="miniButton miniButtonExpand" title="Responses" id="groupcom_%{eventId}_addcom"><span class="label"><span id="comCount_%{eventId}">%{countComments}</span> response%{plural}:</span><img src="/static/transparent.gif" alt="Responses"></a></strong> | <strong><a title="Add Response" id="groupcom_%{eventId}_addresp" class="miniButton miniButtonMore" onclick="GroupVideos.showMoreComments(%{eventId}, \'groupcom_%{eventId}\', \'%{groupId}\', this); return false;" href="#"><img alt="Add Response" src="/static/transparent.gif"/><span class="label">add response</span></a></strong><span id="imgLoader_%{eventId}"></span></div><div id="groupcom_%{eventId}" class="postcomments"></div></li>',
  postInactiveTemplate: '<li eventid="%{eventId}" id="eventid_%{eventId}"><div class="brick brickB4"><div class="outerPadding"><div class="outerBorder"><div class="innerBorder"><div class="innerPadding"><div class="content"><div class="notplayable"><div class="thumbnails"><div class="thumbnail t2"><span title="%{title}"><img onload="this.style.visibility=\'visible\'" style="visibility: visible;" alt="%{title}" class="t2" onerror="changeToFallback(this, \'/static/t2.jpg\');" src="%{thumbnail}"><img style="visibility: hidden;" src="/static/p2.png" class="p2" alt="" id="videolist_%{eventId}_play" rel="png"></span></div><div class="break"></div></div><div class="description"><h3><span title="%{title}">%{shortTitle}</span><div id="videolist_%{eventId}_fauxButtons" class="fauxButtons" style="display: block;"><img class="miniButtonQueueAdd16Faux" src="/static/transparent.gif" alt=""><img class="miniButtonAddToFavorites16Faux" src="/static/transparent.gif" alt=""></div></h3><div class="break"></div><p class="poster">Posted by: <strong><a href="/users/%{joostname}">%{displayName}</a></strong> <span>|</span> <span>%{postDate}</span></p><p class="comBody">%{commentBody}</p>%{validity}</div><div class="break"></div></div></div></div></div></div></div></div><div class="break"></div><div class="comCountBox">%{actions}<strong><a href="#" onclick="GroupVideos.showMoreComments(%{eventId},\'groupcom_%{eventId}\',\'%{groupId}\', this); return false;" class="miniButton miniButtonExpand" title="Responses" id="groupcom_%{eventId}_addcom"><span class="label"><span id="comCount_%{eventId}">%{countComments}</span> response%{plural}:</span><img src="/static/transparent.gif" alt="Responses"></a></strong> | <strong><a title="Add Response" id="groupcom_%{eventId}_addresp" class="miniButton miniButtonMore" onclick="GroupVideos.showMoreComments(%{eventId}, \'groupcom_%{eventId}\', \'%{groupId}\', this); return false;" href="#"><img alt="Add Response" src="/static/transparent.gif"/><span class="label">add response</span></a></strong><span id="imgLoader_%{eventId}"></span></div><div id="groupcom_%{eventId}" class="postcomments"></div></li>'
};

GroupVideos.display = function(groupId,userId,el) {
  if(el){
    var par = el.parentNode;
    for(var i=0;i<par.childNodes.length;i+=1) {
      var chEl=par.childNodes[i];
      if (chEl && chEl.nodeType==1) {
        chEl.className="";
      }
    }
    el.className='selected';
  }
  
  var url = GroupVideos.service.replace(/%g/gm, groupId).replace(/%u/gm, userId).replace(/%c/gm, GroupVideos.count);
  jsonRequest(url);
};

GroupVideos.list = function(obj) {
  if (obj && obj.posts && obj.posts.length>0) {
    var x = ['<ul>'];
    for(var i =0; i < obj.posts.length; i +=1) {
      x.push(GroupVideos.renderVideoList(obj.groupId, obj.posts[i], 'videos'));
    }
    x.push('</ul>');
    setHtml('videos',x.join(''));
    fixPNG();
  } else {
    setHtml('videos','<p style="margin-left:32px">Nothing yet</p>');
  }
};

GroupVideos.showMoreComments = function(eventId, grcomPlacer, groupId, caller) {
  var me = GroupVideos;
  me.containerId = grcomPlacer;
  me.eventId = eventId;
  var placer  = document.getElementById(grcomPlacer);
  if(placer && placer.hasChildNodes()) {
    if(caller.id != grcomPlacer+'_addcom') {
        caller.className="miniButton miniButtonMore";
    } else {
        caller.className="miniButton miniButtonExpand";
    }
	placer.innerHTML = "";
  } else {
    if(caller.id != grcomPlacer+'_addcom') {
        caller.className="miniButton miniButtonLess";
    } else {
        caller.className="miniButton miniButtonCut";
    }
	if (!GroupVideos.loader) {
		var newImg=document.createElement('img');
		newImg.alt="Please Wait";
		newImg.src="/static/big-loader.gif";
		GroupVideos.loader=newImg;
		byid('imgLoader_'+eventId).appendChild(newImg);
		jsonRequest(substitute(me.groupEntityComments, { eventId : eventId, groupId : groupId, callback : 'GroupVideos.handleResponse', count : me.count, start : 0}));		
	}
  }
};

GroupVideos.handleResponse = function(response){
  var me = GroupVideos;
  
  if (GroupVideos.loader) {
    GroupVideos.loader.parentNode.removeChild(GroupVideos.loader);
    GroupVideos.loader=null;
  }
  
  if(!response.success){
    //xxx error message
    return;
  }
    var html =  '<div class="brick brickB4 brickDrawer"><div class="outerPadding"><div class="outerBorder">' + 
              '<div class="innerBorder"><div class="innerPadding" style="padding-right:0"><div class="content">' +
			    '<div id="commentlist" class="commentsList">' +
                  '<div class="thumbnailsList">' +
                    '<div id="commentsNoResult_%{eventId}" style="display:none"></div>'+
                    '<div id="commentMessage"></div>' +
                    '<ul id="commentlistList_%{eventId}"></ul>' +
                    '<div class="break"></div>' +
                  '</div>' +
                '</div>' +
                '<div id="commentsPagination_%{eventId}"></div>' +
                '<div class="brick brickB4 brickBordered">' +
				'<div class="outerBorder">' +
				'<div class="innerBorder"><div class="innerPadding">' +
                '<div id="commentsContainer"><div class="brickForm">' +
                  '<iframe name="comments_frame_%{eventId}" id="comments_frame_%{eventId}" src="" style="display: none;"></iframe>' +
                  '<form onsubmit="return GroupVideos.add(this)" method="post" target="comments_frame_%{eventId}" id="commentForm">' +
                    '<input type="hidden" value="true" name="iframe"></iframe>' +
                    '<input type="hidden" value="true" name="message"></iframe>' +
                    '<input type="hidden" value="parent.GroupVideos.result" name="json_function"/>' +
					'<input type="hidden" value="%{eventId}" name="eventId"/>' +
                    '<fieldset>' +
                      '<div class="drawerIntro" style="width:180px">' +
                        '<h2>Respond</h2>' +
                        '<p>What do you think?<br />Respond and share your opinion.</p>' +
                        '<div class="break"></div>' +
                      '</div>' +
                      '<div class="drawerForm">' +
                        '<div class="row">' +
                          '<div class="label"><label for="newcommentbody">Add response</label></div>' +
                          '<div class="input"><textarea id="newcommentbody_%{eventId}" name="body" rows="8" disabled="true"></textarea></div>' +
                          '<div class="break"></div>' +
                          '<div style="display: none;" id="comment_error_div_%{eventId}" class="row error">' +
                          '<div class="label"></div>' +
                          '<div id="comment_error_%{eventId}" class="warning"></div>' +
                        '</div>'+
                      '</div>' +
                      '<div class="row rowSubmit">' +
                        '<div class="label"></div>' +
                        '<div class="input">' +
                          '<input type="submit" value="Post now" id="newcomment_submit" name="comment_submit" class="inputSubmit"/> ' +
                          '<input type="reset" value="Close" class="inputReset" onclick="GroupVideos.hideMoreComments(\'%{containerId}\'); return false;"/>' +
                        '</div>' +
                      '</div>' +
                      '<div class="break"></div>' +
                    '</div>' +
                    '<div class="break"></div>' +
                    '</fieldset>' +
                  '</form>' +
				  '</div></div>' +
				  '</div>' +
                '</div></div></div>' +
              '</div></div></div>' +
            '</div></div></div>';
           
  html = substitute(html, { eventId: response.eventId, containerId: me.containerId});
  byid(me.containerId).innerHTML = html;
  var newcommentbody=byid('newcommentbody_'+ response.eventId);
  if(window.User && User.loggedIn && User.interact) {
    newcommentbody.disabled = false;
    newcommentbody.value = "";
  } else {
    newcommentbody.value = "Commenting on content requires that you are logged in to Joost and have confirmed your email address.";
  }
  
  setHtml('commentlistList_'+response.eventId, "");

  var length = response.comments.length;
  if(!length) {
    byid('commentsNoResult_'+response.eventId).style.display = 'block';
  } else {
	var comCount = byid('comCount_'+response.eventId).innerHTML;
	if(comCount && comCount != "") {
		var newComCount = (comCount != "No" && comCount != "Hundreds") ? parseInt(comCount) : 0;	
		if(typeof response.count == 'number' && response.count > newComCount) {
			setHtml('comCount_'+response.eventId, response.count);
		}
	}  
  }
  for(var i = 0; i < length; i++){
    me.createComment(response.eventId, response.comments[i], response.groupId);
  }
  setTimeout(FBParseDom,0);
  var activitiesHTML = byid('commentsPagination_'+response.eventId);
  if (activitiesHTML) {
    paginateRender3(activitiesHTML, response.pagination, 'GroupVideos.gotoPage', response.eventId);
  }
  me.data = response;

};

GroupVideos.gotoPage = function(start, count, eventId) {
  jsonRequest(substitute(GroupVideos.groupEntityComments, { 
												 eventId : eventId, 
                                                 callback : 'GroupVideos.handleResponse', 
                                                 count : count, 
                                                 start : start }));
}

GroupVideos.createComment= function(eventId, commentObj, groupId) {
  var picture = '/static/joost_generic_t1.jpg';
  if(commentObj.commenterGender && commentObj.commenterGender != ""){
    picture = (commentObj.commenterGender.toLowerCase() == 'male') ? '/static/joost_male_t1.jpg' : '/static/joost_female_t1.jpg';
  }
  var me = GroupVideos;
  var actionBtn = GroupVideos.makeActionBlock(eventId, commentObj.commenter, groupId, commentObj.id, 'comment');
 
  if(commentObj.fbid && commentObj.fbid != 'undefined' && commentObj.showProfile) {
    var html = substitute(GroupVideos.commentFBTemplate, { joostName : escapeHTML(commentObj.commenter),
                                                      displayName : escapeHTML(commentObj.commenterName),
                                                      profile : commentObj.commenterDetails,
                                                      body : makeParas(commentObj.body),
                                                      date : commentObj.date,
                                                      pic : commentObj.commenterProfileImage || picture,
                                                      actions : actionBtn,
                                                      fbid : commentObj.fbid
                                                    });
  } else {
    html = substitute(GroupVideos.commentTemplate, { joostName : escapeHTML(commentObj.commenter),
                                                  displayName : escapeHTML(commentObj.commenterName),
                                                  profile : commentObj.commenterDetails,
                                                  body : makeParas(commentObj.body),
                                                  date : commentObj.date,
                                                  pic : commentObj.commenterProfileImage || picture,
                                                  actions: actionBtn
                                                });
  }
  var li = document.createElement("li");
  li.innerHTML = html;
  li.id = "comment-" + commentObj.id; //XXX: this seems to correspond with comment.uid. investigate.
  byid('commentlistList_'+eventId).appendChild(li);
};

GroupVideos.makeActionBlock = function(eventId, commenter, groupId, commentId, type) {
  var me = GroupVideos;
  var type = type || '';
  var joostName = (window.User_Details && User_Details.joostName) || "";
  var actionRemoveClick, actionFlagClick, remTitle, flagTitle, remSubject;
  if(commentId && commentId != ""){
	actionRemoveClick = "GroupVideos.confirmRemove(" + eventId + ", " + commentId +"); return false;"; 
	actionFlagClick = "GroupVideos.confirmFlag('" + eventId + "', " + commentId + "); return false;"; 
	if (type != 'comment') {
		remTitle = "Remove this post and comment";
		flagTitle = "Flag this post and comment";
        remSubject = "post and comment";
	} else {
		remTitle = "Remove this comment";
		flagTitle = "Flag this comment";
        remSubject = "comment";
	}
  } else {
  	actionRemoveClick = "GroupVideos.confirmRemove(" + eventId + "); return false;";
	actionFlagClick = "GroupVideos.confirmFlag(" + eventId + "); return false;";
	remTitle = "Remove this post";
	flagTitle = "Flag this post";
    remSubject = "post";
	var commentId = eventId;
  }
  if(commenter == joostName){
    var btn = { id: "remove-button-" + commentId, title: remTitle, href: "#", 
                onclick: actionRemoveClick,
                icon: "miniButtonClose", righticon: true, hoverlabel: true };
    var actionBlock = substitute(me.commentRemoveTemplate, { miniButtons : Layout.miniButtons([btn]), 
                                                             comment: commentId,
                                                             source: eventId,
                                                             subject: remSubject});
  } else if(joostName !== ''){
    btn = { id: "flag-button-" + commentId, title: flagTitle, href: "#",
            onclick: actionFlagClick,
            icon: "miniButtonFlag", righticon: true, hoverlabel: true };
    actionBlock = substitute(me.commentFlagTemplate, { miniButtons: Layout.miniButtons([btn]),
                                                       comment: commentId,
                                                       source: eventId,
													   groupId: groupId});
  } else {
    actionBlock = "";
  }
  return actionBlock;
};

GroupVideos.completeLogin = function(eventId) {
  var newcommentbody=byid('newcommentbody+'+eventId);
  if(window.User && User.interact) {
    newcommentbody.disabled = false;
    newcommentbody.value = "";
  } else {
    newcommentbody.value = "Commenting on content requires that you have confirmed your email address.";
  }
};

GroupVideos.completeConfirmation = function() {
  var newcommentbody=byid('newcommentbody+'+eventId);
  newcommentbody.disabled = false;
  newcommentbody.value = "";
};

GroupVideos.add = function(form) {
  var eventId = form.elements['eventId'].value;
  if (!User.loggedIn) {
    User.promptForLogin('<h1>To comment on content, you must be logged in</h1>',function() {GroupVideos.completeLogin(eventId)});
    return true;
  } else if (!User.interact) {
    User.promptForConfirmation('<h1>To comment on content, you must have confirmed your email address</h1>',GroupVideos.completeConfirmation(eventId));
    return true;
  }
  
  var bodytxt = document.getElementById('newcommentbody_'+eventId).value;
  if(bodytxt !='' && (bodytxt.length < 2 || bodytxt.length > 2023)) {
    byid('comment_error_'+eventId).innerHTML='Comment must be between 2 and 2042 characters';
    byid('comment_error_div_'+eventId).style.display = "block";
    return true;
  }
  
  byid('commentsNoResult_'+eventId).style.display = 'none';
  byid('comment_error_div_'+eventId).style.display = "none";
  
  form.elements['message'].value=bodytxt;
  form.action = GroupVideos.commentsAdd;
  var formSub = form.elements['comment_submit'];
  formSub.disabled = true;
  if (!GroupVideos.loader) {
    var newImg=document.createElement('img');
    newImg.alt="Please Wait";
    newImg.src="/static/big-loader.gif";
    GroupVideos.loader=newImg;
    formSub.parentNode.insertBefore(newImg,formSub);
    GroupVideos.submitElement=formSub;
  }
};

GroupVideos.result = function(obj) {
  var me = GroupVideos;
  var el=byid('comments_frame_'+obj.eventId);
  if (el) {
    el.location = "/blank.html";
  }
  if (GroupVideos.submitElement) {
    GroupVideos.submitElement.disabled=false;
  }
  if (GroupVideos.loader) {
    GroupVideos.loader.parentNode.removeChild(GroupVideos.loader);
    GroupVideos.loader=null;
  }
  document.getElementById('comment_error_div_'+obj.eventId).style.display="none";
  if (obj.success) {
    byid('commentForm').reset();
    //update the count
    
    core.notifier.addMsg('Successfully added comment!', {style : 'success'});
    
    var timeStr = new Date().getTime();
    jsonRequest(substitute(me.groupEntityComments + '&time=' + timeStr, { eventId : obj.eventId, callback : 'GroupVideos.handleResponse',  count : me.count}));
    
  } else {
    byid('comment_error_'+obj.eventId).innerHTML=obj.message;
    byid('comment_error_div_'+obj.eventId).style.display="block";
  }
  
};

GroupVideos.confirmRemove=function(source, comment){
  // show the confirmation box
  if(comment && comment != 'undefined'){
	show("remove-confirm-" + comment, "block");
	hide("remove-button-" + comment);
  } else {
	show("remove-confirm-" + source, "block");
	hide("remove-button-" + source);
  }
};

GroupVideos.hideRemove = function(source, comment, frm) {
  if(comment && comment != 'undefined'){
    hide("remove-confirm-" + comment);
    show("remove-button-" + comment, "");
  } else {
    show("remove-confirm-" + source, "block");
    hide("remove-button-" + source);
  }
};

GroupVideos.confirmFlag=function(source, comment){
  // show the confirmation box
  if(comment && comment != 'undefined'){
  show("flag-confirm-" + comment, "block");
  hide("flag-button-" + comment);
  } else {
	show("flag-confirm-" + source, "block");
	hide("flag-button-" + source);
  }
};

GroupVideos.hideFlag = function(source, comment, frm) {
  if(comment && comment != 'undefined'){
	hide("flag-confirm-" + comment);
	show("flag-button-" + comment, ""); //just remove the display:none
  } else {
	show("flag-confirm-" + source, "block");
	hide("flag-button-" + source);
  }
};

GroupVideos.flag=function(eventId,commentId,frm){
  var cleanup = function(response){
    if(!response || !response.success){
      setHtml("flag-comment-warn-body-" + commentId, "<p>Sorry, something went wrong. Please try again.</p>");
      show("flag-comment-warn-" + commentId, "block");
      return;
    }
    setHtml("flag-confirm-" + commentId, '<div class="buttons"><p>Thanks for flagging this comment.</p></div>');
  };

  hide("flag-comment-warn-" + commentId);

  var body = frm.elements['reason'].value;
  if(!body) {
    setHtml("flag-comment-warn-body-" + commentId, "<p>Please enter a reason this comment is inappropriate.</p>");
    show("flag-comment-warn-" + commentId, "block");
    return false;
  } else {
    jsonPost(GroupVideos.flagCommentApi, null, cleanup, frm);
  }
  return true;
};

GroupVideos.remove = function(eventId, commentId, form){
  var me = GroupVideos;
  var cleanup = function(response){
    if(!response || !response.success) {
      GroupVideos.hideRemove(eventId, commentId);
      return;
    }
    if(eventId != commentId) {
      removeNode("comment-" + commentId);
    } else {
      removeNode("eventid_" + commentId);
    }
    var comCount = byid('comCount_'+eventId);
    if (comCount) {comCount = comCount.innerHTML}
    var comCountNum=parseInt(comCount,10);
    if(comCount && comCount != "" && !isNaN(comCountNum)) {
      var newComCount = (comCount != "1") ?  -1 + parseInt(comCount,10) : "No";
      byid('comCount_'+eventId).innerHTML = newComCount;
    }
  };
  var url = substitute(me.commentsRemoveProvider, { eventId: eventId }, encodeURIComponent);
  if(eventId != commentId) {
    jsonPost(url, null, cleanup, form, {commentId: commentId}); 
  } else {
    jsonPost(url, null, cleanup, form); 
  }  
};

GroupVideos.hideMoreComments = function(container) {
  var me = GroupVideos;
  me.containerId = container;
  var placer  = document.getElementById(container);
  var caller = byid(container+'_addresp');
  var caller2 = byid(container+'_addcom');
  if(caller) {
    caller.className="miniButton miniButtonMore";
    caller2.className="miniButton miniButtonExpand";
  }
  placer.innerHTML = "";
};

GroupVideos.toggleButtons = function (thumbnail, display, keepBtns) {
  var btns = document.getElementById(thumbnail + '_buttons');
  var fauxBtns = document.getElementById(thumbnail + '_fauxButtons');
  var play = document.getElementById(thumbnail + '_play');
  var hideDesc = document.getElementById(thumbnail + '_hideDesc');
  var note = document.getElementById(thumbnail + '_note');
  if (display) {
    if (btns && !btns.doHide) {
      btns.style.display = "block";
    }
    if (fauxBtns) {
      fauxBtns.style.display = "none";
    }
    if (play) {
      play.style.visibility = "visible";
    }
    if (hideDesc) {
      hideDesc.style.display = "none";
    }
    if(note) {
      setTimeout(function(){
         if(note && note.parentNode) {
           note.parentNode.removeChild(note);
           btns.doHide = false
         }
      }, 1000);
    }
  } 
  else {
    if (!keepBtns && btns) {
      btns.style.display = "none";
    }
    if (fauxBtns) {
      fauxBtns.style.display = "block";
    }
    if (play) {
      play.style.visibility = "hidden";
    }
    if (hideDesc) {
      hideDesc.style.display = "block";
    }
  }
};

GroupVideos.renderVideoList = function (groupId, post) {
    var me = GroupVideos;
    var safeTitle = post.shortTitle ? post.shortTitle : post.title;
    var actionBtn = GroupVideos.makeActionBlock(post.eventId, post.joostname, groupId, '', false);
    var countComments = post.countComments !== 0 ? post.countComments : "No";
    var plural = post.countComments !== 1 ? "s" : "";
    var validity = !post.isGeoPlayable ? '<p class="noplay">Not playable in your region</p>' : post.expiredbit ? '<p class="noplay">Expired</p>' : "";
    
    var postTemp = !post.isGeoPlayable ? me.postInactiveTemplate : post.expiredbit ? me.postInactiveTemplate : me.postTemplate;

    var post = substitute(postTemp, {eventId: post.eventId, publicId: post.publicId, groupId: groupId, title: escapeHTML(post.title), thumbnail: post.thumbnail, joostname: post.joostname, displayName: escapeHTML(post.displayName), commentBody: escapeHTML(post.commentBody), countComments: countComments, postDate: post.postDate, shortTitle: escapeHTML(safeTitle), actions: actionBtn, validity: validity, plural: plural});

    return post;
};

;

if (window.GroupsDelayedExecute) {
  for (var i=0;i<GroupsDelayedExecute.length;i++) {
    try {
      GroupsDelayedExecute[i]();
    } catch (e) {
      // so others are not blocked
    }
  }
}