define([
    'jquery',
    'gizmo/superdesk',
    '//www.google.com/recaptcha/api/js/recaptcha_ajax.js'
], function($, Gizmo) {
    'use strict';

    var Comment = Gizmo.Model.extend({
    });

    var CommentCollection = Gizmo.Collection.extend({
        model: Comment
    });

    return Gizmo.View.extend({
        commentTokenId: 'comment-token',

        events: {
            '#comment-btn': {click: 'togglePopup'},
            '.button.cancel': {click: 'cancel'},
            '.button.send': {click: 'send'},
            'form': {submit: 'send'}
        },

        init: function() {
            this.popup = $(this.el).find('.comment-box').hide();

            this.username = $(this.el).find('#comment-nickname');
            this.text = $(this.el).find('#comment-text');
            this.captcha = $('#' + this.commentTokenId);

            this.resetInput();

            this.storage = new CommentCollection();
            this.storage.setHref(this.model.data.CommentPost.href);

            this.loadRecaptcha = true;
        },

        togglePopup: function(e) {
            e.preventDefault();
            this.popup.toggle();
            if (this.popup.is(':visible')) {
                this.openPopup();
            } else {
                this.closePopup();
            }
        },

        openPopup: function() {
            this.timeline.pause();
            this.initRecaptcha();
        },

        closePopup: function() {
            this.timeline.sync();
        },

        resetInput: function() {
            this.username.val('');
            this.text.val('');
            $(this.el).find('.error').hide();
        },

        cancel: function(e) {
            this.resetInput();
            this.togglePopup(e);
        },

        send: function(e) {
            e.preventDefault();

            if (this.isValid()) {
                this.storage.insert({
                    UserName: this.username.val(),
                    CommentText: this.text.val(),
                    //Challenge: Recaptcha.get_challenge(),
                    //Response: Recaptcha.get_response()
                });
                this.cancel(e);
            }
        },

        initRecaptcha: function() {
            if (this.loadRecaptcha) {
                this.loadRecaptcha = false;
                Recaptcha.create(this.captcha.attr('data-public-key'), this.captcha.attr('id'), {
                    theme: 'clean'
                });
            }
        },

        isValid: function() {
            if (!this.username.val()) {
                this.username.next('.error').show();
            } else {
                this.username.next('.error').hide();
            }

            if (!this.text.val()) {
                this.text.next('.error').show();
            } else {
                this.text.next('.error').hide();
            }

            if (!Recaptcha.get_response()) {
                this.captcha.next('.error').show();
            } else {
                this.captcha.next('.error').hide();
            }

            return $(this.el).find('.error:visible').length === 0;
        }
    });
});

@@ -187,89 +187,281 @@
     
-%7D);%0A%0A    var CommentCollection = Gizmo.Collection.extend(%7B%0A        model: Comment
+    save: function(href, options) %7B%0A            var adapter = function() %7B%0A                return this.syncAdapter.request.apply(this.syncAdapter, arguments);%0A            %7D;%0A%0A            return adapter.call(this, href).%0A                insert(this.data, options);%0A        %7D
 %0A   
@@ -1080,41 +1080,28 @@
 his.
-storage = new CommentCollection()
+loadRecaptcha = true
 ;%0A  
@@ -1119,24 +1119,15 @@
 his.
-storage.setHref(
+href = 
 this
@@ -1158,50 +1158,70 @@
 href
-);%0A%0A            this.loadRecaptcha = true;
+.replace('resources/', 'resources/my/'); // needed for captcha
 %0A   
@@ -1929,24 +1929,56 @@
 lePopup(e);%0A
+            Recaptcha.reload();%0A
         %7D,%0A%0A
@@ -2092,26 +2092,32 @@
     
-this.storage.inser
+var comment = new Commen
 t(%7B%0A
@@ -2219,32 +2219,223 @@
 al()
-,%0A                    //
+%0A                %7D);%0A%0A                var options = %7B%0A                %7D;%0A%0A                var view = this;%0A                comment.save(this.href, %7B%0A                    headers: %7B%0A                        'X-CAPTCHA-
 Chal
@@ -2439,16 +2439,17 @@
 hallenge
+'
 : Recapt
@@ -2493,18 +2493,31 @@
     
-//
+    'X-CAPTCHA-
 Response
 : Re
@@ -2512,16 +2512,17 @@
 Response
+'
 : Recapt
@@ -2548,35 +2548,38 @@
                 
-%7D);
+    %7D,
 %0A               
@@ -2583,21 +2583,236 @@
     
-this.cancel(e
+    success: function() %7B%0A                        view.cancel(e);%0A                    %7D,%0A                    error: function() %7B%0A                        view.captcha.next('.error').show();%0A                    %7D%0A                %7D
 );%0A 

Create the user comment pop-up