//= 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();
  $("#input_activities").Watermark("<%= I18n.t('activity.input') %>","#666");
  $("#event_name").Watermark("<%= I18n.t('event.input') %>","#666");
});


$(document).ready(function() {
  activate_anti_rebounds();
});

activate_anti_rebounds = function(){
  $('#wrapper_activities_header form').submit(function() {
    $(this).find('input[type=text]').each(function() {
      $(this).blur().attr('readonly', true);
    });
    $("#masterSubmitButton").val("<%= I18n.t('activity.sending') %>...").attr("disabled", true); 
    
    // Add _relation_ids[] parameter from authorization selector
    $('.liveAdded').remove();
    
    var currentForm = $(this);
  
    $('#security option:selected').each(function() {
                currentForm.append(
                $('<input/>')
                  .addClass('liveAdded')
                  .attr('type', 'hidden')
                  .attr('name', currentForm
                  .attr('id').split('_')[1]+'[_relation_ids][]')
                  .val($(this).attr('value')));
    });
    return true;
  });
  
  $('.new_comment').submit(function() {
    $(this).find('input[type=text]').each(function() {
      $(this).blur().attr('readonly', true); 
    });
    $(this).find(".submitActivity").each(function() {
      $(this).val("<%= I18n.t('activity.sending') %>...").attr("disabled", true);   
    });
    return true;    
  });
}

unblock_all_forms = function() {  
  //Sharing buttons
  $(".submitActivity").val("<%= I18n.t('share') %>").removeAttr("disabled");  
  //Header activities form
  $("#masterSubmitButton").val("<%= I18n.t('share') %>").removeAttr("disabled");
  $('#wrapper_activities_header form').find('input[type=text]').each(function() {
    $(this).removeAttr("readonly").val("").blur();
  });  
  //New comments
  $('.input_new_comments').each(function() {
    $(this).removeAttr("readonly").val("");
  }); 
}

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


});