// JavaScript Document
$(function(){
		   
    var currentBtn;
	loadImg("inicio");
	
	$('#link-telephone').mouseover(function(){							
				$('#tel_num').fadeIn('slow');
	}).mouseout(function(){
		        $('#tel_num').fadeOut('slow');
		})
	
		   
	$('#btn_empresa a, #btn_productos a, #btn_contacto a, #btn_pedidos a')
	.css({backgroundPosition:"0px 0px"})
	.mouseover(function(){
		
	if($(this).attr("id") == "dos"){
			clearInterval(myInterval);
			$('#holder_sub').fadeIn('slow');
			
	}
		
	if(currentBtn != $(this).attr("id")){

		    $(this).css({backgroundPosition:"0px -35px"})
	}
	
	}).mouseout(function(){
		
		if($(this).attr("id") == "dos"){
			rollOut();
		}
		
	if(currentBtn != $(this).attr("id")){

			$(this).css({backgroundPosition:"0px 0px"})
	}
		}).click(function(){
			
				if(currentBtn != $(this).attr("id")){
					
				     $("#"+currentBtn).css({backgroundPosition: "0px 0px"});
				
				     currentBtn = $(this).attr("id");
				     $(this).css({backgroundPosition: "0px -35px"});
				
					switch( $(this).attr("id")){
						case "uno":
							$("#cont_info").load("secciones/empresa.php");
							loadImg("empresa");
						break;
						case "dos":
							$("#cont_info").load("secciones/productos.php");
							loadImg("productos");
						break;
						case "tres":
							$("#cont_info").load("secciones/contacto.php");
							loadImg("contacto");
						break;
						case "cuatro":
							$("#cont_info").load("secciones/pedidos.php");
							loadImg("pedido");
						break;
						
						}//end switch

				 }//en if currentbtn
					
			
			})//end function click
	
	$('#holder_sub').mouseover(function(){
										
			clearInterval(myInterval);
										
	}).mouseout(function(){
		
		    rollOut();
		
		})
	
	
	
	$('#perfobent a, #perfobent_imps a, #sodica_a a, #sodica_b a, #calcica a, #sodica_gae a, #alimentos a, #calcica_bca a').click(function(){
								   
		         switch( $(this).attr("id")){
						case "a":
							$("#cont_info").load("secciones/perfobent.php");
						break;
						case "b":
							$("#cont_info").load("secciones/perfobent_tipo_imp.php");
						break;
						case "c":
							$("#cont_info").load("secciones/sodicaA.php");
						break;
						case "d":
							$("#cont_info").load("secciones/sodicaB.php");
						break;
						case "e":
							$("#cont_info").load("secciones/calcica.php");
						break;
						case "f":
						    $("#cont_info").load("secciones/sodicaGEa.php");
						break;
						case "g":
							$("#cont_info").load("secciones/alimentos.php");
						break;
						case "h":
							$("#cont_info").load("secciones/calcica_blanca.php");
						break;
						
		        }//end switch	
		
	})//end CLICK
	
}) //end jquerydom

	
var myInterval;
	
function rollOut(){
	   clearInterval(myInterval);
		myInterval = setInterval(remover,500)
		
}
function remover(){
	    $('#holder_sub').fadeOut(500);
}

function loadImg(cualPic){
	$('#foto').replaceWith("<div id='foto'></div>");
	
	var img = new Image();
	  
	  // wrap our new image in jQuery, then:
	  $(img)
		// once the image has loaded, execute this code
		.load(function () {
		  // set the image hidden by default    
		  $(this).hide();
		
		  // with the holding div #loader, apply:
		  $('#foto')
		    .css("display","block")
			// remove the loading class (so no background spinner), 
			.removeClass('loading')
			// then insert our image
			.append(this);
		
		  // fade our image in to create a nice effect
		  $(this).fadeIn();
		})
		
		// if there was an error loading the image, react accordingly
		.error(function () {
		  // notify the user that the image could not be loaded
		}).attr('src', 'images/banners/'+cualPic+'.jpg');	
	}
	
	
	function loadVdo(myVdo){
		
		$('#vdo_flash').flash({
		
				swf:'flash/vdo.swf',
		
				width: 490,
		
				height: 254,
		
				flashvars: {videos:myVdo},
		
				params: {wmode: 'transparent'}	
		
			});


		
		}