/**************************************************************************
 * Name:   EmbedPicasaGallery
 * Author: Tobias Oetiker <tobi@oetiker.ch>
 * Modified by: Michael King
 * 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="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 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="' + 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-list').css('position', 'relative').css('overflow', 'hidden');
            $album.append($('<ul/>').addClass('list'));

            if (title) {
                $album.append($(meta_opts.album_title_tag).text(title))
            }

            function makeDiv() {
                var $div = $('<div/>').addClass("thumb");
                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/>").html('<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($('<div/>').addClass('controller'));
            $('.controller',$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 count = i;
                var title = item.media$group.media$description.$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 $li = $("<li/>");
                var $a = $("<a/>").attr("href", item.content.src).attr("title", title).addClass("thumb").append($img);
                $li.append($a);
                // MK - add active to first thumb on load and then set click function
                if (count == "0") { $a.addClass("active"); }
                $a.click(function(event) {
                	event.preventDefault();
                	pGalleryActivate($(this));
                });

                //$div.attr("id", meta_opts.thumb_id_prefix + item.gphoto$id.$t).append($a);


                return $li;
            }
            
            // MK - insert "viewer"
            function makeViewer(item) {
            	var title = item.media$group.media$description.$t;
            	$this.prepend($("<div/>").addClass("viewer"));
            	$viewer = $(".viewer",$this);
            	$viewer.append($("<ul/>"));
            	$('ul',$viewer).append($("<li/>").addClass("photo active"));
            	$(".photo",$viewer).append($("<img/>").attr("src",item.content.src));
            	$(".photo",$viewer).append($("<p/>").addClass("caption").html(title));
            	// add controls
            	$viewer.prepend($("<a>previous</a>").addClass("previous").attr("href","#").click(function(event) {
            		event.preventDefault();
            		pGalleryNextPrev('previous', $(this).parents('.pGallery').children('.controller').children('.album-list'));
            	}));
            	$viewer.append($("<a>next</a>").addClass("next").attr("href","#").click(function(event) {
            		event.preventDefault();
            		pGalleryNextPrev('next', $(this).parents('.pGallery').children('.controller').children('.album-list'));
            	}));
            	// if autoplay add controls
            	if($this.hasClass('autoplay')) {
            		$('.controller',$this).before($("<div/>").addClass("playpause"));
            		$playpause = $(".playpause",$this);
            		$playpause.append($("<a>play</a>").addClass("play").attr('href','#').click(function(event) {
            			event.preventDefault();
            			pGalleryPlayPause('play',$this);
            		}));
            		$playpause.append($("<a>pause</a>").addClass("pause").attr('href','#').click(function(event) {
            			event.preventDefault();
            			pGalleryPlayPause('pause',$this);
            		}));
            	}
            	
            }
            // MK - insert images into "viewer"
            function insertImage(item) {
            	var title = item.media$group.media$description.$t;
            	$viewer = $(".viewer",$this);
            	$li = $("<li/>");
            	$('ul',$viewer).append($li.addClass("photo"));
            	$li.append($("<img/>").attr("src",item.content.src));
            	//$('ul li:last-child',$viewer).append($("<img/>").attr("src",item.content.src));
            	if(title) {
	            	$li.append($("<p/>").addClass("caption").html(title));
	            }
            }

            function renderAlbum(data) {
                var images = data.feed.entry;
                var hiddenImages = [];
                var viewer = makeViewer(images[0]);
                for (var i = 0; i < images.length; i++) {
                	if(i > 0) { var imageInsert = insertImage(images[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);
                    }
                    $(".list",$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();
                        }));
                    }
                }
                
				$('.controller',$this).prepend($("<a>left</a>").addClass("left").addClass('scroll').attr("href","#").click(function(event) {
					event.preventDefault();
					var controller = $(this).parent('.controller');
	    			var active = $('.album-list a:first-child', controller);
					pGalleryMoveAlbumList(active, 'left');
				}));
				$('.controller',$this).append($("<a>right</a>").addClass("right").addClass('scroll').attr("href","#").click(function(event) {
					event.preventDefault();
					var controller = $(this).parent('.controller');
	    			var active = $('.album-list a:first-child', controller);
					pGalleryMoveAlbumList(active, 'right');
				}));
				var lbParam = getUrlVars()["pGalleryLb"];
                if(lbParam == 1) {
                	$('.controller',$this).clone().addClass('fancybox').appendTo($this).hide();
                	$('.controller.fancybox .list a', $this).attr('rel', 'pGalleryLb');
                	$('.controller.fancybox .list a',$this).fancybox({ 'margin':25 });
                	$('.controller.fancybox .list a:first',$this).click();
                }
                // MK remove slimbox functionality
                /*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;
                // MK - album created, complete function goes here
                pGalleryListWidth($album);
                if($this.hasClass('autoplay') && lbParam != 1) {
                	if(!$this.hasClass('controls')) {
						$('.controller',$this).hide();
						$('a.next',$this).hide();
						$('a.previous',$this).hide();
						$('.playpause',$this).hide();
					}
					pGalleryPlayPause('play',$this);
                }
            }
            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=912&callback=?', renderAlbum);
        };
        return this.each(showOverview);
    };
})(jQuery);