// Global object to hold drag information.
var dragObj = new Object();
window.addEvent('domready', initDraggableMap);


function initDraggableMap() {

/*	
	onStart: function() {console.log("start left: %s, top: %s", this.getLeft(), this.getTop());}.bind($('ms-drag-map')),
	onDrag: function() {console.log("drag start left: %s, top: %s", this.getLeft(), this.getTop());}.bind($('ms-drag-map')),
	onComplete: function() {console.log("complete left: %s, top: %s", this.getLeft(), this.getTop());}.bind($('ms-drag-map')),
*/

  if (!$('ms-drag-map')) return; 
	
  var node = $('ms-drag-map');
  if(node) {
	  node.setStyle('z-index', 0);
	  node.makeDraggable({
		onStart: dragStart,
		onComplete: dragComplete,
		preventDefault: true
	  });
	  node.setStyle('cursor', 'move');
	  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){
	
	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', 'progress');
	
	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() {
	// console.log("start left: %s, top: %s", $('ms-drag-map').getLeft(), $('ms-drag-map').getTop());
    if (typeof hideDetails == "function") hideDetails();

	$('ms-drag-map').setStyle('cursor', 'move');
	
	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() {
	//console.log("complete left: %s, top: %s", $('ms-drag-map').getLeft(), $('ms-drag-map').getTop());

 	// 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', 'progress');
	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', 'move');
		$(document.body).setStyle('cursor', '');
	  	initDraggableMap();
	}


	// Uebersichtkarte austauschen
	node = $('ms-ovmap');
	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';
	}


	// 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);

	
    // Zoombottons
	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');
	}

}