var EXPO = EXPO || {}; //isolated namespace
//общий для всех страниц модуль Функционал общий для всех страниц
// module requires JQuery library
// protection against duplication of a module code
if (EXPO.profile){
	console.warn('WARNING: EXPO.profile is already defined!');
}else{

	EXPO.profile = (function() {
	// variables
		var that = {};
		that.opt = {
			updateFormClass:'update-profile-form'
		}; //default module setting
		//language object
		that.lang ={};
	//dependences
		var com = EXPO.common,
			$waiter;

		//private

		/**
		 * Rating functional. Object stores data, HTML Instance of rating field, and can refresh its value
		 * @param {Object} opt - options for rating instance, like HTML Id and other
		 * @constructor
		 */
		function Rating(opt){
			this.opt = opt;
			this.$inst = $('#'+opt.id);
			this.value = this.$inst.text;
		}
		Rating.prototype = {
			/**
			 * refreshes value of HTML instance with new.
			 * @param {number} newRating - new profile rating value
			 */
			refresh: function (newRating) {
				this.value = newRating;
				this.$inst.text(this.value);
			}
		};
		function Forms(){};
		// methods to perform ajax responses to send and receive data from the server
		// factory for on page form objects
		Forms.prototype = {
			// ajax request realization
			submit: function (dataToSend) {
				var self = this;
				if(!dataToSend){
					dataToSend = '';
				}
				$.ajax({
					type: 'POST',
					url: self.ajaxPath,
					data:dataToSend,
					processData: false,
					contentType: false,
					success: function(data) {
						self.afterSubmitHandler(data);
						if(data.success){
							EXPO.profile.rating.refresh(data.rating);
						}
						$('#wait-ajax').fadeOut();
					}
				});

			},
			// check if there exists custom data manipulation handler and evaluate it
			beforeSubmit: function (data, formName) {
				var handler = this.beforeSubmitHandler,
					formData = data;
				if(typeof formData != "string"){
					this.formData =formData;
				}else{
					this.formData = JSON.parse('{"' + decodeURI(formData).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');
				}
				this.formId = formName;

				if(typeof handler == 'function'){
					// if particular data change required
					this.formData = handler(data, formName);
					this.submit(data);
					$('#wait-ajax').show();
				} else{
					this.submit(data);
					$('#wait-ajax').show();
				}




			},
			afterSubmit: function (data) {
				var handler = this.afterSubmitHandler;
				if(typeof handler == 'function'){
					handler(data);
				} else{
					throw{
						name: 'Error',
						message: " handler function for processing response after form submit not defined, please define it!"
					};
				}


			},
			// method to fulfill edited inputs with new content
			fulfillInputs: function () {
				var self = this;
				for (input in self.formData) {
					if($('#id_'+input, $('#'+self.formId)).length > 0){
						$('#id_'+input, $('#'+self.formId)).value(self.formData[input]);
					}
					if($('#static-'+input).length > 0){
						$('#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
			 */
			refreshHTML: function () {
				var pureText = $.trim( this.$staticValue.text()).replace(/[^0-9a-zA-Zа-я\s]/g,'').replace( /(\d)\s/, '' ).replace(/\s+/g,'');
				if(($.trim( this.$staticValue.text()) == '' || pureText  == 'NoneNone') && this.$wrapper.length && this.refrashable){
					this.$editable.addClass('hidden');
					this.$editable.removeClass(EXPO.profile.opt.formCurrentClass);
					this.$description.removeClass('hidden');

				}else if(this.$wrapper.length  && this.refrashable){
					this.$editable.removeClass('hidden');
					this.$description.addClass('hidden');
				}

			}
		};
		Forms.factory = function (type, ajaxpath) {
			var constr = type,
				newForm;
			if (typeof Forms[constr] !== 'function'){
				throw{
					name: 'Error',
					message: constr + "doesen't exist"
				};
			}
			if(typeof Forms[constr].prototype.beforeSubmit !== "function"){
				Forms[constr].prototype = new Forms();
			}
			newForm = new Forms[constr](ajaxpath);
			return newForm;
		};

		//# constructors for each indivivdual form
		// please add functionality for new profile forms here
		// beforeSubmitHandler is for ajax to server, pullHandler for ajax from it. Data is the response information from server
		// name of each method is equal 'id' attribute of <form/> element on the page.

		Forms.home_form = function (path) {
			var self = this;
			/**
			 * callback after successful request to the server
			 * @param data -data object recieved from server
			 */
			this.afterSubmitHandler = function (data) {
				if (data.success){
					var country = $('#s2id_id_country').find('.select2-chosen').text(),
						city = $('#s2id_id_city').find('.select2-chosen').text();
					$('#static-home-country').text(country);
					$('#static-home-city').text(city);
					$('.p-editable').removeClass('pe-current');
					this.refreshHTML();
				}
			};
			this.ajaxPath = path;

		};
		Forms.name_form = function (path) {
			var self = this;
			/**
			 * callback after successful request to the server
			 * @param data -data object recieved from server
			 */
			this.afterSubmitHandler = function (data) {
				if (data.success){
					$('#static-name-value').text($('#id_last_name').val()+' '+$('#id_first_name').val());
					$('.p-editable').removeClass('pe-current');
					this.refreshHTML();

				}
			};
			this.ajaxPath = path;

		};
		Forms.work_form = function (path) {
			var self = this;
			/**
			 * callback after successful request to the server
			 * @param data -data object recieved from server
			 */
			this.afterSubmitHandler = function (data) {
				var staticText,
					work_fieldValue = $.trim($('#s2id_id_company').text());
				if (data.success ){
					staticText = $('#id_position').val();
					if(work_fieldValue != '' && work_fieldValue != "Поиск компании"){
						staticText += ' '+ EXPO.profile.opt.lang.workIn + ' '+work_fieldValue;
					}
					$('#static-work-value').text(staticText);
					$('.p-editable').removeClass('pe-current');
					this.refreshHTML();

				}
			};
			this.ajaxPath = path;

		};
		Forms.phone_form = function (path) {
			var self = this;
			/**
			 * callback after successful request to the server
			 * @param data -data object recieved from server
			 */
			this.afterSubmitHandler = function (data) {
				if (data.success){
					$('#static-phone-value').text($('#id_phone')[0].value);

					$('.p-editable').removeClass('pe-current');
					this.refreshHTML();

				}
			};
			this.ajaxPath = path;

		};
		Forms.web_page_form = function (path) {
			var self = this;
			/**
			 * callback after successful request to the server
			 * @param data -data object recieved from server
			 */
			this.afterSubmitHandler = function (data) {
				if (data.success){
					var userLink = $('#id_web_page').val();
					$('#static-web-page-value').attr('href',userLink).text(userLink);
					$('.p-editable').removeClass('pe-current');
					this.refreshHTML();

				}
			};

			this.ajaxPath = path;

		};
		Forms.about_form = function (path) {
			var self = this;
			/**
			 * callback after successful request to the server
			 * @param data -data object recieved from server
			 */
			this.afterSubmitHandler = function (data) {
				if (data.success){
					$('#static-about-value').html(com.nl2br($('#id_about').val()));
					$('.p-editable').removeClass('pe-current');
					this.refreshHTML();

				}
			};
			this.ajaxPath = path;

		};
		Forms.social_form = function (path) {
			var self = this,
				$img, imgSrc, $input, inputValue;
			/**
			 * callback after successful request to the server
			 * @param data -data object recieved from server
			 */
			this.afterSubmitHandler = function (data) {
				if (data.success){

					for (item in self.formData) {
						$input =  $('#id_'+item);
						$input.parent('.required').removeClass('err');

						if($.trim(self.formData[item]) != '' && $input.length){
							$img = $('#img-'+item);
							if($img.length){
								inputValue = $.trim($input.val());
								if ($img.parent('a').length){
									$img.parent('a').attr('href',inputValue);
									imgSrc = $img.attr('src').replace('_hover','');
									$img.attr('src',imgSrc);
								}else {
									imgSrc = $img.attr('src').replace('_hover','');
									$img.attr('src',imgSrc);
									$img.wrap('<a href="'+inputValue+'" target="_blank"></a>');
								}
							}
						}else if($input.length){
							$img = $('#img-'+item);
							if ($img.parent('a').length){
								imgSrc = $img.attr('src').replace('.png','_hover.png');
								$img.attr('src',imgSrc);
								$img.unwrap();
							}

						}

					}
					$('.p-editable').removeClass('pe-current');
					this.refreshHTML();

				}else {
					for (item in data.errors) {
						$input = $('#id_' + item);
						$input.parent('.required').addClass('err');
						$input.blur(function () {
							$input.parent('.required').removeClass('err');
							self.$form.submit();
						});
					}
				}
			};
			this.beforeSubmitHandler = function (data, formName){
				var formData = $('#'+formName).serialize();

					return JSON.parse('{"' + decodeURI(formData).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');




			};
			this.refreshHTML = function () {
				console.log(this);
				var fullComplete = true;
				$('input:text',this.$form).each(function () {
					if($.trim($(this).val()) == ''){
						fullComplete = false;
					}
				});
				if(fullComplete){
					$('.full-complete',this.$description).removeClass('hidden');
					$('.not-complete',this.$description).addClass('hidden');
				}else{
					$('.full-complete',this.$description).addClass('hidden');
					$('.not-complete',this.$description).removeClass('hidden');
				}
			};
			this.ajaxPath = path;

		};
		Forms.avatar_form = function (path) {
			var self = this,
				$input = $('#id_avatar'),
				$editPhoto = $('#pic-edit-photo'),
				$pickBlock = $('#pick-block'),
				$form,
				$avatar = $('img',$pickBlock);
			/**
			 * callback after successful request to the server
			 * @param data -data object recieved from server
			 */
			this.afterSubmitHandler = function (data) {
				if (data.success){

					if($avatar.length){
						$avatar.attr('src', data.url);
						this.refreshHTML();
					}


				}
			};
			this.beforeSubmitHandler = function(data){
				if(typeof data != 'string'){
					self.submit(data);
					$('#wait-ajax').show();
				}else{
					$form = $('#'+self.formId);
					$form.off('submit');
					$form.trigger('submit');
				}
			};
			$input.on('change', function () {
				$(this).parents('form').submit();
			});

			this.ajaxPath = path;

			this.refreshHTML = function () {
				if($.trim(this.$image.attr('src')) == this.noImageSrc){
					this.$editable.addClass('hidden');
					this.$description.removeClass('hidden');
				}else{
					this.$editable.removeClass('hidden');
					this.$description.addClass('hidden');
				}

			}
		};
		/**
		 * add new company form init
		 * @param path
		 */
		Forms.create_company_form = function (path) {
				var self = this,
					containerClass = 'pwf-field';
				/**
				 * callback after successful request to the server
				 * @param data -data object recieved from server
				 */
				this.afterSubmitHandler = 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();
							}
						}
					}

				};

				this.ajaxPath = path;
			};


	// methods
		//инициализация общих свойств
		that.init = function(options) {
			$.extend(this.lang, options.lang);
			//options.lang = null;
			$.extend(this.opt, options);

			var self = this,
				initMaskedInput = function (inputId) {
					var maskList = $.masksSort($.masksLoad("/static/client/js/plugins/inputmask/phone-codes.json"), ['#'], /[0-9]|#/, "mask"),
					maskOpts = {
						inputmask: {
							definitions: {
								'#': {
									validator: "[0-9]",
									cardinality: 1
								}
							},
							showMaskOnHover: false,
							insertMode:false,
							autoUnmask: true
						},
						insertMode:false,
						match: /[0-9]/,
						replace: '#',
						list: maskList,
						listKey: "mask",
						onMaskChange: function(maskObj, determined) {
							$(this).attr("placeholder", '+_(___)___-__-__');
						}
					},
					selector = '#'+inputId;

					$(selector).inputmasks(maskOpts);

				};
			this.rating = new Rating(this.opt.rating);
			this.forms = {};
			$(function () {
				var	$editables = $('.'+self.opt.editableClass),
					$country = $('#'+self.opt.selectBox[0].id),
					$city = $('#'+self.opt.selectBox[2].id),
					$companyUrl = $("#id_url");

					$waiter = $('#wait-ajax').css({'z-index': '8012'});
				/**
				 * <selectbox> styling with 3-rd party libs
				 */
				/**
				 * select country
				 */
				$country.select2({
					width: 'element'
				});
				$country.on("change", function () {
					$city.val(0);
					$city.select2("val", "");
				});
				/**
				 * select theme
				 */
				$('#'+self.opt.selectBox[1].id).select2({
					width: 'element',
					placeholder: self.opt.selectBox[1].placeholder,
					maximumSelectionSize: 3
				});
				/**
				 * select city
				 */
				$city.select2({
					placeholder: self.opt.selectBox[2].placeholder,
					width: 'element',
					ajax: {

						url: self.opt.selectBox[2].path,
						dataType: "json",
						quietMillis: 200,

						data: function(term, page, country){
							var country = $('#'+self.opt.selectBox[0].id).val();
							return {term: term,
								page: page,
								country: country};
						},

						results: function (data) {
							var results = [];
							$.each(data, function(index, item){
								results.push({
									id: item.id,
									text: item.label
								});
							});
							return {results: results};
						}
					},
					initSelection : function(element, callback) {
						var id=	$(element).val();
						var text = $(element).attr('data-init-text');
						callback({id: id, text:text});

					}

				});

				$('#'+self.opt.selectBox[3].id).select2({
					placeholder: self.opt.selectBox[3].placeholder,
					width: '200px',
					minimumInputLength: 1,
					ajax: {

						url: self.opt.selectBox[3].path,
						dataType: "json",
						quietMillis: 200,

						data: function(term, page, country){
							return {term: term,
								page: page};
						},

						results: function (data) {
							var results = [];
							$.each(data, function(index, item){
								results.push({
									id: item.id,
									text: item.label
								});
							});
							return {results: results};
						}
					},
					initSelection : function(element, callback) {
						var id=	$(element).val();
						var text = $(element).attr('data-init-text');
						callback({id: id, text:text});

					}


				});

				// make mask on phone field input
				initMaskedInput(self.opt.phoneBox);
				//forms init
				$('.'+self.opt.updateFormClass).each(function () {
					var formName = $(this).attr('id'),
						path = $(this).attr('action'),
						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),
						$image = $('.'+self.opt.avatarImageClass, $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;
					/**
					 * Send proper information if there is image. mainly for avatar editing
					 */
					if($image.length){

						self.forms[formName].$image = $image;
						self.forms[formName].noImageSrc =  self.opt.noImageSrc;
					}

					//self.forms[formName].refreshHTML();

					// 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].beforeSubmit(inputData, formName);
						} else {
							inputData = $(this).serialize();
							self.forms[formName].beforeSubmit(inputData, formName);
						}

						return false;
					});
					$closeButton.on('click', function() {
						$editable.removeClass(self.opt.formCurrentClass);
						self.forms[formName].refreshHTML();
						return false;
					});
					if($('.'+self.opt.avatarButtonClass, $wrapper).length){
						/**
						 * avatar image choose button
						 */
						$('.'+self.opt.editButtonClass+','+' .'+self.opt.avatarButtonClass, $wrapper).on('click', function () {
							var $input = $('#'+self.opt.avatarInputId);
							$input.trigger('click');
							return false;
						});

					}else{
						/**
						 * edit button
						 */
						$('.'+self.opt.editButtonClass+', .'+self.opt.avatarButtonClass, $wrapper).on('click', function () {
							//close other active editable forms
							var $wrapper = $(this).closest('.'+self.opt.formWrapperClass),
								formId = $wrapper.find('.'+self.opt.updateFormClass).attr('id'),
								$description = $wrapper.find('.'+self.opt.descriptionClass),
								$editable = $wrapper.find('.'+self.opt.editableClass);
							$editables.each(function () {
								var $wrapper = $(this).closest('.'+self.opt.formWrapperClass),
									formId = $wrapper.find('.'+self.opt.updateFormClass).attr('id'),
									$description = $wrapper.find('.'+self.opt.descriptionClass),
									$editable = $wrapper.find('.'+self.opt.editableClass);
								if($(this).hasClass(self.opt.formCurrentClass)){
									if(self.forms[formId].refrashable){

										self.forms[formId].refreshHTML();
										$editable.removeClass(EXPO.profile.opt.formCurrentClass);
									}else{
										$editable.removeClass(self.opt.formCurrentClass);
									}

								}
							});

							if(self.forms[formId].refrashable){
								$editable.removeClass('hidden');
								$description.addClass('hidden');
							}else{

							}
							$editable.addClass(self.opt.formCurrentClass);
							$(document).on('click.form', function(event) {
								var targetObj = $(event.target);
								if (targetObj.parents().filter('.e-form').length < 1) {
									$editable.removeClass(self.opt.formCurrentClass);
									self.forms[formName].refreshHTML();
									$(document).off('click.form');
								}
							});
							return false;

						});
					}

				});

				/**
				 * add new company modal window trigger
				 */
				$('#'+self.opt.addCompanyButtonId).on('click', function (event) {
					event.preventDefault();
					$.fancybox.open('#'+ self.opt.addCompany.modalId);
					return false;
				});
				/**
				 * add company url placeholder
				 */

				$companyUrl.on('focus', function () {
					var $this = $(this),
						placeholder = self.opt.companyAddInputMask;

					if($.trim($this.val()) == ''){
						$this.val(placeholder);

					}
					return false;
				});
				$companyUrl.on('click', function () {
					if (this.setSelectionRange && $.trim($(this).val()) == self.opt.companyAddInputMask){
						var len = $(this).val().length;
						this.setSelectionRange(len, len);
					}
				});
				$companyUrl.on('keypress', function () {
					var $this = $(this),
						placeholder = self.opt.companyAddInputMask;

					if($.trim($this.val()) == ''){
						$this.val(placeholder);
					}
				});
				$companyUrl.on('blur', function () {
					var $this = $(this),
						placeholder = self.opt.companyAddInputMask;
					if($.trim($this.val()) == placeholder){
						$this.val('');
					}
				});
				/**
				 * show phone to all checkbox
				 */
				//$('#id_show_phone').on("change", function () {
				//	if ($(this).prop("checked")){
				//		$(this).closest(".custom-radio-check").addClass("active");
				//	}else{
				//		$(this).closest(".custom-radio-check").removeClass("active");
				//	}
				//});
			});



		};
		return that;
	}());
}