/**************************************************************************

 * Name:   EmbedPicasaGallery

 * Author: Tobias Oetiker <tobi@oetiker.ch>

 * Demo:   http://tobi.oetiker.ch/photo/

 * $Id: jquery.EmbedPicasaGallery.js 474 2011-06-16 09:02:45Z oetiker $

 **************************************************************************

 Description:

 

 This little script asks picasa web for a list of albums and for a list

 of pictures in the album. It then emits a series of <div class="pic-thumb"/>

 elements containing thumbnail images. The divs are inserted inside the element

 marked with a particular id. Clicking on an album will display thumbnails of the

 images in the album and clicking on a thumbnail will show the image itself

 using slimbox.

 

 The script itself uses jQuery (http://www.jquery.org) and slimbox2

 (http://www.digitalia.be/software/slimbox2) to work. So you have to load

 these two guys before loading the gallery script. You can load them in the

 header or the body of the document, this does not matter.

 

  <script type="text/javascript" src="../embedpicasa/js/jquery.js"></script>

  <link rel="stylesheet" href="../css/slimbox_css/slimbox2.css" type="text/css" media="screen" />

  <script type="text/javascript" src="slimbox2.js"></script>

  <script type="text/javascript" src="../embedpicasa/js/jquery.EmbedPicasaGallery.js"></script>



 Once loaded, call the picasaGallery function. This activates the

 code. With the id argument you tell it, where to put the gallery.



  <script type="text/javascript">

  jQuery(document).ready(function() {

  jQuery("#images").EmbedPicasaGallery('oetiker',{

      matcher:            /./,         // string or regexp to match album title

      size:               72,        // thumbnail size (32, 48, 64, 72, 144, 160)

      msg_loading_list :  'Loading album list from PicasaWeb',

      msg_back :          'back',

      msg_more :          'more',

      authkey :           'optional-picasa-authkey',

      albumid :           'go-directly-to-this-album-ignore-matcher',

      auto_open:          false, //opens the first album

      album_title_tag:    '<h2/>',

      hide_back:          false, //hide the back button

      thumb_id_prefix:    'pThumb_',

      show_more:      null,       // show only the first x images when the album gets opened

      loading_animation: 'css/loading.gif',

      thumb_finalizer:    function(){var $a = jQuery(this); ... use this to do something to the anchor AFTER slimbox got there },

      thumb_tuner:        function($img,entry,i){ ... $img is the img of the thumbnail, entry is the picasa image info ...}

      link_mapper: function(el){  // see http://code.google.com/p/slimbox/wiki/jQueryAPI#The_linkMapper_function

            return [

                     el.href,

                     '<a href="'+el.href+'">'+el.title+'</a>'

                   ]

            }

   });

  });

  </script>



 Finally inside the document, add a div tag with the id set to the name

 chosen above.

 

 <div id="images"></div>



**********************************************************************************/



(function($) {

    // setup a namespace for us

    var nsp = 'EmbedPicasaGallery', authkey;



    // Private Variables and Functions in the _ object

    // note that this will refer to _ unless you

    // call using the call or apply methods



    // Public Variables and Methods

    $[nsp] = {

        defaultOptions: {

            matcher : RegExp('.+'),

            size    : 72,

            msg_loading_list : 'Loading album list from PicasaWeb',

            msg_back : 'back',

            msg_more : 'more',

            album_title_tag: '<h2/>',

            auto_open: false,

            thumb_id_prefix: 'pThumb_',

            thumb_tuner: null,

            thumb_finalizer: null,

            loading_animation: null,

            show_more: null,

            hide_back: false,

            link_mapper: function(el){

                    return [

                        el.href,

                        '<a href="../embedpicasa/'+el.href+'">'+el.title+'</a>'

                    ]

                }

        } 

    };

    $.fn[nsp] = function(user,opts) {

        var localOpts,

            Cache = {};



        localOpts = $.extend( 

            {}, // start with an empty map

            $[nsp].defaultOptions, // add defaults

            opts // add options

        );



        function showOverview() {

            var $this,

                meta_opts,

                albumCount,

                $album_list,

                authkey = '';



            if ( Cache.__overview ){

                 Cache.__overview.show();

                 return;

            }

            $this = $(this);

            $this.empty();

            meta_opts = localOpts;

            if ($.meta){

                meta_opts = $.extend({}, localOpts, $this.data());

            }

            albumCount = 0;

            $album_list = $('<div/>')

                .addClass('album-list')

                .css('position','relative')

                .css('overflow','hidden')

                .append($('<div/>').text(meta_opts.msg_loading_list));





            function appendImage(i,item){

                var title,$div,$img;

                title = item.media$group.media$title.$t;

                if (title.match(meta_opts.matcher)){

                    albumCount++;

                    $img = $('<img/>')

                        .attr('title',title)

                        .attr('src',item.media$group.media$thumbnail[0].url)

                    $div = $('<div/>')

                        .addClass('album-cover')

                        .css({

                            'float': 'left',

                            marginRight: '10px',

                            marginBottom: '10px'

                        })

                        .click(function () {

                           $album_list.hide();

                           showAlbum($this,meta_opts,item.gphoto$id.$t,title,item.gphoto$numphotos.$t);

                        })

                        .hover(

                            function () { $(this).css("cursor","pointer")},

                            function () { $(this).css("cursor","default")}

                        )

                        .append( $img )

                        .append(

                            $('<div/>')

                            .addClass('album-title')

                            .css({

                                'font-size': '10px'

                            })

                            .text(title)

                            .width( meta_opts.size )

                        )                    

                    $album_list.append($div);

                };

            }

            

            function renderAlbumList(data){

                var $albums,maxHeight=0;

                $album_list.empty();

        		if (data.feed && data.feed.entry){

    	            $.each(data.feed.entry,appendImage);

        		} else {

          		    $this.text('Warning: No picasa albums found for user ' + user);

		        }

                Cache.__overview = $album_list;

                $albums = $album_list.children();





                if (meta_opts.auto_open){

                    $albums.eq(0).click();

                    return;

                }

                $('.album-title',$album_list)

                .each(function(){                        

                     var h = $(this).outerHeight();

                     if (h > maxHeight){

                        maxHeight = h

                     }

                })

                .each(function(){

                    $(this).height(maxHeight)

                });



            }





            if (meta_opts.authkey){

                authkey = '&authkey=' + meta_opts.authkey;

            }

 

    	    if (meta_opts.albumid) {

       	       showAlbum($this,meta_opts,meta_opts.albumid)

    	    }

	        else {

                $this.prepend($album_list);

                $.getJSON('http://picasaweb.google.com/data/feed/api/user/' 

                    + user + '?kind=album&access=visible' + authkey 

                    + '&alt=json-in-script&thumbsize=' + meta_opts.size + 'c&callback=?',

                    renderAlbumList

               );

	        }

        };



        function showAlbum($this,meta_opts,album,title,photoCount){                        

            if ( Cache[album] ){

               Cache[album].show();

               return;

            };



            var i,$album,albumPics=[],$picDiv;



            $album = $('<div/>').addClass('album')

                .css('position','relative')

                .css('overflow','hidden');

        

            if (title){

                $album.append($(meta_opts.album_title_tag).text(title))

            }

            function makeDiv(){            

               var $div = $('<div/>')

                   .css({

                        'float': 'left',

                        marginRight: '10px',

                        marginBottom: '10px',

                        width: meta_opts.size+'px',

                        height: meta_opts.size+'px'

                    });

               if (meta_opts.loading_animation){

                   $div.css('background','url(' + meta_opts.loading_animation + ') no-repeat center center');            

               }

               return $div;

            }



            function makeButton(text){

                return $("<div/>")                    

                    .addClass("pic-thumb")

                    .width(meta_opts.size)

                    .height(meta_opts.size)

                    .css({borderWidth: '0px',

                         'float' : 'left',

                         marginRight: '10px',

                         marginBottom: '10px',

                         cursor: 'pointer'

                     })

                    .append($("<div/>")

                        .php('<br/>'+text)

                        .css({'borderStyle':'outset',

                              'borderWidth':'1px',

                              'textAlign'  :'center',

                              'width'       : (meta_opts.size - 2) + 'px',

                              'height'      : (meta_opts.size - 2) + 'px'

                        })

                    );                 

            }



            if (Cache.__overview && !meta_opts.hide_back){            

                $album.append(makeButton(meta_opts.msg_back)

                    .click(function(){$album.hide();showOverview()})

                );

            }

            $this.prepend($album);

            

            if (photoCount){

                for (i=0;i<photoCount && (!meta_opts.show_more || i<meta_opts.show_more);i++) {

                    $picDiv = makeDiv();

                    $album.append($picDiv);

                    albumPics.push($picDiv);

                }

            }



            function makeImage(i,item){

               var title = item.media$group.media$description.$t || item.media$group.media$title.$t;  

               var $div = albumPics[i] || makeDiv();



               var $img = $('<img/>')

               	   .css('borderWidth','0px')

	           .hide()

                   .load(function(){                   

                       if (meta_opts.thumb_tuner){

                           meta_opts.thumb_tuner(this,item);

                       }

		       $img.show();

                   });









               var thumbs = item.media$group.media$thumbnail;

	       var gotOne = false;

               for (var i = 0; i<thumbs.length;i++){

                    if (thumbs[i].width == meta_opts.size && thumbs[i].height == meta_opts.size){

                        $img.attr("src", thumbs[i].url);

			gotOne = true;

                        break;

                    }

               }

	       if (!gotOne){

	           $img.attr("alt","Sorry, no matching thumbnail found.");

	       }

	          

               var $a = $("<a/>")

                   .attr("href",item.content.src)

                   .attr("title",title)

                   .append($img);



               $div

                   .attr("id", meta_opts.thumb_id_prefix + item.gphoto$id.$t )

                   .append($a);





               return $div; 

            }



            function renderAlbum(data){

                var images = data.feed.entry;

                var hiddenImages = [];

                for (var i=0;i<images.length;i++){

                    var $div = makeImage(i,images[i]);

                    if (!meta_opts.show_more || i < meta_opts.show_more){

                        $div.show();

                    }

                    else {

                        $div.hide();

                        hiddenImages.push($div);

                    }

                    $album.append($div);



                    if (meta_opts.show_more && i == meta_opts.show_more){

                        var $moreButton = makeButton(meta_opts.msg_more);

                        $album.append($moreButton

                            .click(function(){

                                var start = 0;

                                jQuery.each(hiddenImages,function(i,$img){

                                    window

                                        .setTimeout(

                                            function(){

                                                $img.fadeIn('fast');

                                            },

                                            50*(start++)

                                        );

                                });

                                $moreButton.hide();

                            })

                        );                        

                    }            

                }

                if ($.fn.slimbox){

                    $('a',$album).slimbox({},meta_opts.link_mapper);

                }

                if (meta_opts.thumb_callback){

                    $('a',$album).each(meta_opts.thumb_callback);

                }

                Cache[album] = $album;

            }

            authkey = '';

            if (meta_opts.authkey){

               authkey = '&authkey=' + meta_opts.authkey;

            }

            $.getJSON('http://picasaweb.google.com/data/feed/api/user/' 

                + user + '/albumid/' 

                + album + '?kind=photo&access=visible' + authkey + '&alt=json-in-script&thumbsize='+meta_opts.size+'c&imgmax=800&callback=?',

                renderAlbum

            );

        };



        return this.each(showOverview);

    };

})(jQuery);