var initMap;

(function ($, form) {


	$(".show-video", form).on('click',function(){
		var classe = $(this).data('video');
		Dialogs.open($("." + classe, form));
		var player = $('.iframe-' + classe);
		var playerOrigin = '*';
		resize(classe, form);
		var message = JSON.stringify({method: 'play'});
		player[0].contentWindow.postMessage(message, playerOrigin);
	});
	$(window).resize(function () {
		resize('popup-index', form);
	});
	$(".popup-index").on('close', function () {
		var player = $('.iframe-popup-index');
		var message = JSON.stringify({method: 'pause'});
		player[0].contentWindow.postMessage(message, '*');
	});
	var la_mappa_e_inizializzata = false;
	var mappa;
	initMap = function () {
		if (tab.attuale !== 'mappa' || window['google'] == null) {
			return;
		}
		var divMap = document.getElementById('map');

		$('#profilazione').on('refresh', function () {
			if (la_mappa_e_inizializzata) {
				google.maps.event.trigger(divMap, 'resize');
			} else {
				initMap();
			}
		});

		if ($(divMap).is(':hidden')) {
			return;
		}

		la_mappa_e_inizializzata = true;
		var cerchi = $('[name="circles"]', form);
		mappa = new Map(google, divMap);

		/*
		 formOb.set('data',function(def){
		 // prima del submit recupero le aree
		 cerchi.val( JSON.stringify( mappa.getAreas() ) );
		 def.resolve( $(form).serialize() );
		 });
		 */

		var circles = $.parseJSON(cerchi.val());

		// se ho dei cerchi ridisegno i cerchi
		if (circles != null) {
			for (var i = 0; i < circles.length; i++) {
				mappa.drawCircle(circles[i]);
			}
		}
		google.maps.event.addListener(divMap, 'change_draw', function () {
			$('[name="circles"]', form).val(JSON.stringify(mappa.getAreas())).trigger('change');
		});
		mappa.center_map();

	};

	var formOb = new FormAjax(form, {
		ebox:$(".err_box",form)
	});
	var classActive = function (e) {
		if (e.data && e.data.each) {
			e.data.each(classActive);
		} else {
			if ($(this).prop('checked')) {
				$(this).closest('label').addClass('active', 200).children().addClass('active', 200);
			} else {
				$(this).closest('label').removeClass('active', 200).children().removeClass('active', 200);
			}
		}
	};

	// inizializzo i bottoni del sesso
	var sesso = $('[name="sesso"]', form).each(classActive);
	sesso.on('change', sesso, classActive);

	// inizializzo anni
	var slideranni = $("#profilazione-anni", form);
	// inizializzo l'età
	var eta = {
		'min': $("[name='eta_min']", form),
		'max': $("[name='eta_max']", form),
		setValoriLabels: function (vals) {
			$('.min', slideranni).text(vals[ 0 ]);
			$('.max', slideranni).text(vals[ 1 ] == slideranni.data('max') ? vals[ 1 ] + '+' : vals[ 1 ]);
		}
	};
	slideranni.slider({
		range: true,
		min: slideranni.data('min'),
		max: slideranni.data('max'),
		values: [eta.min.val(), eta.max.val()],
		create: function (event, ui) {
			eta.setValoriLabels([
				eta.min.val(),
				eta.max.val()
			]);
		},
		slide: function (event, ui) {
			eta.min.val(ui.values[ 0 ]);
			eta.max.val(ui.values[ 1 ]);
			eta.setValoriLabels(ui.values);
		}
	});

	var istance_ebox=new Msg($('.err_box', form),{'warning':{timeout:5000}});
	// inizializzo le tab
	var tab = {
		attuale: $("[name='tab']:checked", form).val() || 'mappa',
		init: function () {
			var inputTab = $("[name='tab']", form).on('change', function () {
				tab.mostra($("[name='tab']:checked", form).val());
			}).each(classActive);
			inputTab.on('change', inputTab, classActive);
			tab.mostra(tab.attuale);
		},
		mostra: function (nome) {
		istance_ebox.set({});
			$('.profila', form).hide().filter('.' + nome).show();
			tab.attuale = nome;
			$("[name='tab']", form).each(function () {
				$(this).prop('checked', $(this).val() === nome);
			});
			if (!la_mappa_e_inizializzata) {
				initMap();
			}

		}
	};

	var fElement = document.getElementById('check');
	var areeSovrapposte = new FormAjax(fElement, {});
	// inizializzo gli autocompletamenti
	var sregione = new AutoSource('/Privato/Get/regione.json', 10);
	$('.input_regione', form).autocomplete_multi({
		source: sregione,
		change: function (e, ui) {
			if (!ui.item) {
				return false;
			}
			if (($('[name="id_cap[]"]', form).length > 0 || $('[name="id_provincia[]"]', form).length > 0)) {

				var id_cap = getArray($('[name="id_cap[]"]', form));
				var id_provincia = getArray($('[name="id_provincia[]"]', form));

				areeSovrapposte.submit({data: {
						id_cap: id_cap,
						id_provincia: id_provincia,
						soggetto: ['regione', ui.item.id, ui.item.value],
					},
					ebox: istance_ebox
				});
			}
		}
	});
	var sprovincia = new AutoSource('/Privato/Get/provincia.json', 10);
	$('.input_provincia', form).autocomplete_multi({
		source: sprovincia,
		change: function (e, ui) {
			if (!ui.item) {
				return false;
			}
			var status = true;
			//Se la provincia che sto inserendo è una provincia delle regioni presenti la elimino
			$('[name="id_regione[]"]', form).each(function () {
				var id_regione = $(this).val();
				if (ui.item.id_regione === id_regione) {
					$('[name="id_provincia[]"]').prev().last().trigger('click');
					//Mostro il warning
					istance_ebox.set({warning:["Non è possibile inserire la provincia \'%s\' perchè compresa nella regione \'%s\'".format( ui.item.value, ui.item.regione)]});
					// $('.err_box_check > div.warning', form).text("Non è possibile inserire la provincia \'%s\' perchè compresa nella regione \'%s\'".format( ui.item.value, ui.item.regione) );
					// $(".err_box_check").show();
					status = false;
					return status;
				}
			});
			if (status && $('[name="id_cap[]"]', form).length > 0) {

				var id_cap = getArray($('[name="id_cap[]"]', form));
				areeSovrapposte.submit({data: {
						id_cap: id_cap,
						soggetto: ['provincia', ui.item.id, ui.item.value],
					},
					ebox: istance_ebox
				});
			}
		}
	});

	var scap = new AutoSource('/Privato/Get/cap.json', 10);
	$('.input_cap', form).autocomplete_multi({
		source: scap,
		paste: /\b(\w+)\b/gi,
		change: function (e, ui) {
			if (!ui.item) {
				return false;
			}
			var status=true;
			if (status && $('[name="id_regione[]"]', form).length > 0) {
				$('[name="id_regione[]"]', form).each(function () {
					var id_regione = $(this).val();
					if (ui.item.id_regione === id_regione) {
						$('[name="id_cap[]"]').prev().last().trigger('click');
						//Mostro il warning
						istance_ebox.set({warning:["Non è possibile inserire il cap \'%s\' perchè compreso nella regione \'%s\'".format( ui.item.value, ui.item.regione) ]});
						//$('.err_box_check > div.warning', form).text("Non è possibile inserire il cap \'%s\' perchè compreso nella regione \'%s\'".format( ui.item.value, ui.item.regione) );
						//$(".err_box_check").show();
						status=false;
						return status;
					}
				});
			}
			if (status && $('[name="id_provincia[]"]', form).length > 0) {
				$('[name="id_provincia[]"]', form).each(function () {
					var id_provincia = $(this).val();
					if (ui.item.id_provincia === id_provincia) {
						$('[name="id_cap[]"]').prev().last().trigger('click');
						//Mostro il warning
						istance_ebox.set({warning:["Non è possibile inserire il cap \'%s\' perchè compreso nella provincia \'%s\'".format( ui.item.value, ui.item.provincia) ]});
						//$('.err_box_check > div.warning', form).text("Non è possibile inserire il cap \'%s\' perchè compreso nella provincia \'%s\'".format( ui.item.value, ui.item.provincia) );
						//$(".err_box_check").show();
						status=false;
						return status;
					}
				});
			}
		}
	});
	var cap = $('.input_cap', form).autocomplete_multi('instance');

	/*
	 cap.input.on('input change click',function(){
	 var element=$(this);
	 var val=element.val();
	 var vals=val.match(/[0-9a-z]+/gi);
	 if( vals && vals.length>1 && element.data('search')==null){
	 element.data('search',vals);
	 scap.source({terms:vals},function(risp){
	 var val=element.val();
	 for(var i=0;i<risp.length;i++){
	 val=val.replace(new RegExp('([^0-9a-z]+|^)'+risp[i]['value']+'([^0-9a-z]+|$)','ig'),function(x){
	 return x.match(/[^0-9a-z]*$/i);
	 });
	 element.trigger('change',{item:risp[i]});
	 }
	 setTimeout(function(){
	 element.val( val );
	 },1);
	 element.data('search',null);
	 });
	 }
	 });
	 */

	var stato = new (function (form) {
		var self = this;
		var stato_prec = $(form).serialize();
		this.aggiornaStato = function () {
			var stato = $(form).serialize();
			if (stato != stato_prec || !(self.dati['num'] > 0)) {
				$(":submit:hidden").each(function () {
					var txt = $(this).data('altText');
					if (txt) {
						$(this).text(txt);
					}
				}).show(); // prop('disabled',false);
				$('.numero-utenti-wrap', form).hide();

				$(form).triggerHandler('riconta');
			} else {
				// se lo stato è coerente vuol dire che nulla è cambiato dall'ultima volta che ho fatto i conti
				// e quindi controllo che i submit siano disabilitati
				$(":submit", form).hide(); // prop('disabled',true);
				$('.numero_utenti', form).text(number_format.ita(self.dati['num']));
				$('.numero-utenti-wrap', form).show();

				$(form).triggerHandler('contato', self.dati);
			}
		};


		$(form).on('done', function (e, chiamata, dati, risposta) {
			stato_prec = $.isPlainObject(chiamata.data) ? $.param(chiamata.data) : chiamata.data;
			self.dati = dati;
			self.aggiornaStato();
			var tab=$('[name="tab"]:checked').val();
			if(tab==='mappa'){
				analyticsEvent('Conteggio', 'Mappa', '');
			}else if(tab==='regione'){
				analyticsEvent('Conteggio', 'Autocompletamenti', '');
			}else if(tab==='italia'){
				analyticsEvent('Conteggio', 'Tutta Italia', '');
			}
			window.scrollTo(0,document.body.scrollHeight);
		});

		$(form).on('fail', function (e, options, risposta) {
			if (risposta.dati.apri_login === 1) {
				Dialogs.open('#login');
				options.ebox = $("#login .err_box").data('Msg');
			}
		});


		$(form).on('change autocomplete_multichange slidechange', function (e) {
			// se è cambiato qualcosa aggiorno lo stato
			self.aggiornaStato();
		});

		var formSalva = new FormAjax($("#profilazione_salva"), {
			data: function (def) {
				def.resolve($("#profilazione_salva").serialize() + '&' + $(form).serialize());
			}
		});
		$("#profilazione_salva").on('done', function (e, request, dati) {
			Dialogs.close();
			$('[name="id_profilazione"]', form).val(dati.id_profilazione);
			$(this).trigger('save', dati);
		});




		this.dati = {
			num: number_format.unix($('.numero_utenti', form).text()),
			key: $('.key', form).val()
		};
		this.aggiornaStato();

	})(form);




	var Map = function (google, element) {
		var circles = [], selected = null, self = this;
		this.options = {
			drawingManager: {
				drawingMode: google.maps.drawing.OverlayType.CIRCLE,
				drawingControl: true,
				drawingControlOptions: {
					position: google.maps.ControlPosition.TOP_CENTER,
					//drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
					drawingModes: ['circle']
				},
				//markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
				circleOptions: {
					fillColor: '#555555',
					fillOpacity: 0.2,
					strokeColor: '#555555',
					strokeWeight: 1,
					clickable: true,
					draggable: true,
					editable: true,
					zIndex: 1
				}
			}
		};
		// limito l'area all italia
		var strictBounds = new google.maps.LatLngBounds(
				new google.maps.LatLng(35.48, 6.61),
				new google.maps.LatLng(47.1, 18.53)
				);


		// recupero il menu per cancellare il cerchio selezzionato
		/*var centerControlDiv = $('.deleteControl').remove().show().get(0);
		$('.delete', centerControlDiv).on('click', function (e) {
			self.deleteCircle();
		});*/
        var centerControlDiv = $('.deleteControl').remove().show().get(0);
        var radiusControlDiv = $('.radius-div').remove().show().get(0);
        $('.delete', centerControlDiv).on('click', function (e) {
            self.deleteCircle();
        });

        var oldval = 0;
        var radius_input = $('.radius_input', radiusControlDiv).on('blur', function () {
            radius = $(this).val();
            if (!radius) radius = oldval;
            self.updateRadius(radius);
        }).on('focus', function () {
            oldval = $(this).val();
        }).on('keyup', function(e) {
            if (e.keyCode == 13) {
                $(this).blur();
            }
        });


		// creo la mappa
		var map = new google.maps.Map(element, {
			noClear: true,
			streetViewControl: false,
			//center: {lat: 45.0701175, lng: 7.6000494}, //Torino
			center: {lat: 42.2052663, lng: 8.0839557}, //Italia
			zoom: 5,
			maxZoom: 15,
			minZoom: 5,
            //gestureHandling: 'cooperative'
		});

		// Create the search box and link it to the UI element.
		(function () {
			var input = $('<input/>').addClass('mapPlaceAutocomplete').get(0);
			var autocompletePlace = new google.maps.places.Autocomplete(input);
			autocompletePlace.setBounds(strictBounds);
			autocompletePlace.setComponentRestrictions({country: 'it'});
			map.controls[google.maps.ControlPosition.TOP_RIGHT].push(input);

			var markers = [];
			// [START region_getplaces]
			// Listen for the event fired when the user selects a prediction and retrieve
			// more details for that place.
			autocompletePlace.addListener('place_changed', function () {
				var place = autocompletePlace.getPlace();
				if (place == null || place.geometry == null) {
					input.value = "";
					return;
				}
				// Clear out the old markers.
				while (markers.length > 0) {
					markers.pop().setMap(null);
				}
				markers = [];


				var icon = {
					url: place.icon,
					size: new google.maps.Size(71, 71),
					origin: new google.maps.Point(0, 0),
					anchor: new google.maps.Point(17, 34),
					scaledSize: new google.maps.Size(25, 25)
				};

				// Create a marker for each place.
				markers.push(new google.maps.Marker({
					map: map,
					icon: icon,
					title: place.name,
					position: place.geometry.location
				}));

				if (place.geometry.viewport) {
					map.fitBounds(place.geometry.viewport);
				} else {
					map.fitBounds(place.geometry.location);
				}

			});
			// [END region_getplaces]
			// Bias the SearchBox results towards current map's viewport.
			// map.addListener('bounds_changed', function () {
			// 	searchBox.setBounds(map.getBounds());
			// });

		})(map);


		var ricentra = function (e) {
			if (strictBounds.contains(map.getCenter()))
				return true;
			// We're out of bounds - Move the map back within the bounds
			var c = map.getCenter(),
					x = c.lng(),
					maxX = strictBounds.getNorthEast().lng(),
					minX = strictBounds.getSouthWest().lng(),
					y = c.lat(),
					maxY = strictBounds.getNorthEast().lat(),
					minY = strictBounds.getSouthWest().lat();

			if (x < Math.min(maxX, minX)) {
				x = Math.min(maxX, minX);
			}
			if (x > Math.max(maxX, minX)) {
				x = Math.max(maxX, minX);
			}
			if (y < Math.min(maxY, minY)) {
				y = Math.min(maxY, minY);
			}
			if (y > Math.max(maxY, minY)) {
				y = Math.max(maxY, minY);
			}

			map.setCenter(new google.maps.LatLng(y, x));

		};

		google.maps.event.addListener(map, 'drag', ricentra);
		//google.maps.event.addListener(map, 'dragend', ricentra);
		google.maps.event.addListener(map, 'center_changed', ricentra);
        google.maps.event.addListener(element, 'change_draw', function () {
            if (selected != null){
                radius_input.val((circles[selected].getRadius()/1000).toFixed(0));
            }
            $('[name="circles"]', form).val(JSON.stringify(mappa.getAreas())).trigger('change').trigger('DOMSubtreeModified');
        });



		// creo gli trumenti
		var drawingManager = new google.maps.drawing.DrawingManager(this.options.drawingManager);

		// definisco cosa fare una volta disegnato il cerchio
		drawingManager.addListener('circlecomplete', function (c) {
			self.initCircle(c);
		});

		// mostro gli trumenti
		drawingManager.setMap(map);

		this.center_map = function () {
			if (circles.length > 0) {
				var bounds = circles[0].getBounds();
				for (var i = 1; i < circles.length; i++) {
					bounds = bounds.union(circles[i].getBounds());
				}
				map.fitBounds(bounds);
			} else {
				var location = Cookie.get('geolocation');
				var setLocation = function (position) {
					Cookie.set('geolocation', JSON.stringify({
						latitude: position.coords.latitude,
						longitude: position.coords.longitude,
						accuracy: position.coords.accuracy
					}));
					var circle = new google.maps.Circle({
						center: {
							lat: position.coords.latitude,
							lng: position.coords.longitude
						}, radius: Math.max(100000, position.coords.accuracy)
					});
					map.fitBounds(circle.getBounds());

					/* map.setCenter({
					 lat: position.coords.latitude,
					 lng: position.coords.longitude
					 });
					 map.setZoom( 10 ); */
				};

				if (location) {
					setLocation({coords: JSON.parse(location)});
				} else if (navigator.geolocation) {
					navigator.geolocation.getCurrentPosition(setLocation);
				}
			}
		};

		this.initCircle = function (c) {
			drawingManager.setDrawingMode(null);
			circles.push(c);
			self.selectCircle(circles.length - 1);

			c.addListener('click', function (e) {
				self.selectCircle(circles.indexOf(c));
			});
			c.addListener('center_changed', function (e) {
				google.maps.event.trigger(element, 'change_draw');
			});
			c.addListener('radius_changed', function (e) {
				google.maps.event.trigger(element, 'change_draw');
			});
			google.maps.event.trigger(element, 'change_draw');
		};
		this.selectCircle = function (i) {
			self.unselectCircle();
			if (i != null && i >= 0 && i < circles.length) {
				selected = i;
				circles[i].setOptions({fillColor: '#ffff55'});
				self.showControl();
			}
		};
		this.unselectCircle = function () {
			if (selected !== null) {
				circles[selected].setOptions({fillColor: '#555555'});
				selected = null;
				self.hideControl();
			}
		};
		this.deleteCircle = function () {
			if (selected != null) {
				circles[selected].setMap(null);
				circles.splice(selected, 1);
				selected = null;
				self.hideControl();
				google.maps.event.trigger(element, 'change_draw');
			}
		};
        this.updateRadius = function(r) {
            if (selected != null) {
                circles[selected].setRadius(parseFloat(r*1000));
            }
        };

		/*this.showControl = function () {
			map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
		};
		this.hideControl = function () {
			var index = map.controls[google.maps.ControlPosition.TOP_CENTER].indexOf(centerControlDiv);
			map.controls[google.maps.ControlPosition.TOP_CENTER].removeAt(index);
		};*/
        this.showControl = function () {
            map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
            map.controls[google.maps.ControlPosition.TOP_CENTER].push(radiusControlDiv);
        };
        this.hideControl = function () {
            var delNdx, radNdx = map.controls[google.maps.ControlPosition.TOP_CENTER].indexOf(radiusControlDiv);
            map.controls[google.maps.ControlPosition.TOP_CENTER].removeAt(radNdx);
            delNdx = map.controls[google.maps.ControlPosition.TOP_CENTER].indexOf(centerControlDiv);
            map.controls[google.maps.ControlPosition.TOP_CENTER].removeAt(delNdx);
        };

		this.getAreas = function () {
			var ris = [];
			for (var i = 0; i < circles.length; i++) {
				var center = circles[i].getCenter();
				ris.push({
					center: {
						lat: center.lat(),
						lng: center.lng()
					},
					radius: circles[i].getRadius()
				});
			}
			return ris;
		};

		this.drawCircle = function (cir) {
			var opt = this.options.drawingManager.circleOptions;
			for (var k in cir) {
				opt[k] = cir[k];
			}
			opt.map = map;
			var circle = new google.maps.Circle(opt);
			this.initCircle(circle);
		};

	};


	tab.init();

})(jQuery, document.getElementById('profilazione'));

function getArray(obj) {
	var array = [];
	obj.each(function () {
		var value = $(this).val();
		array.push(value);
	});
	return array;
}

function analyticsEvent(category, action, label) {
	ga('send', {
		hitType: 'event',
		eventCategory: category,
		eventAction: action,
		eventLabel: label
	});
}

function resize(classe, formElement) {

	var max_width = window.innerWidth;
	var max_heigth = window.innerHeight;
	var width = max_width - (max_width*30)/100;
	var heigth = (width * 9) / 16;


	if (heigth > max_heigth-(max_heigth*15)/100) {
		var heigth = max_heigth-(max_heigth*15)/100;
		var width = heigth * 16 / 9;
	}

	var margin_left = -(width / 2);
	var top = (max_heigth - heigth) / 2;
	$("." + classe + " > .box-popup", formElement).css("heigth", heigth);
	$("." + classe + " > .box-popup", formElement).css("width", width);
	$("." + classe + " > .box-popup", formElement).css("margin-left", margin_left);
	$("." + classe + " > .box-popup", formElement).css("top", top);

}