var W3C_EVENT = document.addEventListener;
var IE_EVENT = document.attachEvent;

var map = {
	drag: false,

	init: function ( ) {
		map.element = document.getElementById("map");
		map.coord.init();


		map.element.parentNode.onmousedown = map.dragStart;
		map.element.parentNode.onmousemove = map.update;
		map.element.parentNode.oncontextmenu = function () { return false; }

		map.element.onmousemove = function( ) { return false; }
		map.element.ondblclick = function( event ) { marker.add( map.coord.x, map.coord.y ); };
		},

	center: function ( x, y ) {
		map.element.style.left = -( x - map.element.parentNode.clientWidth / 2 ) + "px";
		map.element.style.top = -( y - map.element.parentNode.clientHeight / 2 ) + "px";
		},

	dragStart: function ( event ) {
		event = event || window.event;

		if (event.button == 2) return false; //Not a right click

		map.startPosition = {x: mouse.position.x - map.element.offsetLeft , 
						y: mouse.position.y - map.element.offsetTop };

		map.drag = true;

		if ( W3C_EVENT ) {
			document.addEventListener( "mousemove", map.dragDo, false );
			document.addEventListener( "mouseup", map.dragEnd, false );
			}
		else if( IE_EVENT ) {
			document.attachEvent( "onmousemove", map.dragDo );
			document.attachEvent( "onmouseup", map.dragEnd );
			}
		},

	dragDo: function ( event ) {
		if ( map.drag ) {
			map.element.style.cursor = "move";
			map.element.style.left = (mouse.position.x - map.startPosition.x) + "px";
			map.element.style.top = (mouse.position.y - map.startPosition.y) + "px";
			}

		return false;
		},

	dragEnd: function ( event ) {
		event = event || window.event;

		map.drag = false;
		map.element.style.cursor = "auto";

		if ( W3C_EVENT ) {
			document.removeEventListener( "mousemove", map.dragDo, false );
			document.removeEventListener( "mouseup", map.dragEnd, false );
			}
		else if( IE_EVENT ) {
			document.detachEvent( "onmousemove", map.dragDo );
			document.detachEvent( "onmouseup", map.dragEnd );
			}
		},

	update: function ( event ) {
		target = map.element;
		offsetLeft = target.offsetLeft;
		offsetTop = target.offsetTop;
		
		while( target.offsetParent ) {
			target = target.offsetParent
			offsetLeft += target.offsetLeft;
			offsetTop += target.offsetTop;
			}

		map.coord.x = mouse.position.x - (offsetLeft);
		map.coord.y = mouse.position.y - (offsetTop);

		marker.updateLink();
		},

	coord: {
		x: 0,
		y: 0,

		init: function () {
			map.coord.display = document.getElementById("map_coord");

			if ( W3C_EVENT ) {
				map.element.parentNode.addEventListener( "mousemove", map.coord.update, false );
				map.element.parentNode.addEventListener( "mouseout", map.coord.end, false );
				}
			else if ( IE_EVENT ) {
				map.element.parentNode.attachEvent( "onmousemove", map.coord.update );
				map.element.parentNode.attachEvent( "onmouseout", map.coord.end );
				}
			},

		end: function ( event ) {
			if ( map.coord.display.firstChild ) {
				map.coord.display.removeChild( map.coord.display.firstChild );
				}
			},

		update: function ( event ) {
			display = "(" + map.coord.x + ", " + map.coord.y + ")";

			if ( map.coord.display.firstChild ) {
				map.coord.display.firstChild.nodeValue = display;
				}
			else {
				map.coord.display.appendChild( document.createTextNode( display ) );
				}
			}
		}
	}

var marker = {
	init: function ( queryString ) {
		marker.list = document.getElementById("marker_list");
		marker.form = document.getElementById("marker_form");
		marker.form.onsubmit = function( event ) { marker.editStop(); return false; };
		marker.number = 0;
		marker.array = new Object();

		var markers = marker.list.getElementsByTagName("li");
		for ( var i = 0; i < markers.length; i++ ) {
			coord = markers[i].firstChild.href.split("?");
			coord = coord[1].split(";");
			coord = coord[0].split(":");
			marker.array[ markers[i].className ] = {list: markers[i], x: coord[0], y: coord[1], name: markers[i].lastChild.lastChild.nodeValue};

			markers[i].lastChild.href = "JavaScript:map.center(" + coord[0] + ", " + coord[1] + ")";

			newLink = document.createElement("a");
			newLink.className = "edit";
			newLink.onclick = marker.editStart;
			newLink.appendChild( document.createTextNode( "Edit" ) );

			markers[i].insertBefore( newLink, markers[i].lastChild );
			marker.number++;
			}

		markers = map.element.getElementsByTagName("img");
		for ( var i = markers.length - 1; i > -1; i-- ) {
			marker.array[ markers[i].className ].mark = markers[i];

			markers[i].ondblclick = marker.remove;
			}
		},

	add: function ( x, y, name ) {
		var className = "marker_" + marker.number;
		if ( !name ) name = "Marker " + (marker.number + 1);

		var newMarker = document.createElement("img");

		newMarker.className = className;
		newMarker.src = "/map/marker.png";
		newMarker.alt = name;
		newMarker.title = name;
		newMarker.style.position = "absolute";
		newMarker.style.left = ( x - 15 ) + "px";
		newMarker.style.top = ( y - 32 ) + "px";

		map.element.appendChild( newMarker );
		newMarker.ondblclick = marker.remove;

		newItem = document.createElement("li");
		newItem.className = className;

		newLink = document.createElement("a");
		newLink.className = "edit";
		newLink.onclick = marker.editStart;
		newLink.appendChild( document.createTextNode( "Edit" ) );
		newItem.appendChild( newLink );

		newLink = document.createElement("a");
		newLink.href = "JavaScript:map.center(" + x + ", " + y + ")";
		newLink.appendChild( document.createTextNode( name ) );

		newItem.appendChild( newLink );

		document.getElementById( "marker_list" ).appendChild( newItem );
		
		marker.number++;

		marker.array[className] = {mark: newMarker, list: newItem, x: x, y: y, name: name};
		},

	editStart: function ( event ) {
		target = this.parentNode.lastChild;

		var name = target.lastChild.nodeValue;
		
		newInput = document.createElement( "input" );
		newInput.name = "marker_name";
		newInput.id = "marker_name";
		newInput.type = "text";
		newInput.className = "";
		newInput.value = name;
		newInput.onblur = marker.editStop;
		
		target.parentNode.replaceChild( newInput, target );

		marker.form.marker_name.focus();

		return false;
		},

	editStop: function ( ) {
		if ( marker.form.marker_name ) {
			var name = "Marker";
			var markerTarget = marker.form.marker_name.parentNode.className;
			if ( marker.form.marker_name.value ) name = marker.form.marker_name.value;
			marker.array[markerTarget].name = name;

			marker.array[markerTarget].mark.alt = name;
			marker.array[markerTarget].mark.title = name;

			newLink = document.createElement("a");
			newLink.href = "JavaScript:map.center(" + marker.array[markerTarget].x + ", " + marker.array[markerTarget].y + ")";
			newLink.appendChild( document.createTextNode( name ) );
	
			marker.form.marker_name.parentNode.replaceChild( newLink, marker.form.marker_name );			
			}
		},

	remove: function ( event ) {
		event = event || window.event;
		number = this.className;

		map.element.removeChild( marker.array[number].mark );
		marker.list.removeChild( marker.array[number].list );
		delete marker.array[number];

		return false;
		},

	updateLink: function ( event ) {
		var link = "";

		for ( var i in marker.array ) {
			link += encodeURIComponent( marker.array[i].name ) + ":" + marker.array[i].x + ":" + marker.array[i].y + ";";
			}

		focus_x = map.element.parentNode.clientWidth / 2 - map.element.offsetLeft;
		focus_y = map.element.parentNode.clientHeight / 2 - map.element.offsetTop;

		document.getElementById("map_link").firstChild.href = page_address + "?" + focus_x + ":" + focus_y + ";" + link;
		}
	}

var mouse = {
	position: {x: 0, y: 0},

	init: function () {
		if ( document.addEventListener ) {
			document.addEventListener( "mousemove", mouse.update, false );
			}
		else if( document.attachEvent ) {
			document.attachEvent( "onmousemove", mouse.update );
			}
		},

	update: function ( event ) {
		event = event || window.event;
		
		if (event.pageX || event.pageY) {
			mouse.position.x = event.pageX;
			mouse.position.y = event.pageY;
			}
		else {
			mouse.position.x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
			mouse.position.y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
			}
		}
	}

window.onload = function () {
	map.init();
	marker.init( window.location.search.substring(1) );
	mouse.init();
	}