(function(context,$) {

    "use strict";

    context.JK = context.JK || {};
    context.JK.AccountProfileAvatarScreen = function(app) {
        var logger = context.JK.logger;
        var rest = context.JK.Rest(app);
        var userId;
        var user = {};
        var tmpUploadPath = null;
        var userDetail = null;

        function beforeShow(data) {
            userId = data.id;
        }

        function afterShow(data) {
            resetForm();
            renderAvatarScreen()
        }

        function resetForm() {
            // remove all display errors
            $('#account-profile-avatar-content-scroller form .error-text').remove()
            $('#account-profile-avatar-content-scroller form .error').removeClass("error")
        }

        function populateAvatar(userDetail) {
            this.userDetail = userDetail;
            var template= context.JK.fillTemplate($('#template-account-profile-avatar').html(), {
                "fp_apikey" : gon.fp_apikey,
                "data-fp-store-path" : gon.fp_upload_dir + '/tmp/' + userDetail.id + '/'
            });
            $('#account-profile-avatar-content-scroller').html(template);


            // prefer tmpUploadPath if it is set; otherwise use the user account's photo_url
          //  renderAvatar(tmpUploadPath ? tmpUploadPath : userDetail.photo_url);
            //renderAvatar(null);
            renderAvatar('public/avatars/tmp/fbcdfef5-202c-4a7f-bf56-b72e06c61208/FxUUqWP9Qcm7roWZszLs_confirm_email_page.png')
        }

        // events for main screen
        function events() {
            // wire up main panel clicks
            $('#account-profile-avatar-content-scroller').on('click', '#account-edit-avatar-cancel', function(evt) { evt.stopPropagation(); navToEditProfile(); return false; } );
            $('#account-profile-avatar-content-scroller').on('click', '#account-edit-avatar-submit', function(evt) { evt.stopPropagation(); handleUpdateEmail(); return false; } );
            $('#account-profile-avatar-content-scroller').on('change', 'input[type=filepicker-dragdrop]', function(evt) { evt.stopPropagation(); afterImageUpload(evt); return false; } );
        }

        function renderAvatarScreen() {
            rest.getUserDetail()
                .done(populateAvatar)
                .error(app.ajaxError)
        }

        function navToEditProfile() {
            resetForm()
            window.location = '#/account/profile'
        }

        function renderAvatar(path) {

            // clear out
            var avatarSpace = $('#account-profile-avatar-content-scroller .account-profile-avatar .avatar-space');
            avatarSpace.children().remove();

            if(!path) {
                // no avatar found for account
                var noAvatarSpace = $('<div></div>');
                noAvatarSpace.addClass('no-avatar-space');
                noAvatarSpace.text('Please upload a photo');
                avatarSpace.append(noAvatarSpace);
            }
            else {
                // create a s3 shared link
                rest.getPhotoUrl({
                    photo_path : path })
                    .done(function(response) {
                        var photo_url = response.photo_url;
                        var avatar = $('<img/>');
                        avatar.attr('src', photo_url);
                        avatar.attr('alt', 'profile avatar')

                        avatarSpace.append(avatar);
                        avatar.Jcrop();

                    })
                    .error(app.ajaxError);
            }
        }

        function afterImageUpload(event) {
            tmpUploadPath = event.originalEvent.fpfile.key;

            renderAvatar(tmpUploadPath);
        }

        function initialize() {
            var screenBindings = {
                'beforeShow': beforeShow,
                'afterShow': afterShow
            };
            app.bindScreen('account/profile/avatar', screenBindings);
            events();
        }

        this.initialize = initialize;
        this.beforeShow = beforeShow;
        this.afterShow = afterShow;
        return this;
    };

})(window,jQuery);