define(['jquery', 'internal/sitebuilder/common/ModuleClassLoader', 'translate!webs.module.google_map'],
function($, ModuleClassLoader, translate) {
	var module = {}, extend = {};

	// SubModules

	// Module Styles
	extend.styles = {"plain":{"global":{"js":"plain.view.js","css":"plain.view.less"},"default":true,"slug":"plain"}};
	extend.styles['plain']['global']['js'] = (function(module, extend){
		

/* plain.view.js */
// see https://spreadsheets.google.com/pub?key=p9pdwsai2hDMsLkXsoM05KQ&gid=1 for mapping
var languageMap = {
	"cs-CZ": "cs",
	"da-DK": "da",
	"de-AT": "de",
	"de-CH": "de",
	"de-DE": "de",
	"en-AU": "en-AU",
	"en-CA": "en",
	"en-GB": "en-GB",
	"en-IE": "en",
	"en-IN": "en",
	"en-NZ": "en",
	"en-SG": "en",
	"en-UK": "en",
	"en-US": "en",
	"es-ES": "es",
	"es-MX": "es",
	"es-US": "es",
	"fi-FI": "fi",
	"fr-BE": "fr",
	"fr-CA": "fr",
	"fr-CH": "fr",
	"fr-FR": "fr",
	"hi-IN": "hi",
	"it-CH": "it",
	"it-IT": "it",
	"ja-JP": "ja",
	"ko-KR": "ko",
	"nb-NO": "no",
	"nl-BE": "nl",
	"nl-NL": "nl",
	"no-NO": "no",
	"pl-PL": "pl",
	"pt-PT": "pt",
	"sv-SE": "sv",
	"tr-TR": "tr",
	"zh-CN": "zh-CN",
	"zh-TW": "zh-TW"
};

window._googleMapsApiKey = 'AIzaSyCYGaG3hI3yQdP7oH-o535wjeq4vxtpALU';

// Google maps API requires a callback function
window.onGoogleMapsLoaded = function(){
	module.googleMapsLoaded.resolve();
};

// Ensure google geo location and maps are loaded first
module.googleCompetelyLoaded = $.Deferred();
module.googleMapsLoaded = $.Deferred();

extend.loadGoogleMaps = function(){

	// Geo location information
	var googleMapsGeoInfo = $.ajax({
		type: 'GET',
		url: '//www.google.com/jsapi',
		dataType : "jsonp"
	});

	// Load google maps API
	var language = typeof(webs) != 'undefined' && languageMap[webs.locale] || "en",
	key = window._googleMapsApiKey,
	data = { sensor: 'false', callback: 'onGoogleMapsLoaded', language: language };
	if(key) data.key = key; // Only need a key in edit mode

	// Have to use google callback when complete
	$.ajax({
		type: 'GET',
		url: '//maps.googleapis.com/maps/api/js',
		data: data,
		dataType: 'script',
		cache: true
	});

	// Ensure that we have both the maps API and location info before rendering our map
	$.when(googleMapsGeoInfo, module.googleMapsLoaded.promise()).then(function() {
		module.googleCompetelyLoaded.resolve();
	});
};

module.oneLoaded = function(){
	this.displayMap();
};

module.displayMap = function(){

	var self = this;

	module.googleCompetelyLoaded.done(function() {

		if(!self.data.center){
			// Center on the user's location if we could determine it
			if (google.loader.ClientLocation) {
				var clientLocation = new google.maps.LatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude);
				self.data.center = self.data.marker = { lat: clientLocation.lat(), lng: clientLocation.lng() };
			} else {
				// default to showing DC
				var dc = new google.maps.LatLng(38.895108,-77.036369);
				self.data.center = self.data.marker = { lat: dc.lat(), lng: dc.lng() };
			}
			self.displayMap();
			return;
		}

		var frame = self.el.children();
		var width = frame.width();
		var el = self.el.find(".map_canvas")[0],
			opts = self.mapOptions();

		self.map = new google.maps.Map(el, opts);
		self.displayMarker();
		self.displayDirections();

		// In IE8, when google maps are loaded, frame's width resets
		// Forcing width on the map container after map is rendered
		frame.width(width);
	});
};

module.setMapOptions = function(){
	this.map.setOptions(this.mapOptions());
	this.displayMarker();
	this.displayDirections();
};

module.displayMarker = function(){
	var opts = this.mapOptions(),
		addressHtml = '<div id="content">' + (this.data.address === undefined ? "Washington, DC" : this.data.address) + '</div>',
		bbl  = new google.maps.InfoWindow({ content: addressHtml }),
		self = this;

	if(this.marker) this.marker.setVisible(false);

	this.marker = new google.maps.Marker({ map: this.map, title: this.data.address });
	this.marker.setClickable(true);
	this.marker.setPosition(new google.maps.LatLng(this.data.marker.lat, this.data.marker.lng));
	this.marker.setVisible(!!this.data.showMarker);
	google.maps.event.addListener(this.marker, "click", function(){
		bbl.open(self.map, self.marker);
	});
};

module.displayDirections = function(){
	var self = this;
	if(self.getDirections) self.getDirections.remove();

	self.getDirections = $("<div class='w-get-directions'>" + translate("webs.module.google_map.getdirections") + "</div>").
		appendTo(this.el.find(".map_canvas")).
		click(function(){
			var location = self.data.address || (self.data.center.lat.toString()+" "+self.data.center.lng.toString()),
				url = "http://maps.google.com/maps?q=to+" + encodeURIComponent(location);
			window.open(url, "Directions");
		});

	if(!this.data.getDirections) 
		self.getDirections.hide();
	else 
		self.getDirections.show();

};

module.mapOptions = function(){
	return {
		// user-changable options
		center: new google.maps.LatLng(this.data.center.lat, this.data.center.lng),
		zoom: this.data.zoom,

		disableDefaultUI: !this.data.showControls,

		styles: this.mapStyleOptions(),

		// non-changable options
		mapTypeId: this.data.mapTypeId,
		mapTypeControl: true,

		draggable: true,
		scrollwheel: false,
		disableDoubleClickZoom: false,
		streetViewControl: false
	};
};

module.mapStyleOptions = function(){
	if(this.data.useColor) return undefined;
	return [
		{
			"feature_type": "all",
			"stylers": [ { saturation: -100 } ]
		}
	];
};

// Finally, load google maps! (The setTimeout is here because IE was being weird)
window.setTimeout(function(){
	extend.loadGoogleMaps();
}, 1);
		return module;
	});
	extend.defaultStyle = extend.styles['plain'];

	// View JS
	


	return ModuleClassLoader.register('google_map', module, extend);
});