///<reference path="jquery-1.4.2-vsdoc.js"/>

// use the YUI module pattern
albums = function() {
    var albumData;
    var albumDiv;
    var albumTitleDiv;
    var photosDiv;
    var albumDown;
    var galleryTemplate;
    var centerWrapper;

    //----------------------- private methods -----------------------
    function getAlbums() {
        $.ajax({
            url: "http://picasaweb.google.com/data/feed/api/user/riskyt?alt=json",
            dataType: "jsonp",
            success: function(data) {
                albumDiv.html("");
                //debugger;
                $.each(data.feed.entry, function(index, value) {
                    albumDiv.html(albumDiv.html() + "<img src='" + value.media$group.media$thumbnail[0].url + "' alt=\"" + value.media$group.media$title.$t + "\" navurl=\"" + value.link[0].href + "\" />");
                });
                var albumImageFlow = new ImageFlow();
                albumImageFlow.init({ ImageFlowID: 'albums',
                    reflections: false,
                    reflectionP: 0.0,
                    aspectRatio: 3,
                    imagesM: 1.3,
                    preloadImages: true,
                    onClick: albums.showAlbum,
                    opacity: true
                });
            }
        });
    }

    function slideUpAlbumPicker() {
        centerWrapper.animate({
            "margin-top": "-1000px"
        }, 200);
        albumTitleDiv.fadeIn('slow');
        photosDiv.fadeIn('slow');
    }

    function slideDownAlbumPicker() {
        $('#galleryDiv').html(galleryTemplate);
        centerWrapper.animate({
            "margin-top": "80px"
        }, 1000);
        albumTitleDiv.fadeOut('slow');
        photosDiv.fadeOut('slow');
        albumDown.html('');
    }

    function getAlbum(imgClicked) {
        // clear out any previous stuff
        albumTitleDiv.html("");
        photosDiv.html("");
        slideUpAlbumPicker();
        var url = $(imgClicked).attr("navurl");
        var linkHtml = "<img src=\"" + $(imgClicked).attr("src") + "\"><br />" +
            $(imgClicked).attr("alt") + "<br />" +
            "&lt;-- back to albums";
        albumDown.html(linkHtml).css("top", $(imgClicked).offset().top - 10).css("left", $(imgClicked).offset().left - 10).show();
        albumDown.animate({ top: 0, left: 0 }, 500, function() {
            $.ajax({
                url: url, dataType: "jsonp",
                success: function(data) {
                    albumTitleDiv.html(data.feed.title.$t);
                    photosDiv = $(".ad-thumb-list");
                    photosDiv.html("");

                    //debugger;
                    $.each(data.feed.entry, function(index, value) {
                        photosDiv.html(photosDiv.html() + "<li><a href='" +
                    value.media$group.media$content[0].url + "'><img src='" +
                     value.media$group.media$thumbnail[0].url + "' title=\"" +
                      value.media$group.media$title.$t + "\" navurl=\"" +
                       value.media$group.media$content[0].url + "\" /></a></li>");
                    });
                    initGallery();
                }
            });
        });
    }

    function getPhotoHtml(img) {
        var winHeight = $(window).height() - 50;
        var winWidth = $(window).width() - 50;

        var h = "<div class='enlargement' " +
            "style='line-height:" + winHeight + "px;height:" + winHeight + "px;width:" + winWidth + "px'>" +
            "<img src=\"" + $(img).attr("navurl") + "\" " +
            "style='max-height:" + winHeight + "px;max-width:" + winWidth + "px' " +
            "alt=\"" +
             $(img).attr("alt") + "\" /></div><div class='enlargementTitle'>" +
             $(img).attr("alt") + "</div>";
        return h;
    }

    function initGallery() {
        $('.ad-gallery').css('width', $(window).width() - 330 + 'px').css('height', $(window).height() + 'px').show();
        $('.ad-gallery .ad-image-wrapper').css('height', $(window).height() - 160 + 'px');
        var galleries = $('.ad-gallery').adGallery({
            loader_image: 'loader.gif',
            width: false, // Width of the image, set to false and it will read the CSS width
            height: false, // Height of the image, set to false and it will read the CSS height
            thumb_opacity: 0.7, // Opacity that the thumbs fades to/from, (1 removes fade effect)
            start_at_index: 0, // Which image should be displayed at first? 0 is the first image
            description_wrapper: false, // Either false or a jQuery object, if you want the image descriptions
            animate_first_image: false, // Should first image just be displayed, or animated in?
            animation_speed: 400, // Which ever effect is used to switch images, how long should it take?
            display_next_and_prev: true, // Can you navigate by clicking on the left/right on the image?
            display_back_and_forward: true, // Are you allowed to scroll the thumb list?
            scroll_jump: 0, // If 0, it jumps the width of the container
            slideshow: {
                enable: true,
                autostart: false,
                speed: 5000,
                start_label: 'go!',
                stop_label: 'stop',
                stop_on_scroll: true, // Should the slideshow stop if the user scrolls the thumb list?
                countdown_prefix: '(', // Wrap around the countdown
                countdown_sufix: ')'
            },
            effect: 'fade', // or 'slide-vert', 'resize', 'fade', 'none' or false
            enable_keyboard_move: true, // Move to next/previous image with keyboard arrows?
            cycle: true, // If set to false, you can't go from the last image to the first, and vice versa
            // All callbacks has the AdGallery objects as 'this' reference
            callbacks: {
                // Executes right after the internal init, can be used to choose which images
                // you want to preload
                init: function() {
                    // preloadAll uses recursion to preload each image right after one another
                    this.preloadAll();
                }
            }
        });
    }

    return {
        // initialize this module
        initialize: function() {
            albumDiv = $("#albums");
            albumTitleDiv = $("#albumTitle");
            photosDiv = $(".ad-thumb-list");
            albumDown = $("#albumDown");
            centerWrapper = $("#centerWrapper");
            albumDown.click(slideDownAlbumPicker);
            galleryTemplate = $("#galleryDiv").html();
            getAlbums();
        },

        showAlbum: function() {
            getAlbum(this);
        },

        showPhoto: function() {
            $.modal(getPhotoHtml($(this)));
        }
    };
} ();

$(document).ready(function() {
    albums.initialize();
});