var EXPO = EXPO || {}; //isolated namespace
//общий для всех страниц модуль Функционал общий для всех страниц
// module requires JQuery library
EXPO.profile = (function() {
// variables
	var that = {};
	that.settings = {
		updateFormClass:'update-profile-form'
	}; //default module setting
	//language object
	that.lang ={};
//dependences	

//private
	// factory for on page form objects
		function Forms(){};
		// methods to perform ajax responses to send and receive data from the server
		Forms.prototype = {
			// ajax request realization
			getajax: function (dataToSend) {
				var self = this;
				if(!dataToSend){
					dataToSend = '';
				}
				$.ajax({
					type: 'POST',
//					dataType: "json",
					url: self.ajaxPath,
					data:dataToSend,
					success: function(data) {
						self.pullHandler(data);
						$('#wait-ajax').fadeOut();
					}
				});

			},
			// check if there exists custom data manipulation handler and evaluate it
			pushData: function (data, formName) {
				var handler = this.pushHandler,
					formData = data;
				if(typeof handler == 'function'){
					// if particular data change required
					handler(data);
					$('#wait-ajax').show();
				} else{
					this.getajax(data);
					$('#wait-ajax').show();
				}
				this.formData = JSON.parse('{"' + decodeURI(formData).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');
				this.formId = formName;
				console.log('pushData:');
				
				console.log(data);

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

			},
			// 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
					}
				}
			}
		};
		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.pushData !== "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
		// pushHandler 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.avatar_form = function (path) {
			this.pullHandler = function (data) {
					console.log('avatar form not defined');
				};
			this.ajaxPath = path;

		};
		Forms.home_form = function (path) {
			var self = this;
			this.pullHandler = 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.ajaxPath = path;

		};
		Forms.name_form = function (path) {
			var self = this;
			this.pullHandler = function (data) {
				if (data.success){
					$('#static-name-value').text($('#id_last_name').val()+' '+$('#id_first_name').val());
					$('.p-editable').removeClass('pe-current');
				}
			};
			this.ajaxPath = path;

		};
		Forms.work_form = function (path) {
			var self = this;
			this.pullHandler = function (data) {
				if (data.success){
					var company = $('#s2id_id_company').find('.select2-chosen').text();
					$('#static-work-value').text($('#id_position').val()+' '+EXPO.profile.lang.workIn+' '+ company);

					$('.p-editable').removeClass('pe-current');
				}
			};
			this.ajaxPath = path;

		};
		Forms.about_company_form = function (path) {
			this.pullHandler = function (data) {
				if (data.success){
					window.location.reload();
				}
			};
			this.ajaxPath = path;

		};
		Forms.social_form = function (path) {
			this.pullHandler = function (data) {
				if (data.success){
					window.location.reload();
				}
			};
			this.ajaxPath = path;

		};
		// ok
		Forms.phone_form = function (path) {
			var self = this;
			this.pullHandler = function (data) {
				if (data.success){
					$('#static-phone-value').text($('#id_phone')[0].value);

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

				}
			};
			this.ajaxPath = path;

		};
		Forms.web_page_form = function (path) {
			var self = this;
			this.pullHandler = 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.ajaxPath = path;

		};
		Forms.about_form = function (path) {
			var self = this;
			this.pullHandler = function (data) {
				if (data.success){
					$('#static-about-value').text($('#id_about').val());
					$('.p-editable').removeClass('pe-current');
				}
			};
			$('#id_about').on('keypress', function (e) {
				var keycode = (e.keyCode ? e.keyCode : e.which);
				if(keycode == '13'){
					return false;
				}

			});
			this.ajaxPath = path;

		};
		Forms.social_form = function (path) {
			var self = this,
				$img, imgSrc, $input, inputValue;
			this.pullHandler = function (data) {
				if (data.success){
					console.log('self:');

					console.log(self);
					for (item in self.formData) {
						$input =  $('#id_'+item);
						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);
//									$('.p-editable').removeClass('pe-current');
								}else {
									imgSrc = $img.attr('src').replace('_hover','');
									$img.attr('src',imgSrc);
									$img.wrap('<a href="'+inputValue+'" target="_blank"></a>');
//									$('.p-editable').removeClass('pe-current');
								}
							}
						}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');
//					var vk = $.trim($('#id_vk').val()), vk_img = $('#vk-img').attr('src').replace('_hover',''),
//						fb = $.trim($('#id_facebook').val()), fb_img = $('#fb-img').attr('src').replace('_hover',''),
//						ln = $.trim($('#id_linkedin').val()), ln_img = $('#ln-img').attr('src').replace('_hover',''),
//						tw = $.trim($('#id_twitter').val()), tw_img = $('#tw-img').attr('src').replace('_hover','');
//					if($('#fb-link').length){
//						$('#fb-link').attr('src', fb);
//					}else{
//						$('#fb-img').attr('src',fb_img);
//					}
//					$('#vk-link').attr('src', vk);
//					$('#ln-link').attr('src', ln);
//					$('#tw-link').attr('src', tw);
//
//					$('.p-editable').removeClass('pe-current');
				}
			};
			this.ajaxPath = path;

		};


	$(function () {

	});

// methods
	//инициализация общих свойств
	that.init = function(options) {
		$.extend(this.lang, options.lang);
		options.lang = null;
		$.extend(this.settings, 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
							}
						},
						//clearIncomplete: true,
						showMaskOnHover: false,
						autoUnmask: true
					},
					match: /[0-9]/,
					replace: '#',
					list: maskList,
					listKey: "mask",
					onMaskChange: function(maskObj, determined) {
						$(this).attr("placeholder", $(this).inputmask("getemptymask"));
					}
				},
				selector = '#'+inputId;

				$(selector).attr('placeholder', '+_(___)___-__-__');
				$(selector).inputmasks(maskOpts);

			};
		this.forms = {};
		$(function () {
			//start of document.ready

			// <selectbox> styling with 3-rd party libs
			$('#'+self.settings.selectBox[0].id).select2({
				width: 'element'
			});

			$('#'+self.settings.selectBox[1].id).select2({
				width: 'element',
				placeholder: self.settings.selectBox[1].placeholder,
				maximumSelectionSize: 3
			});

			$('#'+self.settings.selectBox[2].id).select2({
				placeholder: self.settings.selectBox[2].placeholder,
				width: 'element',
				ajax: {

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

					data: function(term, page, country){
						var country = $('#'+self.settings.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.settings.selectBox[3].id).select2({
				placeholder: self.settings.selectBox[3].placeholder,
				width: '200px',
				minimumInputLength: 1,
				ajax: {

					url: self.settings.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});

				}

			});

//			$('#'+ self.settings.phoneBox);
			// make mask on phone field input
			initMaskedInput(self.settings.phoneBox);
			//forms init
			$('.'+self.settings.updateFormClass).each(function () {
				var formName = $(this).attr('id'),
					path = $(this).attr('action');

				//make and initialize form objects
				self.forms[formName] = Forms.factory(formName,path);

				// submit events handler
				$(this).off('submit');
				$(this).on('submit', function () {
					var serialized = $(this).serialize();
					// each form post definitin function
					self.forms[formName].pushData(serialized, formName);
					return false;
				});

			});
		});



	};
	return that;
}());