MOBILE - Facebook API

by bizamajig

HTML

<!DOCTYPE html> 
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery Mobile Web App</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>-->
    <link rel="stylesheet" href="themes/EspacioJoven.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" /> 
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <link rel="stylesheet" href="themes/custom.css" />
    
    <!--Used by PhotoSwipe Plugin -->
    <script type="text/javascript" src="photoSwipe/klass.min.js"></script>
   	<script type="text/javascript" src="photoSwipe/code.photoswipe.jquery-3.0.5.min.js"></script>
	<script type='text/javascript' src='photoSwipe/photoSwipeCall.js'></script>      
	<link href="photoSwipe/jquery-mobile.css" type="text/css" rel="stylesheet" />
	<link href="photoSwipe/photoswipe.css" type="text/css" rel="stylesheet" />
	<!--Used by PhotoSwipe Plugin --> 
    
    <script type='text/javascript' src='javascript/createFb2.js'></script>
    <script type='text/javascript' src='javascript/createFb.js'></script>
    

       
</head> 
<body>  
<div data-role="page" id="home" data-theme = "a" >
	<div data-role="content">	
		<h2 id="banner">Joven Mobile</h2>
    	<div class="main_menu">
			<ul data-inset="true" data-role="listview">
				<li><a href="#news"><img src="themes/icons/news.png" alt="Information" class="ui-li-icon">Espacio Joven</a></li>
           		<li><a href="#nocheJoven"><img src="themes/icons/research.png" alt="Information" class="ui-li-icon">La Noche es Joven</a></li>
				<li><a href="#photosNJ"><img src="themes/icons/staff.png" alt="Information" class="ui-li-icon">Multimedia</a></li>
                <li><a href="#santanderJoven"><img src="themes/icons/students.png"...

CSS

/*!
* jQuery Mobile 1.3.2
* Git HEAD hash: 528cf0e96940644ea644096bfeb913ed920ffaef <> Date: Fri Jul 19 2013 22:17:57 UTC
* http://jquerymobile.com
*
* Copyright 2010, 2013 jQuery Foundation, Inc. and other contributors
* Released under the MIT license.
* http://jquery.org/license
*
*/

.ui-bar-a{border:1px solid #816c58 ;background:#816c58 ;color:#ffffff ;font-weight:bold;text-shadow:0  1px  0  #444444 ;background-image:-webkit-gradient(linear,left top,left bottom,from( #8d7660 ),to( #74614f )); background-image:-webkit-linear-gradient( #8d7660,#74614f ); background-image:   -moz-linear-gradient( #8d7660,#74614f ); background-image:    -ms-linear-gradient( #8d7660,#74614f ); background-image:     -o-linear-gradient( #8d7660,#74614f ); background-image:        linear-gradient( #8d7660,#74614f );}.ui-bar-a .ui-link-inherit{color:#ffffff ;}.ui-bar-a a.ui-link{color:#7cc4e7 ;font-weight:bold;}.ui-bar-a a.ui-link:visited{   color:#2489ce ;}.ui-bar-a a.ui-link:hover{color:#2489ce ;}.ui-bar-a a.ui-link:active{color:#2489ce ;}.ui-bar-a,.ui-bar-a input,.ui-bar-a select,.ui-bar-a textarea,.ui-bar-a button{ font-family:Helvetica,Arial,sans-serif ;}.ui-body-a,.ui-overlay-a{border:1px solid #787f81 ;color:#000000 ;text-shadow:0  1px  0  #eeeeee ;background:#dbe7eb ;background-image:-webkit-gradient(linear,left top,left bottom,from( #f0feFF ),to( #c5cfd3 )); background-image:-webkit-linear-gradient( #f0feFF,#c5cfd3 ); background-image:   -moz-linear-gradient( #f0feFF,#c5cfd3 ); background-image:    -ms-linear-gradient( #f0feFF,#c5cfd3 ); background-image:     -o-linear-gradient( #f0feFF,#c5cfd3 ); background-image:        linear-gradient( #f0feFF,#c5cfd3 );}.ui-overlay-a{background-image:none;border-width:0;}.ui-body-a,.ui-body-a input,.ui-body-a select,.ui-body-a textarea,.ui-body-a button{ font-family:Helvetica,Arial,sans-serif ;}.ui-body-a .ui-link-inherit{color:#000000 ;}.ui-body-a .ui-link{color:#2489ce ;font-weight:bold;}.ui-body-a .ui-link:visited{   color:#2489ce...

JavaScript

var pageData = {
	'photosNJ': {
		id:'169070991963',
		times:0,
		next:'',
		x:0,
		dataLength:0,
		albumPhotos: [],
		albumThumbnails:[]
	},
	'photosEJ': {
		id:'284192728378504',
		times:0,
		next:'',
		x:0,
		dataLength:0,
		albumPhotos: [],
		albumThumbnails:[]
	},
	FBinit : false
};


// checkForErrorFirst wraps your function around the error checking code first
// if there is no response, then your code will not be called
// this allows you to just write the juicy working code 
// and not worry about error checking
function checkForErrorFirst(myFunc) {
	return function(response) { 
		if (!response || response.error) {
			alert("Error !");
		} else {
			myFunc(response);
		}
	};	
}

function getAlbums(page) {

	// Rendering the album for that page
	function renderAlbum(album, i) {
		pageData[page].times++;
		if(pageData[page].times == pageData[page].dataLength) $.mobile.loading("hide");
		
		return function(response) {
			var albumName = album.name;
			var albumCover = album.cover_photo;
			var albumId = album.id;
			var numberOfPhotos = album.count;

			// render photos
			$(".albums" + (page==='photosEJ' ? '2' : '')).append([
				'<li>',
					'<a href="#Gallery' + i + '"' + 'data-transition="slidedown">',
						'<img src= "' + response.picture + '"  />',
						'<h2>' + albumName + '</h2>',
						'<p>' + "Number of Photos:  " + numberOfPhotos +'</p>',
					'</a>',
				'</li>'
			].join('')).listview('refresh');

			$("#" + page).after([
				'<div data-role="page" data-add-back-btn="true" id=Gallery' + i,
					' class="gallery-page" data-url="Gallery' + i + '">',
					'<div data-role="header">',
						'<h1>Gallery</h1>',
					'</div>',
					'<div data-role="content">',
						'<ul class="gallery"></ul>',
					'</div>',
				'</div>'
			].join(''));

		   for(var n=0; n < pageData[page].albumPhotos[i].length; n++) {
				$('#Gallery' + i + ' .gallery').append([
					'<li>',
						'<a href="' + pageData[page].albumPhotos[i][n] + '"  rel="external">',
						'<img...