/**************************************************************************
 * Name:   EmbedPicasaGallery
 * Author: Tobias Oetiker <tobi@oetiker.ch>
 * Date:   2009/09/10
 * Demo:   http://tobi.oetiker.ch/photo/

 * $Id: jquery.EmbedPicasaGallery.js 238 2009-09-21 07:32:04Z 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="js/jquery.js"></script>
  <link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
  <script type="text/javascript" src="slimbox2.js"></script>
  <script type="text/javascript" src="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 list from PicasaWeb',
      msg_loading_album : 'Loading album from PicasaWeb',
      msg_back :          'Back',
      album_title_tag: '<h2/>'
   });
  });
  </script>

 Finally inside the document, add a div tag with the id set to the name
 chosen above.
 
 <span id="images"></div>

 To have the elements show up horyzontally stacked and not vertiaclly use css 

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

(function($) {
    // setup a namespace for us
    var nsp = 'EmbedPicasaLatest';

    // Public Variables and Methods
    $[nsp] = {
        defaultOptions: {
            matcher : RegExp('.+'),
            size    : 72,
            msg_loading_list : 'Loading list from PicasaWeb',
            msg_loading_album : 'Loading album from PicasaWeb',
            msg_back : 'Back',
            album_title_tag: '<h2/>',
            max_thumbs: 30
        }       
    };

    // Private Variables and Functions in the _ object
    // note that this will refer to _ unless you
    // call using the call or apply methods
    var _ = {
    };

    $.fn[nsp] = function(user,opts) {
        var localOpts = $.extend( 
            {}, // start with an empty map
            $[nsp].defaultOptions, // add defaults
            opts // add options
        );
        var Cache = {};

        function showOverview() {
            if ( Cache.__overview ){
                Cache.__overview.show();
                return;
            }
            var $this = $(this);
            if ( ! Cache.__original ){
                Cache.__original = $this.clone(true);
            }

            $this.after($('<div/>').css('clear','left'));

            var meta_opts = localOpts;
            if ($.meta){
                meta_opts = $.extend({}, localOpts, $this.data());
            }
 
            $this.text(meta_opts.msg_loading_list);
            var albumCount = 0;
            
            
           function appendImage(i,item){
	           //alert(item.media$group.media$title.$t);
               var title = item.media$group.media$title.$t;
               var description = item.media$group.media$description.$t;
               var a = $("<a/>")
                   .attr("href",item.content.src)
                   .attr("title",description)
                   .append(
                        $("<img/>")
                        .attr("src", item.media$group.media$thumbnail[0].url)
                        /*.css({'border-width': '0px',
                              width : meta_opts.size + 'px',
                              height : meta_opts.size + 'px' 
                         })*/
                    );
                $this.append(
                    $("<div/>")
                    /*.css({
                       float: 'left',
                       'margin-right': '0px',
                       'margin-bottom': '0px'
                    })*/
                    .append(a)
                );
            }
            
            function renderLatestList(data){
                $this.empty();
                $.each(data.feed.entry,appendImage);     
                           
	            function linkMapper(el){
	                return [
	                    el.href,
	                    '<a href="'+el.href+'">'+el.title+'</a>'
	                ]
	            }
	
	            if ($.fn.slimbox){
	                $('a',$this).slimbox({},linkMapper);
	            }
	
	           Cache[this] = $this;

                if (albumCount == 1){
                    $this.children().eq(0).click();
                    return;
                }
                var maxHeight = 0;
               
                Cache.__overview = $this;
            }

            $.getJSON('http://picasaweb.google.com/data/feed/api/user/' 
                + user + '?kind=photo&access=public&alt=json-in-script&thumbsize=' + meta_opts.size + 'c&imgmax=800&max-results=' + meta_opts.max_thumbs + '&callback=?',
                renderLatestList
            );
        };


        return this.each(showOverview);
    };
})(jQuery);