var routeMarkers = new Array(0);
var distanceWidget;
var fixY, minX, fixX;

var stmMessage = '';
function msg(str) {
	var obj = document.getElementById('divDocumentMessage');
	if(typeof str == 'object') {
		var o = str;
		str = '';
		for(var k in o) str += k+':'+o[k]+"\n";
	}
	obj.innerHTML = "<xmp>"+str+"</xmp>";
	obj.style.display = 'block';
	
	clearTimeout(stmMessage);
	stmMessage = setTimeout(function() {
		var obj = document.getElementById('divDocumentMessage');
		obj.style.display = 'hidden';
	}, 1000);
}

function DistanceWidget(center) {
	this.set('map', map);
	this.set('position', center);
	
	var radiusWidget;
	radiusWidget = new RadiusWidget(center)
	
	radiusWidget.bindTo('map', this);
	radiusWidget.bindTo('center', this, 'position');
	
	// Marker 등록
	//var marker = new google.maps.Marker({
	//	draggable: false, 
	//});
	//routeMarkers.push(marker);
	//marker.bindTo('map', this);
	//marker.bindTo('position', this);
}

var objCircle, objSizer, oLabel, objLine;
DistanceWidget.prototype = new google.maps.MVCObject();
function RadiusWidget(center) {
	var zoomLevel = map.getZoom();
	var zoomSize = [1, 8000, 4000,2000,1000,500,200,120,60,30,10,4,2,1,0.6,0.4,0.2,0.1,0.04,0.02,0.010];
	var radius = zoomSize[zoomLevel];
	if(!objCircle) {
		// Circle 생성
		objCircle = new google.maps.Circle({
			center       : center, 
			map          : map, 
			radius       : radius, 
			strokeColor  : '#ffffff', 
			strokeWeight : 1, 
			strokeOpacity: 1, 
			fillColor    : '#aaaaff', 
			clickable    : false, 
			fillOpacity  : 0.4
		});
		
		// Line 생성(반경)
		objLine = new google.maps.Polyline({
			path: [center,center],
			geodesic: false,
			strokeColor: '#ffffff',
			strokeOpacity: 1.0,
			strokeWeight: 1,
			map : map
		});
		
		// Sizer 생성
		if(!objSizer) {
			objSizer = new google.maps.Marker({
				draggable: true,
				title: 'Drag me!',
				raiseOnDrag : false,
				icon: new google.maps.MarkerImage(
					//'http://www.freemaptools.com/images/markers/resize.png'
					'/images/ico/sizer.png'
					,new google.maps.Size(22, 9)
					,new google.maps.Point(0,0)
					,new google.maps.Point(22,5)
				)
			});
			objSizer.bindTo('map', this);
			objSizer.bindTo('position', this, 'sizer_position');
			
			oLabel = new Label({map: map});
			oLabel.bindTo('position', objSizer);
		}
	}
	
	this.set('distance', radius);
	this.setDistance();
	this.bindTo('bounds', objCircle);
	
	// Circle
	objCircle.bindTo('center', this);
	objCircle.bindTo('map',    this);
	objCircle.bindTo('radius', this);
	
	// Sizer
	objSizer.bindTo('position', this, 'sizer_position');
	var me = this;
	
	fixY = center.lat();
	minX = center.lng();
	maxX = maxF = null;
	
	google.maps.event.addListener(objSizer, 'drag', function() {
		var fixX = objSizer.getPosition().lng();
		
		if(!maxF && me.get('distance') > 5000) {
			maxX = fixX;
			maxF = true;
		}
		if(maxF && maxX<fixX) {
			fixX = maxX;
		}
		
		objSizer.setPosition(new google.maps.LatLng(fixY,fixX));
		me.setDistance();
	});
	
	// Label
	oLabel.bindTo('text',      this, 'distance');
	oLabel.bindTo('visible',   objSizer);
	//oLabel.bindTo('clickable', objSizer);
	//oLabel.bindTo('zIndex',    objSizer);
	
	objCircle.setVisible(true);
	objSizer.setVisible(true);
	//oLabel.setVisible(true);
	objLine.setVisible(true);
	
}
var maxX;
var maxF;

RadiusWidget.prototype = new google.maps.MVCObject();
RadiusWidget.prototype.distance_changed = function() {
	this.set('radius', this.get('distance') * 1000);
	if (this.get('center')) {
		this.set('title', 'Position : ' + this.get('center').lat() + ', ' + this.get('center').lng() + ' Radius : ' + this.get('distance').toFixed(0) + 'km')
	} else {
		this.set('title', 'Radius : ' + this.get('distance') + 'km')
	}
};

RadiusWidget.prototype.center_changed = function() {
	var bounds = this.get('bounds');
	if (bounds) {
		var lng = bounds.getNorthEast().lng();
		var position = new google.maps.LatLng(this.get('center').lat(), lng);
		this.set('sizer_position', position)
	}
	
	var pos      = this.get('sizer_position');
	var center   = this.get('center');
	objLine.setPath([center, pos]);
	
	if (map.markers) {
		map.clearMarkers()
	}
};
RadiusWidget.prototype.setDistance = function() {
	var pos      = this.get('sizer_position');
	var center   = this.get('center');
	
	if (!center || !pos) {
		return 0
	}
	
	var pos      = this.get('sizer_position');
	var center   = this.get('center');
	objLine.setPath([center, pos]);
	
	var R = 6371;
	var dLat = (pos.lat() - center.lat()) * Math.PI / 180;
	var dLon = (pos.lng() - center.lng()) * Math.PI / 180;
	var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(center.lat() * Math.PI / 180) * Math.cos(pos.lat() * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
	var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
	var distance = R * c;
	
	this.set('distance', distance)
	this.setDispDistance();
};
RadiusWidget.prototype.getDistance = function() {
	return this.get('distance');
};
RadiusWidget.prototype.setDispDistance = function() {
	var dist = this.get('distance')*1000;
	dist = Math.ceil(dist);
	if(dist<1000) dist += 'm';
	else          dist = Math.round(dist/1000, 2) + 'km';
	this.set('dispDistance', dist);
};

function Label(opt_options) {
	this.setValues(opt_options);
	
	var span = this.span_ = document.createElement('span');
	span.style.cssText = 'position: relative; float:right; width:54px;height:17px' +
	'white-space: nowrap; background:url(/images/bg_dist.png) no-repeat center center;' +
	'padding: 2px;font-family:tahoma;font-size:10px;';
	
	var div = this.div_ = document.createElement('div');
	div.appendChild(span);
	div.style.cssText = 'position: absolute; display: none;width:100px';
};

Label.prototype = new google.maps.OverlayView;

Label.prototype.onAdd = function() {
	var pane = this.getPanes().overlayImage;
	pane.appendChild(this.div_);
	
	// Ensures the label is redrawn if the text or position is changed.
	var me = this;
	this.listeners_ = [
		google.maps.event.addListener(this, 'position_changed',  function() { me.draw(); }),
		google.maps.event.addListener(this, 'visible_changed',   function() { me.draw(); }),
		google.maps.event.addListener(this, 'clickable_changed', function() { me.draw(); }),
		google.maps.event.addListener(this, 'text_changed',      function() { me.draw(); }),
		google.maps.event.addListener(this, 'zindex_changed',    function() { me.draw(); }),
		google.maps.event.addDomListener(this.div_, 'click',     function() {
			if (me.get('clickable')) {
				google.maps.event.trigger(me, 'click');
			}
		})
	];
};
Label.prototype.draw = function() {
	var projection = this.getProjection();
	var position = projection.fromLatLngToDivPixel(this.get('position'));
	
	for(var k in position) {
		if(k == 'x') posX = position[k];
		else if(k == 'y') posY = position[k];
	}
	
	var div = this.div_;
	div.style.left = (posX - 130) + 'px';
	div.style.top  = (posY - 12) + 'px';
	
	var visible = this.get('visible');
	div.style.display = visible ? 'block' : 'none';
	
	var clickable = this.get('clickable');
	this.span_.style.cursor = clickable ? 'pointer' : '';
	
	var zIndex = this.get('zIndex');
	//div.style.zIndex = zIndex;
	
	//this.span_.innerHTML = this.get('text').toString();
	var dist = this.get('text');
	dist = dist * 1000;
	dist = Math.ceil(dist);
	var marker = 'm';
	
	if(dist>1000) {
		dist = Math.ceil(dist/10);
		dist = dist/100;
		marker = 'km';
	}
	
	this.span_.innerHTML = '<span>'+(dist ? dist : '0')+marker+'</span>';
};