$(function(){
        var pillandpillow = new google.maps.LatLng(22.24818,114.16765);
				// Creating a map
        var map = new google.maps.Map($('#map')[0], {
          zoom: 15,
          center: pillandpillow,
          disableDefaultUI: true,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          panControl: false,
          zoomControl: true,
          zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL,
                position: google.maps.ControlPosition.LEFT_TOP
          },
          scaleControl: false,
          streetViewControl: false
        });
        
		var markerList = [
		['CURRENT LOCATION',22.24818, 114.16765],
		];
		 		
		var markers = new Array();
        
        var mapStyle = [
            {
              featureType: "water",
              elementType: "all",
              stylers: [
                { saturation: -100 },
                { lightness: 70 }
              ]
            },{
              featureType: "landscape.man_made",
              elementType: "all",
              stylers: [
                { saturation: -99 },
                { lightness: 40 },
                { gamma: 0.6 }
              ]
            },{
              featureType: "landscape.natural",
              elementType: "geometry",
              stylers: [
                { saturation: -99 },
                { lightness: 70 }
              ]
            },{
              featureType: "road",
              elementType: "all",
              stylers: [
                { saturation: -99 },
                { lightness: 60 }
              ]
            },{
              featureType: "administrative.locality",
              elementType: "all",
              stylers: [
                { visibility: "simplified" },
                { invert_lightness: true },
                { lightness: -70 }
              ]
            },{
              featureType: "transit.station",
              elementType: "all",
              stylers: [
                { visibility: "simplified" },
                { saturation: -100 },
                { lightness: 30 }
              ]
            },{
              featureType: "administrative.country",
              elementType: "geometry",
              stylers: [
                { invert_lightness: true },
                { lightness: -50 }
              ]
            },{
              featureType: "poi",
              elementType: "all",
              stylers: [
                { saturation: -100 },
                { lightness: 60 },
                { visibility: "simplified" }
              ]
            },{
              featureType: "administrative.country",
              elementType: "all",
              stylers: [
                { hue: "#ff0022" },
                { visibility: "off" }
              ]
            },{
              featureType: "all",
              elementType: "all",
              stylers: [
          
              ]
            }
        ];
        
        
		var styledMapOptions = {
      	name: "pillandpillow"
  		};
 
 		var jayzMapType = new google.maps.StyledMapType(mapStyle, styledMapOptions);
		
		map.mapTypes.set('pillandpillow', jayzMapType);
      	map.setMapTypeId('pillandpillow');
		
              
        
        var boundsChange = google.maps.event.addListener(map, "bounds_changed", function() {

  				for (var i = 0; i < markerList.length; i++) {
					var image = new google.maps.MarkerImage('http://www.pillandpillow.com/v7/wp-content/themes/pp/assets/ppv7.png',
								 new google.maps.Size(47, 68),
								 new google.maps.Point(0, 0),
								 new google.maps.Point(23.5, 68));
								 
					//var marker = markerList[i];
	  			    var latLng = new google.maps.LatLng(markerList[i][1], markerList[i][2]);
	  				var marker = new google.maps.Marker({
	                		 position: latLng,
	               			 map: map,
							 icon: image
	            	});
  					markers[i] = marker;
  				}
  				google.maps.event.removeListener(boundsChange);
  				
  				$(markers).each(function(i,marker){
  
  					google.maps.event.addListener(marker, "click", function(){
  						message.open(this, i);
  					});
  				});
  			});


  			function BrandWindow(){
  			  this.setMap(map);
  			}
				BrandWindow.prototype = new google.maps.OverlayView();
				BrandWindow.prototype.onAdd = function() {
				  this.$div_ = $('<div id="message" />').appendTo(this.getPanes().floatPane);
				  this.$div_.hide();
        }
        BrandWindow.prototype.draw = function() {
          var me = this;
          var $div = this.$div_;
          var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
          if (point) {
            $div.css({ left: point.x, top: point.y });
          }
        };
        BrandWindow.prototype.remove = function() {
          if (this.$div_) {
            this.$div_.remove();
            this.$div_ = null;
          }
        };
        BrandWindow.prototype.getPosition = function() {
         return this.latlng_;
        };
        

        BrandWindow.prototype.open = function(marker, index) {
   
		  $div = this.$div_.stop().css('opacity',1).hide().empty();
		  
		  this.$div_.html(markerList[index][0]);
		  
		  this.latlng_ = marker.position;
          this.draw();
          
          //var closeButton = $(iconHTML("close"))
						//.click(function(){ 
						  //$div.fadeOut(); 
						//})
						//.css({ top:'5px', right:'5px' });
					
					// $("#accordion-template").clone().show()
					//$("#message").clone().show()
						//.attr("id","").appendTo($div)
						//.find(".index").html(index.toString()).end()
						//.tabs()
						//.find(".ui-tabs-nav").append(closeButton);
				
			var left = map.getBounds().getSouthWest().lat();
			var right = map.getBounds().getNorthEast().lat();
			var offset = (right - left) * .05;
			var newCenter = new google.maps.LatLng(marker.position.lat(), marker.position.lng()+offset);
			map.panTo(newCenter);
			
			//$div.show();
			$div.css('display','block');
			$div.css('opacity',0);
			//$div.animate({opacity:0},200);
			$div.delay(200).animate({opacity:1},500);
        };
        
	var message = new BrandWindow();
				
	//mapbuttons, should be put in documnt.ready
	
//	$('a[id^=shoplist_subnav]').each(function(index){
//		$(this).click(function(){
//			map.setZoom(mapList[index][0]);
//			map.panTo(new google.maps.LatLng(mapList[index][1],mapList[index][2]));
//			
//		});
//	});
	
	
		
	});