$(document).ready(function(){
	
	
	var get_trainer_info = function(loading,trainer_id) {
		
		$.ajax({
  			url: '/trainers/ajax_get_trainer',
  			dataType: 'html',
  			data: {
  				id: trainer_id
  			},
  			success: function(data) {
  					
  				$('#trainer-details').html(data).slideDown(500,function() { loading.hide(); });
 						
    		}
		});
		
	}
	
	// get the id from the id (trainer-{id})
	var get_id_from_string = function(str) {
		
		str = str.substring(str.indexOf('-')+1,str.length);
		
		return str;
		
	}
	
	var do_hover_in_animation = function(obj) {
		
		obj.animate({opacity: 1}, { duration: 200, easing: "" });	
    	obj.children('.trainer-info').animate({bottom:0},{duration:300,queue: true});
	
	}
	
	var do_hover_out_animation = function(obj) {
		
		obj.animate({opacity: .7}, { duration: 500, queue: true });
    		
    	obj.children('.trainer-info').animate({bottom:-obj.children('.trainer-info').innerHeight()},{duration: 100,queue: true});
		
	}
	
	
	// popup for the trainer information
	$('#trainer-list .trainer').each(function() {

    
    	$(this).children('.trainer-info').css({bottom:-$(this).children('.trainer-info').innerHeight()});
    	$(this).fadeTo(1000,.7);
    
    	// this is for getting the trainer data
    	$(this).click(function(e) {
    	
    		$(this).siblings().each(function() {
    			
    			do_hover_out_animation($(this));
    			
    		});
    	
    		e.preventDefault();
    	
    		if(!$(this).hasClass('active')) {
    	
    			$(this).addClass('active').siblings().removeClass('active');
    		
    			var loading = $(this).children('.trainer-info').children('.loading');
    			loading.show();
    		
    			var trainer_id = get_id_from_string($(this).attr('id'));
    		
    			$('#trainer-details').slideUp(500,function() { get_trainer_info(loading,trainer_id) });
    		}
    	
    	});
    	
    
    	$(this).hover(function() {
    	
    		do_hover_in_animation($(this));  
    		 	
    	}, function() {

    		
    		if(!$(this).hasClass('active')) {
    		
    			do_hover_out_animation($(this));
    			
			}
    		
    	});
    	
    	
    	
    
    });
	
});