jQuery(function() { (function($) {

    var mergeOrganizationTmpl =
            "<div class='similar_organizations'>" +
            "   <h4>Merge ${name} (${id}) with:</h4>" +
            "   <h3>Other:</h3>" +
            "   <input type='text' class='manualOrgInput'/>" +
            "   <input type='hidden' class='manualOrgId'/>" +
            "   <div class='merge-org-listing manual' style='display:none'>" +
            "       <span class='selectedOrgName'></span>" +
            "       <div class='command merge'>Merge</div>" +
            "   </div>" +
            "</div>";
    $.template('mergeOrganization', mergeOrganizationTmpl);



    var $orgElems = $('.organization');

    /* only show merge if the current user is logged in and admin */
    if ($('body').data('user') && $('body').data('user').admin_flag)
        $orgElems.append("<div class='command mergeWith'>Merge with&hellip;</div>")
            .find('.mergeWith').click(showMergeOptions);


    function showMergeOptions() {
        var $org = $(this).closest('.organization');
        var $dialog = $("<div class='mergeDialog'><img src='/images/spinner.gif'/></div>");
        $dialog.appendTo($org).dialog({ modal:true, width:"350px" });
        var id = /\d+/.exec($org.attr('id'));

        fetchRelated(id, function(similar) {

            $dialog.html($.tmpl('mergeOrganization',
                { name:$org.find('.title').text(), id:id, similar:similar } ));

            $.each(similar, function() {
                $dialog.find('h4').after("<div id='merge-org-" + this.id + '-with-' + id +
                        "' class='merge-org-listing'>" + this.name + " (" + this.id + ") " +
                        "<div class='command merge'>Merge</div></div>");
            });

            $dialog.find('input.manualOrgInput').autocomplete({
                source:'/organizations.json?exclude_id=' + id,
                select:function(event, ui) {
                    $dialog.find('.merge-org-listing.manual')
                              .show()
                              .attr('id', 'merge-org-' + ui.item.id + '-with-' + id)
                              .end()
                           .find('span.selectedOrgName').text(ui.item.name + " (" + ui.item.id + ")");
                }
            }).data('autocomplete')._renderItem = function(ul, item) {
                return $("<li></li>")
                        .data('item.autocomplete', item)
                        .append($("<a></a>").text(item.name + " (" + item.id + ")"))
                        .appendTo(ul);
            };
        });
    }

    $('.mergeDialog .command.merge').live('click', function() {
        if (confirm("Are you sure you want to merge these organizations?")) {
            /* grab the org ids from the parent div id */
            var sliceMe = $(this).parent().attr('id');
            var id = /\d+/.exec(sliceMe)[0];
            var otherId = /\d+$/.exec(sliceMe)[0];
            $.post('/organizations/' + otherId + '/merge', { merge_with_id:id }, function() {
                window.location.reload();
            })
        }
    });


    function fetchRelated(id, callback) {
        $.getJSON('/organizations/' + id + '/similar.json', callback);
    }

})(jQuery)
});