function MDVMapControl(mdvMap, options) {
 	if (!mdvMap)
 		return;

	// Name of gadget
 	this.name = 'MapControl';
 	// Reference to mdvMap object
 	this.mdvMap = mdvMap;
 	
 	this.posLeft = '5px';
 	this.posTop = '220px';

	// Store origin values
	this.origin = null;
	
	this.ctrlImage = null;
	this.overImg = null;

	//map animation
	this.timer = null;
	this.moveSteps = 0;
	this.moveFullStep = null;
	
	// value to calculate moving speed
	// smaller is faster
	this.coordDelta = 20;
	
	// Images
 	this.images = new Array();
 	this.images['nvg_all'] = new Image();
 	this.images['nvg_north'] = new Image();
 	this.images['nvg_east'] = new Image();
 	this.images['nvg_south'] = new Image();
 	this.images['nvg_west'] = new Image();
 	
 	
 	// Map Control Bounding Box
 	this.mapControl = null;

 	// Container for Arrows
 	this.arrowContainer = null;
 	
 	this.mdvMap.registerGadget(this);

	// Inherit from MDVGadgetBase
    for (var method in MDVGadgetBase.prototype) {

        if (!MDVMapControl.prototype[method])
            MDVMapControl.prototype[method] = MDVGadgetBase.prototype[method];

    }
    
    //override defaults
	if (options !== null) {
		for (var setting in options) {
			if (this[setting]) {
				this[setting] = options[setting];
			}
		}	
	}

    this.mdvMap.events.registerEvent(MDVEvent_INITIALISED, this, this.execute);
  }

  MDVMapControl.prototype.preloadImgs = function () {

  	var ipath = 'images/';
  	if (this.mdvMap.config.get('imagePath'))
  		ipath = this.mdvMap.config.get('imagePath');

  	var imgPath = ipath + 'navigator/';
	
	var imgNum = 5;  
	
	for (var i in this.images) if (this.images.hasOwnProperty(i)) {
		
		// move imgs out of sight
		mdvLib.style([this.images[i]], {
			position: 'absolute',
			zIndex: 205,
			top: '0px',
			left: '-2000px'
		});
		
		this.arrowContainer.appendChild(this.images[i]);
		
		// add IE 5.5 PNG support after last img has finished loading
		this.images[i].onload = function() {
 			imgNum--;
 			if (imgNum === 0) {
 				mdvLib.correctPNG(this.mdvMap, [this.images['nvg_all'], this.images['nvg_north'],
								this.images['nvg_east'], this.images['nvg_south'],
								this.images['nvg_west']]);
 			}
 		}.bind(this);
 	}
	
	// assign src afterwards to avoid caching bug
	this.images['nvg_all'].src	 			= imgPath + 'nvg_all.png';
 	this.images['nvg_north'].src 			= imgPath + 'nvg_north.png';
 	this.images['nvg_east'].src		 		= imgPath + 'nvg_east.png';
 	this.images['nvg_south'].src 			= imgPath + 'nvg_south.png';
 	this.images['nvg_west'].src 			= imgPath + 'nvg_west.png';
	
	//move start img back in 	
 	this.images['nvg_all'].style.left = '0px';
 	 
  };
  
  MDVMapControl.prototype.execute = function () {
  
  	this.mapControl = this.createDiv();
  	this.mapControl.className = 'MDVMapControl';

  	this.mdvMap.viewport.appendChild(this.mapControl);

  	this.arrowContainer = this.createDiv();
  	
  	mdvLib.style([this.arrowContainer], {
  		position: 'absolute',
  		zIndex: 200,
  		left: this.posLeft,
  		top: this.posTop
  	});
  	
  	this.mapControl.appendChild(this.arrowContainer);
  		
  	this.preloadImgs();

  	this.origin = new MDVCoordinates(this.mdvMap.config.get('mapName'),
  	parseInt(this.mdvMap.config.get('xCenterReal')),
  	parseInt(this.mdvMap.config.get('yCenterReal')));

  
  	this.populateContainers();

  	this.update();
  };
  

  MDVMapControl.prototype.populateContainers = function () {
  	
  	if (!this.arrowContainer) {
  		return false;
  	}
  	
  	// create transparent img that contains the img map
  	// width/height is hardcoded!
  	
	var img = document.createElement('img');
		img.setAttribute('src', this.mdvMap.transparent.src);
		img.setAttribute('useMap','#nvg_map', 0);
		img.setAttribute('id','nvg_all');
		img.setAttribute('width', 55);
		img.setAttribute('height', 53);
		img.setAttribute('border','0');
		img.style.zIndex = 206;
		img.style.position = 'absolute';
		img.style.left = '0px';
		img.style.top = '0px';
		
	this.arrowContainer.appendChild(img); 
  	this.ctrlImage = this.images['nvg_all'];
  	
  	// img map area definitions
  	var areas = {};
  	
	  	areas.north = {
	  		id:					'nvg_map_north',
	  		coords:				'15,11,27,0,40,12,32,12,32,19,23,19,23,11',
	  		title:				'go north',
	  		moveHandler:		function() {
						  			this.move(this.goNorth);
						  		}.bind(this),
	  		mouseoverHandler:	function() {
	  								this.ctrlImage.style.left = '-2000px';
									this.overImg = this.images['nvg_north'];
									this.overImg.style.left = '0px';
								}.bind(this) 	
	  	};
	  	
	  	areas.east = {
	  		id:				'nvg_map_east',
	  		coords:			'41,13,52,24,41,37,41,28,32,28,32,22,41,21',
	  		title:			'go east',
	  		moveHandler:	function() {
					  			this.move(this.goEast);
					  		}.bind(this),
	  		mouseoverHandler:	function() {
	  								this.ctrlImage.style.left = '-2000px';
									this.overImg = this.images['nvg_east'];
									this.overImg.style.left = '0px';
								}.bind(this)
	  	};
	  	
	  	areas.south = {
	  		id:				'nvg_map_south',
	  		coords:			'23,30,23,38,15,38,26,50,39,39,32,38,31,30',
	  		title:			'go south',
	  		moveHandler:	function() {
					  			this.move(this.goSouth);
					  		}.bind(this),
	  		mouseoverHandler:	function() {
	  								this.ctrlImage.style.left = '-2000px';
									this.overImg = this.images['nvg_south'];
									this.overImg.style.left = '0px';
								}.bind(this)
	  	};
	  	
	  	areas.west = {
	  		id:				'nvg_map_west',
	  		coords:			'13,13,1,26,13,36,14,29,22,28,21,22,14,20',
	  		title:			'go west',
	  		moveHandler:	function() {
					  			this.move(this.goWest);
					  		}.bind(this),
	  		mouseoverHandler:	function() {
	  								this.ctrlImage.style.left = '-2000px';
									this.overImg = this.images['nvg_west'];
									this.overImg.style.left = '0px';
								}.bind(this)
	  	};
  
  	
  	// create the img map
  	var map = document.createElement('map');
		map.setAttribute('name', 'nvg_map');
		map.setAttribute('id', 'nvg_map');
	
	// create its areas
	for (var a in areas) {
	
		var area = document.createElement('area');
			area.setAttribute('id', areas[a].id);
			area.setAttribute('shape', 'poly');
			area.setAttribute('coords', areas[a].coords);
			area.title = areas[a].title;
			area.onmousedown = areas[a].moveHandler;
			area.onmouseup = this.clear.bind(this);
			area.onmouseover = areas[a].mouseoverHandler;
			area.onmouseout =	function() {
	  								this.ctrlImage.style.left = '0px';
									this.overImg.style.left = '-2000px';
									//this.overImg = null;
									this.clear();
								}.bind(this)	
								
		map.appendChild(area);		
	}
	
  	this.arrowContainer.appendChild(map);

  	return true;
  };
  
  MDVMapControl.prototype.move = function(funcRef) {
 	
 	if (funcRef === null) {
 		return;
 	}
 	
 	this.moveFullStep = funcRef;
 	
 	this.timer = setInterval(function() {
					this.moveSteps++;
					funcRef.bind(this)();
					}.bind(this), 20);
  };
  
  MDVMapControl.prototype.clear = function() {
 
 	clearInterval(this.timer);
  	
  	// if the user only clicked do a full move 
  	// int value corresponds to timer interval
  	
  	if(this.moveSteps < 10) {
  		if(typeof this.moveFullStep === 'function') {
  			this.moveFullStep(true);
  		}
  	}
  	
  	// reset props
  	
  	this.moveSteps = 0;
  	this.moveFullStep = null;
	this.mdvMap.update();
	
	return false;
	
  };
  
  MDVMapControl.prototype.createDiv = function () {
  	var newDiv = document.createElement('div');
  	return newDiv;
  };  

  MDVMapControl.prototype.update = function() {
  	return true;
  };
  
  function MDVMapControl_onmouseover(e) {
  	return true;
  }

  function MDVMapControl_onmouseout(e) {
  	return true;
  }

  function MDVMapControl_onclick(e) {
  	return true;
  }
  
 
  MDVMapControl.prototype.goEast = function() {
  	
  	var delta;
  	
  	if(arguments.length === 1) {
  		delta = this.mdvMap.viewportRealWidth * 0.6;
  	} else {
  		delta = parseInt((this.mdvMap.tileRealWidth/this.coordDelta), 10);
  	}
  	
  	var newCoords = new MDVCoordinates(this.mdvMap.getCentre().mapName,
  		this.mdvMap.getCentre().x,
  		this.mdvMap.getCentre().y);

  	newCoords.x = newCoords.x + Math.floor(delta + 0.5);
	
	this.mdvMap.moveTo(newCoords);
  
	return true;
  };

  MDVMapControl.prototype.goWest = function() {
  	
  	var delta;
  	
  	if(arguments.length === 1) {
  		delta = this.mdvMap.viewportRealWidth * 0.6;
  	} else {
  		delta = parseInt((this.mdvMap.tileRealWidth/this.coordDelta), 10);
  	}

  	var newCoords = new MDVCoordinates(this.mdvMap.getCentre().mapName,
  		this.mdvMap.getCentre().x,
  		this.mdvMap.getCentre().y);

  	newCoords.x = newCoords.x - Math.floor(delta + 0.5);

  	this.mdvMap.moveTo(newCoords);

  	return true;
  };

  MDVMapControl.prototype.goNorth = function() {
  	
  	var delta;
  	
  	if(arguments.length === 1) {
  		delta = this.mdvMap.viewportRealHeight * 0.6;
  	} else {
  		delta = parseInt((this.mdvMap.tileRealHeight/this.coordDelta), 10);
  	}
	
	var newCoords = new MDVCoordinates(this.mdvMap.getCentre().mapName,
  		this.mdvMap.getCentre().x,
  		this.mdvMap.getCentre().y);
	
	
  	newCoords.y = newCoords.y - Math.floor(delta + 0.5);

  	this.mdvMap.moveTo(newCoords);

  	return true;
  };

  MDVMapControl.prototype.goSouth = function() {
  	
  	var delta;
  	
  	if(arguments.length === 1) {
  		delta = this.mdvMap.viewportRealHeight * 0.6;
  	} else {
  		delta = parseInt((this.mdvMap.tileRealHeight/this.coordDelta), 10);
  	}

  	var newCoords = new MDVCoordinates(this.mdvMap.getCentre().mapName,
  		this.mdvMap.getCentre().x,
  		this.mdvMap.getCentre().y);

  	newCoords.y = newCoords.y + Math.floor(delta + 0.5);

  	this.mdvMap.moveTo(newCoords);

  	return true;
  };