/* Author: Cuble Desarrollo SL
	Devs: Roberto Rubio @robertorubioes
	      Sergio Collado @circun4

*/




$(document).ready(function() {
    
    $('#frange').css('width',$(document).width());
	$('#frange').animate({
        top:0, opacity: .8
	}, 1000, "linear",function() {
    	// Animation complete.
        $('.description').hide();
	$('#slider').css('height',$(document).height());

        $('footer').animate({
                height:'55px'
            }, 500, "linear");
         });
         
        
	//Inicializamos la primera web 
        (function(){
             
                        $(".tab.hi").addClass("selected");  
                        $("div[data-label='hi']").animate({left:0,top:0},2000);
                        $("div[data-label='hi']").addClass("active");
        })();
        
        
        
	$('.tab').click(function(){
					$(".tab").removeClass("selected");
				}
			);
	//tab developer
	$('.tab.dev').click(	
				function(){    
                                    
                                                 $("div[data-label='dev']").css('display','block');
                                                //Desplazamos al antiguo active a su posicion inicial.
						$('.active').animate({left:5000,top:-2500},1000,function(){
                                                            
                                                            $(this).removeClass('active');
                                                           
                                                        });
                                                
						$(".tab.dev").addClass("selected");  
						$("div[data-label='dev']").animate({left:0,top:0},1000);
                                                $("div[data-label='dev']").addClass("active");
                                               
			        }
			);

	$('.tab.hi').click(
				function(){    
                                            $("div[data-label='hi']").css('display','block');
                                             //Desplazamos al antiguo active a su posicion inicial.
						$('.active').animate({left:-2000,top:+1500},1000,function(){
                                                             
                                                            $(this).removeClass('active');
                                                            
                                                        });
                                                
						$(".tab.hi").addClass("selected");  
						$("div[data-label='hi']").animate({left:0,top:0},1000);
                                                $("div[data-label='hi']").addClass("active");
                                          
			        }
			);

	$('.tab.team').click(
				function(){
						 
                                                $("div[data-label='team']").css('display','block');
                                                
                                                //Desplazamos al antiguo active a su posicion inicial.
						$('.active').animate({left:-2500,top:-1500},1000,function(){
                                                             
                                                            $(this).removeClass('active');
                                                            
                                                        });
                                                
						$(".tab.team").addClass("selected");  
						$("div[data-label='team']").animate({left:0,top:0},1000);
                                                $("div[data-label='team']").addClass("active");
                                          
				}
			);

	$('.tab.inc').click(
				function(){
						 
                                                $("div[data-label='inc']").css('display','block');
                                                
                                                //Desplazamos al antiguo active a su posicion inicial.
						$('.active').animate({left:-3500,top:+2500},1000,function(){
                                                             
                                                            $(this).removeClass('active');
                                                            
                                                        });
                                                
						$(".tab.inc").addClass("selected");  
						$("div[data-label='inc']").animate({left:0,top:0},1000);
                                                $("div[data-label='inc']").addClass("active");
				}
			);

	$('.tab.port').click(
				function(){
						 
                                                $("div[data-label='port']").css('display','block');
                                                
                                                //Desplazamos al antiguo active a su posicion inicial.
						$('.active').animate({left:+3500,top:+2500},1000,function(){
                                                             
                                                            $(this).removeClass('active');
                                                            
                                                        });
                                                
						$(".tab.port").addClass("selected");  
						$("div[data-label='port']").animate({left:0,top:0},1000);
                                                $("div[data-label='port']").addClass("active");
				}
			);

	$('.tab.cont').click(
				function(){
						 
                                                $("div[data-label='cont']").css('display','block');
                                                
                                                //Desplazamos al antiguo active a su posicion inicial.
						$('.active').animate({left:+2500,top:+3500},1000,function(){
                                                             
                                                            $(this).removeClass('active');
                                                            
                                                        });
                                                
						$(".tab.cont").addClass("selected");  
						$("div[data-label='cont']").animate({left:0,top:0},1000);
                                                $("div[data-label='cont']").addClass("active");
				}
			);
	 
 
  

});

$('.option').click(function(){


	switch($(this).attr('name'))
	{
		case 'team':color='#00B64F'; break;
		case 'contact':color='#CD0074'; break;
		case 'service':color='#FFEF00'; break;
		case 'locate':color='#85004B'; break;


	}
        $("#"+$(this).attr('name')).css("display","block");
	$(this).css("background",color);
	$(this).css("color","#FFFFFF");
	$('#panel').css("height","0px");
	$('#panel').css("display","block");
	$('.option').css("display","none");
	$(this).css("display","block");
	$('#panel').animate({
		    height:($(document).height()-150)
		}, 500, "linear");

  		});
 $("#close").click(function(){
$('.option').css("background","");
$('.option').css("color","#A1A1A1");
$('#panel').animate({

	    height:'0px', width:$(document).width(), opacity: .8
	}, 
	500, "linear",

	function() {
		$('.option').css("display","block");
		$('#panel').css("display","none");
                $(".frasco").css("display","none");
		

	});


 
	

	});