﻿$.fn.photoSlider = function() {
    this
        .after('<p><a href="#" class="more-photos-link">More photos...</a></p>')
        .wrap('<div class="photo-container" style="overflow:hidden; height: 580px"></div>');

    $('.more-photos-link').click(function() {
        var index = $(this).data('photo-index') || 0;
        var slider = $(this).parent().prev().find('.photo-slider');
        var ps = slider.find('p');
        if (index + 3 >= ps.length) {
            slider.animate({ marginTop: 0 }, 1500);
            $(this).data('photo-index', 3);
        } else {
            var height = 0;
            for (var i = index; i < (index + 3); i++) {
                height += $(ps[i]).height() + parseInt($(ps[i]).css('margin-bottom'));
            }
            slider.animate({ marginTop: '-=' + height.toString() }, 1500);
            $(this).data('photo-index', index + 3);
        }
        return false;
    });
};

$(function() {

    $('#flash-message').slideDown();

    var t = setTimeout(function() { $('#flash-message').fadeOut(); }, 5000);

    $('#flash-message').click(function() {
        $('#flash-message').fadeOut();
        clearTimeout(t);
    });

    $('.photo-slider').photoSlider();
});