(function($, window) {

	$(document).ready(function(){
		var speed = 250;
		
		var discoverIsActive = false;
		var developIsActive = false;
		var deployIsActive = false;
		
		var $servicesDiscoverActive = $("#services_discover_active");
		var $servicesDiscover = $('#services_discover');
		var $servicesDiscoverShadow = $('.services_discover_shadow');
		var $servicesDevelopActive = $("#services_develop_active");
		var $servicesDevelop = $("#services_develop");
		var $servicesDevelopShadow = $(".services_develop_shadow");
		var $servicesDeployActive = $("#services_deploy_active");
		var $servicesDeploy = $("#services_deploy");
		var $servicesDeployShadow = $(".services_deploy_shadow");
		
		$servicesDiscoverActive.fadeTo(0,0);
		$servicesDevelopActive.fadeTo(0,0);
		$servicesDeployActive.fadeTo(0,0);

		$servicesDiscover.click(function(e) {
			if (discoverIsActive) {
				$servicesDiscoverActive.stop();
				$servicesDiscover.stop();
				$servicesDiscoverShadow.stop();
				$servicesDiscoverActive.fadeTo(speed, 0);
				$servicesDiscover.animate({ top: 25}, speed );
				$servicesDiscoverShadow.animate({ 
					width:250,
					marginLeft:0,
					marginTop:0,
					height:500
				}, 300 );
				
				
				$servicesDiscoverActive.stop();
				$servicesDiscover.stop();
				$servicesDiscoverShadow.stop();
				$servicesDiscoverActive.fadeTo(speed, 0);
				$servicesDiscover.animate({ top: 25}, speed );
				$servicesDiscoverShadow.animate({ 
					width:250,
					marginLeft:0,
					marginTop:0,
					height:500
				}, 300 );
				
				discoverIsActive = false;
			}
			else {
				$servicesDiscoverActive.stop();
				$servicesDiscover.stop();
				$servicesDiscoverShadow.stop();
				$servicesDiscoverActive.fadeTo(speed, 1);
				$servicesDiscover.animate({ top: 15}, speed );  
				$servicesDiscoverShadow.animate({ 
					width:250,
					marginLeft:0,
					marginTop:10,
					height:500
				}, 300 );
				
				
				$servicesDiscoverActive.stop();
				$servicesDiscover.stop();
				$servicesDiscoverShadow.stop();
				$servicesDiscoverActive.fadeTo(speed, 1);
				$servicesDiscover.animate({ top: 15}, speed );  
				$servicesDiscoverShadow.animate({ 
					width:250,
					marginLeft:0,
					marginTop:10,
					height:508
				}, 300 );
				
				discoverIsActive = true;
			}
		});
		
		$servicesDevelop.click(function(e) {
			if(developIsActive) {	
				$servicesDevelopActive.stop();
				$servicesDevelop.stop();
				$servicesDevelopShadow.stop();
				  
				$servicesDevelopActive.fadeTo(speed, 0);
				$servicesDevelop.animate({ top: 25}, speed );  

				$servicesDevelopShadow.animate({ 
					width:250,
					marginLeft:0,
					marginTop:0,
					height:500
				}, 300 );
				
				  
				$servicesDevelopActive.fadeTo(speed, 0);
				$servicesDevelop.animate({ top: 25}, speed );  
				  
				$servicesDevelopShadow.animate({ 
					width:250,
					marginLeft:0,
					marginTop:0,
					height:500
				}, 300 );
				
				developIsActive = false;
			}
			else {
				$servicesDevelopActive.stop();
				$servicesDevelop.stop();
				$servicesDevelopShadow.stop();
				  
				$servicesDevelopActive.fadeTo(speed, 1);
				$servicesDevelop.animate({ top: 15}, speed );  
				$servicesDevelopShadow.animate({ 
					width:250,
					marginLeft:0,
					marginTop:0,
					height:500
				}, speed );

			  
				$servicesDevelopActive.fadeTo(speed, 1);
				$servicesDevelop.animate({ top: 15}, speed );  
				$servicesDevelopShadow.animate({ 
					width:250,
					marginLeft:0,
					marginTop:10,
					height:508
				}, speed );
				
				developIsActive = true;
			}
		});


		$servicesDeploy.click(function(e) {
			if (deployIsActive) {
				$servicesDeployActive.stop();
				$servicesDeploy.stop();
				$servicesDeployShadow.stop();
				$servicesDeployActive.fadeTo(speed, 0);
				$servicesDeploy.animate({ top: 25}, speed );
				$servicesDeployShadow.animate({ 
					width:250,
					marginLeft:0,
					marginTop:0,
					height:500
				}, 300 );
				
				
				$servicesDeployActive.stop();
				$servicesDeploy.stop();
				$servicesDeployShadow.stop();
				$servicesDeployActive.fadeTo(speed, 0);
				$servicesDeploy.animate({ top: 25}, speed );
				$servicesDeployShadow.animate({ 
					width:250,
					marginLeft:0,
					marginTop:0,
					height:500
				}, 300 );
				
				deployIsActive = false;
			}
			else {
				$servicesDeployActive.stop();
				$servicesDeploy.stop();
				$servicesDeployShadow.stop();
				$servicesDeployActive.fadeTo(speed, 1);
				$servicesDeploy.animate({ top: 15}, speed );  
				$servicesDeployShadow.animate({ 
					width:250,
					marginLeft:0,
					marginTop:10,
					height:500
				}, 300 );
				
				
				$servicesDeployActive.stop();
				$servicesDeploy.stop();
				$servicesDeployShadow.stop();
				$servicesDeployActive.fadeTo(speed, 1);
				$servicesDeploy.animate({ top: 15}, speed );  
				$servicesDeployShadow.animate({ 
					width:250,
					marginLeft:0,
					marginTop:10,
					height:508
				}, 300 );
				
				deployIsActive = true;
			}
		});
	});

})(jQuery, window);