/*
********************************************************************************
**
**  Flickr-Widget.js
**
**  Created by: TJ O'Connor
**  Created on: 8/2/2010
**
********************************************************************************

Basic implementation:

<div id="flickr-widget">
    <img id="flickr-loader" src="http://app.newmarketinglabs.com/nmlstage/rainforest/images/ajax.gif" alt="Loading" />
    <div id="flickr-photos" style="display:none">
        <div></div>
    </div>            
</div>
<script type="text/javascript">
    getFlickrPhotos("http://api.flickr.com/services/feeds/photos_public.gne?tags=dog&format=json&jsoncallback=?");
</script>

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

Advanced implementation:

<div id="flickr-widget">
    <img id="flickr-loader" src="http://app.newmarketinglabs.com/nmlstage/rainforest/images/ajax.gif" alt="Loading" />
    <div id="flickr-photos" style="display:none">
        <div></div>
        <p><a href="#">Flickr</a></p>
    </div>
</div>
<script type="text/javascript">
    getFlickrPhotos("http://api.flickr.com/services/feeds/photos_public.gne?tags=dog&format=json&jsoncallback=?", 3, 15, "http://www.flickr.com/search/?q=dog&m=tags", "Flickr photos tagged #dog");
</script>

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

Some basic CSS styling:

#flickr-photos {width:330px}
#flickr-photos a.flickr-photo{float:left; margin-right:10px; margin-bottom:10px;}
#flickr-photos a.flickr-photo.last{margin-right:0;}
#flickr-photos a.flickr-photo img{width:100px; height:73px; border:none;}

*/
function getFlickrPhotos(feedURL, cols, maxPhotos, linkURL, linkText) {

    // Init variables
    var className = "";
    if (!cols) { var cols = 3; }
    if (!maxPhotos) { var maxPhotos = 9; }

    // Load images from Flickr
    $.getJSON(feedURL, function (data) {

        // Hide Photo Container
        $("#flickr-photos").hide();

        // For each image
        var intCount = 1;
        $.each(data.items, function (i, item) {

            // Limit max photos
            if (intCount <= maxPhotos) {

                // Add class to last column
                if ((intCount % cols) == 0) {
                    className = "last";
                }
                else {
                    className = "";
                }

                // Add HTML to placeholder
                $("#flickr-photos div").append("<a class='flickr-photo " + className + "' href='" + item.link + "'><img src='" + item.media.m + "' /></a>");

                // Increase counter
                intCount++;
            }
        });

        // Fade-out Loading Image
        $("#flickr-loader").fadeOut("normal", function () {

            // Remove loading image
            $(this).remove();

            // Show Photo Container
            $("#flickr-photos").fadeIn("slow");

            // Update/remove Search Link
            if (linkURL) {
                $("#flickr-photos > p > a").attr("href", linkURL);
            }
            else {
                $("#flickr-photos > p > a").remove();
            }
            // Update Search Text
            if (linkText) {
                $("#flickr-photos > p > a").html(linkText);
            }
           

        });

    });
}