https://flamantrailers.com/js/magestore/storepickup/storemanager.js

1if (typeof String.prototype.trim !== 'function') {
2	String.prototype.trim = function() {
3		return this.replace(/^\s+|\s+$/g, '');
4	}
5}
6
7var magestore = magestore || {};
8magestore.storepickup = magestore.storepickup || {};
9
10magestore.storepickup.Quicksort = (function() {
11	function swap(array, indexA, indexB) {
12		var temp = array[indexA];
13		array[indexA] = array[indexB];
14		array[indexB] = temp;
15	}
16	function partition(array, pivot, left, right, attr) {
17
18		var storeIndex = left,
19			pivotValue = array[pivot];
20		swap(array, pivot, right);
21		for (var v = left; v < right; v++) {
22
23			if (array[v][attr] < pivotValue[attr]) {
24				swap(array, v, storeIndex);
25				storeIndex++;
26			}
27		}
28		swap(array, right, storeIndex);
29		return storeIndex;
30	}
31	function sort(array, left, right, attr) {
32		var pivot = null;
33		if (typeof left !== 'number') {
34			left = 0;
35		}
36		if (typeof right !== 'number') {
37			right = array.length - 1;
38		}
39		if (left < right) {
40			pivot = left + Math.ceil((right - left) * 0.5);
41			newPivot = partition(array, pivot, left, right, attr);
42			sort(array, left, newPivot - 1, attr);
43			sort(array, newPivot + 1, right, attr);
44		}
45	}
46	return {
47		sort: sort
48	};
49
50})();
51
52magestore.storepickup.GoogleMapManager = Class.create({
53	initialize: function(mapId, options, callback) {
54		this._listeners = {};
55		/**
56		 * set default property
57		 */
58		Object.extend(this, {
59			mapId: mapId,
60			options: {},
61			callback: callback,
62			map: null,
63			geocoder: null,
64			infoWindow: null,
65			currentSystemValues: {},
66			listStore: [],
67			circle: null,
68			circleOptions: {
69				center: null,
70				map: null,
71				radius: 0,
72				strokeColor: "#FF0000",
73				strokeOpacity: 0.8,
74				strokeWeight: 2,
75				fillColor: "#B9D3EE",
76				fillOpacity: 0.35
77			},
78			storageUnit: {
79				m: {
80					label: 'M',
81					factor: 1
82				},
83				km: {
84					label: 'Km',
85					factor: 1000
86				},
87				mi: {
88					label: 'Mi',
89					factor: 1609.34
90				}
91			},
92			dayInWeek: ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"],
93			fadeEffecting: null,
94			fadeEffectTimeout: null,
95			filterStoreByAreaTimeout: null,
96			searchByDistanceTimeout: null
97		});
98		this.options = Object.extend({
99			mapOptions: {},
100			storeOptions: {},
101			listStoreJson: [],
102			maxRadius: 2000,
103			currentUnit: 'Km',
104			unitSelectId: '',
105			allowRenderListStoreBox: true,
106			searchByDistanceInputId: '',
107			searchByDistanceButtonId: '',
108			resetSearchByDistanceButtonId: '',
109			searchOptionBoxId: '',
110			searchMultiSelectOptionId: '',
111			imageFullScreenMapSrc: '',
112			geoYourLocationBtnId: '',
113			searchByDateButtonId: '',
114			searchByDateInputId: '',
115			resetSearchByDateBtnId: '',
116			isCheckoutPage: false
117		}, options || {});
118
119		//bind as event listener function
120		this.initializeGMap = this.initializeGMap.bindAsEventListener(this);
121		this.searchStoresByDistance = this.searchStoresByDistance.bindAsEventListener(this);
122		this.changeRadiusBarCallback = this.changeRadiusBarCallback.bindAsEventListener(this);
123		this.filterStoreByDistance = this.filterStoreByDistance.bindAsEventListener(this);
124		this.refreshAllMaker = this.refreshAllMaker.bindAsEventListener(this);
125		this.fullMapCallback = this.fullMapCallback.bindAsEventListener(this);
126		this.searchByAreaKeyupCallback = this.searchByAreaKeyupCallback.bindAsEventListener(this);
127		this.searchByDistanceKeyupCallback = this.searchByDistanceKeyupCallback.bindAsEventListener(this);
128		this.filterStoreByArea = this.filterStoreByArea.bindAsEventListener(this);
129		this.filterStoreByAreaCallBack = this.filterStoreByAreaCallBack.bindAsEventListener(this);
130		this.geoYourLocation = this.geoYourLocation.bindAsEventListener(this);
131		this.setSlider = this.setSlider.bindAsEventListener(this);
132
133		// bind function
134		this.handleResultGeocoder = this.handleResultGeocoder.bind(this);
135		Event.observe(window, 'load', this.initializeGMap);
136	},
137	initializeGMap: function() {
138		this.options.mapOptions = Object.extend({
139			zoom: 4,
140			center: {
141				latitude: 54.8,
142				longitude: -4.6
143			},
144			minZoom: 2,
145			maxZoom: 20,
146			mapTypeControl: true,
147			mapTypeControlOptions: {
148				style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
149				//                position: google.maps.ControlPosition.LEFT_CENTER
150			},
151			zoomControl: false,
152			scaleControl: true,
153			streetViewControl: false,
154			// streetViewControlOptions: {
155			//     position: google.maps.ControlPosition.RIGHT_TOP
156			// },
157			panControl: false
158
159		}, options.mapOptions || {});
160
161		var mapOptions = this.options.mapOptions;
162		mapOptions.center = new google.maps.LatLng(mapOptions.center.latitude, mapOptions.center.longitude);
163		this.map = new google.maps.Map(this.getMapElement(), mapOptions);
164		this.bounds = new google.maps.LatLngBounds();
165		var mcOptions = {
166			/* Edited by Vick - fix github #2 */
167			styles: this.options.markerImages,
168			/* End - Edited by Vick - fix github #2 */
169			gridSize: 10,
170			maxZoom: 15
171		};
172		this.markerClusterer = new MarkerClusterer(this.map, [], mcOptions);
173
174		this.geocoder = new google.maps.Geocoder();
175		this.infoWindow = new google.maps.InfoWindow({
176			maxWidth: 250,
177			disableAutoPan: true
178		});
179		this.circle = new google.maps.Circle(this.circleOptions);
180
181		this.autocomplete = null;
182		this.directionsService = new google.maps.DirectionsService();
183		this.directionsRenderer = new google.maps.DirectionsRenderer({
184			draggable: true
185		});
186
187		this.requestDirections = {};
188
189		this.indexStore = 0;
190
191		// Your location
192		this.infowindowYourLocation = new google.maps.InfoWindow();
193		this.markerYourLocation = new google.maps.Marker();
194
195		//Add search box to map
196		this.ismobile = true;
197		if (this.ismobile) {
198			if ($('search_box')) {
199				this.map.controls[google.maps.ControlPosition.LEFT_TOP].push($('search_box'));
200			}
201			this.options.searchByDistanceInputId = 'mb-search-distance-inp';
202			this.options.searchByAreaInputId = 'mb-search-area-inp';

203			this.options.radiusBarId = 'search_radius1';
204		} else {
205			if ($('search_box')) {
206				$('search_box').hide();
207			}
208			if ($('store_tabs')) {
209				this.map.controls[google.maps.ControlPosition.LEFT_TOP].push($('store_tabs'));
210			}
211			if ($('store_content')) {
212				this.map.controls[google.maps.ControlPosition.LEFT_TOP].push($('store_content'));
213			}
214		}
215
216		//Search by distance input box
217		if ($(this.options.searchByDistanceInputId)) {
218			this.searchBox = new google.maps.places.SearchBox($(this.options.searchByDistanceInputId));
219			this.gmapAddListener(this.searchBox, 'places_changed', this.searchStoresByDistance);
220			this.gmapAddDomListener($(this.options.searchByDistanceInputId), 'keyup', this.searchByDistanceKeyupCallback);
221		}
222		//Search by Distance button
223		if ($(this.options.searchByDistanceButtonId)) {
224			this.gmapAddDomListener($(this.options.searchByDistanceButtonId), 'click', this.searchStoresByDistance);
225		}
226		//Reset search by Distance button
227		if ($(this.options.resetSearchByDistanceButtonId)) {
228			this.gmapAddDomListener($(this.options.resetSearchByDistanceButtonId), 'click', this.refreshAllMaker);
229		}
230
231		if ($(this.options.searchByAreaInputId)) {
232			this.gmapAddDomListener($(this.options.searchByAreaInputId), 'keyup', this.searchByAreaKeyupCallback);
233		}
234
235		$$('.list-area input[type=checkbox]').each((function(checkbox) {
236			this.gmapAddDomListener(checkbox, 'click', this.filterStoreByAreaCallBack);
237		}).bind(this));
238
239		//Search by Area button
240		if ($(this.options.searchByAreaButtonId)) {
241			this.gmapAddDomListener($(this.options.searchByAreaButtonId), 'click', this.filterStoreByArea);
242		}
243
244		//Reset search by Area button
245		if ($(this.options.resetSearchByAreaButtonId)) {
246			this.gmapAddDomListener($(this.options.resetSearchByAreaButtonId), 'click', this.refreshAllMaker);
247		}
248
249		//Event when change value of radius bar
250
251
252
253		this.divRangeSlider = document.createElement('div');
254		this.divRangeSlider.id = 'range-slider-input';
255		this.divRangeSlider.addClassName('range-slider-input');
256		this.divRangeSlider.innerHTML = '<div class="handle-slider"></div>';
257
258		if ($(this.options.searchByDistanceInputId)) {
259			$(this.options.searchByDistanceInputId).insert({
260				after: this.divRangeSlider
261			});
262		}
263		if (this.options.isCheckoutPage) {
264			if (this.getBrowserAgent() === 'safari' && $(this.options.searchByDistanceInputId)) {
265				google.maps.event.addDomListenerOnce($(this.options.searchByDistanceInputId), 'focus', this.setSlider);
266			} else {
267				google.maps.event.addListenerOnce(this.map, 'resize', this.setSlider);
268			}
269		} else {
270			this.setSlider();
271		}
272
273		/* Add geo your location button*/
274		if ($(this.options.geoYourLocationBtnId)) {
275			this.gmapAddDomListener($(this.options.geoYourLocationBtnId), 'click', this.geoYourLocation);
276		}
277
278		/* Event for custom zoom in control  */
279		if ($('widget-zoom-in')) {
280			this.gmapAddDomListener($('widget-zoom-in'), 'click', (function() {
281				this.map.setZoom(this.map.getZoom() + 1);
282				if (this.map.getStreetView().getVisible()) {
283					this.map.getStreetView().setZoom(this.map.getStreetView().getZoom() + 1);
284				}
285			}).bindAsEventListener(this));
286		}
287
288		/* Event for custom zoom out control  */
289		if ($('widget-zoom-out')) {
290			this.gmapAddDomListener($('widget-zoom-out'), 'click', (function() {
291				this.map.setZoom(this.map.getZoom() - 1);
292				if (this.map.getStreetView().getVisible()) {
293					this.map.getStreetView().setZoom(this.map.getStreetView().getZoom() - 1);
294				}
295			}).bindAsEventListener(this));
296		}
297
298
299		if ($('search-tooltip')) {
300			this.map.controls[google.maps.ControlPosition.LEFT_TOP].push($('search-tooltip'));
301		}
302
303		/**
304		 * button full screen map
305		 */
306		this.btnFullScreenMap = $('full-screen-map-btn');
307		this.btnFullScreenMap.title = translateJson.fullMapTitle;
308		if (this.btnFullScreenMap) {
309			this.gmapAddDomListener($('full-screen-map-btn'), 'click', this.fullMapCallback);
310		}
311
312		this.fireCustomEvent({
313			type: 'goolgemap:initMap',
314			gmap: this
315		});
316
317		this.initListStore();
318		// this.refreshAllMaker();
319		// this.renderListStoreToHtml(this.listStore);
320	},
321	getNextIndex: function() {
322		if (this.indexStore < this.listStore.length - 1) {
323			this.indexStore++;
324		}
325		return this.indexStore;
326	},
327	getPrevIndex: function() {
328		if (this.indexStore > 0) {
329			this.indexStore--;
330		}
331		return this.indexStore;
332	},
333	getBrowserAgent: function() {
334		try {
335
336			var ua = navigator.userAgent,
337				tem,
338				M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
339			if (/trident/i.test(M[1])) {
340				tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
341				return 'IE ' + (tem[1] || '');
342			}
343			if (M[1] === 'Chrome') {
344				tem = ua.match(/\bOPR\/(\d+)/)
345				if (tem != null) {
346					return 'Opera ' + tem[1];
347				}
348			}
349			M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
350			if ((tem = ua.match(/version\/(\d+)/i)) != null) {
351				M.splice(1, 1, tem[1]);
352			}
353			return M[0].toLowerCase();
354		} catch (e) {
355			return '';
356		}
357	},
358	setSlider: function() {
359		try {
360			this.rangeSlider = new Control.Slider(this.divRangeSlider.down('.handle-slider'), this.divRangeSlider, {
361				range: $R(1, this.options.maxRadius),
362				sliderValue: this.options.maxRadius,
363				onSlide: (function(value) {
364					this.updateRadiusLabel('range-slider-label', value);
365					this.changeRadiusBarCallback();
366				}).bindAsEventListener(this),
367				onChange: (function(value) {
368					this.updateRadiusLabel('range-slider-label', value);
369					this.changeRadiusBarCallback();
370				}).bindAsEventListener(this)
371			});
372			this.updateRadiusLabel('range-slider-label', this.rangeSlider.getRange().start);
373		} catch (e) {
374//			console.log(e.name + ' : ' + e.message);

375//			console.trace();
376		}
377	},
378	getMapElement: function() {
379		return $(this.mapId);
380	},
381	gmapAddDomListener: function(element, eventName, callback) {
382		try {
383			google.maps.event.addDomListener(element, eventName, callback);
384		} catch (e) {
385//			console.log(e.name + ' : ' + e.message);
386//			console.trace();
387		}
388	},
389	gmapAddListener: function(element, eventName, callback) {
390		try {
391			google.maps.event.addListener(element, eventName, callback);
392		} catch (e) {
393//			console.log(e.name + ' : ' + e.message);
394//			console.trace();
395		}
396	},
397	/* add listener for custom event */
398	addListener: function(type, listener) {
399		if (typeof this._listeners[type] === "undefined") {
400			this._listeners[type] = [];
401		}
402
403		this._listeners[type].push(listener);
404	},
405	/* fire event for custom event */
406	fireCustomEvent: function(event) {
407		if (typeof event === "string") {
408			event = {
409				type: event
410			};
411		}
412		if (!event.target) {
413			event.target = this;
414		}
415
416		if (!event.type) { //falsy
417			throw new Error("Event object missing 'type' property.");
418		}
419
420		if (this._listeners[event.type] instanceof Array) {
421			var listeners = this._listeners[event.type];
422			for (var i = 0, len = listeners.length; i < len; i++) {
423				listeners[i].call(this, event);
424			}
425		}
426	},
427	fitScrollBar: function() {
428		if ($$('.widget-runway-tray-wrapper')[0]) {
429			if ($$('.widget-runway-tray-wrapper')[0].scrollWidth > $$('.widget-runway-tray-wrapper')[0].clientWidth) {
430				$$('.widget-runway-card-caption-wrapper').invoke('addClassName', 'fitScroll');
431			} else {
432				$$('.widget-runway-card-caption-wrapper').invoke('removeClassName', 'fitScroll');
433			}
434		}
435	},
436	/* remove listener of custom event*/
437	removeListener: function(type, listener) {
438		if (this._listeners[type] instanceof Array) {
439			var listeners = this._listeners[type];
440			for (var i = 0, len = listeners.length; i < len; i++) {
441				if (listeners[i] === listener) {
442					listeners.splice(i, 1);
443					break;
444				}
445			}
446		}
447	},
448	setCurrentUnit: function(unit) {
449		this.options.currentUnit = unit;
450	},
451	setMapStyle: function(style) {
452		this.beforeChangeStyre = {};
453		for (var fieldStyle in style) {
454			this.beforeChangeStyre[fieldStyle] = this.getMapElement().getStyle(fieldStyle);
455		}
456		this.getMapElement().setStyle(style);
457	},
458	restoreLastChangeMapStyle: function() {
459		if (this.beforeChangeStyre) {
460			this.setMapStyle(this.beforeChangeStyre);
461		}
462	},
463	fullMapCallback: function() {
464		if (!$('store-pickup-map-box')) {
465			return;
466		}
467
468
469
470		if ($('store-pickup-map-box').hasClassName('mapfull')) {
471			$('store-pickup-map-box').removeClassName('mapfull');
472
473			if ($('app-viewcard-strip')) {
474				$('app-viewcard-strip').removeClassName('zero-padding');
475			}
476			// if (document.viewport.getHeight() < 600 && this.options.isCheckoutPage) {
477			//     $('app-viewcard-strip').setStyle({
478			//         bottom: '0px'
479			//     });
480			// }
481
482			this.btnFullScreenMap.down('.full-screen-map-btn-icon-common').addClassName('expland').removeClassName('contract');
483			this.btnFullScreenMap.title = translateJson.fullMapTitle;
484
485			this.restoreLastChangeMapStyle();
486		} else {
487			$('store-pickup-map-box').addClassName('mapfull');
488
489			if ($('app-viewcard-strip')) {
490				$('app-viewcard-strip').addClassName('zero-padding');
491			}
492
493			// if (document.viewport.getHeight() < 600 && this.options.isCheckoutPage) {
494			//     $('app-viewcard-strip').setStyle({
495			//         bottom: '170px'
496			//     });
497			// }
498
499			this.btnFullScreenMap.down('.full-screen-map-btn-icon-common').addClassName('contract').removeClassName('expland');
500			this.btnFullScreenMap.title = translateJson.normalMapTitle;
501
502			this.setMapStyle({
503				height: $('store-pickup-map-box').getHeight() + 'px'
504			});
505		}
506		this.mapTriggerResize();
507		this.mapTriggerResize();
508	},
509	mapTriggerResize: function() {
510		google.maps.event.trigger(this.map, 'resize');
511	},
512	updateRadiusLabel: function(labelId, value) {
513		if ($(labelId)) {
514			$(labelId).update(Math.round(value) + ' ' + this.storageUnit[this.options.currentUnit].label);
515		}
516	},
517	filterStoreByDistance: function() {
518		this.markerClusterer.clearMarkers();
519		var circleCenter = this.circle.getCenter();
520		var circleRadius = this.circle.getRadius();
521		var map = this.circle.getMap();
522
523		if (map === null) {
524			return this;
525		}
526

527		this.listStore.invoke('getDistance', circleCenter);
528
529		//Sort store by distance
530		magestore.storepickup.Quicksort.sort(this.listStore, 0, this.listStore.length - 1, 'distance');
531
532		this.renderListStoreToHtml(this.listStore);
533
534		var i = 0;
535		while (i < this.listStore.length && this.listStore[i].distance <= circleRadius) {
536			this.markerClusterer.addMarker(this.listStore[i].getMarker());
537			i++;
538		}
539
540		this.indexStore = i;
541		for (var j = i; j < this.listStore.length; j++) {
542			this.listStore[j].hide();
543		};
544
545		this.fitScrollBar();
546
547		this.updateMessage(translateJson.numberStore + this.countStoreInMap());
548		this.map.setZoom(Math.round(14 - Math.log(this.getRadiusBarValue() / 1000) / Math.LN2));
549		this.map.setCenter(circleCenter);
550	},
551	searchStoresByDistance: function() {
552		if (this.searchByDistanceTimeout !== null) {
553			clearTimeout(this.searchByDistanceTimeout);
554			this.searchByDistanceTimeout = null;
555		}
556		if ($(this.options.searchByDistanceInputId).value.length === 0) {
557			return;
558		}
559		this.clearSomeThing();
560		this.geocoder.geocode({
561			'address': $(this.options.searchByDistanceInputId).value
562		}, this.handleResultGeocoder);
563	},
564	handleResultGeocoder: function(results, status) {
565		if (status === google.maps.GeocoderStatus.OK) {
566			this.map.setCenter(results[0].geometry.location);
567			this.circle.setMap(this.map);
568			this.circle.setCenter(this.map.getCenter());
569			this.circle.setRadius(this.getRadiusBarValue());
570			this.filterStoreByDistance();
571		}
572	},
573	changeRadiusBarCallback: function() {
574		if (this.circle && this.circle.getMap()) {
575			var radiusBarValue = this.getRadiusBarValue();
576			var circleRadius = this.circle.getRadius();
577
578
579			// this.listStore.invoke('changeRadiusBar', radiusBarValue, this.circle.getRadius(), this.map, this.markerClusterer);
580			for (var i = 0, len = this.listStore.length; i < len; i++) {
581				if (this.listStore[i].distance <= radiusBarValue && this.listStore[i].distance > circleRadius) {
582					this.listStore[i].show();
583					this.markerClusterer.addMarker(this.listStore[i].getMarker());
584				} else if (this.listStore[i].distance >= radiusBarValue && this.listStore[i].distance < circleRadius) {
585					this.listStore[i].hide();
586					this.markerClusterer.removeMarker(this.listStore[i].getMarker());
587				}
588			}
589
590			this.fitScrollBar();

591			this.circle.setRadius(radiusBarValue);
592			this.map.setCenter(this.circle.getCenter());
593			this.map.setZoom(Math.round(14 - Math.log(radiusBarValue / 1000) / Math.LN2));
594
595
596			var countStore = this.countStoreInMap();
597
598			if (countStore >= 1) {
599				this.updateMessage(translateJson.numberStore + countStore);
600			} else {
601				this.updateMessage(translateJson.storeNotFound);
602			}
603		}
604	},
605	countStoreInMap: function() {
606		return this.markerClusterer.getTotalMarkers();
607	},
608	filterStoreByAreaCallBack: function() {
609		if (this.filterStoreByAreaTimeout !== null) {
610			clearTimeout(this.filterStoreByAreaTimeout);
611		}
612		var timeout;
613
614		if (this.listStore.legnth >= 5000) {
615			timeout = 2000;
616		} else if (this.listStore.legnth >= 2000) {
617			timeout = 1000;
618		} else {
619			timeout = 500;
620		}
621
622		this.filterStoreByAreaTimeout = setTimeout((function() {
623			this.filterStoreByAreaTimeout = null;
624			this.filterStoreByArea();
625		}).bind(this), timeout);
626	},
627	filterStoreByTag: function(tagIds) {
628		this.clearSomeThing();
629		this.markerClusterer.clearMarkers();
630
631		var bounds = new google.maps.LatLngBounds();
632		var aStore = null;
633
634		for (var i = 0, leni = this.listStore.length; i < leni; i++) {
635			this.listStore[i].tag_ids = this.listStore[i].tag_ids || '';
636			var storeTags = this.listStore[i].tag_ids.split(',');
637			var isShow = false;
638			for (var j = 0; j < tagIds.length; j++) {
639				if (storeTags.indexOf(tagIds[j]) !== -1) {
640					isShow = true;
641					break;
642				}
643			};
644
645			if (tagIds.length === 0) {
646				isShow = true;
647			}
648
649			if (isShow) {
650				aStore = this.listStore[i];
651				this.markerClusterer.addMarker(this.listStore[i].getMarker());
652				this.listStore[i].show();
653				bounds.extend(this.listStore[i].getMarker().getPosition());
654			} else {
655				this.markerClusterer.removeMarker(this.listStore[i].getMarker());
656				this.listStore[i].hide();
657			}
658		};
659
660		this.fitScrollBar();
661
662		var countStore = this.countStoreInMap();
663		this.updateMessage(translateJson.numberStore + countStore);
664
665		if (countStore >= 1) {
666			this.map.panTo(bounds.getCenter());
667			this.map.fitBounds(bounds);
668			if (countStore === 1) {
669				google.maps.event.trigger(aStore.getMarker(), 'click');
670			}
671			this.updateMessage(translateJson.numberStore + countStore);
672		} else {
673			this.updateMessage(translateJson.storeNotFound);
674		}
675
676	},
677	filterStoreByArea: function() {
678		var searchContent = $(this.options.searchByAreaInputId) ? $(this.options.searchByAreaInputId).value : '';
679		searchContent = searchContent.trim().toLocaleLowerCase();
680
681		if (searchContent === '') {
682			return;
683		}
684		this.clearSomeThing();
685		this.markerClusterer.clearMarkers();
686
687		var searchOptions = [];
688		$$('.list-area input[type=checkbox]').each(function(checkbox) {
689			if (checkbox.checked) {
690				searchOptions.push(checkbox.id.substr('checkbox_store_'.length));
691			}
692		});
693		var bounds = new google.maps.LatLngBounds();
694		if (searchOptions.length == 0) {
695			this.updateMessage(translateJson.pleaseChoose);
696			return;
697		}
698
699		this.circle.setMap(null);
700		var listStoreFound = [];
701
702		while (searchContent.search('  ') !== -1) {
703			searchContent = searchContent.replace('  ', ' ');
704		}
705		var arrayWordsSearch = searchContent.split(' ');
706
707		this.listStore.invoke('hide');
708		this.listStore.invoke('setDisplayByArea', arrayWordsSearch, searchOptions, bounds, this.map, listStoreFound, this.markerClusterer);
709		listStoreFound.invoke('show');
710
711		this.fitScrollBar();
712
713		if (listStoreFound.length >= 1) {
714			this.map.panToBounds(bounds);
715			this.map.fitBounds(bounds);
716			if (listStoreFound.length === 1) {
717				google.maps.event.trigger(listStoreFound.first().getMarker(), 'click');
718			}
719			this.updateMessage(translateJson.numberStore + listStoreFound.length);
720		} else {
721			this.updateMessage(translateJson.storeNotFound);
722		}
723	},
724	searchByAreaKeyupCallback: function(event) {
725		var key = event.keyCode;
726		if (key == 8 || key == 46 || key == 13 || (key >= 48 && key <= 90)) {
727			this.filterStoreByAreaCallBack();
728		}
729	},
730	searchByDistanceKeyupCallback: function(event) {
731		if (this.searchByDistanceTimeout !== null) {
732			clearTimeout(this.searchByDistanceTimeout);
733		}
734		var key = event.keyCode;
735		if (key == 13) {
736			this.searchStoresByDistance();
737		} else {
738			this.searchByDistanceTimeout = setTimeout((function() {
739				this.searchStoresByDistance();
740			}).bind(this), 3000);
741		}
742	},
743	refreshAllMaker: function() {
744		this.clearSomeThing();
745		this.markerClusterer.clearMarkers();
746
747		if ($(this.options.searchByDistanceInputId)) {
748			$(this.options.searchByDistanceInputId).value = '';
749		}
750
751		if ($(this.options.searchByAreaInputId)) {
752			$(this.options.searchByAreaInputId).value = '';
753		}
754
755		if ($(this.options.searchByDateInputId)) {
756			$(this.options.searchByDateInputId).value = '';
757		}
758
759		if ($(this.options.resetSearchByAreaButtonId)) {
760			$(this.options.resetSearchByAreaButtonId).hide();
761		}
762		if ($(this.options.resetSearchByDistanceButtonId)) {
763			$(this.options.resetSearchByDistanceButtonId).hide();
764		}
765		this.listStore.each((function(store) {
766			this.markerClusterer.addMarker(store.getMarker());
767		}).bind(this));
768
769		if (this.listStore.length >= 1) {
770			this.map.panToBounds(this.bounds);
771			this.map.fitBounds(this.bounds);
772			// if (this.listStore.length === 1) {
773
774			//  google.maps.event.addListenerOnce(this.map, 'tilesloaded', (function() {
775			//      google.maps.event.trigger(this.listStore.first().getMarker(), 'click');
776			//  }).bindAsEventListener(this));
777			// }
778		}
779		this.updateMessage(translateJson.numberStore + this.listStore.length);
780		this.listStore.invoke('show');
781		this.fitScrollBar();
782	},
783	setCurentStore: function(store) {
784		this.currentSystemValues.store = store;
785	},
786	getCurrentStore: function() {
787		return this.currentSystemValues.store;
788	},
789	selectStoreCheckout: function() {
790		if (this.options.isCheckoutPage && $('selected_store') && this.getCurrentStore()) {
791			$('selected_store').update(this.getCurrentStore().store_name);
792			$('selected_store').show();
793		}
794	},
795	clickMarkerCallBack: function(event, store) {
796		this.openInfoWindow(store);
797		this.selectStoreCheckout();
798		if (this.map.getStreetView().getVisible()) {
799			this.map.getStreetView().setVisible(false);
800		}
801
802		if (!event || event.latLng) {
803			var storeClassItem = this.options.storeOptions.storeClassItem;
804			var listStoreBoxId = this.options.storeOptions.listStoreBoxId;
805
806			if ($(listStoreBoxId) && $(listStoreBoxId).up() && $(listStoreBoxId).down('.' + storeClassItem) && store.getStoreDom()) {
807				var firstStore = $(listStoreBoxId).up().cumulativeScrollOffset().left + $(listStoreBoxId).down('.' + storeClassItem).cumulativeOffset().left;
808				$(listStoreBoxId).up().scrollLeft += store.getStoreDom().cumulativeOffset().left - firstStore;
809			}
810		}
811
812	},
813	beautyInfoWindow: function() {
814		var divIwContainer = this.infoWindow.getContent();
815
816		var iwOuter = divIwContainer.up('.gm-style-iw');
817		if (iwOuter) {
818			iwOuter.addClassName('custom-gm-style-iw');
819
820			var iwOuterWrapper = iwOuter.up();
821			iwOuterWrapper.addClassName('width-gm-style-iw');
822

823			var iwBackground = iwOuter.previous();
824			var iwBackgroundChildElements = iwBackground.childElements();
825			// Removes background shadow DIV
826			iwBackgroundChildElements[1].setStyle({
827				'display': 'none'
828			});
829
830			// Removes white background DIV
831			iwBackgroundChildElements[3].setStyle({
832				'display': 'none'
833			});
834
835			// Changes the desired tail shadow color.
836			iwBackgroundChildElements[2].childElements().each(function(el) {
837				el.down().setStyle({
838					'box-shadow': 'rgba(72, 181, 233, 0.6) 0px 1px 6px',
839					'z-index': '1'
840				});
841			});
842
843			// Reference to the div that groups the close button elements.
844			var iwCloseBtn = iwOuter.next();
845
846			// Apply the desired effect to the close button
847			iwCloseBtn.setStyle({
848				width: '25px',
849				height: '25px',
850				opacity: '1',
851				right: (this.getBrowserAgent().toLowerCase().search("ie") !== -1) ? '-25px' : '-12px',
852				// left: (iwOuter.getWidth() - iwCloseBtn.getWidth() / 2) + 'px',
853				top: '3px',
854				border: '6px solid #48b5e9',
855				'border-radius': '13px',
856				'box-shadow': '0 0 5px #3990B9'
857			});
858
859			iwCloseBtn.observe('click', (function() {
860				this.infoWindow.close();
861			}).bindAsEventListener(this));
862
863			// If the content of infowindow not exceed the set maximum height, then the gradient is removed.
864			if (divIwContainer.down('.iw-content').getHeight() < 140) {
865				divIwContainer.down('.iw-bottom-gradient').setStyle({
866					display: 'none'
867				});
868			}
869
870			// The API automatically applies 0.7 opacity to the button after the mouseout event. This function reverses this event to the desired value.
871			iwCloseBtn.observe('mouseout', function() {
872				this.setStyle({
873					opacity: '1'
874				});
875			});
876		}
877	},
878	openInfoWindow: function(store) {
879		var divIwContainer = $('template-iw-container').clone(true);
880		divIwContainer.id = 'iw-container';
881
882		var template = new Template(divIwContainer.innerHTML);
883		divIwContainer.innerHTML = template.evaluate(store);
884
885		this.infoWindow.setContent(divIwContainer);
886		this.infoWindow.open(this.map, store.getMarker());
887
888		$$('.widget-runway-subview-card-view-container .widget-runway-card-background-active').invoke('removeClassName', 'widget-runway-card-background-active');
889
890		if (store.getStoreDom() && store.getStoreDom().down('.widget-runway-card-background')) {
891			store.getStoreDom().down('.widget-runway-card-background').addClassName('widget-runway-card-background-active');
892		}
893
894		// css beauty for info window
895		this.beautyInfoWindow();
896
897		if (this.getCurrentStore()) {
898			// select a store
899
900			if (this.getCurrentStore().getId() !== store.getId()) {
901				// select another store
902
903
904
905				this.setCurentStore(store);
906				this.directionsRenderer.setPanel(null);
907				this.directionsRenderer.setMap(null);
908				this.directionsRenderer = new google.maps.DirectionsRenderer({
909					draggable: true
910				});
911
912				this.map.setZoom(store.getZoomLevel());
913				this.map.panTo(store.getMarker().getPosition());
914			} else {
915				// select current store
916
917				if (this.directionsRenderer.getMap()) {
918					this.map.panTo(store.getMarker().getPosition());
919					if (this.currentSystemValues.startRouter) {
920						$('originA').value = this.currentSystemValues.startRouter;
921					}
922				}
923
924				if ($('directions-tms') && this.currentSystemValues.travelMode) {
925					$('directions-tms').select('li.travel', 'li.travel div').invoke('removeClassName', 'active');
926					var travelMode = this.currentSystemValues.travelMode;
927					$('directions-tms').select('li.travel[travel="' + travelMode + '"]', '.' + travelMode.toLowerCase()).invoke('addClassName', 'active');
928				}
929			}
930		} else {
931			// first time to select a store
932
933			this.setCurentStore(store);
934			this.directionsRenderer = new google.maps.DirectionsRenderer({
935				draggable: true
936			});
937			this.map.setZoom(store.getZoomLevel());
938			this.map.panTo(store.getMarker().getPosition());
939		}
940
941
942
943		this.directionsRenderer.setPanel($('directions-panel'));
944
945		this.autocomplete = new google.maps.places.Autocomplete($('originA'));
946		this.autocomplete.bindTo('bounds', this.map);
947
948		this.gmapAddListener(this.autocomplete, 'place_changed', (function() {
949			this.calcRoute($('originA').value, store);
950		}).bindAsEventListener(this));
951
952		this.gmapAddDomListener($('originA'), 'blur', (function() {
953			this.calcRoute($('originA').value, store);
954		}).bindAsEventListener(this));
955
956
957		$('btn-getdirections').setStyle({
958			height: $('originA').getHeight() + 'px',
959			'line-height': '0'
960		});
961		$('btn-getdirections').observe('click', (function() {
962			this.calcRoute($('originA').value, store);
963		}).bindAsEventListener(this));
964

965		$('directions-tms').select('.travel').each((function(btn) {
966			btn.observe('click', (function() {
967				$('directions-tms').select('.travel', '.travel div').invoke('removeClassName', 'active');
968				btn.addClassName('active');
969				btn.down().addClassName('active');
970				this.calcRoute($('originA').value, store);
971			}).bindAsEventListener(this));
972		}).bind(this));
973
974	},
975	initListStore: function() {
976		this.clearSomeThing();
977
978		$A(this.options.listStoreJson).each((function(storeJson) {
979
980			var store = new magestore.storepickup.Store(storeJson, this.options.storeOptions);
981			this.listStore.push(store);
982
983			this.markerClusterer.addMarker(store.getMarker());
984
985			this.gmapAddListener(store.getMarker(), 'click', this.clickMarkerCallBack.bindAsEventListener(this, store));
986			this.bounds.extend(store.getMarker().getPosition());
987
988			if ($(this.options.storeOptions.listStoreBoxId)) {
989				$(this.options.storeOptions.listStoreBoxId).insert(store.toHtml());
990				if (store.getStoreDom()) {
991					Event.observe(store.getStoreDom(), 'click', this.clickMarkerCallBack.bindAsEventListener(this, store))
992				}
993			}
994
995		}).bind(this));
996
997		if (this.listStore.length >= 1) {
998			this.map.panToBounds(this.bounds);
999			this.map.fitBounds(this.bounds);
1000			if (this.listStore.length === 1) {
1001
1002				google.maps.event.addListenerOnce(this.map, 'tilesloaded', (function() {
1003					this.map.setZoom(this.listStore.first().getZoomLevel());
1004					this.map.panTo(this.listStore.first().getMarker().getPosition());
1005					google.maps.event.trigger(this.listStore.first().getMarker(), 'click');
1006				}).bindAsEventListener(this));
1007			}
1008		}
1009
1010		this.updateMessage(translateJson.numberStore + this.listStore.length);
1011		this.fitScrollBar();
1012		this.options.listStoreJson = null;
1013	},
1014	clearMarkers: function() {
1015		this.listStore.invoke('setMarkerMap', null);
1016		this.listStore.invoke('clearListeners', 'click');
1017	},
1018	clearSomeThing: function() {
1019		this.updateDirectionsPanel('');
1020
1021		this.directionsRenderer.setMap(null);
1022		this.directionsRenderer.setPanel(null);
1023
1024		this.infoWindow.close();
1025		this.circle.setMap(null);
1026		this.markerYourLocation.setMap(null);
1027		this.infowindowYourLocation.setMap(null);
1028		this.setCurentStore(null);
1029		this.currentSystemValues.travelMode = null;
1030		this.currentSystemValues.startRouter = null;
1031		this.currentSystemValues.responseDirections = null;
1032
1033		if (this.options.isCheckoutPage && $('selected_store')) {
1034			$('selected_store').update("");
1035			$('selected_store').show();
1036		}
1037	},
1038	getRadiusBarValue: function() {
1039		var radiusbarValue = this.rangeSlider.getRange().start;
1040		return radiusbarValue * this.storageUnit[this.options.currentUnit].factor;
1041	},
1042	calcRoute: function(start, store) {
1043		this.updateDirectionsPanel('');
1044		this.directionsRenderer.setMap(null);
1045		this.currentSystemValues.startRouter = start;
1046		if (typeof start === 'string' && start.trim() === '') {
1047			return;
1048		}
1049
1050		var travelMode = '';
1051		if ($('directions-tms') && $('directions-tms').select('.travel.active').first()) {
1052			travelMode = $('directions-tms').select('.travel.active').first().getAttribute('travel');
1053		}
1054		this.currentSystemValues.travelMode = travelMode;
1055
1056		var end = store.getMarker().getPosition();
1057
1058		this.requestDirections = {
1059			origin: start,
1060			destination: end,
1061			travelMode: google.maps.TravelMode[travelMode]
1062		};
1063
1064		this.directionsService.route(this.requestDirections, (function(response, status) {
1065
1066			switch (status) {
1067				case google.maps.DirectionsStatus.OK:
1068					this.directionsRenderer.setMap(this.map);
1069					this.directionsRenderer.setDirections(response);
1070					this.currentSystemValues.responseDirections = response;
1071					break;
1072				case google.maps.DirectionsStatus.NOT_FOUND:
1073					this.updateDirectionsPanel(translateJson.direction[0]);
1074					break;
1075				case google.maps.DirectionsStatus.OVER_QUERY_LIMIT:
1076					this.updateDirectionsPanel(translateJson.direction[1]);
1077					break;
1078				case google.maps.DirectionsStatus.REQUEST_DENIED:
1079					this.updateDirectionsPanel(translateJson.direction[2]);
1080					break;
1081				case google.maps.DirectionsStatus.UNKNOWN_ERROR:
1082					this.updateDirectionsPanel(translateJson.direction[3]);
1083					break;
1084				case google.maps.DirectionsStatus.ZERO_RESULTS:
1085					this.updateDirectionsPanel(translateJson.direction[4]);
1086					break;
1087				case google.maps.DirectionsStatus.REQUEST_DENIED:
1088					this.updateDirectionsPanel(translateJson.direction[5]);
1089					break;
1090			}
1091			if (status !== google.maps.DirectionsStatus.OK) {
1092				this.currentSystemValues.responseDirections = null;
1093				if (this.getCurrentStore() && this.markerYourLocation.getMap()) {
1094					var bounds = new google.maps.LatLngBounds();
1095					bounds.extend(this.getCurrentStore().getMarker().getPosition());
1096					bounds.extend(this.markerYourLocation.getPosition());
1097					this.map.fitBounds(bounds);
1098				}
1099			}
1100		}).bind(this));
1101
1102	},
1103	updateDirectionsPanel: function(message) {
1104		if ($('directions-panel')) {
1105			$('directions-panel').update(message);
1106		}
1107	},
1108	handleGeoYourLocation: function(results, status) {
1109		if (status === google.maps.GeocoderStatus.OK) {
1110			var address = "",
1111				city = "",
1112				state = "",
1113				zipcode = "",
1114				country = "",
1115				formattedAddress = "";
1116			var lat;
1117			var lng;
1118
1119			for (var i = 0, len = results[0].address_components.length; i < len; i++) {
1120				var addr = results[0].address_components[i];
1121				// check if this entry in address_components has a type of country
1122				if (addr.types[0] == 'country')
1123					country = addr.long_name;
1124				else if (addr.types[0] == 'street_address') // address 1
1125					address = address + addr.long_name;
1126				else if (addr.types[0] == 'establishment')
1127					address = address + addr.long_name;
1128				else if (addr.types[0] == 'route') // address 2
1129					address = address + addr.long_name;
1130				else if (addr.types[0] == 'postal_code') // Zip
1131					zipcode = addr.short_name;
1132				else if (addr.types[0] == ['administrative_area_level_1']) // State
1133					state = addr.long_name;
1134				else if (addr.types[0] == ['locality']) // City
1135					city = addr.long_name;
1136			}
1137
1138			if (results[0].formatted_address != null) {
1139				formattedAddress = results[0].formatted_address;
1140			}
1141
1142			//debugger;
1143
1144			var location = results[0].geometry.location;
1145
1146			lat = location.lat();
1147			lng = location.lng();
1148
1149			var contentObject = {
1150				formattedAddress: formattedAddress,
1151				city: city,
1152				state: state,
1153				country: country
1154			};
1155			var content = '';
1156			if ($('infoyourlocation')) {
1157				var dom = $('infoyourlocation').clone(true);
1158				var template = new Template(dom.innerHTML);
1159				dom.innerHTML = template.evaluate(contentObject);
1160				content = dom;
1161			} else {

1162				content = 'City: ' + city + '\n' + 'State: ' + state + '\n' + 'Zip: ' + zipcode + '\n' + 'Formatted Address: ' + formattedAddress + '\n' + 'Lat: ' + lat + '\n' + 'Lng: ' + lng;
1163			}
1164
1165			this.markerYourLocation.setMap(this.map);
1166			this.infowindowYourLocation.open(this.map, this.markerYourLocation);
1167			this.infowindowYourLocation.setContent(content);
1168
1169			this.gmapAddDomListener(this.markerYourLocation, 'click', (function() {
1170				this.infowindowYourLocation.open(this.map, this.markerYourLocation);
1171				this.infowindowYourLocation.setContent(content);
1172				this.map.setCenter(this.markerYourLocation.getPosition());
1173				this.map.setZoom(17);
1174			}).bindAsEventListener(this));
1175
1176			if (this.getCurrentStore()) {
1177				this.openInfoWindow(this.getCurrentStore());
1178				if ($('originA')) {
1179					$('originA').value = formattedAddress;
1180				}
1181				this.calcRoute(formattedAddress, this.getCurrentStore());
1182				$$('a[aria-controls="tab-directions"]').invoke('click');
1183			} else {
1184				this.map.setCenter(this.markerYourLocation.getPosition());
1185				this.map.setZoom(17);
1186			}
1187		}
1188	},
1189	geoYourLocation: function() {
1190		if (this.map.getStreetView().getVisible()) {
1191			this.map.getStreetView().setVisible(false);
1192		}
1193		var options = {
1194			map: this.map,
1195			position: new google.maps.LatLng(60, 105),
1196		};
1197		if (navigator.geolocation) {
1198			navigator.geolocation.getCurrentPosition((function(position) {
1199				this.markerYourLocation.setMap(this.map);
1200				this.markerYourLocation.setPosition(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
1201				var geocoder = new google.maps.Geocoder();
1202				geocoder.geocode({
1203					latLng: this.markerYourLocation.getPosition()
1204				}, this.handleGeoYourLocation.bind(this));
1205
1206			}).bind(this), (function() {
1207				options.content = 'Error: The Geolocation service failed.';
1208				var infowindow = new google.maps.InfoWindow(options);
1209				this.map.setCenter(options.position);
1210				this.map.setZoom(17);
1211			}).bind(this));
1212		} else {
1213			// Browser doesn't support Geolocation
1214			options.content = 'Error: Your browser does not support geolocation.';
1215			var infowindow = new google.maps.InfoWindow(options);
1216			this.map.setCenter(options.position);
1217			this.map.setZoom(17);
1218		}
1219	},
1220	updateMessage: function(message) {
1221		if ($('search-tooltip')) {
1222			$('search-tooltip').update(message);
1223			if (this.fadeEffectTimeout === null) {
1224				$('search-tooltip').show();
1225				fadeEffect.init('search-tooltip', 1);
1226			} else {
1227				clearTimeout(this.fadeEffectTimeout);
1228			}
1229			this.fadeEffectTimeout = setTimeout((function() {
1230				fadeEffect.init('search-tooltip', 0);
1231				this.fadeEffectTimeout = null;
1232				$('search-tooltip').hide();
1233			}).bind(this), 5000);
1234		}
1235	},
1236	renderListStoreToHtml: function(listStore) {
1237		if ($(this.options.storeOptions.listStoreBoxId)) {
1238			$(this.options.storeOptions.listStoreBoxId).innerHTML = '';
1239			$A(listStore).each((function(store) {
1240				$(this.options.storeOptions.listStoreBoxId).insert(store.toHtml());
1241				this.gmapAddDomListener(store.getStoreDom(), 'click', this.clickMarkerCallBack.bindAsEventListener(this, store));
1242			}).bind(this));
1243		}
1244	}
1245});
1246
1247magestore.storepickup.Store = Class.create();
1248magestore.storepickup.Store.prototype = {
1249	initialize: function(store, storeOptions) {
1250		Object.extend(this, store || {});
1251		Object.extend(this, {
1252			map: null,
1253			infoWindow: null,
1254			marker: null,
1255			distance: null,
1256			URL_ICON: '',
1257			zoom_default: 16
1258		});
1259
1260		this.storeOptions = Object.extend({
1261			imageMarkerIcon: '',
1262			storeIdItem: 'store-item',
1263			storeClassItem: 'store-item',
1264			listStoreBoxId: '',
1265			storeTemplateId: '',
1266		}, storeOptions || {});
1267
1268		if (this.image_icon) {
1269			this.URL_ICON = this.storeOptions.imageMarkerIcon.replace('{id}', this.store_id);
1270			this.URL_ICON = this.URL_ICON.replace('{icon}', this.image_icon);
1271		} else if (this.pin_color && this.pin_color != 'f75448') {
1272			this.URL_ICON = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + this.pin_color;
1273		}
1274		this.createMarker();
1275	},
1276	getId: function() {
1277		return this.store_id;
1278	},
1279	setMarkerMap: function(map) {
1280		if (this.marker) {

1281			this.marker.setMap(map);
1282		}
1283	},
1284	addToCluster: function(markerClusterer) {
1285		if (markerClusterer instanceof MarkerClusterer) {
1286			markerClusterer.addMarker(this.getMarker());
1287		}
1288	},
1289	removeFromCluster: function(markerClusterer) {
1290		if (markerClusterer instanceof MarkerClusterer) {
1291			markerClusterer.removeMarker(this.getMarker());
1292		}
1293	},
1294	getMarker: function() {
1295		return this.marker;
1296	},
1297	getStoreBoxId: function() {
1298		return this.storeOptions.storeIdItem + '-' + (this.store_id || '');
1299	},
1300	getStoreDom: function() {
1301		return $(this.getStoreBoxId());
1302	},
1303	getZoomLevel: function() {
1304		if (typeof this.zoom_level !== 'undefined' && this.zoom_level !== null && isNaN(parseFloat(this.zoom_level) === false)) {
1305			if (this.zoom_level < 2 || this.zoom_level > 20) {
1306				return this.zoom_default;
1307			}
1308			return parseFloat(this.zoom_level);
1309		}
1310		return this.zoom_default;
1311	},
1312	setMarker: function(marker) {
1313		this.marker = marker;
1314	},
1315	checkVar: function(v) {
1316		return typeof v !== "undefined" && v !== null;
1317	},
1318	createMarker: function() {
1319		try {
1320			if (this.checkVar(this.store_latitude) && this.checkVar(this.store_longitude)) {
1321				this.marker = new google.maps.Marker({
1322					position: new google.maps.LatLng(this.store_latitude, this.store_longitude),
1323					icon: this.URL_ICON
1324				});
1325			} else {
1326				throw new Error('Invalid latitude,longitude of store ' + this.store_id);
1327			}
1328		} catch (e) {
1329//			console.log(e.name + ' : ' + e.message);
1330		}
1331	},
1332	clearListeners: function(eventName) {
1333		try {
1334			if (this.checkVar(eventName)) {
1335				google.maps.event.clearListeners(this.marker, eventName);
1336			} else {
1337				google.maps.event.clearListeners(this.marker);
1338			}
1339		} catch (e) {
1340//			console.log(e.name + ' : ' + e.message);
1341		}
1342	},
1343	show: function() {
1344		if ($(this.getStoreBoxId())) {
1345			$(this.getStoreBoxId()).show();
1346		}
1347	},
1348	hide: function() {
1349		if ($(this.getStoreBoxId())) {
1350			$(this.getStoreBoxId()).hide();
1351		}
1352	},
1353	setDisplayInCirle: function(circle, map) {
1354		if (this.distance !== null && this.distance <= circle.getRadius()) {
1355			this.show();
1356			this.setMarkerMap(map);
1357		} else {
1358			this.hide();
1359			this.setMarkerMap(null);
1360		}
1361	},
1362	changeRadiusBar: function(radiusBarValue, circleRadius, map, markerClusterer) {
1363		if (this.distance <= radiusBarValue && this.distance > circleRadius) {
1364			this.show();
1365			// this.setMarkerMap(map);
1366			markerClusterer.addMarker(this.marker);
1367		} else if (this.distance >= radiusBarValue && this.distance < circleRadius) {
1368			this.hide();
1369			// this.setMarkerMap(null);
1370			markerClusterer.removeMarker(this.marker);
1371		}
1372	},
1373	getDistance: function(position) {
1374		try {
1375			this.distance = google.maps.geometry.spherical.computeDistanceBetween(position, this.marker.getPosition());
1376		} catch (e) {
1377//			console.log(e.name + ' : ' + e.message);
1378			this.distance = null;
1379		}
1380		return this.distance;
1381	},
1382	setDisplayByArea: function(arrayWordsSearch, searchOptions, bounds, map, listStoreFound, markerClusterer) {
1383		var isShow = true;
1384		var string = "";
1385
1386		searchOptions.each((function(searchOption) {
1387			if (this.checkVar(this[searchOption])) {
1388				string += this[searchOption];
1389			}
1390		}).bind(this));
1391
1392		string = string.toLocaleLowerCase();
1393
1394		for (var j = 0, len = arrayWordsSearch.length; j < len; j++) {
1395			if (string.search(arrayWordsSearch[j]) === -1) {
1396				isShow = false;
1397				break;
1398			}
1399		}
1400		if (isShow) {
1401			bounds.extend(this.marker.getPosition());
1402			this.show();
1403			markerClusterer.addMarker(this.marker);
1404			listStoreFound.push(this);
1405		} else {
1406			this.hide();
1407			markerClusterer.removeMarker(this.marker);
1408		}
1409	},
1410	toHtml: function(storeTemplateId) {
1411		if (!this.checkVar(storeTemplateId)) {
1412			var storeTemplateId = this.storeOptions.storeTemplateId;
1413		}
1414		var storeDom = $(storeTemplateId).clone(true);
1415		storeDom.id = this.getStoreBoxId();
1416		storeDom.addClassName(this.storeOptions.storeClassItem);
1417
1418		if (storeDom.down('.image_icon')) {
1419			storeDom.down('.image_icon').src = this.image_src;
1420		}
1421
1422		var storeTemplate = new Template(storeDom.innerHTML);
1423		storeDom.innerHTML = storeTemplate.evaluate(this);
1424
1425		Event.observe(storeDom, 'mouseover', (function() {
1426			this.marker.setAnimation(google.maps.Animation.BOUNCE);
1427		}).bindAsEventListener(this));
1428
1429		Event.observe(storeDom, 'mouseout', (function() {
1430			this.marker.setAnimation(null);
1431		}).bindAsEventListener(this));
1432
1433		return storeDom;
1434	},
1435	toInfoWindowHtml: function(templateId, elementId) {
1436		if ($(templateId))
1437			var domElement = $(templateId).clone(true);
1438		domElement.down('img.image_icon').src = this.image_src;
1439		domElement.down('img.image_icon').className = 'image_icon img-responsive';
1440		domElement.down('img.image_icon').setAttribute('style', 'width: 100%; height:100px;');
1441
1442		var template = new Template(domElement.innerHTML);
1443		domElement.innerHTML = template.evaluate(this);
1444		domElement.id = elementId;
1445
1446		domElement.select('.nav-tabs a').each(function(aTab) {
1447			aTab.observe('click', function() {
1448				domElement.select('.nav-tabs li').invoke('removeClassName', 'active');
1449				domElement.select('.tab-pane').invoke('removeClassName', 'active');
1450				aTab.up('li').addClassName('active');
1451				$(aTab.getAttribute('aria-controls')).addClassName('active');
1452			});
1453		});
1454
1455		return domElement;
1456	}
1457};
1458
1459var fadeEffect = function() {
1460	return {
1461		init: function(id, flag, target) {
1462			this.elem = document.getElementById(id);
1463			clearInterval(this.elem.si);
1464			this.target = target ? target : flag ? 100 : 0;
1465			this.flag = flag || -1;
1466			this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
1467			this.elem.si = setInterval(function() {
1468				fadeEffect.tween()
1469			}, 20);
1470		},
1471		tween: function() {
1472			if (this.alpha == this.target) {
1473				clearInterval(this.elem.si);
1474			} else {
1475				var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
1476				this.elem.style.opacity = value / 100;
1477				this.elem.style.filter = 'alpha(opacity=' + value + ')';
1478				this.alpha = value
1479			}
1480		}
1481	}
1482}();
1483