var VideoMap = Class.create();

VideoMap.prototype = {		
	initialize : function() {
		return;
	},
	
	setConfig : function(config) {	
		this.config = config;
		this.mapId = config.mapId;
		this.widget = config.widget;
		this.startLat = config.startLat;
		this.startLong = config.startLong;
		this.startZoom = config.startZoom;
		this.maxVideos = config.maxVideos;
		this.markerConfig = config.markerConfig;
		
		var magMarker = new GIcon(G_DEFAULT_ICON);
		magMarker.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";	
		magMarker.iconSize = new GSize(32, 32);		
		this.magMarker = magMarker;	
		
		this.createMap();
	},
	
	createMap : function() {
		if ( GBrowserIsCompatible() ) {
			var map = new GMap2($(this.mapId));
			map.addControl(new GLargeMapControl());        
			map.addControl(new GOverviewMapControl());
			map.setCenter(new GLatLng(this.startLat, this.startLong), this.startZoom);
			map.enableDoubleClickZoom();
			this.map = map;
			this.setupMarkers();
		}	
	},
	
	setupMarkers : function() {
		var mgr = new MarkerManager(this.map);
		this.markerMgr = mgr;
		this.createMarkers();
		this.markerMgr.refresh();
	},
	
	createMarkers : function() {
		var markers = new Array();
		var mapObj = this;
		this.markerConfig.each(function(mConf) {
			var point = new GLatLng(mConf.point[0], mConf.point[1])
			var marker = new GMarker(point, { title: mConf.location, icon: mapObj.magMarker });
			mapObj.bindMarkerWindow(marker, mConf);
			mapObj.map.addOverlay(marker, 0, 13);
		});
		this.markers = markers;
	},
	
	bindMarkerWindow : function(marker, mConf) {
		var html = this.createWindowHTML(mConf);
		marker.bindInfoWindowHtml(html);
	},

	createWindowHTML : function(info) {
		var maxVideos = this.maxVideos;
		var location = info.location;
		var shortLocation = info.location.split(', ');
		var titles = info.title.split('||');
		var users = info.user.split('||');
		var images = info.image.split('||');
		var links = info.link.split('||');
		var max = titles.length > maxVideos ? maxVideos : titles.length;
		var html = '<div style="margin-right: 20px; color: #000000; margin-bottom: 4px;"><b>' + location + '</b> - ' + titles.length + ' video' + (titles.length == 1 ? '' : 's') + '</div>';
		//html += '<ul style="margin: 4px 0px 4px -20px;">';
		for ( var i=0; i < max; i++ ) {
			var img = images[i] ? '<img src="' + images[i] + '" width="32" height="24" border="0" valign="absmiddle" align="left" hspace="4" />' : '';
			html += '<div style="text-align: left; font-size: 10px;' + (img ? ' height: 32px; margin-bottom: 2px;' : '') + '" class="clearfix">' + img + '<a href="' + links[i] + '" style="color: #000000;"' + ( this.widget ? ' target="_blank"' : '' ) + '>' + titles[i] + '</a> - posted by: ' + users[i] + '</div>'	
		}
		//html += '</ul>';
		if ( titles.length > maxVideos ) {
			html += '<div style="text-align: right; font-size: 10px;"><a href="/search/?search=geo:' + info.latitude +',' + info.longitude + '" style="color: #000000;"' + ( this.widget ? ' target="_blank"' : '' ) + '>see all ' + shortLocation[0] + ' videos...</a></div>';	
		}
		return html;
	}	
}