$(function(){
    $('.moreUpdatesLink').click(function () {
        var updateCount = $("article").length;

        $.ajax({
            type: 'get',
            url: '/getMoreUpdates/'+updateCount,
            success: function (data) {
                //$(".project_progress_bar").html(data);
                addUpdates(data.updates, data.updatesLeft);
            }
        });

        return false;
    });
});


function addUpdates(updates, updatesLeft){
    var i,
        numUpdates = updates.length,
        updatesHtmlString = '',
        currentYear = $('span.new-year').last().html(),
        readMoreButton = $('article a p.button').first().prop('outerHTML'),
        url = window.location.protocol + '//' + window.location.host;

    for(i = 0; i < numUpdates; i++) {
        var update = updates[i];

        // check year
        if(update.year < currentYear) { updatesHtmlString += '<span class="new-year">'+ update.year +'</span>'; }

        updatesHtmlString += '<article class="';
        // check images
        if(update.large_image_url ||  update.medium_image_url) { updatesHtmlString += 'with-image'; }

        updatesHtmlString += '">';

        updatesHtmlString += '<span class="date">'+update.fancyDate+'</span>';
        updatesHtmlString += '<div class="timeline-connection"><span class="circle"></span><span class="line"></span></div>';

        updatesHtmlString += '<a href="'+ url + '/' +update.route.route+'">';
        updatesHtmlString += '<div class="window-bar"><div class="buttons"></div></div>';

        if(update.large_image_url ||  update.medium_image_url) {
            updatesHtmlString += '<figure>';
            updatesHtmlString += '<img class="large" alt="update image" src="'+update.large_image_url+'">';
            updatesHtmlString += '<img class="medium" alt="update image" src="'+update.medium_image_url+'">';
            updatesHtmlString += '<figure>';
        }

        updatesHtmlString += '<div class="content">';
        updatesHtmlString += '<h3>'+update.name+'</h3>';
        updatesHtmlString += update.overview;
        updatesHtmlString += '</div>';

        updatesHtmlString += readMoreButton;

        updatesHtmlString += '</a></article>';
    }

    $(updatesHtmlString).hide().insertBefore('.main-timeline .placeholder .moreUpdatesLink').fadeIn(500);
    console.log(updatesLeft);
    if(updatesLeft <= 0) {
        $('.main-timeline .placeholder .moreUpdatesLink').hide();
        $('.main-timeline .placeholder .noMoreUpdates').show();
    }
}