// Global object to hold drag information.
var dragObj = new Object();

window.addEvent('domready', initDraggableMap);

function initDraggableMap() {
	
	if (Browser.Engine.trident4) 
		return;
	
	if (!$('ms-drag-map'))
		return;

	var node = $('ms-drag-map');
	if (node) {
		node.setStyle('z-index', 0);
		dragObj = node.makeDraggable( {
			onStart :dragStart,
			onComplete :dragComplete,
			preventDefault :true
		});
		node.setStyle('cursor', '-moz-grab');
		node.setStyle('cursor', 'grab');
		
		node.addEvent('dblclick', zoom);
		node.addEvent('contextmenu', function() {
			return false;
		});

		$('ms-zoom-inc').addEvent('click', zoom)
		$('ms-zoom-dec').addEvent('click', zoom)
	}
}

function zoom(event) {

	if (typeof hideDetails == "function")
		hideDetails();
	if (typeof hideElement == "function") 
		hideElement('pin-start');
	if (typeof hideElement == "function") 
		hideElement('pin-end');
	
	var value = ''

	if (event.target.parentNode.id.indexOf('dec') > 0)
		value += '&setzoom=dec';
	else if (event.rightClick)
		value += '&setzoom=dec';
	else
		value += '&setzoom=inc';

	var endPos = $('ms-drag-map').src.lastIndexOf("/map");
	var src = $('ms-drag-map').src.substr(0, endPos);

	// Daten des Kartenausschnitts von Server holen und setzen
	var urlStr = src + "/stadtplan;jsessionid=" + ms_session + "?";
	var data = "action=maponly&dpxx=0&dpxy=0" + value + "&r="
			+ (new Date()).getTime();
	var rq = new Request.JSON( {
		url :urlStr,
		method :'post',
		data :data,
		onSuccess :handleData
	});
	rq.send();

	$(document.body).setStyle('cursor', 'wait');
	return false;

};

function drag() {

	var offsetX = $('ms-drag-map').getLeft().toInt() - dragObj.elStartLeft;
	var offsetY = $('ms-drag-map').getTop().toInt() - dragObj.elStartTop;

	var y = $('details').getLeft().toInt() + offsetX;
	var x = $('details').getTop().toInt() + offsetY;

	$('details').setPosition( {
		x :x + "px",
		y :x + "px"
	});

}

function dragStart() {
	
	if (typeof hideDetails == "function")
		hideDetails();
	if (typeof hideElement == "function") 
		hideElement('pin-start');
	if (typeof hideElement == "function") 
		hideElement('pin-end');
	
	$('ms-drag-map').setStyle('cursor', '-moz-grabbing');
	$('ms-drag-map').setStyle('cursor', 'grabbing');

	var useMapID = $('ms-drag-map').get('useMap');
	useMapID = useMapID.replace('#', '');

	if ($(useMapID))
		$(useMapID).empty();

	dragObj.elStartLeft = $('ms-drag-map').getLeft().toInt();
	dragObj.elStartTop = $('ms-drag-map').getTop().toInt();

}

function dragComplete() {
	
	dragObj.detach();

	// console.log("complete left: %s, top: %s", $('ms-drag-map').getLeft(),
	// Offset der Kartenverschiebung ermitteln
	var offsetX = $('ms-drag-map').getLeft().toInt() - dragObj.elStartLeft;
	var offsetY = $('ms-drag-map').getTop().toInt() - dragObj.elStartTop;

	$('ms-drag-map').setStyle('cursor', 'wait');
	var endPos = $('ms-drag-map').src.lastIndexOf("/map");
	var src = $('ms-drag-map').src.substr(0, endPos);

	// Daten des Kartenausschnitts von Server holen und setzen
	var urlStr = src + "/stadtplan;jsessionid=" + ms_session + "?";
	var data = "action=maponly&dpxx=" + offsetX + "&dpxy=" + offsetY + "&r="
			+ (new Date()).getTime();
	var rq = new Request.JSON( {
		url :urlStr,
		method :'post',
		data :data,
		onSuccess :handleData
	});
	rq.send();
}

function handleData(data) {

	// Kartenknoten holen
	var node = $('ms-drag-map');

	// Imagemap der Karten
	// Inhalt loeschen und neu setzen
	var useMapID = $('ms-drag-map').get('useMap');
	useMapID = useMapID.replace('#', '');

	if ($(useMapID)) {
		$(useMapID).empty();
		$(useMapID).set('html', data.imagemap_navi_border,
				data.imagemap_msobjects);
		$(useMapID).name = 'map' + data.citymap_id;
		$(useMapID).id = 'map' + data.citymap_id;
	}

	// Karten austauschen
	var endPos = node.src.lastIndexOf("/map");
	var src = node.src.substr(0, endPos + 4);
	src += "?id=" + data.citymap_id + "#" + (new Date()).getTime();

	var newMapImg = new Element('img', {
		'src' :src,
		'styles' : {
			'z-index' :'0',
			'border' :'none',
			'position' :'absolute',
			'left' :'0',
			'top' :'0'
		}
	});

	// Karten img vollstaendig geladen einfuegen draggable machen
	newMapImg.onload = function() {
		this.replaces($('ms-drag-map'));
		this.id = 'ms-drag-map';
		this.useMap = '#map' + data.citymap_id;
		this.setStyle('cursor', 'default');
		$(document.body).setStyle('cursor', '');
		initDraggableMap();
	}

	// Uebersichtkarte austauschen
	node = $('ms-ovmap');

	if (node) {
		var endPos = node.src.indexOf("ovmap?");
		var src = node.src.substr(0, endPos + 6);
		src += "ovmap=" + data.ovmap_name + "&kox1=" + data.ovmap_x1 + "&koy1="
				+ data.ovmap_y1 + "&kox2=" + data.ovmap_x2 + "&koy2="
				+ data.ovmap_y2;

		var newOVMapImg = new Element('img', {
			'src' :src
		});

		newOVMapImg.onload = function() {
			this.replaces($('ms-ovmap'));
			this.id = 'ms-ovmap';
		}
	}

    // Links der einzelnen Zoomstufen 
	var zooms =  $$('img.zoom');
	zooms.each(function(item, index){
		item.setStyle('visibility', 'hidden');
	}); 
	$(data.zoom).setStyle('visibility', 'visible');

	
	// Navigationspfeile setzen
	$('ms-nav-west').set('html', data.pfeil_west);
	$('ms-nav-east').set('html', data.pfeil_ost);
	$('ms-nav-south').set('html', data.pfeil_sued);
	$('ms-nav-north').set('html', data.pfeil_nord);

	
	// Zoombuttons setzen (+ / -)
	if (data.is_first_zoom == 'true') {
		$('ms-zoom-dec').setStyle('display', 'none');
		$('ms-zoom-dec-ghost').setStyle('display', 'inline');
	} else {
		$('ms-zoom-dec').setStyle('display', 'inline');
		$('ms-zoom-dec-ghost').setStyle('display', 'none');
	}

	if (data.is_last_zoom == 'false') {
		$('ms-zoom-inc').setStyle('display', 'inline');
		$('ms-zoom-inc-ghost').setStyle('display', 'none');
	} else {
		$('ms-zoom-inc').setStyle('display', 'none');
		$('ms-zoom-inc-ghost').setStyle('display', 'inline');
	}

	// OEPNV Pins
	if (typeof showPin == "function")
		showPin(getCookie("id_origin"), 'pin-start');
	if (typeof showPin == "function") 
		 showPin(getCookie("id_destination"), 'pin-end');
	
	$('ms-drag-map').setStyle('cursor', 'default');
}