first load

dudaGallery.js

(function ($) {

    var methods = {

        init:function (myCase) {
            var initServices = {
                createNav:function () {
                    var enlr = $.dudaGlobal.settings.init.EnlargeMode;
                    var defnd = $.dudaGlobal.settings.init.DefinedMode;
                    var modeNavID = $.dudaGlobal.settings.internal.modeNavID;
                    var btns = methods.surround("button", "btn mode", enlr, enlr) +
                        methods.surround("button", "btn mode btn-primary", defnd, defnd);
                    return methods.surround('div', 'btn-group center', btns, modeNavID);
                },
                createButtons:function () {
                    var total = $.dudaGlobal.settings.init.totalImages;
                    var separator = $.dudaGlobal.settings.init.separator;
                    var currentNumImages = $.dudaGlobal.settings.init.images;
                    var defnd = $.dudaGlobal.settings.init.DefinedMode;
                    var mode = $.dudaGlobal.settings.internal.mode;
                    var btnCntr = $.dudaGlobal.settings.internal.buttonsContainerID;


                    var bar = "";
                    var className = "";
                    var dropDownItems = [];
                    for (i = 0; i <= total; i++) {
                        if ((mode == defnd) && i > 0 && i <= separator) {
                            className = (i == currentNumImages) ? "btn select btn-primary" : "btn select";
                            bar += methods.surround("button", className, i, i);
                        }
                        //select 0-number of options
                        dropDownItems.push(i);
                    }

                    var textB = (mode == defnd) ?
                        'choose 0-' + (dropDownItems.length - 1).toString() :
                        currentNumImages;
                    bar += methods.btnDropDown(dropDownItems, textB);
                    var padding = (mode==defnd)? "38%":  "45%";
                    $('#'+btnCntr).css("padding","5px 0 5px " + padding);
                    return methods.surround('div', 'btn-toolbar', bar);
                },
                createImages:function () {
                    var w = $.dudaGlobal.settings.init.imageWidth;
                    var h = $.dudaGlobal.settings.init.imageHeight;
                    var data = $.dudaGlobal.settings.internal.picasaReturnData;

                    var photo_URL = [];
                    //var photo_Thumb_URL = [];
                    var html = "", aTag, img;
                    $.each(data.feed.entry, function (i, item) {
                        //Photo URL
                        $.each(item.media$group.media$content, function (i, item) {
                            photo_URL.push(item.url);
                            img = methods.img(item.url, 'img-rounded img-polaroid dudaImage', w, h);
                            aTag = methods.aTag(item.url, img, 'fancybox');
                            html += methods.surround('li', 'span4', aTag);
                        });
                        //Thumbnail URL
//                        $.each(item.media$group.media$thumbnail, function (i, item) {
//                            photo_Thumb_URL.push(item.url);
//                        });

                    });

                    var images = methods.surround('ul', 'thumbnails', html);
                    return  methods.surround('div', 'imagesContainer', images);
                }
            };


            var s = $.dudaGlobal.settings.init;
            var f = $.dudaGlobal.settings.internal;
            var cntr = f.thisContainer;
            switch (myCase) {
                case "startup":

                    //setup enlarged/defined
                    cntr.html(initServices.createNav());
                    //setup buttons + selector for number of images
                    cntr.append(methods.surround('div', '', initServices.createButtons(), f.buttonsContainerID));
                    //setup init images empty div
                    cntr.append(methods.surround('div', '', methods.getImagesFromPicasa(), f.imagesCntrID));

                    break;
                case "createButtons":
                    return initServices.createButtons();
                case "createImages":
                    return initServices.createImages();
            }


        },
        switchMode:function (newMode) {
            var s = $.dudaGlobal.settings.init;
            var f = $.dudaGlobal.settings.internal;
            $('#' + f.modeNavID).find('.mode').each(function () {
                $(this).removeClass("btn-primary");
            });

            $('#' + newMode).addClass("btn-primary");
            f.mode = newMode;
            //switch the buttons navbar
            $('#' + f.buttonsContainerID).html(methods.init("createButtons"));
            //rebind click event
            methods.bindChangeNumOfImages();
            if (f.mode==s.EnlargeMode)
                methods.bindClickToEnlarge();
            else
                methods.unbindClickToEnlarge();
            console.log("new image gallery mode is :" + f.mode);

        },
        switchNumOfImages:function (selected) {
            var s = $.dudaGlobal.settings.init;
            var f = $.dudaGlobal.settings.internal;

            $('#' + f.buttonsContainerID).find('.select').each(function () {
                $(this).removeClass("btn-primary");
            });
            $('#' + selected).addClass("btn-primary");
            //changing current number of images
            s.images = selected;
            methods.getImagesFromPicasa();
            console.log("new number of images is  :" + selected);
        },
        getImagesFromPicasa:function () {
            var s = $.dudaGlobal.settings.init;
            var f = $.dudaGlobal.settings.internal;
            var p = $.dudaGlobal.settings.picasa;

            var json_Album_URI = f.picasaUrl
                + "user/" + p.username
                + "?alt=" + "json"
                + "&kind=" + "photo"
                + "&max-results=" + s.images
                + "&hl=" + "en_US"
                + "&fields=" + "entry(media:group,id)"
                + "&thumbsize=" + 104;

            $.ajax({
                type:'GET',
                url:json_Album_URI,
                success:function (data) {
                    $.dudaGlobal.settings.internal.picasaReturnData = data;
                    $('#' + f.imagesCntrID).html(methods.init("createImages"));
                },
                dataType:'json'
            });
        },
        /////////////HTML Helper methods
        surround:function (e, classNames, text, id) {
            id = id || "";
            return '<' + e + ' id = "' + id + '"  class="' + classNames + '">' + text + '</' + e + '>';
        },
        aTag:function (href, text, classNames, target) {
            classNames = classNames || "";
            target = target || "_self";
            return '<a href="' + href + '"  rel="group" onclick="return false" class="' + classNames + '" target="' + target + '">' + text + '</a>';
        },
        img:function (src, classNames, width, height) {
            classNames = classNames || "";
            width = width || "";
            height = height || "";
            return '<img src="' + src + '" class="' + classNames + '"  width=' + width + ' height=' + height + ' />';
        },
        btn:function (text) {
            return methods.surround('button', 'btn', text);
        },
        btnDropDown:function (items, text) {
            var liItems = '';
            $.each(items, function (key, item) {
                liItems += '<li class="select li"><a href="#">' + item + '</a></li>';
            });
            return '<div class="btn-group">' +
                ' <button id="selectImage"  class="btn dropdown-toggle" data-toggle="dropdown">' +
                '<span id="textSelector">' + text + '</span>' +
                '<span class="caret"></span></button>' +
                '<ul class="dropdown-menu">' +
                liItems +
                '</ul>' +
                '</div>';
        }, ///////////HTML Helper methods
        ///////////bind and unbind events
        bindChangeMode:function () {
            //change mode event
            $('.mode').click(function () {
                methods.switchMode($(this).text());
            });
        },
        bindChangeNumOfImages:function () {
            $('.select').click(function () {
                methods.switchNumOfImages($(this).text());
                if ($(this).hasClass('li')) {
                    $("#textSelector").text($(this).text());
                }
            });
        },
        bindClickToEnlarge:function () {
            $(".fancybox").fancybox();
        },

        unbindClickToEnlarge:function(){
            $(".fancybox").unbind('click.fb');
            $(".fancybox").click(function(e){
                this.preventDefault();
            });
        },
        bindErrorHandler:function () {
            $.error('Method  does not exist on jQuery.duda');
        }
        ///////////bind and unbind events
    };

    $.fn.dudaGallery = function (options) {


        var global = {
            images:3,
            EnlargeMode:'Enlarge',
            DefinedMode:'Defined'

        };
        var settings = {
            init:$.extend({
                'images':global.images,
                'totalImages':10,
                'separator':4,
                'EnlargeMode':global.EnlargeMode,
                'DefinedMode':global.DefinedMode
            }, options.init),
            picasa:$.extend({
                'username':'jdiderik', //default
                'password':'zzz'
            }, options.picasa),
            internal:{ //don't touch this unless you know what you're doing
                modeNavID:'modeNav',
                buttonsContainerID:'buttonsContainer',
                imagesCntrID:'imagesNav',
                mode:global.DefinedMode,
                picasaUrl:"https://picasaweb.google.com/data/feed/base/",
                picasaMode:'albums', //-- can be: album, albums, latest (keyword = obsolete but backwards compatible, now just fill in a keyword in the settings to enable keyword-photos)
                album:"", //-- For loading a single album
                authKey:"", //-- for loading a single album that is private (use in 'album' mode only)
                albums:[], //-- use to load specific albums only: ["MyAlbum", "TheSecondAlbumName", "OtherAlbum"]
                keyword:"",
                albumKeywords:[], //-- Only show albums containing one of these keywords in the description. Use [keywords: "kw1", "kw2"] within the description
                picasaReturnData:{},
                thisContainer:{}
            }
        };

        //globalize settings variable
        $.dudaGlobal = {
            settings:settings
        };


        return this.each(function () {
            settings.internal.thisContainer = $(this);
            methods.init("startup");

            //binds
            //change mode event
            methods.bindChangeMode();
            //change number of images to display
            methods.bindChangeNumOfImages();
            //click to enlarge event - use fancybox
            if (settings.internal.mode==global.EnlargeMode)
                 methods.bindClickToEnlarge();
            else
                methods.unbindClickToEnlarge();
            //simulate error event
        });

    };
})(jQuery);