/*
 * COPYRIGHT CR-CORPORATION 2010
 * CJMFC RAEMAEKERS
 * VERSION 1.0 - 06.10.2010
 * Warning: unauthorized copying of source code is a crime!
 */

var map;

function createMap(divMap, baseDir, baseFile, fileExtension, total_tilesX, total_tilesY, window_tilesX, window_tilesY, tileWidth, tileHeight, title) {
	map = new CRMapView(divMap, baseDir, baseFile, fileExtension, 
		total_tilesX, total_tilesY, window_tilesX, window_tilesY, tileWidth, tileHeight, title);
	map.createDarkBackground();
	map.draw();
}

function CRMapView(divMap, baseDir, baseFile, fileExtension, total_tilesX, total_tilesY, window_tilesX, window_tilesY, tileWidth, tileHeight, title) {
 
	/* constructor code */		
	
	this.basePath = baseDir + '/' + baseFile;
	this.fileExtension = fileExtension;
	this.drag = false;
	this.tilesX = total_tilesX;	// total number of tiles in x direction of map
	this.tilesY = total_tilesY;	// total number of tiles in y direction of map
	this.currentX = 0;
	this.currentY = 0;
	this.divMap = document.getElementById(divMap);
	this.tileWidth  = tileWidth;
	this.tileHeight = tileHeight;
	this.tilesHorizontal = window_tilesX;	// number of tiles in x direction in window
	this.tilesVertical   = window_tilesY;	// number of tiles in y direction in window
	this.title = title;
	this.backgroundDiv = null;
	
	var windowHeight = window.innerHeight ? 
							window.innerHeight : 
							document.documentElement.clientHeight ? 
							document.documentElement.clientHeight : 
							document.body.clientHeight;

	/* check on navigator window being not high enough to show controls */	
	while ((windowHeight < (this.tileHeight * this.tilesVertical)) && (this.tilesVertical > 1)) {
 		this.tilesVertical--;
	}

	this.windowWidth  = this.tilesHorizontal * this.tileWidth;
	this.windowHeight = this.tilesVertical   * this.tileHeight;

	/* end of constructor code - member functions following */
	
	this.createDarkBackground = function() {
		bodyElement = document.getElementsByTagName("body")[0];
		divElement = document.createElement('div');
		bodyElement.appendChild(divElement);
        divElement.id = "divDarkBackground";
		divElement.style.position = "fixed";
        divElement.style.top = "0px";
        divElement.style.left = "0px";
        divElement.style.overflow = "hidden";
        divElement.style.width = "100%";
        divElement.style.height = "100%";
        divElement.style.backgroundColor = "black";
        divElement.style.opacity = "0.7";
        divElement.style.filter = "alpha(opacity = 70)"        
	    this.backgroundDiv = document.getElementById("divDarkBackground");
	}
	
	this.goLeft = function() {		
	 	if (this.currentX > 0) {
			this.currentX--;
			this.draw();
		}		
	}

	this.goRight = function() {
		if (this.currentX < (this.tilesX - this.tilesHorizontal)) {
			this.currentX++;
			this.draw();
		}						
	}
	
	this.goUp = function() {
		if (this.currentY > 0) {
			this.currentY--;
			this.draw();
		}
	}
	
	this.goDown = function() {
		if (this.currentY < (this.tilesY - this.tilesVertical)) {
			this.currentY++;
			this.draw();
		}
	}
	
	this.goClose = function() {
		this.divMap.innerHTML = "";
		this.divMap.style.border = "none";
		this.divMap.style.width = "0px";
		this.divMap.style.height = "0px";
		
		if (this.backgroundDiv != null) {
			bodyElement = document.getElementsByTagName("body")[0];
			bodyElement.removeChild(this.backgroundDiv);			
		}
	}

	this.draw = function() {
		// clear
		this.divMap.innerHTML = "";	
		this.divMap.style.border = "1px solid black";
		this.divMap.style.top = "50%";
		this.divMap.style.left = "50%";		
		this.divMap.style.width = this.windowWidth + "px";
		this.divMap.style.height = this.windowHeight + "px";
		this.divMap.style.marginLeft = "-" + (this.windowWidth / 2) + "px";
		this.divMap.style.marginTop  = "-" + (this.windowHeight / 2) + "px";
		this.divMap.style.position = "fixed";
		this.divMap.style.backgroundColor = "white";
		this.divMap.style.overflow = "hidden";
		this.divMap.style.zIndex = "50";
		
		// build new map view
		outputHTML = "";
		for (y = 0; y < this.tilesVertical; y++) {
		 
		 	startX = (this.currentY + y) * this.tilesX + this.currentX;
		 	
			for (x = 0; x < this.tilesHorizontal; x++) {
				outputHTML += ('<div style="background-image: url(\'' + this.basePath + (startX + x) + '.' + this.fileExtension + '\');' + 
				   'background-repeat: no-repeat; width: ' + this.tileWidth + 'px; height: ' + this.tileHeight + 'px; float: left;"></div>');
			}
		
			outputHTML += '<br>';			
		}

		// toolbox
		outputHTML += ('<div style="position: relative; opacity: 0.7; filter: alpha(opacity = 70); ' + 
								   'width: ' + this.windowWidth + 'px; ' +
								   'height: 25px; top: -25px; left: 0px; float: left; color: black;">' + 
						'<table width="100%" style="border: none"><tr><td valign="top" style="background-color: gray;' + 
							'font-weight: bold; font-size: 14pt; font-family: Calibri;">' + this.title + '</td>' +
						'<td align="right" style="background-color: gray;">' +
			 				'<a href="javascript:map.goLeft()"  style="text-decoration: none;"><img src="mapview/left.png"  border="0"></a> ' +
							'<a href="javascript:map.goUp()"    style="text-decoration: none;"><img src="mapview/up.png"    border="0"></a> ' +
							'<a href="javascript:map.goDown()"  style="text-decoration: none;"><img src="mapview/down.png"  border="0"></a> ' + 
						  	'<a href="javascript:map.goRight()" style="text-decoration: none;"><img src="mapview/right.png" border="0"></a> ' +					
							'<a href="javascript:map.goClose()" style="text-decoration: none;"><img src="mapview/close.png" border="0"></a>'  +	  	
					  	'</td></tr></table>' +
					   '</div>');

		this.divMap.innerHTML = outputHTML;			
	}
	
}