var fanpageid='42479626503'; 	//42479626503 SkyLoung FB Page id
//fanpageid='157226644339851'	// JUANKA MESA
var fbtoken;
var fbfotos=new Array;
var tituloalbum;

jQuery.noConflict()
jQuery('document').ready(function(){
	getToken();	
	
	
	
	jQuery('#galeria_fotos').delegate('.album','click',function(e){ // MOSTRAR CONTENIDO COMPLETO DEL ALBUM
		tituloalbum = jQuery(this).next().text();
		tituloalbum = tituloalbum.substring(0,tituloalbum.indexOf("("));
		jQuery.getJSON('https://graph.facebook.com/'+jQuery(this).attr('id')+'/photos?&callback=?&client_id=146230172056253&'+fbtoken,function(data){
			
			
			jQuery('#galeria_fotos').html('');
			jQuery('#galeria_fotos').append('<a href="/" class="volver"> &larr; Volver </a>');
			jQuery('#galeria_fotos').append('<h2>'+ tituloalbum +'</h2>');
			jQuery.each(data.data, function(i,v){
				jQuery('#galeria_fotos').append('<div class="contfoto"><img src="'+v.picture+'" class="fotoindividual" id="'+v.id+'"></div>');
			});
		});
		return false;
	});
	
	
	
	// muestra imagen al hacer click en miniatura 
	jQuery('#galeria_fotos').delegate('.fotoindividual','click',function(){ // ABRIR IMAGEN INDIVIDUAL
		fotoIndividual(jQuery(this).attr('id'));
	});
	
	
	// funciones de boton anterior y posterior

	jQuery('body').delegate('#individual .anterior','click',function(){ // al clicar boton .anterior
		jQuery('#individual').fadeOut('fast');
		var idanterior = jQuery(this).attr('alt');
		fotoIndividual(idanterior);
		return false;
	});
	
	jQuery('body').delegate('#individual .posterior','click',function(){ // al clicar boton .posterior
		jQuery('#individual').fadeOut('fast');
		var idposterior = jQuery(this).attr('alt');
		fotoIndividual(idposterior);
		return false;
	});
	
	
	
	
	
	
	
	jQuery('body').delegate('#individual','click',function(){ // CERRAR VENTANA CON IMAGEN INDIVIDUAL
		jQuery('#individual').fadeOut('fast');
	});
	
	
	
	

	jQuery('#galeria_fotos').delegate('.volver','click',function(){ // CERRAR VENTANA CON IMAGEN INDIVIDUAL
		
		muestraAlbums();
		return false;
	});
});

function getToken(nuevo){
	if(nuevo==true){ 
		nuevo='?&n=true';
	}
	else{
		nuevo='';
	}
	jQuery.get('token.php'+nuevo, function(data){
		fbtoken=data;
		cargaAlbums('https://graph.facebook.com/'+fanpageid+'/albums?&callback=?&client_id=146230172056253&'+fbtoken);
	});
}


function cargaAlbums(url){
	jQuery.getJSON(url,function(data){ 
		var tmpfoto;
		jQuery.each(data.data, function(i,v){
			if(v.type=='normal' && v.from.id==fanpageid && v.count>0){
				fbfotos.push(Array(v.created_time,v));			}
		});
		if(data.paging.next.length>0){
			cargaAlbums(data.paging.next);
		}
		muestraAlbums();
	});
}

function muestraAlbums(){
	jQuery('#galeria_fotos').html('');
	jQuery('#galeria_fotos').append('<h2>Galeria de fotos</h2>');
	jQuery.each(fbfotos, function(i,v){	
		jQuery('#galeria_fotos').append('<div><a href="'+v[1].link+'" id="'+v[1].id+'" class="album"><img src="https://graph.facebook.com/'+v[1].id+'/picture?type=small" /></a><small>'+v[1].name+' ('+v[1].count+')</small></div>');
	});
}

function fotoIndividual(fotoid){
	jQuery.getJSON('https://graph.facebook.com/'+fotoid+'/?&callback=?&client_id=146230172056253&'+fbtoken,function(data){
			var idanterior = jQuery('#'+data.id).parent().prev().find('img').attr("id");
			var idposterior = jQuery('#'+data.id).parent().next().find('img').attr("id");
			var flechaAnterior = " ";
			var flechaPosterior = " ";
			
			if (idanterior){
				flechaAnterior = '<a class="anterior" alt="'+ idanterior +'"  href="#" >'
			}
			if (idposterior){
				flechaPosterior = '<a class="posterior" alt="'+ idposterior +'" href="#" >'
			}
			
			jQuery('#individual').html('<img class="individualimg" src="'+data.source+'"> <span> &larr; Volver a la galeria</span> '+ flechaAnterior +'<img src="http://cerocin.co/clientes/skylounge.com.py/demo/images/prev.gif" height="45" width="45" /></a>'+ flechaPosterior +'<img src="http://cerocin.co/clientes/skylounge.com.py/demo/images/next.gif" height="45" width="45" /></a>').fadeIn('fast');
			jQuery('#individual .individualimg').height(jQuery(window).height()*0.8);
		});
}