//= require jquery.livequery
//= require chosen.jquery
//
//initial state
$(function() {
  $('#wrapper_activities_header form').hide();
  $('#new_<%= SocialStream.activity_forms.first %>').show();
  $('#select_<%= SocialStream.activity_forms.first %>').addClass('selected');
  $('#security').chosen();
});


$(document).ready(function() {
  $('#new_post').submit(function() {
    $("#input_activities").blur();
    $("#masterSubmitButton").val("<%= I18n.t('activity.sending') %>...");
    $('#new_post').attr("disabled", true);   
    $('#masterSubmitButton').attr("disabled", true);   
    $('#input_activities').attr('readonly', true);     
    return true;
  });
});



//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();
});

//submit
$('#masterSubmitButton').live('click',function(){
	$('.liveAdded').remove();
        $('#security option:selected').each(function() {
                $('#wrapper_activities_header form:visible').append(
                $('<input/>')
        	  .addClass('liveAdded')
        	  .attr('type', 'hidden')
        	  .attr('name', $('#wrapper_activities_header form:visible')
        	  .attr('id').split('_')[1]+'[_relation_ids][]')
        	  .val($(this).attr('value')));
        });
	$('#wrapper_activities_header form:visible').submit();
});

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


//javascript for comments
$(function() {
  //"write new comment..." text in every text field for comments
  $("#input_activities").Watermark("<%= I18n.t('activity.input') %>","#666");
  $(".input_new_comments").Watermark("<%= I18n.t('comment.input') %>","#666");
  
  //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();
  
  //if there are 4 or more commments we only show the last 2 and a link to show the rest
  $(".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>");
  		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();
	$(this).parent(".new_comment").children(".activities_comment_btn").show();
});

//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'});
  });


});