photos.js

/*global jQuery*/

var setupPhotos = (function ($) {
	
    function each (items, callback) {
        var i;
        for (i = 0; i < items.length; i += 1) {
            setTimeout(callback.bind(this, items[i]), 0);
        }
    }

    function flatten (items) {
        return items.reduce(function (a, b) {
            return a.concat(b);
        });
    }

    function loadPhotosByTag (tag, max, callback) {
        var photos = [];
        var callback_name = 'callback_' + Math.floor(Math.random() * 100000);

        window[callback_name] = function (data) {
            delete window[callback_name];
            var i;
            for (i = 0; i < max; i += 1) {
                photos.push(data.items[i].media.m);
            }
            callback(null, photos);
        };

        $.ajax({
            url: 'http://api.flickr.com/services/feeds/photos_public.gne',
            data: {
                tags: tag,
                lang: 'en-us',
                format: 'json',
                jsoncallback: callback_name
            },
            dataType: 'jsonp'
        });
    }

    function loadAllPhotos (tags, max, callback) {
        var results = [];
        function handleResult (err, photos) {
            if (err) { return callback(err); }

            results.push(photos);
            if (results.length === tags.length) {
                callback(null, flatten(results));
            }
        }

        each(tags, function (tag) {
            loadPhotosByTag(tag, max, handleResult);
        });
    }

    function renderPhoto (photo) {
        var img = new Image();
        img.src = photo;
        return img;
    }
	
    function imageAppender (id) {
        var holder = document.getElementById(id);
        var icon = favoriteIcon();
        return function (img) {
            var elm = document.createElement('div');
            elm.className = 'photo';
            elm.appendChild(img);
            elm.appendChild( icon(img) );
            holder.appendChild(elm);
        };
    }
 	
	function favoriteIcon() {
		var favorites = [];
		if (localStorage.favorites)
			favorites = JSON.parse(localStorage.favorites);
			
		return function (img) {
			var favIcon = document.createElement('a');
			favIcon.href = '#';
			if ( favorites.indexOf(img.src) >= 0 ) {
				favIcon.className = 'icon-heart';
			} else {
				favIcon.className = 'icon-heart-empty';
			}
			favIcon.onclick = function () {
				if ( favorites.indexOf(img.src) >= 0 ) {
					favorites.splice( favorites.indexOf(img.src), 1 );
					favIcon.className = 'icon-heart-empty';
				} else {
					favorites.push(img.src);
					favIcon.className = 'icon-heart';
				}
				localStorage.favorites = JSON.stringify(favorites);
				return false;
			};
			
			return favIcon;
		}
	}

    // ----
    
    var max_per_tag = 5;
    return function setup (tags, callback) {
        loadAllPhotos(tags, max_per_tag, function (err, items) {
            if (err) { return callback(err); }

            each(items.map(renderPhoto), imageAppender('photos'));
            callback();
        });
    };
    
}(jQuery));