Synnefo

        response = HttpResponse(data, content_type='application/json')

        response = HttpResponse(data, content_type='application/json')

        #log.info("Added invitation %s -> %s", request.user.uniq, email)

{% spaceless %}

{"errors": [

        {% if errors %}

            {% for error in errors %}

                {

                    "msg": "{{ error|escapejs }}"

                }{% if not forloop.last %},{% endif %}

            {% endfor %}

        {% endif %}

    ],

    "invitations" : [

            {

                "updated": "{{ inv.updated|date }}",

                "accepted": {% if inv.accepted %}true{% else %}false{% endif %},

                "targetname": "{{ inv.targetname|escapejs }}",

                "target": "{{ inv.target|escapejs }}"

            }{% if not forloop.last %},{% endif %}

    ],

    "invitations_left": "{{ invitations_left|escapejs }}"

    }

{% endspaceless %}

.overlay-invitations {

    width: 680px;

}

.invitations-form .sending .sending-msg {

    font-size: 0.8em;

    display: block !important;

    margin-bottom: 5px;

    color: #008800;

}

.invitations-form .send-error {

    font-size: 0.8em;

    margin-bottom: 5px;

    color: #800;

    padding: 3px;

    display: none;

}

.invitations-form .error label {

    color: #000 !important;

}

.invitations-form .form-field {

    width: 49%;

    float: left;

}

.invitations-view .left.none {

    background-color: #880000;

}

.invitations-form {

    position: relative;

}

.invitations-form .add-new-invitation {

    position: absolute;

    top:2px;

    right: 20px;

    width: 16px;

    height: 16px;

    background-image: url("../images/option-action-add.png");

    background-repeat: no-repeat;

    background-position: center;

    text-indent: 2000em;

    background-color: #4085A5;

}

.invitations-view .left {

    font-size: 1em;

    color: #fff;

    font-weight: bold;

    background-color: #4085A5;

    padding: 4px;

}

input.has-errors {

    border-color: #ff0000;

}

.none-left .invitations-wrapper .invitations-list {

    width: 100% !important;

    border-left: none !important;

    padding-left: 0;

}

.invitations-wrapper .invitations-list {

    width: 33%;

    float: left;

    padding-left: 10px;

    border-left: 1px solid #4085A5;

    margin-left: -1px

}

.invitations-wrapper .invitations-form {

    width: 65%;

    float: left;

    border-right: 1px solid #4085A5;

}

.invitations-wrapper label span {

    color: #aaa;

    font-size: 0.8em;

}

.invitations-wrapper label {

    display: block;

    font-size: 0.9em;

    margin-bottom:10px;

    font-weight: bold;

}

.invitations-view .add-new-invitation {

    cursor: pointer;

}

.invitations-wrapper input.name {

    width: 180px;

}

.invitations-wrapper input {

    font-size: 0.9em;

    width: 160px;

    padding:4px;

}

.invitations-list .invitation-sent {

    border-bottom: 1px solid #A1C8DB;

    padding-bottom: 5px;

    margin-bottom: 5px;

}

.invitations-view h3 {

    margin-bottom: 10px;

    color: #4085A5;

}

.invitations-list .invitation-sent.last,

.invitations-list .invitation-sent:last-child {

    border-bottom: none;

}

.invitations-list .email {

    color: #D98147;

    font-size: 0.8em;

    font-weight: bold;

    margin-top: 2px;

}

.invitations-list .name {

    color: #444;

    font-size: 0.9em;

}

/**

 * This jQuery plugin displays pagination links inside the selected elements.

 * 

 * This plugin needs at least jQuery 1.4.2

 *

 * @author Gabriel Birke (birke *at* d-scribe *dot* de)

 * @version 2.2

 * @param {int} maxentries Number of entries to paginate

 * @param {Object} opts Several options (see README for documentation)

 * @return {Object} jQuery Object

 */

 (function($){

	/**

	 * @class Class for calculating pagination values

	 */

	$.PaginationCalculator = function(maxentries, opts) {

		this.maxentries = maxentries;

		this.opts = opts;

	}

	$.extend($.PaginationCalculator.prototype, {

		/**

		 * Calculate the maximum number of pages

		 * @method

		 * @returns {Number}

		 */

		numPages:function() {

			return Math.ceil(this.maxentries/this.opts.items_per_page);

		},

		/**

		 * Calculate start and end point of pagination links depending on 

		 * current_page and num_display_entries.

		 * @returns {Array}

		 */

		getInterval:function(current_page)  {

			var ne_half = Math.floor(this.opts.num_display_entries/2);

			var np = this.numPages();

			var upper_limit = np - this.opts.num_display_entries;

			var start = current_page > ne_half ? Math.max( Math.min(current_page - ne_half, upper_limit), 0 ) : 0;

			var end = current_page > ne_half?Math.min(current_page+ne_half + (this.opts.num_display_entries % 2), np):Math.min(this.opts.num_display_entries, np);

			return {start:start, end:end};

		}

	});

	// Initialize jQuery object container for pagination renderers

	$.PaginationRenderers = {}

	/**

	 * @class Default renderer for rendering pagination links

	 */

	$.PaginationRenderers.defaultRenderer = function(maxentries, opts) {

		this.maxentries = maxentries;

		this.opts = opts;

		this.pc = new $.PaginationCalculator(maxentries, opts);

	}

	$.extend($.PaginationRenderers.defaultRenderer.prototype, {

		/**

		 * Helper function for generating a single link (or a span tag if it's the current page)

		 * @param {Number} page_id The page id for the new item

		 * @param {Number} current_page 

		 * @param {Object} appendopts Options for the new item: text and classes

		 * @returns {jQuery} jQuery object containing the link

		 */

		createLink:function(page_id, current_page, appendopts){

			var lnk, np = this.pc.numPages();

			page_id = page_id<0?0:(page_id<np?page_id:np-1); // Normalize page id to sane value

			appendopts = $.extend({text:page_id+1, classes:""}, appendopts||{});

			if(page_id == current_page){

				lnk = $("<span class='current'>" + appendopts.text + "</span>");

			}

			else

			{

				lnk = $("<a>" + appendopts.text + "</a>")

					.attr('href', this.opts.link_to.replace(/__id__/,page_id));

			}

			if(appendopts.classes){ lnk.addClass(appendopts.classes); }

			lnk.data('page_id', page_id);

			return lnk;

		},

		// Generate a range of numeric links 

		appendRange:function(container, current_page, start, end, opts) {

			var i;

			for(i=start; i<end; i++) {

				this.createLink(i, current_page, opts).appendTo(container);

			}

		},

		getLinks:function(current_page, eventHandler) {

			var begin, end,

				interval = this.pc.getInterval(current_page),

				np = this.pc.numPages(),

				fragment = $("<div class='pagination'></div>");

			// Generate "Previous"-Link

			if(this.opts.prev_text && (current_page > 0 || this.opts.prev_show_always)){

				fragment.append(this.createLink(current_page-1, current_page, {text:this.opts.prev_text, classes:"prev"}));

			}

			// Generate starting points

			if (interval.start > 0 && this.opts.num_edge_entries > 0)

			{

				end = Math.min(this.opts.num_edge_entries, interval.start);

				this.appendRange(fragment, current_page, 0, end, {classes:'sp'});

				if(this.opts.num_edge_entries < interval.start && this.opts.ellipse_text)

				{

					jQuery("<span>"+this.opts.ellipse_text+"</span>").appendTo(fragment);

				}

			}

			// Generate interval links

			this.appendRange(fragment, current_page, interval.start, interval.end);

			// Generate ending points

			if (interval.end < np && this.opts.num_edge_entries > 0)

			{

				if(np-this.opts.num_edge_entries > interval.end && this.opts.ellipse_text)

				{

					jQuery("<span>"+this.opts.ellipse_text+"</span>").appendTo(fragment);

				}

				begin = Math.max(np-this.opts.num_edge_entries, interval.end);

				this.appendRange(fragment, current_page, begin, np, {classes:'ep'});

			}

			// Generate "Next"-Link

			if(this.opts.next_text && (current_page < np-1 || this.opts.next_show_always)){

				fragment.append(this.createLink(current_page+1, current_page, {text:this.opts.next_text, classes:"next"}));

			}

			$('a', fragment).click(eventHandler);

			return fragment;

		}

	});

	// Extend jQuery

	$.fn.pagination = function(maxentries, opts){

		// Initialize options with default values

		opts = jQuery.extend({

			items_per_page:10,

			num_display_entries:11,

			current_page:0,

			num_edge_entries:0,

			link_to:"#",

			prev_text:"Prev",

			next_text:"Next",

			ellipse_text:"...",

			prev_show_always:true,

			next_show_always:true,

			renderer:"defaultRenderer",

			load_first_page:false,

			callback:function(){return false;}

		},opts||{});

		var containers = this,

			renderer, links, current_page;

		/**

		 * This is the event handling function for the pagination links. 

		 * @param {int} page_id The new page number

		 */

		function paginationClickHandler(evt){

			var links, 

				new_current_page = $(evt.target).data('page_id'),

				continuePropagation = selectPage(new_current_page);

			if (!continuePropagation) {

				evt.stopPropagation();

			}

			return continuePropagation;

		}

		/**

		 * This is a utility function for the internal event handlers. 

		 * It sets the new current page on the pagination container objects, 

		 * generates a new HTMl fragment for the pagination links and calls

		 * the callback function.

		 */

		function selectPage(new_current_page) {

			// update the link display of a all containers

			containers.data('current_page', new_current_page);

			links = renderer.getLinks(new_current_page, paginationClickHandler);

			containers.empty();

			links.appendTo(containers);

			// call the callback and propagate the event if it does not return false

			var continuePropagation = opts.callback(new_current_page, containers);

			return continuePropagation;

		}

		// -----------------------------------

		// Initialize containers

		// -----------------------------------

		current_page = opts.current_page;

		containers.data('current_page', current_page);

		// Create a sane value for maxentries and items_per_page

		maxentries = (!maxentries || maxentries < 0)?1:maxentries;

		opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0)?1:opts.items_per_page;

		if(!$.PaginationRenderers[opts.renderer])

		{

			throw new ReferenceError("Pagination renderer '" + opts.renderer + "' was not found in jQuery.PaginationRenderers object.");

		}

		renderer = new $.PaginationRenderers[opts.renderer](maxentries, opts);

		// Attach control events to the DOM elements

		var pc = new $.PaginationCalculator(maxentries, opts);

		var np = pc.numPages();

		containers.bind('setPage', {numPages:np}, function(evt, page_id) { 

				if(page_id >= 0 && page_id < evt.data.numPages) {

					selectPage(page_id); return false;

				}

		});

		containers.bind('prevPage', function(evt){

				var current_page = $(this).data('current_page');

				if (current_page > 0) {

					selectPage(current_page - 1);

				}

				return false;

		});

		containers.bind('nextPage', {numPages:np}, function(evt){

				var current_page = $(this).data('current_page');

				if(current_page < evt.data.numPages - 1) {

					selectPage(current_page + 1);

				}

				return false;

		});

		// When all initialisation is done, draw the links

		links = renderer.getLinks(current_page, paginationClickHandler);

		containers.empty();

		links.appendTo(containers);

		// call callback function

		if(opts.load_first_page) {

			opts.callback(current_page, containers);

		}

	} // End of $.fn.pagination block

})(jQuery);

;(function(root){

    // root

    var root = root;

    // setup namepsaces

    var snf = root.synnefo = root.synnefo || {};

    var api = snf.api = snf.api || {};

    var models = snf.models = snf.models || {}

    var storage = snf.storage = snf.storage || {};

    var ui = snf.ui = snf.ui || {};

    var util = snf.util = snf.util || {};

    var views = snf.views = snf.views || {}

    // shortcuts

    var bb = root.Backbone;

    views.InvitationsView = views.Overlay.extend({

        view_id: "invitations_view",

        content_selector: "#invitations-overlay-content",

        css_class: 'overlay-invitations overlay-info',

        overlay_id: "invitations-overlay",

        subtitle: "",

        title: "Invitations",

        initialize: function(options) {

            views.InvitationsView.__super__.initialize.apply(this, arguments);

            _.bindAll(this);

            this.entry_tpl = this.$(".form-entry-tpl");

            this.form_entries = this.$(".form-entries");

            this.add = this.$(".add-new-invitation");

            this.remove = this.$(".remove-invitation");

            this.send = this.$(".send-invitations");

            this.top_info = this.$(".top-info");

            this.sent = this.$(".invitations-sent-cont");

            this.sent_pages = this.$(".invitations-sent-pages");

            this.sent_tpl = this.$(".invitation-sent-tpl");

            this.entry_tpl.hide();

            this.inv_sent_per_page = 9;

            this.init_handlers();

        },

        init_handlers: function() {

            var self = this;

            this.add.click(this.add_new_entry);

            this.send.click(this.send_entries);

            this.remove.live('click', function() {

                return self.remove_entry($(this).parent().parent());

            });

        },

        remove_entry: function(entry) {

            if (entry.hasClass("sending")) { return };

            entry.remove();

            this.fix_entries();

        },

        add_new_entry: function() {

            var new_entry = this.create_form_entry().show()

            this.form_entries.append(new_entry).show();

            $(new_entry.find("input").get(0)).focus();

            this.fix_entries();

        },

        show_entry_error: function(entry, error) {

            entry.find(".send-error").text(error)

            entry.find(".send-error").show();

            entry.addClass("error");

            entry.find("input").attr("disabled", false);

        },

        get_entry_data: function(entry) {

            var data = {name: entry.find("input.name").val(), email:entry.find("input.email").val()};

            return data;

        },

        entry_is_valid: function(entry) {

            var data = this.get_entry_data(entry);

            entry.find(".send-error").hide();

            entry.removeClass("error");

            entry.find("input").removeClass("has-errors");

            error = false;

            if (!data.name || data.name.split(" ").length == 1) {

                error = "Invalid name";

                entry.find("input.name").addClass("has-errors");

            }

            var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

            if (!data.email || reg.test(data.email) == false) {

                error = "Invalid email";

                entry.find("input.email").addClass("has-errors");

            }

            if (error) { this.show_entry_error(entry, error) };

            return error

        },

        send_entries: function() {

            var self = this;

            this.form_entries.find(".form-entry").each(function(index, el) { self.entry_is_valid($(el)) });

            var entries_to_send = this.form_entries.find(".form-entry:not(.error):not(.sending)");

            this._send_entries(entries_to_send);

        },

        _send_entries: function(entries) {

            $(entries).addClass("sending").find("input").attr("disabled", true);

            var self = this;

            _.each(entries, function(e) {

                var e = $(e);

                var data = self.get_entry_data(e);

                self.send_invitation(data.name, 

                                     data.email,

                                     _.bind(self.invitation_send, this, e), 

                                     _.bind(self.invitation_failed, this, e));

            });

        },

        invitation_send: function(entry, data) {

            entry.removeClass("sending");

            if (data.errors && data.errors.length) {

                this.show_entry_error($(entry), data.errors[0]);

                return;

            } else {

                entry.remove();

                this.show_send_success(entry.find("input.name").val(), data);

            }

        },

        show_send_success: function(to, data) {

            var msg = "Invitation to " + to + " was sent.";

            var msg_el = $('<div class="msg">{0}</div>'.format(msg));

            this.top_info.append(msg_el);

            window.setTimeout(function(){

                msg_el.fadeOut(600, function(){$(this).remove()});

            }, 2000);

            this.fix_entries();

            this.reset_invitations_sent();

        },

        invitation_failed: function(entry) {

            entry.removeClass("sending");

            this.show_entry_error(entry, "Cannot send email, please try again later");

        },

        send_invitation: function(name, email, success, fail) {

            var url = snf.config.invitations_url;

            var payload = {name_1: name, email_1: email, csrftoken: $.cookie('csrftoken')};

            params = {

                success: success,

                error: fail,

                url: url,

                data: $.param(payload),

                skip_api_error: true

            }

            snf.api.sync("create", undefined, params);

        },

        get_entries: function() {

            return this.form_entries.find(".form-entry");

        },

        fix_entries: function() {

            this.$(".remove-invitation").hide();

            if (this.get_entries().length == 0) {

                this.add_new_entry();

            }

            if (this.get_entries().length > 1) {

                this.$(".remove-invitation").show();

            }

            this.$(".form-entry:first-child label").show();

            this.$(".form-entry:not(:first-child) label").hide();

        },

        show: function() {

            views.InvitationsView.__super__.show.apply(this, arguments);

            this.current_page = 0;

            this.reset_invitations_sent();

            this.reset();

            this.add_new_entry();

            this.add_new_entry();

            this.add_new_entry();

        },

        create_form_entry: function() {

            return this.entry_tpl.clone().removeClass("form-entry-tpl").addClass("form-entry").removeClass("hidden");

        },

        reset: function() {

            this.get_entries().remove();

            this.add_new_entry();

        },

        new_invitation_sent_el: function() {

            return this.sent_tpl.clone().removeClass("invitation-sent-tpl").addClass("invitation-sent");

        },

        show_invitations_sent_error: function() {

            this.sent.hide();

            this.$(".invitations-sent-error").show();

        },

        reset_invitations_sent: function() {

            var self = this;

            var url = snf.config.invitations_url;

            params = {

                success: function(data) {

                    if (!data || !data.invitations) {

                        self.show_invitations_sent_error();

                    } else {

                        self.sent.empty();

                        self.add_invitations_sent(data.invitations);

                    }

                    //data.invitations_left = 0;

                    self.$(".description .left").text(data.invitations_left);

                    if(data.invitations_left > 0) {

                        self.$(".invitations-form").show();

                        self.$(".description .left").removeClass("none");

                        self.el.removeClass("none-left");

                    } else {

                        self.$(".invitations-form").hide();

                        self.$(".description .left").addClass("none");

                        self.el.addClass("none-left");

                    }

                },

                error: _.bind(this.show_invitations_sent_error, this),

                url: url,

                skip_api_error: true

            }

            snf.api.sync("read", undefined, params);

        },

        add_invitations_sent: function(invs) {

            _.each(invs, _.bind(function(inv) {

                var el = this.new_invitation_sent_el();

                el.find(".name").text(inv.targetname);

                el.find(".email").text(inv.target);

                el.find(".action").addClass("sent");

                if (!inv.accepted) {

                    el.find(".action").removeClass("resend").addClass("resend")

                }

                el.removeClass("hidden");

                this.sent.append(el);

            }, this));

            this.update_pagination();

            this.sent_pages.trigger("setPage", this.current_page || 0);

        },

        inv_sent_per_page: 5,

        update_pagination: function() {

            this.sent.css({minHeight:this.inv_sent_per_page * 35 + "px"})

            this.sent_pages.pagination(this.sent.children().length, {items_per_page:this.inv_sent_per_page, callback: this.page_cb});

        },

        page_cb: function(index, pager) {

            this.current_page = index;

            var start = index * this.inv_sent_per_page;

            var end = start + this.inv_sent_per_page -1;

            var items = this.sent.children();

            items.hide().removeClass("last");

            for (var i = start; i<=end; i++) {

                $(items.get(i)).show();

            }

            $(items.get(end)).addClass("last");

            return false;

        }

    });

})(this);

            this.invitations_view = new views.InvitationsView();

            $(".usermenu .invitations").click(_.bind(function(){

                this.invitations_view.show();

            }, this));

    <script src="{{ SYNNEFO_JS_LIB_URL}}jquery.pagination.js"></script>

    <script src="{{ SYNNEFO_JS_WEB_URL}}ui_invitations_view.js"></script>

    {% include "partials/invitations.html" %}

            synnefo.config.invitations_url = "{% url invitations %}";

            synnefo.ui.main.bind("initial", function(){

                $(".usermenu .invitations").click();

            })

{% load i18n %}

<div id="invitations-overlay-content" class="hidden overlay-content invitations-view">

    <div class="description">

        <p>You have <span class="left"></span> invitations left</p>

    </div>

    <div class="invitations-wrapper clearfix">

        <div class="invitations-form clearfix">

            <h3>{% trans "Send new intivations" %}</h3>

            <div class="add-new-invitation">add</div>

            <div class="top-info success"></div>

            <div class="form-entry-tpl clearfix hidden">

                <div class="fields clearfix">

                    <div class="form-field">

                        <label>Name <span class="desc">e.g. John Smith</span></label>

                        <input type="text" class="name"/>

                    </div>

                    <div class="form-field">

                        <label>Email</label>

                        <input type="text" class="email"/>

                    </div>

                    <div class="remove-invitation">remove</div>

                </div>

                <div class="send-error"></div>

                <div class="sending-msg hidden">{% trans "Sending..." %}</div>

            </div>

            <div class="form-entries">

            </div>

            <div class="send-invitations">send invitations</div>

        </div>

        <div class="invitations-list clearfix">

            <h3>{% trans "Intivations sent" %}</h3>

            <div class="invitation-sent-tpl hidden">

                <div class="action resend"></div>

                <div class="name"></div>

                <div class="email"></div>

            </div>

            <div class="invitations-sent-cont">

            </div>

            <div class="invitations-sent-pages"></div>

            <div class="hidden invitations-sent-error">{% trans "Cannot display invitations history" %}</div>

        </div>

    </div>

</div>