ALBUM_PHOTO_FEED

PHOTO_FEED.js

$(function() {
    // var pathArray = window.location.pathname.split("/")
    console.log(GetAlbums.getUrlVars()["name"])
    // if (typeof GetAlbums.getUrlVars()["name"] === "undefined")
    // window.location.pathname = "/Stuff"
    
    //for(i=0; i<= pathArray.length; i++){
    
    // }
    
    GetAlbums.getAlbumCollection();
});

var GetAlbums = {
    
    alert_me: function(){
        
        //console.log("i got called")
        //alert("i got called also !! :)")
    },
    getAlbumCollection: function(){
        
        var facebook = $('.fbphotofeed');
        var tag_id = "";
        var html = "<ul class='multiple_columns'>";
        $.ajax({
            type: "GET",
            url: "http://graph.facebook.com/Community.of.Yahweh.Worldwide/albums?callback=?",
            dataType: "json",
            // async: false,
            success: function(json) {
                $.each(json.data, function(i, fb){
                    if(fb.name=="Profile Pictures" || fb.name=="Wall Photos" || fb.name=="Community of Yahweh Women Association Conference 2010"){
                        // console.log("ID is: "+fb.id+" Album name is: "+fb.name+" Not Included :)");
                    }else{
                        tag_id = "album-cover-"+fb.id;
                        GetAlbums.getFirstPhoto(fb.id);
                    //    html += "<ul>";
                        html += "<li id="+tag_id+">";
                        html += "<span>" + fb.name + "</span><br/> <input class='album_id' type='hidden' value="+fb.id+" ></li>";
                        //console.log("Finished loop number: "+i)
                        // console.log("ID is: "+fb.id+" Album name is: "+fb.name);
                      //  html += "</ul>";
                    }
                });
                  html += "</ul>";
                // console.log(html);
                facebook.animate({ opacity:0}, 500, function(){
                    // console.log(html);
                    facebook.html(html);
                    // $('.facebookfeed').append(html);
                });
                facebook.animate({opacity:1}, 500);
                
            }
        });
    },
    getPhotos: function(album_id){
        var facebook = $('.fbphotofeed');
         var html = "<ul class='multiple_columns'>";
        $.getJSON("http://graph.facebook.com/"+album_id+"/photos?callback=?", function(json) {
            console.log("inside getJson call, I got clicked "+album_id);
            
            // $('.facebookfeed').append(html);
            // });
          //  var html="";
            facebook.animate({ opacity:0}, 500, function(){
                // console.log(html);
                facebook.html("");
            });
            $.each(json.data, function(i, fb){
              //  html += "<ul>";
                html += "<li>" + fb.id + "</li>";
                //html += "<li>" + fb.name + "</li>";
                html += "<li>" + (typeof fb.name === "undefined" ? "CYW Photos" : fb.name)+"</li>";
                html += "<li><img src=" + fb.source + "/></li>";
               // html += "</ul>";
                
            });
              html += "</ul>";
            facebook.animate({ opacity:0}, 500, function(){
                // console.log(html);
                facebook.html(html);
            });
            
            facebook.animate({opacity:1}, 500);
            //window.location.pathname = "/Stuff?name="+album_id;
            
        });
        
    },
    getFirstPhoto : function (album_id){
        var photo;
        var pselector = "#album-cover-"+album_id;
        // console.log("i got called");
        $.getJSON("http://graph.facebook.com/"+album_id+"/photos?callback=?", function(json) {
            photo ="<a href='javascript:void(0)' class='album-cover-image-"+album_id+"' onclick='GetAlbums.getPhotos("+album_id+")' ><img src="+ json.data[0].source+" width='180' height='180' /></a><br/>";
            $($.trim(pselector)).prepend(photo);
            // console.log("ID is: "+album_id+" Photo from getJson: "+photo);
            
        });
    },
    getUrlVars: function() {
        var vars = {};
        var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
            vars[key] = value;
        });
        return vars;
    }
    
};







// THE HTML SIDE OF THINGS


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>CYW-APP</title>

      <script type="text/javascript" src="http://www.google.com/jsapi"></script>

      <script type="text/javascript" > google.load("jquery", "1.5.1", {uncompressed:true}); </script>
      <script src="assets/js/fbgraphapi.js" type="text/javascript" language="javascript"></script>
      <link href="assets/css/style.css" rel="stylesheet" type="text/css" />
       
      <!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="templates/ie.css" /><![endif]-->
    </head>

    <body>

      <h1>CYW-APP</h1>
      
    
      <div id="photofeed" class="fbphotofeed">  <span id="loading"></span></div>

     <!-- <div id="latest-flickr-images"> 
        <ul> 

        </ul> 
      </div> -->
    </body>

</html>


// Styling 

ul{
    margin: 0 auto;
    padding: 0;
}

/* The wider this li is, the fewer columns there will be */
  ul.multiple_columns li{
        text-align: left;
        float: left;
        list-style: none;
        height: 280px;
        width: 200px;
    }

#photofeed {
    width: 612px; 
}