From daa122573822b167b274ad72a4258f4ed43cc059 Mon Sep 17 00:00:00 2001
From: pavel <pavel.handleman@gmail.com>
Date: Tue, 20 Jan 2015 20:24:27 +0000
Subject: [PATCH] expo-20 (not tested)

---
 .../includes/accounts/current_user.html       | 243 ++++++++++--------
 templates/client/popups/create_company.html   |   8 +-
 templates/client/static_client/css/main.css   |  47 ++++
 .../static_client/js/_modules/page.profile.js | 131 +++++++---
 .../js_min/_modules/page.profile.min.js       |   2 +-
 5 files changed, 272 insertions(+), 159 deletions(-)

diff --git a/templates/client/includes/accounts/current_user.html b/templates/client/includes/accounts/current_user.html
index a173cf25..ae89d84e 100644
--- a/templates/client/includes/accounts/current_user.html
+++ b/templates/client/includes/accounts/current_user.html
@@ -9,40 +9,43 @@
 
         {# avatar #}
         <aside>
-		    <div class="i-pict p-editable">
-                {% if request.user.profile.avatar %}
-                <div id="pick-block" class="pic_block">
-                {% endif %}
-                    {% thumbnail request.user.profile.avatar "100x100" crop="center" as im %}
-                        <img clas="user-avatar" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
-                    {% endthumbnail %}
-                {% if request.user.profile.avatar %}
-                </div>
-                {% endif %}
-                <div class="edit-wrap">
-                    <a class="e-btn" href="#">{% trans 'редактировать' %}</a>
-                    <div class="e-form">
-                        <form class="clearfix update-profile-form" enctype="multipart/form-data" id="avatar_form"action="/profile/update/avatar/" method="post">{% csrf_token %}
-							<div class="ef-body">
-
-								<div class="epfl">
-									<label>{{ avatar_form.avatar.label }}</label>
-									<div class="epf-field">
-										<div class="input-file clearfix">
-                                            <div class="button icon-clip">{% trans 'выберите файл' %}</div>
-                                            <div class="file-text placehlder">{% trans 'Файл не выбран' %}</div>
-                                            <div class="if-field-wrap"><input id="id_avatar" type="file" name="avatar" /></div>
+            <div class="form-item-wrap">
+
+                <div class="i-pict p-editable editable-wrap">
+                    {% if request.user.profile.avatar %}
+                    <div id="pick-block" class="pic_block">
+                        {% endif %}
+                        {% thumbnail request.user.profile.avatar "100x100" crop="center" as im %}
+                        <img class="user-avatar" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
+                        {% endthumbnail %}
+                        {% if request.user.profile.avatar %}
+                    </div>
+                    {% endif %}
+                    <div class="edit-wrap">
+                        <a class="e-btn no-refresh" href="#">{% trans 'редактировать' %}</a>
+                        <div class="e-form">
+                            <form class="clearfix update-profile-form" enctype="multipart/form-data" id="avatar_form"action="/profile/update/avatar/" method="post">{% csrf_token %}
+                                <div class="ef-body">
+
+                                    <div class="epfl">
+                                        <label>{{ avatar_form.avatar.label }}</label>
+                                        <div class="epf-field">
+                                            <div class="input-file clearfix">
+                                                <div class="button icon-clip">{% trans 'выберите файл' %}</div>
+                                                <div class="file-text placehlder">{% trans 'Файл не выбран' %}</div>
+                                                <div class="if-field-wrap"><input id="id_avatar" type="file" name="avatar" /></div>
+                                            </div>
                                         </div>
-									</div>
-								</div>
+                                    </div>
 
-							</div>
+                                </div>
 
-							<div class="ef-buttons">
-								<button type="submit" class="lnk icon-save">{% trans 'Сохранить' %}</button>
-							</div>
-						</form>
-                        <a class="ef-close" href="#">{% trans 'закрыть' %}</a>
+                                <div class="ef-buttons">
+                                    <button type="submit" class="lnk icon-save">{% trans 'Сохранить' %}</button>
+                                </div>
+                            </form>
+                            <a class="ef-close" href="#">{% trans 'закрыть' %}</a>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -53,108 +56,113 @@
             </div>
         </aside>
         {# END avatar #}
-        <div class="i-info">
+        <div class="i-info ">
             <header>
                 {# country and city #}
-                <div class="i-place p-editable">
-                    {% if home_form.instance.country %}
+                <div class="form-item-wrap">
+                    <div class="i-descr add_link_text ">
+                        <a class="e-btn" href="#" title="">{% trans 'Указать' %}</a>
+                        <div class="add_link_text_text">{% trans 'Страну и город' %}<b>+10</b></div>
+                    </div>
+                    <div class="i-place p-editable editable-wrap hidden">
 
-                    {% else %}
-                    <span style="display:none;">
-                    {% endif %}
+                    <span class="static-value">
                         <span id="static-home-country">{{ home_form.instance.country }}</span>
-                    </span>
-
-                    {% if home_form.instance.city %}
+                        , <span id="static-home-city">{{ home_form.instance.city }}</span>
 
-                    {% else %}
-                    <span style="display:none;">
-                    {% endif %}
-                    , <span id="static-home-city">{{ home_form.instance.city }}</span>
                     </span>
 
-                    <div class="edit-wrap e-left">
-                        <a class="e-btn" href="#">{% trans 'редактировать' %}</a>
-                        <div class="e-form">
-                            <form class="clearfix update-profile-form" id="home_form" action="/profile/update/home/"  method="post">{% csrf_token %}
-                                <div class="ef-body">
 
-                                    <div class="epfl">
-                                        <label>{{ home_form.country.label }}</label>
-                                        <div class="epf-field">
-                                            {{ home_form.country }}
+                        <div class="edit-wrap e-left">
+                            <a class="e-btn" href="#">{% trans 'редактировать' %}</a>
+                            <div class="e-form">
+                                <form class="clearfix update-profile-form" id="home_form" action="/profile/update/home/"  method="post">{% csrf_token %}
+                                    <div class="ef-body">
+
+                                        <div class="epfl">
+                                            <label>{{ home_form.country.label }}</label>
+                                            <div class="epf-field">
+                                                {{ home_form.country }}
 
+                                            </div>
                                         </div>
-                                    </div>
 
-                                    <div class="epfl">
-                                        <label>{% trans 'Город' %}</label>
-                                        <div class="epf-field">
-                                            {{ home_form.city }}
+                                        <div class="epfl">
+                                            <label>{% trans 'Город' %}</label>
+                                            <div class="epf-field">
+                                                {{ home_form.city }}
+                                            </div>
                                         </div>
-                                    </div>
 
-							    </div>
+                                    </div>
 
-								<div class="ef-buttons">
-									<button type="submit" class="lnk icon-save">{% trans 'Сохранить' %}</button>
-								</div>
-                            </form>
-                            <a class="ef-close" href="#">{% trans 'закрыть' %}</a>
+                                    <div class="ef-buttons">
+                                        <button type="submit" class="lnk icon-save">{% trans 'Сохранить' %}</button>
+                                    </div>
+                                </form>
+                                <a class="ef-close" href="#">{% trans 'закрыть' %}</a>
+                            </div>
                         </div>
                     </div>
                 </div>
                 {# END country and city #}
 
                 {# name #}
-                <div class="i-title p-editable">
-                    <span id="static-name-value">
+                <div class="form-item-wrap">
+                    <div class="i-descr add_link_text ">
+                        <a class="e-btn" href="#" title="">{% trans 'Указать' %}</a>
+                        <div class="add_link_text_text">{% trans 'имя и фамилию' %}<b>+10</b></div>
+                    </div>
+                    <div class="i-title p-editable editable-wrap">
+                    <span id="static-name-value" class="static-value">
                         {{ name_form.get_full_name }}
                     </span>
-                    <div class="edit-wrap">
-						<a class="e-btn" href="#">{% trans 'редактировать' %}</a>
-						<div class="e-form">
-							<form class="clearfix update-profile-form" id="name_form"  action="/profile/update/name/"
-                                  method="post"  method="post">{% csrf_token %}
-
-								<div class="ef-body">
-
-									<div class="epfl">
-										<label>{{ name_form.first_name.label }}</label>
-										<div class="epf-field">
-										    {{ name_form.first_name }}
-										</div>
-									</div>
-                                    <div class="epfl">
-                                        <label>{{ name_form.last_name.label }}</label>
-                                        <div class="epf-field">
-                                            {{ name_form.last_name }}
+                        <div class="edit-wrap">
+                            <a class="e-btn" href="#">{% trans 'редактировать' %}</a>
+                            <div class="e-form">
+                                <form class="clearfix update-profile-form" id="name_form"  action="/profile/update/name/"
+                                      method="post"  method="post">{% csrf_token %}
+
+                                    <div class="ef-body">
+
+                                        <div class="epfl">
+                                            <label>{{ name_form.first_name.label }}</label>
+                                            <div class="epf-field">
+                                                {{ name_form.first_name }}
+                                            </div>
+                                        </div>
+                                        <div class="epfl">
+                                            <label>{{ name_form.last_name.label }}</label>
+                                            <div class="epf-field">
+                                                {{ name_form.last_name }}
+                                            </div>
                                         </div>
-								    </div>
 
-								</div>
+                                    </div>
 
-								<div class="ef-buttons">
-									<button type="submit" class="lnk icon-save">{% trans 'Сохранить' %}</button>
-								</div>
-							</form>
+                                    <div class="ef-buttons">
+                                        <button type="submit" class="lnk icon-save">{% trans 'Сохранить' %}</button>
+                                    </div>
+                                </form>
 
-							<a class="ef-close" href="#">{% trans 'закрыть' %}</a>
-						</div>
-					</div>
+                                <a class="ef-close" href="#">{% trans 'закрыть' %}</a>
+                            </div>
+                        </div>
+                    </div>
                 </div>
+
                 {# END name #}
             </header>
 
             {# position #}
-            <div class="work_form-wrap">
+            <div class="form-item-wrap">
 
                 <div class="i-descr add_link_text ">
                     <a class="e-btn" href="#" title="">{% trans 'Указать' %}</a>
                     <div class="add_link_text_text">{% trans 'свою должность и место работы' %}<b>+10</b></div>
                 </div>
-                <div class="i-position p-editable hidden">
-                    <p id="static-work-value ">
+                <div class="i-position p-editable editable-wrap hidden">
+                    <p id="static-work-value" class="static-value">
                         {{ work_form.position.value }}
                         {% if work_form.work.value %}
                         {% trans 'в' %} {{ work_form.work.value }}
@@ -199,10 +207,10 @@
 
             <div class="i-contacts clearfix">
                 <div class="ic-buttons dd_width_4">
-                    <div class="social_form-wrap">
-                        <div class="p-editable">
+                    <div class="form-item-wrap">
+                        <div class="p-editable editable-wrap social">
                             <div class="i-descr add_link_text add_link_text_medium">
-                                <a class="e-btn" href="#" title="">{% trans 'Добавить' %}</a>
+                                <a class="e-btn no-refresh social" href="#" title="">{% trans 'Добавить' %}</a>
 
                                 <ul class="soc-media-buttons soc-media-buttons1">
                                 <li>
@@ -248,8 +256,10 @@
                             </div>
 
 
-                            <div class="edit-wrap">
+                            <div class="edit-wrap ">
                                 <div class="e-form">
+                                    <div class="edit-label"><span>&nbsp;</span></div>
+
                                     <form class="clearfix update-profile-form" id="social_form" action="/profile/update/social/" method="post">{% csrf_token %}
 
                                         <div class="ef-body">
@@ -298,14 +308,14 @@
                 </div>
                 {# contacts #}
                 <div class="ic-links dd_width_5">
-                    <div class="phone_form-wrap">
-                        <div class="p-editable add_link_text add_link_text_medium">
+                    <div class="form-item-wrap">
+                        <div class="i-descr add_link_text add_link_text_medium">
                             <a class="e-btn" href="#" title="">{% trans 'Добавить' %}</a>
                             <div class="add_link_text_text">{% trans 'номер телефона' %} <b>+15</b></div>
                         </div>
-                        <div class="ic-tel p-editable hidden">
+                        <div class="ic-tel p-editable editable-wrap hidden">
                             {% if phone_form.phone.value %}
-                            <span id="static-phone-value">{{ phone_form.phone.value|phone }}</span>
+                            <span id="static-phone-value" class="static-value">{{ phone_form.phone.value|phone }}</span>
                             {% endif %}
                             <div class="edit-wrap">
                                 <a class="e-btn" href="#">{% trans 'редактировать' %}</a>
@@ -364,14 +374,14 @@
                         </div>
                     </div>
                     {% endcomment %}
-                    <div class="web_page_form-wrap">
-                        <div class="ic-site p-editable add_link_text add_link_text_medium">
+                    <div class="form-item-wrap">
+                        <div class=" i-descr ic-site p-editable add_link_text add_link_text_medium">
                             <a class="e-btn" href="#" title="">{% trans 'Добавить' %}</a>
                             <div class="add_link_text_text">{% trans 'сайт' %} <b>+5</b></div>
                         </div>
-                        <div class="ic-site p-editable hidden">
+                        <div class="ic-site p-editable editable-wrap hidden">
                             {% if web_page_form.web_page.value %}
-                            <a class="icon-ext-link" id="static-web-page-value" href="{% if web_page_form.web_page.value %}{{ web_page_form.web_page.value }}{% else %}#{% endif %}" target="_blank">
+                            <a class="icon-ext-link static-value" id="static-web-page-value" href="{% if web_page_form.web_page.value %}{{ web_page_form.web_page.value }}{% else %}#{% endif %}" target="_blank">
                                 {% if web_page_form.web_page.value %}
                                 {{ web_page_form.web_page.value }}
                                 {% endif %}
@@ -413,13 +423,13 @@
             {# about #}
             <div class="i-additional">
                 <div class="ia-title">{% trans 'О себе:' %}</div>
-                <div class="about_form-wrap">
-                    <div class="p-editable add_link_text">
+                <div class="form-item-wrap">
+                    <div class="i-descr add_link_text">
                         <a class="e-btn" href="#" title="">{% trans 'Добавить' %}</a>
                         <div class="add_link_text_text">{% trans 'информацию о себе' %} <b>+10</b></div>
                     </div>
-                    <div class="p-editable hidden">
-                        <p id="static-about-value">{{ about_form.about.value }}</p>
+                    <div class="p-editable editable-wrap hidden">
+                        <p id="static-about-value" class="static-value">{{ about_form.about.value }}</p>
 
                         <div class="edit-wrap">
                             <a class="e-btn" href="#">{% trans 'редактировать' %}</a>
@@ -497,7 +507,12 @@
         // class selector to identify required forms on page
         updateFormClass:'update-profile-form',
         // text part that is added to form id to designate its wrapper container
-        formContainerPostfix:'-wrap',
+        formWrapperClass:'form-item-wrap',
+        formCurrentClass:'pe-current',
+        staticValueClass:'static-value',
+        descriptionClass:'i-descr',
+        editableClass:'editable-wrap',
+        closeButtonClass:'ef-close',
         // text and paths for dynamically rendered selectboxes
         addCompanyButtonId:'add-new-company',
         selectBox:[
diff --git a/templates/client/popups/create_company.html b/templates/client/popups/create_company.html
index a62b6307..26c7e40f 100644
--- a/templates/client/popups/create_company.html
+++ b/templates/client/popups/create_company.html
@@ -1,14 +1,14 @@
 {% load static %}
 {% load i18n %}
 
-<div id="pw-company" class="popup-window pw-reg">
+<div id="pw-company" class="popup-window pw-reg create-company-modal">
     <header class="clearfix">
         <div class="pw-title">{% trans 'Создание компании' %}</div>
     </header>
     <div class="pw-body clearfix">
         <form id="create_company_form" method="post" class="pw-form update-profile-form"  action="{{ form.action }}">{% csrf_token %}
             <div class="pwf-line">
-                <div class="pwf-field">
+                <div class="pwf-field required">
                     {{ form.name }}
                 </div>
                 <div class="pwf-msg">
@@ -17,7 +17,7 @@
             </div>
 
             <div class="pwf-line">
-                <div class="pwf-field">
+                <div class="pwf-field required">
                     {{ form.url }}
                 </div>
                 <div class="pwf-msg">
@@ -26,7 +26,7 @@
             </div>
 
             <div class="pwf-line">
-                <div class="pwf-field">
+                <div class="pwf-field select-input required">
                     {{ form.theme }}
                 </div>
             </div>
diff --git a/templates/client/static_client/css/main.css b/templates/client/static_client/css/main.css
index 23251a15..be4eb796 100644
--- a/templates/client/static_client/css/main.css
+++ b/templates/client/static_client/css/main.css
@@ -12370,6 +12370,7 @@ hr + .rq-note {
 		width: 15px;
 		height: 16px;
 		background: transparent url(../img/sprites.png) -360px -159px;
+		z-index: 1;
 	}
 	.err-message-box{
 		display: none !important;
@@ -12848,6 +12849,52 @@ hr + .rq-note {
 		.edit-profile .ic-buttons .p-editable{
 			padding-left: 0;
 		}
+	.create-company-modal .select-input.err{
+		width: auto;
+	}
+	.create-company-modal .select-input.err .select2-choices{
+		border-color: #d80000;
+		border-width: 2px;
+	}
+	.p-editable.pe-current .e-btn.social{
+		background-color: transparent;
+	}
+	.p-editable.pe-current .e-btn.social:before{
+		display: none;
+	}
+	.p-editable.social .edit-label{
+		display: none;
+	}
+	.p-editable.pe-current.social .e-form:before{
+		display: none;
+	}
+	.p-editable.pe-current.social .edit-label{
+		display: block;
+		width: 24px;
+		margin-left: -24px;
+		padding-left: 5px;
+		padding-top: 4px;
+		padding-bottom: 4px;
+		background-color: #ff6600;
+		position: absolute;
+		top: 0;
+		left: 0;
+		border-bottom-left-radius: 3px;
+		border-bottom-right-radius: 0;
+		border-top-left-radius: 3px;
+		border-top-right-radius: 0;
+
+	}
+		.p-editable.pe-current.social .edit-label span{
+			display: block;
+			width: 18px;
+			height: 16px;
+			background: #ff6600 url(../img/sprites.png) -136px -145px no-repeat;
+
+		}
+	/*.create-company-modal .select-input.err:before{*/
+		/*margin-right: 0;*/
+	/*}*/
 
 /************************\
 # страница редактирования профиля
diff --git a/templates/client/static_client/js/_modules/page.profile.js b/templates/client/static_client/js/_modules/page.profile.js
index b9185d0b..20f1705b 100644
--- a/templates/client/static_client/js/_modules/page.profile.js
+++ b/templates/client/static_client/js/_modules/page.profile.js
@@ -15,7 +15,8 @@ if (EXPO.profile){
 		//language object
 		that.lang ={};
 	//dependences
-		var com = EXPO.common;
+		var com = EXPO.common,
+			$waiter;
 
 		//private
 		// factory for on page form objects
@@ -92,6 +93,22 @@ if (EXPO.profile){
 							$('#static-'+input).html();
 						}
 					}
+				},
+				/**
+				 * refreshes form state: if value was entered by user, then there will be label with rhis value
+				 * or there will be prompt to enter value
+				 * @function
+				 * @public
+				 */
+				refreshState: function () {
+					if($.trim( this.$staticValue.text()) == '' && this.$wrapper.length && this.refrashable){
+						this.$editable.addClass('hidden');
+						this.$description.removeClass('hidden');
+
+					}else if(this.$wrapper.length  && this.refrashable){
+						this.$editable.removeClass('hidden');
+						this.$description.addClass('hidden');
+					}
 				}
 			};
 			Forms.factory = function (type, ajaxpath) {
@@ -128,6 +145,7 @@ if (EXPO.profile){
 						$('#static-home-country').text(country);
 						$('#static-home-city').text(city);
 						$('.p-editable').removeClass('pe-current');
+						this.refreshState();
 					}
 				};
 				this.ajaxPath = path;
@@ -143,6 +161,8 @@ if (EXPO.profile){
 					if (data.success){
 						$('#static-name-value').text($('#id_last_name').val()+' '+$('#id_first_name').val());
 						$('.p-editable').removeClass('pe-current');
+						this.refreshState();
+
 					}
 				};
 				this.ajaxPath = path;
@@ -159,19 +179,8 @@ if (EXPO.profile){
 						$('#static-work-value').text($('#id_position').val());
 
 						$('.p-editable').removeClass('pe-current');
-					}
-				};
-				this.ajaxPath = path;
+						this.refreshState();
 
-			};
-			Forms.about_company_form = function (path) {
-				/**
-				 * callback after successful request to the server
-				 * @param data -data object recieved from server
-				 */
-				this.pullHandler = function (data) {
-					if (data.success){
-						window.location.reload();
 					}
 				};
 				this.ajaxPath = path;
@@ -188,6 +197,8 @@ if (EXPO.profile){
 						$('#static-phone-value').text($('#id_phone')[0].value);
 
 						$('.p-editable').removeClass('pe-current');
+						this.refreshState();
+
 
 					}
 				};
@@ -205,6 +216,8 @@ if (EXPO.profile){
 						var userLink = $('#id_web_page').val();
 						$('#static-web-page-value').attr('href',userLink).text(userLink);
 						$('.p-editable').removeClass('pe-current');
+						this.refreshState();
+
 					}
 				};
 
@@ -221,6 +234,8 @@ if (EXPO.profile){
 					if (data.success){
 						$('#static-about-value').text($('#id_about').val());
 						$('.p-editable').removeClass('pe-current');
+						this.refreshState();
+
 					}
 				};
 				$('#id_about').on('keypress', function (e) {
@@ -273,6 +288,7 @@ if (EXPO.profile){
 
 						}
 						$('.p-editable').removeClass('pe-current');
+
 					}
 				};
 				this.pushHandler = function (data, formName){
@@ -305,6 +321,7 @@ if (EXPO.profile){
 							$avatar.attr('src', data.url);
 						}
 						$('.p-editable').removeClass('pe-current');
+
 					}
 				};
 				this.pushHandler = function(data){
@@ -328,16 +345,26 @@ if (EXPO.profile){
 			 * @param path
 			 */
 			Forms.create_company_form = function (path) {
-				var self = this;
+				var self = this,
+					containerClass = 'pwf-field';
 				/**
 				 * callback after successful request to the server
 				 * @param data -data object recieved from server
 				 */
 				this.pullHandler = function (data) {
 					if (data.success){
+						location.reload();
 
+					}else{
 
+						for ( var key in data.errors) {
+							if (data.errors.hasOwnProperty(key)) {
+								$('input[name="' + key + '"], select[name="' + key + '"]', self.$form).closest('.'+containerClass).addClass('err');
+								$waiter.hide();
+							}
+						}
 					}
+
 				};
 
 
@@ -383,6 +410,7 @@ if (EXPO.profile){
 				};
 			this.forms = {};
 			$(function () {
+				$waiter = $('#wait-ajax').css({'z-index': '8012'});
 				/**
 				 * <selectbox> styling with 3-rd party libs
 				 */
@@ -474,15 +502,36 @@ if (EXPO.profile){
 				$('.'+self.opt.updateFormClass).each(function () {
 					var formName = $(this).attr('id'),
 						path = $(this).attr('action'),
-						inputData;
+						inputData,
+						$wrapper = $(this).closest('.'+self.opt.formWrapperClass),
+						$staticValue = $('.'+self.opt.staticValueClass, $wrapper),
+						$description = $('.'+self.opt.descriptionClass, $wrapper),
+						$editable = $('.'+self.opt.editableClass, $wrapper),
+						$closeButton = $('.'+self.opt.closeButtonClass, $wrapper);
 
 					//make and initialize form objects
+
 					self.forms[formName] = Forms.factory(formName,path);
+					if($('.'+self.opt.editButtonClass, $wrapper).hasClass('no-refresh')){
+						self.forms[formName].refrashable = false;
+					}else{
+						self.forms[formName].refrashable = true;
+
+					}
+					self.forms[formName].$form = $(this);
+					self.forms[formName].$wrapper = $wrapper;
+					self.forms[formName].$staticValue = $staticValue;
+					self.forms[formName].$description = $description;
+					self.forms[formName].$editable = $editable;
+
+
+					self.forms[formName].refreshState();
 
 					// submit events handler
 					$(this).off('submit');
 					$(this).on('submit', function () {
 						//check if formData is supported
+						$waiter.show();
 						if ( window.FormData && ("upload" in ($.ajaxSettings.xhr())) ){
 							inputData = new FormData(this);
 							self.forms[formName].pushData(inputData, formName);
@@ -493,38 +542,40 @@ if (EXPO.profile){
 
 						return false;
 					});
-
-				});
-				/**
-				 * edit button
-				 */
-				$('.'+self.opt.editButtonClass).on('click', function () {
-					var $switch = $(this),
-						$wrapper = $switch.closest('.edit-wrap'),
-						$container = $switch.closest('.p-editable'),
-						$pForm = $wrapper.children('.e-form'),
-						$closeBtn = $pForm.find('a.ef-close'),
-						$eContainers = $('.p-editable.pe-current').not($container);
-
-					$eContainers.each(function() {
-						$(this).removeClass('pe-current');
-					});
-					$container.toggleClass('pe-current');
-
-					$closeBtn.one('click', function() {
-						$container.removeClass('pe-current');
+					$closeButton.on('click', function() {
+						$editable.removeClass(self.opt.formCurrentClass);
+						self.forms[formName].refreshState();
 						return false;
 					});
+					/**
+					 * edit button
+					 */
+					$('.'+self.opt.editButtonClass, $wrapper).on('click', function () {
+						if(self.forms[formName].refrashable){
+							$editable.removeClass('hidden');
+							$description.addClass('hidden');
+						}else{
 
-					$(document).one('click', function(event) {
-						var targetObj = $(event.target);
-						if (targetObj.parents().filter('.e-form').length < 1) {
-							$container.removeClass('pe-current');
 						}
+						$editable.each(function() {
+							$(this).removeClass(self.opt.formCurrentClass);
+						});
+						$editable.toggleClass(self.opt.formCurrentClass);
+
+						//todo: custom click event
+						$(document).on('click.form', function(event) {
+							var targetObj = $(event.target);
+							if (targetObj.parents().filter('.e-form').length < 1) {
+								$editable.removeClass(self.opt.formCurrentClass);
+								$(document).off('click.form');
+							}
+						});
+						return false;
+
 					});
 
-					return false;
 				});
+
 				/**
 				 * add new company modal window trigger
 				 */
diff --git a/templates/client/static_client/js_min/_modules/page.profile.min.js b/templates/client/static_client/js_min/_modules/page.profile.min.js
index 49d185b6..02c9e2bd 100644
--- a/templates/client/static_client/js_min/_modules/page.profile.min.js
+++ b/templates/client/static_client/js_min/_modules/page.profile.min.js
@@ -1 +1 @@
-var EXPO=EXPO||{};EXPO.profile?console.warn("WARNING: EXPO.profile is already defined!"):EXPO.profile=function(){function t(){}var e={};e.opt={updateFormClass:"update-profile-form"},e.lang={};EXPO.common;return t.prototype={getajax:function(t){var e=this;t||(t=""),$.ajax({type:"POST",url:e.ajaxPath,data:t,processData:!1,contentType:!1,success:function(t){e.pullHandler(t),$("#wait-ajax").fadeOut()}})},pushData:function(t,e){var a=this.pushHandler,n=t;this.formData="string"!=typeof n?n:JSON.parse('{"'+decodeURI(n).replace(/"/g,'\\"').replace(/&/g,'","').replace(/=/g,'":"')+'"}'),this.formId=e,"function"==typeof a?(this.formData=a(t,e),this.getajax(t),$("#wait-ajax").show()):(this.getajax(t),$("#wait-ajax").show()),console.log("formData type"),console.log(typeof n)},pullData:function(t){var e=this.pullHandler;if("function"!=typeof e)throw{name:"Error",message:" handler function for processing response after form submit not defined, please define it!"};e(t)},fulfillInputs:function(){var t=this;for(input in t.formData)$("#id_"+input,$("#"+t.formId)).length>0&&$("#id_"+input,$("#"+t.formId)).value(t.formData[input]),$("#static-"+input).length>0&&$("#static-"+input).html()}},t.factory=function(e,a){var n,i=e;if("function"!=typeof t[i])throw{name:"Error",message:i+"doesen't exist"};return"function"!=typeof t[i].prototype.pushData&&(t[i].prototype=new t),n=new t[i](a)},t.home_form=function(t){this.pullHandler=function(t){if(t.success){var e=$("#s2id_id_country").find(".select2-chosen").text(),a=$("#s2id_id_city").find(".select2-chosen").text();$("#static-home-country").text(e),$("#static-home-city").text(a),$(".p-editable").removeClass("pe-current")}},this.ajaxPath=t},t.name_form=function(t){this.pullHandler=function(t){t.success&&($("#static-name-value").text($("#id_last_name").val()+" "+$("#id_first_name").val()),$(".p-editable").removeClass("pe-current"))},this.ajaxPath=t},t.work_form=function(t){this.pullHandler=function(t){t.success&&($("#static-work-value").text($("#id_position").val()),$(".p-editable").removeClass("pe-current"))},this.ajaxPath=t},t.about_company_form=function(t){this.pullHandler=function(t){t.success&&window.location.reload()},this.ajaxPath=t},t.phone_form=function(t){this.pullHandler=function(t){t.success&&($("#static-phone-value").text($("#id_phone")[0].value),$(".p-editable").removeClass("pe-current"))},this.ajaxPath=t},t.web_page_form=function(t){this.pullHandler=function(t){if(t.success){var e=$("#id_web_page").val();$("#static-web-page-value").attr("href",e).text(e),$(".p-editable").removeClass("pe-current")}},this.ajaxPath=t},t.about_form=function(t){this.pullHandler=function(t){t.success&&($("#static-about-value").text($("#id_about").val()),$(".p-editable").removeClass("pe-current"))},$("#id_about").on("keypress",function(t){var e=t.keyCode?t.keyCode:t.which;return"13"==e?!1:void 0}),this.ajaxPath=t},t.social_form=function(t){var e,a,n,i,o=this;this.pullHandler=function(t){if(t.success){for(item in o.formData)n=$("#id_"+item),""!=$.trim(o.formData[item])&&n.length?(e=$("#img-"+item),e.length&&(i=$.trim(n.val()),e.parent("a").length?(e.parent("a").attr("href",i),a=e.attr("src").replace("_hover",""),e.attr("src",a)):(a=e.attr("src").replace("_hover",""),e.attr("src",a),e.wrap('<a href="'+i+'" target="_blank"></a>')))):n.length&&(e=$("#img-"+item),e.parent("a").length&&(a=e.attr("src").replace(".png","_hover.png"),e.attr("src",a),e.unwrap()));$(".p-editable").removeClass("pe-current")}},this.pushHandler=function(t,e){var a=$("#"+e).serialize();return JSON.parse('{"'+decodeURI(a).replace(/"/g,'\\"').replace(/&/g,'","').replace(/=/g,'":"')+'"}')},this.ajaxPath=t},t.avatar_form=function(t){var e,a=this,n=$("#id_avatar"),i=($("#pic-edit-photo"),$("#pick-block")),o=$("img",i);this.pullHandler=function(t){t.success&&(o.length&&o.attr("src",t.url),$(".p-editable").removeClass("pe-current"))},this.pushHandler=function(t){"string"!=typeof t?(a.getajax(t),$("#wait-ajax").show()):(e=$("#"+a.formId),e.off("submit"),e.trigger("submit"))},n.on("change",function(){$(this).parents("form").submit()}),this.ajaxPath=t},t.create_company_form=function(t){this.pullHandler=function(t){t.success},this.ajaxPath=t},e.init=function(e){$.extend(this.lang,e.lang),e.lang=null,$.extend(this.opt,e);var a=this,n=function(t){var e=$.masksSort($.masksLoad("/static/client/js/plugins/inputmask/phone-codes.json"),["#"],/[0-9]|#/,"mask"),a={inputmask:{definitions:{"#":{validator:"[0-9]",cardinality:1}},showMaskOnHover:!1,autoUnmask:!0},match:/[0-9]/,replace:"#",list:e,listKey:"mask",onMaskChange:function(){$(this).attr("placeholder",$(this).inputmask("getemptymask"))}},n="#"+t;$(n).attr("placeholder","+_(___)___-__-__"),$(n).inputmasks(a)};this.forms={},$(function(){$("#"+a.opt.selectBox[0].id).select2({width:"element"}),$("#"+a.opt.selectBox[1].id).select2({width:"element",placeholder:a.opt.selectBox[1].placeholder,maximumSelectionSize:3}),$("#"+a.opt.selectBox[2].id).select2({placeholder:a.opt.selectBox[2].placeholder,width:"element",ajax:{url:a.opt.selectBox[2].path,dataType:"json",quietMillis:200,data:function(t,e,n){var n=$("#"+a.opt.selectBox[0].id).val();return{term:t,page:e,country:n}},results:function(t){var e=[];return $.each(t,function(t,a){e.push({id:a.id,text:a.label})}),{results:e}}},initSelection:function(t,e){var a=$(t).val(),n=$(t).attr("data-init-text");e({id:a,text:n})}}),$("#"+a.opt.selectBox[3].id).select2({placeholder:a.opt.selectBox[3].placeholder,width:"200px",minimumInputLength:1,ajax:{url:a.opt.selectBox[3].path,dataType:"json",quietMillis:200,data:function(t,e){return{term:t,page:e}},results:function(t){var e=[];return $.each(t,function(t,a){e.push({id:a.id,text:a.label})}),{results:e}}},initSelection:function(t,e){var a=$(t).val(),n=$(t).attr("data-init-text");e({id:a,text:n})}}),n(a.opt.phoneBox),$("."+a.opt.updateFormClass).each(function(){var e,n=$(this).attr("id"),i=$(this).attr("action");a.forms[n]=t.factory(n,i),$(this).off("submit"),$(this).on("submit",function(){return window.FormData&&"upload"in $.ajaxSettings.xhr()?(e=new FormData(this),a.forms[n].pushData(e,n)):(e=$(this).serialize(),a.forms[n].pushData(e,n)),!1})}),$("."+a.opt.editButtonClass).on("click",function(){var t=$(this),e=t.closest(".edit-wrap"),a=t.closest(".p-editable"),n=e.children(".e-form"),i=n.find("a.ef-close"),o=$(".p-editable.pe-current").not(a);return o.each(function(){$(this).removeClass("pe-current")}),a.toggleClass("pe-current"),i.one("click",function(){return a.removeClass("pe-current"),!1}),$(document).one("click",function(t){var e=$(t.target);e.parents().filter(".e-form").length<1&&a.removeClass("pe-current")}),!1}),$("#"+a.opt.addCompanyButtonId).on("click",function(t){return t.preventDefault(),$.fancybox.open("#"+a.opt.addCompany.modalId),!1})})},e}();
\ No newline at end of file
+var EXPO=EXPO||{};EXPO.profile?console.warn("WARNING: EXPO.profile is already defined!"):EXPO.profile=function(){function t(){}var e={};e.opt={updateFormClass:"update-profile-form"},e.lang={};{var a;EXPO.common}return t.prototype={getajax:function(t){var e=this;t||(t=""),$.ajax({type:"POST",url:e.ajaxPath,data:t,processData:!1,contentType:!1,success:function(t){e.pullHandler(t),$("#wait-ajax").fadeOut()}})},pushData:function(t,e){var a=this.pushHandler,s=t;this.formData="string"!=typeof s?s:JSON.parse('{"'+decodeURI(s).replace(/"/g,'\\"').replace(/&/g,'","').replace(/=/g,'":"')+'"}'),this.formId=e,"function"==typeof a?(this.formData=a(t,e),this.getajax(t),$("#wait-ajax").show()):(this.getajax(t),$("#wait-ajax").show()),console.log("formData type"),console.log(typeof s)},pullData:function(t){var e=this.pullHandler;if("function"!=typeof e)throw{name:"Error",message:" handler function for processing response after form submit not defined, please define it!"};e(t)},fulfillInputs:function(){var t=this;for(input in t.formData)$("#id_"+input,$("#"+t.formId)).length>0&&$("#id_"+input,$("#"+t.formId)).value(t.formData[input]),$("#static-"+input).length>0&&$("#static-"+input).html()},refreshState:function(){""==$.trim(this.$staticValue.text())&&this.$wrapper.length&&this.refrashable?(this.$editable.addClass("hidden"),this.$description.removeClass("hidden")):this.$wrapper.length&&this.refrashable&&(this.$editable.removeClass("hidden"),this.$description.addClass("hidden"))}},t.factory=function(e,a){var s,r=e;if("function"!=typeof t[r])throw{name:"Error",message:r+"doesen't exist"};return"function"!=typeof t[r].prototype.pushData&&(t[r].prototype=new t),s=new t[r](a)},t.home_form=function(t){this.pullHandler=function(t){if(t.success){var e=$("#s2id_id_country").find(".select2-chosen").text(),a=$("#s2id_id_city").find(".select2-chosen").text();$("#static-home-country").text(e),$("#static-home-city").text(a),$(".p-editable").removeClass("pe-current"),this.refreshState()}},this.ajaxPath=t},t.name_form=function(t){this.pullHandler=function(t){t.success&&($("#static-name-value").text($("#id_last_name").val()+" "+$("#id_first_name").val()),$(".p-editable").removeClass("pe-current"),this.refreshState())},this.ajaxPath=t},t.work_form=function(t){this.pullHandler=function(t){t.success&&($("#static-work-value").text($("#id_position").val()),$(".p-editable").removeClass("pe-current"),this.refreshState())},this.ajaxPath=t},t.phone_form=function(t){this.pullHandler=function(t){t.success&&($("#static-phone-value").text($("#id_phone")[0].value),$(".p-editable").removeClass("pe-current"),this.refreshState())},this.ajaxPath=t},t.web_page_form=function(t){this.pullHandler=function(t){if(t.success){var e=$("#id_web_page").val();$("#static-web-page-value").attr("href",e).text(e),$(".p-editable").removeClass("pe-current"),this.refreshState()}},this.ajaxPath=t},t.about_form=function(t){this.pullHandler=function(t){t.success&&($("#static-about-value").text($("#id_about").val()),$(".p-editable").removeClass("pe-current"),this.refreshState())},$("#id_about").on("keypress",function(t){var e=t.keyCode?t.keyCode:t.which;return"13"==e?!1:void 0}),this.ajaxPath=t},t.social_form=function(t){var e,a,s,r,i=this;this.pullHandler=function(t){if(t.success){for(item in i.formData)s=$("#id_"+item),""!=$.trim(i.formData[item])&&s.length?(e=$("#img-"+item),e.length&&(r=$.trim(s.val()),e.parent("a").length?(e.parent("a").attr("href",r),a=e.attr("src").replace("_hover",""),e.attr("src",a)):(a=e.attr("src").replace("_hover",""),e.attr("src",a),e.wrap('<a href="'+r+'" target="_blank"></a>')))):s.length&&(e=$("#img-"+item),e.parent("a").length&&(a=e.attr("src").replace(".png","_hover.png"),e.attr("src",a),e.unwrap()));$(".p-editable").removeClass("pe-current")}},this.pushHandler=function(t,e){var a=$("#"+e).serialize();return JSON.parse('{"'+decodeURI(a).replace(/"/g,'\\"').replace(/&/g,'","').replace(/=/g,'":"')+'"}')},this.ajaxPath=t},t.avatar_form=function(t){var e,a=this,s=$("#id_avatar"),r=($("#pic-edit-photo"),$("#pick-block")),i=$("img",r);this.pullHandler=function(t){t.success&&(i.length&&i.attr("src",t.url),$(".p-editable").removeClass("pe-current"))},this.pushHandler=function(t){"string"!=typeof t?(a.getajax(t),$("#wait-ajax").show()):(e=$("#"+a.formId),e.off("submit"),e.trigger("submit"))},s.on("change",function(){$(this).parents("form").submit()}),this.ajaxPath=t},t.create_company_form=function(t){var e=this,s="pwf-field";this.pullHandler=function(t){if(t.success)location.reload();else for(var r in t.errors)t.errors.hasOwnProperty(r)&&($('input[name="'+r+'"], select[name="'+r+'"]',e.$form).closest("."+s).addClass("err"),a.hide())},this.ajaxPath=t},e.init=function(e){$.extend(this.lang,e.lang),e.lang=null,$.extend(this.opt,e);var s=this,r=function(t){var e=$.masksSort($.masksLoad("/static/client/js/plugins/inputmask/phone-codes.json"),["#"],/[0-9]|#/,"mask"),a={inputmask:{definitions:{"#":{validator:"[0-9]",cardinality:1}},showMaskOnHover:!1,autoUnmask:!0},match:/[0-9]/,replace:"#",list:e,listKey:"mask",onMaskChange:function(){$(this).attr("placeholder",$(this).inputmask("getemptymask"))}},s="#"+t;$(s).attr("placeholder","+_(___)___-__-__"),$(s).inputmasks(a)};this.forms={},$(function(){a=$("#wait-ajax").css({"z-index":"8012"}),$("#"+s.opt.selectBox[0].id).select2({width:"element"}),$("#"+s.opt.selectBox[1].id).select2({width:"element",placeholder:s.opt.selectBox[1].placeholder,maximumSelectionSize:3}),$("#"+s.opt.selectBox[2].id).select2({placeholder:s.opt.selectBox[2].placeholder,width:"element",ajax:{url:s.opt.selectBox[2].path,dataType:"json",quietMillis:200,data:function(t,e,a){var a=$("#"+s.opt.selectBox[0].id).val();return{term:t,page:e,country:a}},results:function(t){var e=[];return $.each(t,function(t,a){e.push({id:a.id,text:a.label})}),{results:e}}},initSelection:function(t,e){var a=$(t).val(),s=$(t).attr("data-init-text");e({id:a,text:s})}}),$("#"+s.opt.selectBox[3].id).select2({placeholder:s.opt.selectBox[3].placeholder,width:"200px",minimumInputLength:1,ajax:{url:s.opt.selectBox[3].path,dataType:"json",quietMillis:200,data:function(t,e){return{term:t,page:e}},results:function(t){var e=[];return $.each(t,function(t,a){e.push({id:a.id,text:a.label})}),{results:e}}},initSelection:function(t,e){var a=$(t).val(),s=$(t).attr("data-init-text");e({id:a,text:s})}}),r(s.opt.phoneBox),$("."+s.opt.updateFormClass).each(function(){var e,r=$(this).attr("id"),i=$(this).attr("action"),o=$(this).closest("."+s.opt.formWrapperClass),n=$("."+s.opt.staticValueClass,o),l=$("."+s.opt.descriptionClass,o),c=$("."+s.opt.editableClass,o),p=$("."+s.opt.closeButtonClass,o);s.forms[r]=t.factory(r,i),s.forms[r].refrashable=$("."+s.opt.editButtonClass,o).hasClass("no-refresh")?!1:!0,s.forms[r].$form=$(this),s.forms[r].$wrapper=o,s.forms[r].$staticValue=n,s.forms[r].$description=l,s.forms[r].$editable=c,s.forms[r].refreshState(),$(this).off("submit"),$(this).on("submit",function(){return a.show(),window.FormData&&"upload"in $.ajaxSettings.xhr()?(e=new FormData(this),s.forms[r].pushData(e,r)):(e=$(this).serialize(),s.forms[r].pushData(e,r)),!1}),p.on("click",function(){return c.removeClass(s.opt.formCurrentClass),s.forms[r].refreshState(),!1}),$("."+s.opt.editButtonClass,o).on("click",function(){return s.forms[r].refrashable&&(c.removeClass("hidden"),l.addClass("hidden")),c.each(function(){$(this).removeClass(s.opt.formCurrentClass)}),c.toggleClass(s.opt.formCurrentClass),$(document).on("click.form",function(t){var e=$(t.target);e.parents().filter(".e-form").length<1&&(c.removeClass(s.opt.formCurrentClass),$(document).off("click.form"))}),!1})}),$("#"+s.opt.addCompanyButtonId).on("click",function(t){return t.preventDefault(),$.fancybox.open("#"+s.opt.addCompany.modalId),!1})})},e}();
\ No newline at end of file