//= require jquery.livequery
//= require jquery.tipsy
//
//= require social_stream.wall
//
//initial state

$('#masterSubmitButton').live('click',function(){
  $('#wrapper_activities_header form:visible').submit();
});


//clicks form selector
$('.activity_form_selector').live('click',function(){
	$('.activity_form_selector').removeClass('selected');
	$(this).addClass('selected');
	$('#wrapper_activities_header form').hide();
	$('#new_'+this.id.split("_")[1]).show();
});

//javascript for main activities input
$(function() {
  $("#input_activities").click(function(){
      $("#masterSubmitButton").show();
  });
});


//javascript for comments
$(function() {  
  //show only the text fields for new comment if there are any comment to the post
  $(".activity_new_comment").each(function(){
  	if ($.trim($(this).siblings(".activity_comments").text()) != ""){
  	  $(this).show();
  	}
  });
  $(".activities_comment_btn").hide();
  $(".actor_name_new_comment").hide();
  $(".actor_logo_new_comment").hide();
  
  //if there are 4 or more commments we only show the last 2 and a link to show the rest
  $("#wall .activity_comments").each(function(){
  	var comments = $(this).children(".subactivity");  	
  	//check if there are more than 3 comments
  	if (comments.size() > 3){
  		$(this).prepend("<div class='hide_show_comments'><a href='#' onclick='showAllComments(\""+ 
  		                 $(this).attr('id') +"\"); return false;'>" + I18n.t('comment.view_all') + "(" +
  		                comments.size() + ")</a></div><div class='space_comments'></div>");
  		comments.slice(0,comments.size()-2).hide();
  		//hide alto space_comments
  		$(this).children(".space_comments").slice(0,comments.size()-2).hide();
  	}
  });
});

showAllComments = function(id){
	$("#"+id).children().show();
	//and hide the hide_show_comments
	$("#"+id).children(".hide_show_comments").hide();
};

//usa livequery para usar el javascript luego de una accion con  AJAX
$(".input_new_comments").live("click", function(){
	$(".activities_comment_btn").hide();
	$(".new_comment").removeClass("new_comment_shown");
	$(".actor_name_new_comment").hide();
	$(".actor_logo_new_comment").hide();
  var comment= $(this).parents(".activity_new_comment");
  comment.find(".activities_comment_btn").show();
  $(this).parents(".new_comment").addClass("new_comment_shown");
  comment.find(".actor_name_new_comment").show();
  comment.find(".actor_logo_new_comment").show();
  return false;
});

autoSize= function(activity_dom_id) {
  // Copy textarea contents; browser will calculate correct height of copy,
  // which will make overall container taller, which will make textarea taller.
  var text = $("#comment_text_"+activity_dom_id).val().replace(/\n/g, '<br/>');
  $("#copy_comment_text_"+activity_dom_id).html(text);
}  
    

//javascript for tocomment option
$(".to_comment").live("click", function(){
  $(this).parents(".activity_content").find(".activity_new_comment").show();
  $(this).parents(".activity_content").find(".input_new_comments").click();  
  $(this).parents(".activity_content").find(".input_new_comments").focus();
	return false;
});

//move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
$('#carousel_ul li:first').before($('#carousel_ul li:last'));


//when user clicks the image for sliding right
$('#right_scroll img').livequery("click",function(){

  //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
  var item_width = $('#carousel_ul li').outerWidth() + 10;

  //calculae the new left indent of the unordered list
  var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;

  //make the sliding effect using jquery's anumate function '
  $('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){

      //get the first list item and put it after the last list item (that's how the infinite effects is made) '
      $('#carousel_ul li:last').after($('#carousel_ul li:first'));

      //and get the left indent to the default -210px
      $('#carousel_ul').css({'left' : '-210px'});
  });
});

//when user clicks the image for sliding left
$('#left_scroll img').livequery("click",function(){

  var item_width = $('#carousel_ul li').outerWidth() + 10;

  /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
  var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;

  $('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){

  /* when sliding to left we are moving the last item before the first list item */
  $('#carousel_ul li:first').before($('#carousel_ul li:last'));

  /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
  $('#carousel_ul').css({'left' : '-210px'});
  });


});