$(document).ready(function() {
	
	$('.group_image').children('a').children('img').mouseover(function() {
		$(this).animate({
			opacity: 0.6
		});
	});
	
	$('.group_image').children('a').children('img').mouseout(function() {
		$(this).animate({
			opacity: 1
		});
	});
	
   
   // initiate the click action for the group images
   $('.group_handle').click(function() {
      groupImageAnimateOut(this);
   });
   
   Shadowbox.init({
      counterType: 'skip',
      overlayOpacity: '.8'
   });
   
   $('#event_ajax_loader').ajaxStart(function() {
      $(this).show();
   });
   
   $('#event_ajax_loader').ajaxComplete(function() {
      $(this).hide();
   });
	
   
   // previous button for the small images in each group detail
   $('.previous').click(function() {

      if ($(this).parent().siblings().position().left < 0){
         $(this).parent().siblings().animate({
            left: '+=' + 200
         });
      }
   });
   
   
   // next button for the small images in each group detail
   $('.next').click(function() {
      element = $(this).parent().siblings();

      parent_position = element.parent().offset().left;
      parent_width = element.parent().parent().innerWidth();
      
      last_element_position = element.children(':last').offset().left;

      if (last_element_position > (parent_width + parent_position - 100)){
         $(this).parent().siblings().animate({
            left: '-=' + 200
         });
      }
   });

   
   
   
   // function for the initial animation of the pictures 
   function groupImageAnimateOut(sender) {
      $('.group_handle').unbind('click');
      // unbind the click event
      $('.group_handle').unbind('click');
      clicked_item = $(sender).attr('id');
      clicked_item_pos_l = $(sender).parent().parent().offset().left;
      
      // animate all group_image divs except the one that was clicked
      $('.group_handle').each(function() {
         curr_id = $(this).attr('id');         
         // get the position of each image
         this_pos_l = $(this).parent().parent().offset().left;
         
         // check to see if the current group_handle is not the one that was clicked         
         if ($(this).attr('id') != clicked_item){
            
            // check to see which side of the clicked picture each other picture is and move it accordingly
            if (this_pos_l > clicked_item_pos_l){
               $(this).parent().parent().animate({
                  left: '+=' + 720
               });
            }else {
               $(this).parent().parent().animate({
                  left: '-=' + 720
               });
            }
            

         }
         
      });
      
      // move the clicked picture to the left
      end_pos = $('#beach_bar').parent().parent().offset().left;
      start_pos = $('#'+ clicked_item).parent().parent().offset().left;
      ammt_to_move = start_pos - end_pos;
      $('body').data('ammt_to_move', ammt_to_move);
      $('#' + clicked_item).parent().parent().animate({
         left: '-=' + ammt_to_move
      }, function () {
         // fade in details div
         $('#'+clicked_item+'_details').fadeIn();
      });
      
      // bind the animate in click event to the group handle
      $('.group_handle').bind('click', function() {groupImageAnimateIn(this)});

   }
   
   // function for the animation in of the group pictures
   function groupImageAnimateIn(sender) {
      clicked_item_id = $(sender).attr('id');
      // fade out the details div
      $('#'+clicked_item_id+'_details').fadeOut(function(){
      
      // move the clicked picture to the right
      $('#'+ clicked_item_id).parent().parent().animate({
         left: '+=' + $('body').data('ammt_to_move')
      });
      $('.group_handle').each(function() {
         i = 1;
         curr_id = $(this).attr('id');
					
         curr_pos = $(this).parent().parent().offset().left;
         orig_pos = $('body').data(curr_id);
         


         if (curr_pos < 200 && curr_id != clicked_item_id) {
					
            $(this).parent().parent().animate({
               left: '+=' + 720
            });
         }else if (curr_pos >0 && curr_id != clicked_item_id) {
            $(this).parent().parent().animate({
               left: '-=' + 720
            });
         }
         
      });
      });
      $('.group_handle').unbind('click');
      $('.group_handle').bind('click', function() {groupImageAnimateOut(this)});
      

   }
   
   
   
   // get and display the event details
   
   $('.event_link').click(function() {
      id = $(this).attr('id');
      if ($('#event_details').length == 0) {

         getEventDetails(id);
      }else {
         $('#event_details').hide('slide', function() {
            $('#event_details').remove();
            getEventDetails(id);
         })
      }
      
    
   });


   function getEventDetails(id) {
     // id = $(this).attr('id');
         id = id.replace('_','');
         ajax_request = $.ajax({
            url: '/events/getEventDetails',
            type: 'post',
            data: ({id: id}),
            success: function(data) {
               $('#events_details').before(data);
							 
               //left_position = $('#events_details').offset().left + $('#events_details').width() - 50;
							 left_position = $('#events_details').offset().left + $('#events_details').width() - 225;
               $('#event_details').css('left', left_position+'px');
               $('#event_details').show('slide');
               $('#close_event_details').bind('click',function() {closeEventDetails(); });
               $(document.body).bind('click', function(event) {
                  closeEventDetails();
                  $(document.body).unbind('click');
               });
               $('#event_details').mouseenter(function() {
                  $(document.body).unbind('click');
               }).mouseleave(function() {
                  $(document.body).bind('click', function(event) {
                     closeEventDetails();
                     $(document.body).unbind('click');
                  });
               });
            }
         });
                  $(document.body).unbind('click');
   }
	
   function closeEventDetails() {
      $('#event_details').hide('slide', function() {
         $('#event_details').remove();
      })
   }



/*************************************************************
**                   VIEW POST COMMENTS                     **
*************************************************************/

$('.event_comment_btn').click(function() {
   
   //alert('hello');
   
});


   



   
});