var CL=CL||{};CL.Views.Map=CL.View.extend({initialize:function(){var view=this;this.trySetup();$(window).on("resize.view-"+this.cid,function(){view.trySetup();});},trySetup:function(){if(this.$el.is(":visible")&&!this.isSetup){this.setup();}},setup:function(){var view=this;if(CL.hasGmapsAPI){view.ready();}else{var script=document.createElement('script');script.type='text/javascript';script.src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&'+'callback=CL.loadMap';document.body.appendChild(script);this.$el.attr("data-state","loading");CL.loadMap=function(){CL.hasGmapsAPI=true;view.ready();view.$el.attr("data-state","loaded");};this.isSetup=true;}},ready:function(){var view=this,overlayView=new google.maps.OverlayView();_.extend(Location.prototype,overlayView);_.extend(DrogaPin.prototype,overlayView);this.options.mapOptions={zoom:17,maxZoom:18,minZoom:14,center:new google.maps.LatLng(this.options.locations.droga5.lat,this.options.locations.droga5.lng),mapTypeId:google.maps.MapTypeId.ROADMAP,mapTypeControl:false,streetViewControl:false,draggingCursor:"move",styles:[{"stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#ADC7D5"},{"visibility":"on"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#f8f8f8"},{"visibility":"on"}]},{"featureType":"landscape.natural","stylers":[{"color":"#e6eef2"},{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#f8f8f8"},{"visibility":"on"}]}]};var gmap=new google.maps.Map(this.$el.get(0),this.options.mapOptions),drogaPin=new DrogaPin(this,gmap,new google.maps.LatLng(this.options.locations.droga5.lat,this.options.locations.droga5.lng));_.each(this.options.locations.other,function(data){var obj=new Location(view,gmap,data);});},tearDown:function(){CL.View.prototype.tearDown.call(this);}});function DrogaPin(map,gmap,position){this.position=position;this.setMap(gmap);} DrogaPin.prototype.onAdd=function(){this.el=document.createElement('div');this.$el=$(this.el).addClass("droga-pin");var panes=this.getPanes();panes.overlayMouseTarget.appendChild(this.el);} DrogaPin.prototype.draw=function(){var overlayProjection=this.getProjection(),point=overlayProjection.fromLatLngToDivPixel(this.position),position={"left":point.x,"top":point.y} this.$el.css(position);} function Location(parentMap,gmap,data){this.template=_.template($("#map-location-template").html());this.parentMap=parentMap;this.data=data;this.animationDuration=150;this.setMap(gmap);} Location.prototype.onAdd=function(){var view=this;this.el=document.createElement('div');this.$el=$(this.el);this.$el.html(this.template(this.data)).css({"position":"relative"});this.$inner=$(".location",$(this.el));this.$icon=$(".icon",this.$inner);this.$description=$(".description",this.$inner);var panes=this.getPanes();panes.overlayMouseTarget.appendChild(this.el);this.$inner.on("click",function(ev){if(!view.isActive){view.parentMap.$el.trigger("pinOpened");view.activate();}else{view.parentMap.$el.trigger("pinClosed");view.deactivate();} ev.stopPropagation();});this.parentMap.$el.on("pinOpened",function(){if(view.isActive){view.deactivate();}});this.$el.on("dblclick",function(ev){ev.preventDefault();ev.stopPropagation()});} Location.prototype.draw=function(){var overlayProjection=this.getProjection(),latLng=new google.maps.LatLng(this.data.lat,this.data.lng),point=overlayProjection.fromLatLngToDivPixel(latLng),position={"left":point.x,"top":point.y},innerPosition={"position":"absolute","left":0};if(this.data.orientation=="above"){innerPosition.bottom=0;}else{innerPosition.top=0;} this.$el.css(position);this.$inner.css(innerPosition);} Location.prototype.activate=function(){var view=this;this.$icon.stop().fadeOut(this.animationDuration/2,function(){view.$inner.addClass("active");setTimeout(function(){if(view.isActive){view.$description.stop().fadeIn(view.animationDuration/2);}},view.animationDuration);});this.isActive=true;} Location.prototype.deactivate=function(){var view=this;this.$description.stop(true).fadeOut(this.animationDuration/2,function(){view.$inner.removeClass("active");setTimeout(function(){if(!view.isActive){view.$icon.stop().fadeIn(view.animationDuration/2);}},view.animationDuration);});this.isActive=false;}