/**************************************************************************
 * 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,
            max_sample: 200,
            tags: ''
        }       
    };

    // 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 noPhotos() {
	       		 $this.parent().append("<div class='box_item'><p>There are no related photos available for this page</p></div>"); 
           }
            
           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, meta_opts){
	            function sortNumber(a,b) {
					return b[0] - a[0];
				}
				
                $this.empty();
                if (data.feed.entry === undefined) {
	                noPhotos();
                } else {
	                
	                var page_keywords_arr = keywordsArray(meta_opts.tags);
	                
	                var cnt = data.feed.entry.length;
	                
	                var image_arr = [];
		            var thumb_key = [];
		            
		            if (cnt <= meta_opts.max_thumbs) {
			           $.each(data.feed.entry,appendImage);
		            } else {
		                $.each(data.feed.entry, function(i, item) {
							if (item.media$group.media$keywords !== undefined) {
				                var image_tags_str = item.media$group.media$keywords.$t;
								var image_tags_arr = keywordsArray(image_tags_str);
								if (image_tags_arr.length > 0) {
									//alert(image_tags_arr);
									//alert(page_keywords_arr);
									//alert($.richArray.intersect(image_tags_arr,page_keywords_arr));
									var common_tags_cnt = $.richArray.intersect(image_tags_arr,page_keywords_arr).length;
									//alert(common_tags_cnt);
									if (common_tags_cnt > 0) {
										ct = [common_tags_cnt, i];
										image_arr.push(ct);
									}
								}
							}
						});
				        //alert(image_arr);
						image_arr.sort(sortNumber);
						//counts cumulative number images with a number of tags or more
						function countTags(image_arr, max_tags, i_cnt) {    
						    for (var i=0; i < image_arr.length; i++) {
							    if (image_arr[i][0] == max_tags) i_cnt ++;
						    }
						    return i_cnt;
					    }
			            
			            var i_start = 0;
					    var i_cnt = 0;
			            var max_tags = image_arr[0][0];
			            		            
			            //while (thumb_key.length < meta_opts.max_thumbs) {
				            
				        //count no elements with max_tags
				        //alert(image_arr);
				        while (i_cnt <= meta_opts.max_thumbs) {
					      	i_cnt = countTags(image_arr, max_tags, i_cnt);   
							   
						    //now if this is less than the number of remaining places left, just add them to the thumbs array
						   if (i_cnt <= (meta_opts.max_thumbs)) {
								//alert("1: i_cnt: " + i_cnt);
							    for (var i=i_start; i < i_cnt; i++) {
								    thumb_key.push(image_arr[i][1]);
							    }
							    i_start = i_cnt;
							    if (i_cnt < image_arr.length) max_tags = image_arr[i_cnt][0];
								
						   } else {	
								//alert("2: i_cnt: " + i_cnt);
							   	var remaining_cnt = i_cnt - i_start;
							   	
							   	while (thumb_key.length < meta_opts.max_thumbs) {
									//alert(remaining_cnt + ":" + i_start);
								   	randomnum = Math.floor((remaining_cnt - 1)*Math.random()) + i_start;
									
									//alert(randomnum);
					            	if ($.inArray(image_arr[randomnum][1], thumb_key) == -1) {
					            		thumb_key.push(image_arr[randomnum][1]);
				            		}
							    }
							   
							    
						   }
					    }
		            			                		                
		                for (var i=0; i < thumb_key.length; i++) {
			                appendImage(thumb_key[i], data.feed.entry[thumb_key[i]]);
		                }
	                }
		            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;	                
		            //$.each(data.feed.entry,appendImage);  
                }   
                           

            }
			
            function processTags(meta_opts) {
	            if (meta_opts.tags == '') return "";
				var keywords = meta_opts.tags.replace(/ /gi,"%20");
				//alert (keywords);
				var tags_arr = keywords.split(",");
				var tags_str = "&tag=";
				for (i=0;i<tags_arr.length;i++) {
					if ($.trim(tags_arr[i]) != "") {
						tags_str +=  '"' + $.trim(tags_arr[i]) + '"%2C';
					}
				}
				//alert(tags_str);
			    return tags_str;
			    

            }
            
            function keywordsArray(str) {
	            //alert (str);
	            if (str == '') return "";
				arr = str.toLowerCase().split(",");
				new_arr = [];
				$.each(arr, function(i, val) {
					new_arr.push($.trim(val));
				});
				return new_arr;
            }
            /*
            $.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_sample + processTags(meta_opts) + '&callback=?',
                function(data) {
	                //alert(meta_opts);
	                renderLatestList(data, meta_opts)
	            }
            );
            */
            $.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_sample + '&callback=?',
                function(data) {
	                //alert(meta_opts);
	                renderLatestList(data, meta_opts)
	            }
            );
        };


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