function fbFetch(){
	//Set Url of JSON data from the facebook graph api. make sure callback is set with a '?' to overcome the cross domain problems with JSON
	var url = "https://graph.facebook.com/habilgroup/feed?access_token=2227470867|2.AQCEUyFE_L8pQbU-.3600.1307145600.0-642358962|Zri1w98bYAZAANLC2PZzNNrmY5A&limit=7&callback=?";

	//Use jQuery getJSON method to fetch the data from the url and then create our unordered list with the relevant data.
	$.getJSON(url,function(json){
		var html = "<table id=tablaNoticias>";

		//loop through and within data array's retrieve the message variable.
		$.each(json.data,function(i,fb){
			if (fb.message) {
				html += "<tr>";
				html += "<td rowspan='2' class='avatar_noticias' align='left' valign='top'> <a href='http://www.facebook.com/profile.php?id=" + fb.from.id + "' target='_blank'>" + "<img src='http://graph.facebook.com/" + fb.from.id + "/picture' type='small' width='35px' height='35px'/> </td>";
				html += "<td class='nombre_noticias' align='left'><a href='http://www.facebook.com/profile.php?id=" + fb.from.id + "' target='_blank'>" + fb.from.name + "</a></td>";
				html += "</tr>";
				html += "<tr>";
				html += "<td class='contenido_noticias' align='left'>" + fb.message + "</td>";
				html += "</tr>";
				html += "<tr>";
				html += "<td colspan= '2' class='fecha_noticias' align='left'>" + transformarFecha(fb.updated_time) + "</td>";
				html += "</tr>";
			}
		});

		html += "</table>";

		//A little animation once fetched
		$('.facebookfeed').animate({opacity:0}, 500, function(){
			$('.facebookfeed').html(html);
		});
		$('.facebookfeed').animate({opacity:1}, 500);
	});
};

function transformarFecha(fecha){
	var result = "";
	var mes = fecha.substring(5,7);
	switch(mes){
		case "01": mes = "enero"; 		break;
		case "02": mes = "febrero";		break;
		case "03": mes = "marzo";		break;
		case "04": mes = "abril";		break;
		case "05": mes = "mayo";		break;
		case "06": mes = "junio";		break;
		case "07": mes = "julio";		break;
		case "08": mes = "agosto";		break;
		case "09": mes = "septiembre";	break;
		case "10": mes = "octubre";		break;
		case "11": mes = "noviembre";	break;
		case "12": mes = "diciembre";	break;
		
	}
	result += fecha.substring(8,10);
	result += " de " + mes;
	result += " a las ";
	var horas = fecha.substring(11, 13);
	if (horas >= 6) {
		result += parseInt(horas) - 6;
	}else{
		result += parseInt(horas) + 18;
	}
	result += fecha.substring(13, 16);
	result += " horas.";
	return result;
}

/* Secuencia de la animacion con cadena de callbacks, es decir, la primer 
 * animacion se ejecuta y llama a la siguiente en estricto orden*/
jQuery(function($){
	
	$(window).load(function() {
    	$('#slider').nivoSlider({
			effect:'random', // Specify sets like: 'fold,fade,sliceDown'
	        slices:15, // For slice animations
	        boxCols: 8, // For box animations
	        boxRows: 4, // For box animations
	        animSpeed:500, // Slide transition speed
	        pauseTime:3000, // How long each slide will show
	        startSlide:0, // Set starting Slide (0 index)
	        directionNav:false, // Next & Prev navigation
	        directionNavHide:true, // Only show on hover
	        controlNav:false, // 1,2,3... navigation
	        controlNavThumbs:false, // Use thumbnails for Control Nav
	        controlNavThumbsFromRel:false, // Use image rel for thumbs
	        controlNavThumbsSearch: '.jpg', // Replace this with...
	        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
	        keyboardNav:true, // Use left & right arrows
	        pauseOnHover:false, // Stop animation while hovering
	        manualAdvance:false, // Force manual transitions
	        captionOpacity:0.8, // Universal caption opacity
	        prevText: 'Prev', // Prev directionNav text
	        nextText: 'Next', // Next directionNav text
	        beforeChange: function(){}, // Triggers before a slide transition
	        afterChange: function(){}, // Triggers after a slide transition
	        slideshowEnd: function(){}, // Triggers after all slides have been shown
	        lastSlide: function(){}, // Triggers when last slide is shown
	        afterLoad: function(){} // Triggers when slider has loaded
		});
	});
	
	/*------------ Pop up ini ------------*/
	//$('a[name=modal]').click(function(e) {
        //Cancel the link behavior
      //  e.preventDefault();
        //Get the A tag
        var id = $('#dialog');
     
        //Get the screen height and width
        var maskHeight = $(document).height()-15;
        var maskWidth = $(window).width()-15;
     
        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});
         
        //transition effect    
        $('#mask').fadeIn(1000);   
        $('#mask').fadeTo("slow",0.7); 
     
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
               
        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);
     
        //transition effect
        $(id).fadeIn(2000);
     
    //});
     
    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, .window').hide();
    });    
     
    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });       
	/*------------ Pop up fin ------------*/
});		
/*	var valor1 = $('#valor1');
	var valor2 = $('#valor2');
	var valor3 = $('#valor3');	
	
	$('#decoItem')
		.css({backgroundPosition: '200px 0'})
		.animate({backgroundPosition: '77px -200px'}, 1000, 'linear', crearV); 
	
	function crearV(){		
		$('#letra').animate({width: '220px'}, 500, crearTitle);
	}
	
	function crearTitle(){
		$('#title').animate({height:'40px', textIndent: '0px'}, 500 , crearValor1);
	}
	
	function crearValor1(){
		valor1.animate({height:'40px', textIndent: '0px'}, 500 , moverValor1);
	}
	
	function moverValor1(){
		valor1.animate({marginLeft: '50px'}, 500, crearValor2);
	}
	
	function crearValor2(){
		valor2.animate({height: '40px', textIndent: '0px'}, 500, moverValor2);
	}
	
	function moverValor2(){
		valor2.animate({marginLeft: '75px'}, 500, crearValor3);
	}
	
	function crearValor3(){
		valor3.animate({height: '40px', textIndent: '0px'}, 500, moverValor3);
	}
	
	function moverValor3(){
		valor3.animate({marginLeft: '100px'}, 500, crearItem1);		
	}
	
	function crearItem1(){
		$('#item1').animate({width: '20px'}, 500, crearItem2);
	}
	
	function crearItem2(){
		$('#item2').animate({width: '20px'}, 500, crearItem3);
	}
	
	function crearItem3(){
		$('#item3').animate({width: '20px'}, 500, crearTransparencia);
	}
	
	function crearTransparencia() {
		$('#transparencia').animate({height: '220px'}, 2000, crearLogo); 
	}
	
	function crearLogo() {
		$('#logo').animate({height: '130px'}, 1000);
	}
});*/