Store Locator

gistfile1.txt

var StoreLocator = {
	stores: {},
	resize: function(size) {
		if(store_located)
			$('.storeFinder',this.$layout).css('width',(size[0] - $('.closestStore').width() - 40 - 10));
		$('.map',this.$layout).css('height',(size[1] - 407  - 5)); // 437 = $('#footer_main').height()
		
		this.getCarouselLimit();
		
	},
	init: function($layout) {
		this.first_time = true;
		this.$layout = $layout;
		this.$loader = $('.loader',$layout);
		var size= [$(window).width(),$(window).height()];
	
		this.resize(size);
		$(".scrollable").scrollable();
		this.carousel = $(".scrollable").data("scrollable");
	},
	getCarouselLimit: function() {
		var totalElem = this.stores.length || $('.scrollable .items > div').size();
		var visibleElem = parseInt(($('.scrollable', this.$layout).width())/200+1);//200 is the width of a single item
		this.limitCarousel = totalElem - visibleElem;	
		if(this.limitCarousel <= 0) {
			$('.next',$layout).addClass('disabled');
			$('.disable',$layout).show();
		} else {
			$('.next',$layout).removeClass('disabled');
			$('.disable',$layout).hide();
		}
	},
	updateStores: function(typeValue,countryValue,cityValue) {
		this.$loader.show();
		var that = this;
		
		jQuery.getJSON(JSON_PATH,{country: countryValue, city: cityValue, type: typeValue}, function(data){
	         that.stores = data;
	         that.onUpdateStores();//callback
	     });
	},
	onUpdateStores: function() {
		$('.stores .items',this.$layout).css('left',0);
		if(this.stores.length > 0) {
			//hide no shop available
			$('.stores .textOverlay',this.$layout).hide();
			this.updateStoreList();
			this.updateMap();
		}
		else {
			//show no shop available
			var msg= (!this.first_time ? 'No stores were found for this search' : 'Select your country');
			$('.stores .textOverlay',this.$layout).text(msg).show();
			$('.stores .items',this.$layout).empty();
			this.$loader.hide();
		}
		
	},
	updateStoreList: function(){
		var that= this;
		var $items = $('.stores .items',this.$layout);
		$items.empty();
		$.each(this.stores, function(index, value){
			$items.append($(that.listTmp(value,false)));
		});
		this.getCarouselLimit();
	},
	updateMap: function(){
		
		
		var that= this;
		//cicle to create markers and append it on the map
		var bounds = new google.maps.LatLngBounds();
		this.clearMap();
		$.each(this.stores,function(index,value){
			var point= new google.maps.LatLng(value.latitude, value.longitude);
			
			//marker
			markers.push(new google.maps.Marker({
			    map: map,
			    position: point,
			    draggable: false,
			    icon: 'http://storage.diesel.com/assets/core/img/marker_store.png'
			}));
			bounds.extend(point);
			 
			that.closeBubbles();
			//bubble
			bubbles.push(new InfoBubble({
			    map: map,
			    content: that.listTmp(value,true),
			    position: point,
			    shadowStyle: 0,
			    padding: 1,
			    backgroundColor: '#fff',
			    borderRadius: 0,
			    arrowSize: 10,
			    borderWidth: 1,
			    borderColor: '#ccc',
			    disableAutoPan: false,
			    hideCloseButton: false,
			    arrowPosition: 50,
			    backgroundClassName: 'diesel_info_window',
			    arrowStyle: 0,
			    minWidth: 235,
			    maxWidth: 335,
			    minHeight: 235,
			    maxHeight: 335
			  })
			);
			
			var markersLength = markers.length;
			var bubblesLength = bubbles.length;
			google.maps.event.addListener(markers[markersLength-1], 'click', function() {
				that.closeBubbles();
			    if (!bubbles[bubblesLength-1].isOpen()) {
			    	bubbles[bubblesLength-1].open(map, markers[markersLength-1]);
			    }
			    
			});
			
		});
		if(that.first_time) {
			that.first_time = false;
				map.setCenter(startPoint);
				map.setZoom(18);

		}else {
			map.fitBounds(bounds);
		}
		
		that.$loader.hide();
		
		
	},
	clearMap: function() {
		if (markers) {
		    for (i in markers) {
		      markers[i].setMap(null);
		    }
		}
		markers = [];
		bubbles = [];
	},
	closeBubbles: function() {
		$.each(bubbles, function(index,value){
			value.close();
		});
	},
	listTmp: function(data,showmore){
		var html = '<div class='+(showmore ? 'bubble' : '')+'>';
		if(!showmore)
			html += '<a title="" href="">';
		html += '<strong>'+data.city+'</strong>';
		html += '<address rel="'+data.latitude+','+data.longitude+'">'+data.public_type+' - '+data.address+' '+data.zip+'<br>'+data.telf+'</address>';
		if(showmore) {
			html += '<p>'+data.info+'</p>';
			//html += '<a onclick="window.open(\''+PRINT_URL+'\')"  class="print" title="print map">Print Map</a>';
		}
		if(!showmore)
			html +=	'</a>';
		html +=	'</div>';
        return html;  
	}
}