var map;
var markers = [];
var lastmarker;
var logged_in = false;
var IE = document.all?true:false;

function init_map () {
	map = new GMap2(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	map.addControl(new MyControl());
	map.setCenter(new GLatLng(-13.346865014577924, 34.32578125), 7);
	map.setMapType(G_HYBRID_MAP);

	GEvent.addListener(map,'addoverlay',function(o){
//		alert('addOverlay');
	        markers.push(o);
	}); 
	GEvent.addListener(map,'removeoverlay',function(o){
		alert('removeoverlay');
//		markers.splice(get_overlay_key(o), 1);
	});	
	/*GEvent.addListener(map,'infowindowclose',function(){
		alert('removeoverlay');
		markers.splice(get_overlay_key(o), 1);
	});
	GEvent.addListener(map,'infowindowopen',function(){
		alert('infowindowopen');
		markers.splice(get_overlay_key(o), 1);
	});*/
}

var red_icon = '/images/mm_20_red.png'
var blue_icon = '/images/mm_20_blue.png'
var shadow_icon = '/images/mm_20_shadow.png'

var default_icon = new GIcon();
default_icon.image = red_icon;
default_icon.shadow = shadow_icon;
default_icon.iconSize = new GSize(12, 20);
default_icon.shadowSize = new GSize(22, 20);
default_icon.iconAnchor = new GPoint(6, 20);

function MyControl() {
}
MyControl.prototype = new GControl();

MyControl.prototype.initialize = function(map) {

        var menu = document.createElement('div');
        menu.style.height = "20px";

        var container1 = document.createElement("div");
        container1.style.width = "142px";
        container1.style.padding = "0px";
        container1.style.backgroundColor = "white";
        container1.style.border = "1px solid";
        container1.style.font = "9pt Verdana";
        container1.style.cursor = "pointer";
        container1.style.float = "left";
        container1.appendChild(document.createTextNode('Menu: '));

        var container2 = document.createElement("div");
        container2.style.width = "142px";
        container2.style.padding = "0px";
        container2.style.backgroundColor = "white";
        container2.style.border = "1px solid";
        container2.style.font = "9pt Verdana";
        container2.style.cursor = "pointer";
        container2.style.float = "left";

        container2.onclick = function () {
        	var areas = document.getElementById("areas");
	        if (areas.style.display=="block")
	                areas.style.display="none";
	        else
	                areas.style.display="block";
	};

        var bevel = document.createElement("div");
        bevel.style.margin = "0px";
        bevel.style.padding = "1px";
        bevel.style.paddingLeft = "7px";
        bevel.style.paddingRight = "7px";

        bevel.style.borderRight = "1px solid";
        bevel.style.borderBottom = "1px solid";
        bevel.style.borderColor = "gray";
        bevel.style.textAlign = "center";

        bevel.innerHTML = 'Zoom to...<ul id="areas"></ul>';

        container2.appendChild(bevel);

        //menu.appendChild(container1);
        menu.appendChild(container2);

        map.getContainer().appendChild(menu);
        return menu;
}

MyControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(70, 7));
}

var area_select = document.createElement('select');
area_select.setAttribute('id', 'area_select');

function cA (area_id, center_lat, center_lon, zoom, name) {
	var areas = document.getElementById('areas');
	var li = document.createElement('li');
	var li_text = document.createTextNode(name);

	area_select.appendChild(document.createElement('option'));
        area_select.lastChild.appendChild(document.createTextNode(name));
        area_select.lastChild.setAttribute('value', area_id);

	li.onclick = function () {
		goto_area(center_lat, center_lon, zoom);
	}

	li.appendChild(li_text);
	areas.appendChild(li);

}

function goto_area (center_lat, center_lon, zoom) {
	map.setCenter(new GLatLng(center_lat, center_lon), zoom);
}

var point_select = document.createElement('select');
point_select.setAttribute('id', 'point_select');

function cM(point_id, lat, lon, name) {
        var marker = new GMarker(new GLatLng(lat, lon), default_icon);
        map.addOverlay(marker);

	point_select.appendChild(document.createElement('option'));
	point_select.lastChild.appendChild(document.createTextNode(name));
	point_select.lastChild.setAttribute('value', point_id);

	GEvent.addListener(marker, "click", function () {
		/*for ( i=0; i<markers.length; i++) {
			markers[i].setImage(red_icon);
		}*/
		goto_point(point_id, name);

		if (is_logged_in()) {
			map.openInfoWindow(new GLatLng(lat, lon), show_point_options(point_id, 'Change Marker', marker, name));
		} else {
			//alert('you are not logged in');
		}
		//map.panTo(new GLatLng(lat, lon));
	});
	GEvent.addListener(marker, "mouseover", function () {
	
	});
	GEvent.addListener(marker, "mouseout", function () {
		
	});
	
	

	return marker;
}
function panto_point (lat, lon) {
	map.panTo(new GLatLng(lat, lon))
}
function goto_point (id, name) { // if photo == true show photo
	if(lastmarker) {
		lastmarker.setImage(red_icon);
	}
	lastmarker = markers[id];
	markers[id].setImage(blue_icon);
	show_photos(id, name);	
}


function add_click_event () {
	GEvent.addListener(map, "click", function(marker, point) {
		if (!marker) {
			var newMarker = cM(0, point.lat(), point.lng());
			map.addOverlay(newMarker);
			map.openInfoWindow(point, show_point_options(0, 'New Marker', newMarker,''));
		}
	});
}

function get_overlay_key (o) {
	for ( i=0; i<markers.length; i++){
		if ( o == markers[i] ) {
			alert(i);
			return i;
		}
	}
}

function show_photos (point_id, name) {
	/*var target = document.getElementById('photo_pages');
	alert('break');
	get_number_of_photos(point_id, target);*/
	if (name) {
		document.getElementById('photo_title').firstChild.nodeValue = 'Photos (' + name + ')';	
	}
	if (!IE) {
		document.getElementById('photo_nav').contentDocument.location = 'request.php?action=get_photos_from_point&point_id=' + point_id;
	} else {
		document.getElementById('photo_nav').object.location = 'request.php?action=get_photos_from_point&point_id=' + point_id;
	}
}

function show_point_options (point_id, title, marker, name) {
	var div = document.createElement('div');
	div.appendChild(document.createTextNode(title));
	div.className = 'pointForm';
	var lat = marker.getPoint().lat() + "";
	var lon = marker.getPoint().lng() + "";
	var nameInput = create_input('text', 'Name', name)
	div.appendChild(nameInput);
	div.appendChild(document.createTextNode('Choose from unused/selected photos:'));
	var imgDiv = document.createElement('div');
	imgDiv.style.height = '200px';
	imgDiv.style.overflow = 'auto';


	div.appendChild(imgDiv);
	get_unused_photos(point_id, imgDiv);
	div.appendChild(create_input('submit', 'Save', 'Save'));
	
	imgDiv.onclick = function (e) {
		if (!e) var e = window.event;
		var target = (window.event) ? e.srcElement : e.target;

		if (target.className == 'toggleimgon') {
			target.className = 'toggleimgoff';
		} else {
			target.className = 'toggleimgon';
		}
	};

	div.lastChild.lastChild.onclick = function() {
		var images = [];
		for( i=0; i<imgDiv.childNodes.length; i++) {
			if ( imgDiv.childNodes[i].className == 'toggleimgon' ) {
				images.push(imgDiv.childNodes[i].getAttribute('src'));
			}
		}
		save_point(lat, lon, images, nameInput.lastChild.value);
		map.closeInfoWindow();
	};
	return div;
}

function create_input (type, label, value) {
	var p = document.createElement('p');
	var input = document.createElement('input');
	input.setAttribute('type', type);
	input.setAttribute('name', label);
	input.setAttribute('value', value);
	if (type != 'hidden' && type != 'submit') {
		var labelTag = document.createElement('label');
		labelTag.setAttribute('for', label);
		labelTag.appendChild(document.createTextNode(label));
		p.appendChild(labelTag);
	}
	p.appendChild(input);
	return p;
}

function toolbox_toggle () {
	if (document.getElementById('toolbox').style.height == '16px') {
		document.getElementById('toolbox').style.height='600px';
		document.getElementById('toolbox').style.width='400px';
		document.getElementById('toolbox').style.overflow='auto';
	} else {
		document.getElementById('toolbox').style.height='16px';
		document.getElementById('toolbox').style.width='55px';
		document.getElementById('toolbox').style.overflow='hidden';
	}
}

function toggle_blog_size () {
	if (document.getElementById('content').style.height == '750px') {
                document.getElementById('content').style.height='377px';
                document.getElementById('photo').style.display='';
		document.getElementById('go_down').innerHTML = '\\/';
        } else {
                document.getElementById('content').style.height='750px';
                document.getElementById('photo').style.display='none';
		document.getElementById('go_down').innerHTML = '/\\';
        }	
}

function save_this_view () {
	var name = document.getElementById('new_view_name').value;
	if (!name) {
		alert('Specify a name for this view');
		return false;
	}
	var center = map.getCenter();
	var ne_bounds = map.getBounds().getNorthEast();
	var sw_bounds = map.getBounds().getSouthWest();

	alert(
	name+
	' Center: '+center.lat()+','+center.lng()+
	' Zoom: '+map.getZoom()+
	' Ne-Bounds: '+ne_bounds.lat()+','+ne_bounds.lng()+
	' SW-Bounds: '+sw_bounds.lat()+','+sw_bounds.lng()
	);
	save_view(center.lat(), center.lng(), map.getZoom(), ne_bounds.lat(), ne_bounds.lng(), sw_bounds.lat(), sw_bounds.lng(), name);	
}


function comment_popup(post_id) {
	var commentwindow=window.open("/comments.php?id="+post_id, "comments", 
		"toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0," +
		"resizable=0,width=300,height=600");
}

function show_login() {
	document.getElementById('form_login').style.display = 'block';
}

function board_popup() {

	var board = window.open(
		"http://youstickit.com/board/Malawi", 
		"board", 
		"toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0," +
		"resizable=0,width=970,height=585"
	);

}