// JavaScript Document

// Updated: 2007-12-12

function GabeInterMap(aDiv, aUrl) {
	
	this.setDiv(aDiv);
	this.createImage(aUrl);
	this.hiddenPins = false;
	this.pins = [];
	
	var thisObj = this;
	this.image.onload = function() {
		thisObj.createControls();
		thisObj.div.style.height = thisObj.image.height + "px";
	}
}

GabeInterMap.prototype.createControls = function() {
	
	var top = this.image.height - 30;
	var left = this.image.width - 130;
	
	var pinsButton = document.createElement("input");
	pinsButton.type = "button";
	pinsButton.value = "Hide markers";
	pinsButton.style.position = "absolute";
	pinsButton.style.left = left + "px";
	pinsButton.style.top = top + "px";
	
	var thisObj = this;
	
	pinsButton.onclick = function(e) {
		if(thisObj.hiddenPins == false) {
			pinsButton.value = "Show markers";
			thisObj.hidePins();
		} else {
			pinsButton.value = "Hide markers";
			thisObj.showPins();
		}	
	}
	
	this.div.appendChild(pinsButton);
}

GabeInterMap.prototype.setClickListener = function(listener) {
	this.listener = listener;
	this.listener.setInterMap(this);
}

GabeInterMap.prototype.createImage = function(aUrl) {
	this.image = document.createElement("img");
	this.image.src = aUrl;
	this.image.style.position = "absolute";
	this.image.style.top = "0px";
	this.image.style.left = "0px";
	this.div.appendChild(this.image);
	var thisObj = this;
	this.image.onclick = function(e) {
		e = GabeUtil.getEvent(e);
		var pos = thisObj.getMousePos(e);
		if(typeof thisObj.listener != 'undefined') {
			thisObj.listener.update(pos.x, pos.y, pos.x, pos.y);	
		}
	}
}

GabeInterMap.prototype.addPin = function(pin) {
	this.pins[this.pins.length] = pin;
	pin.setInterMap(this);
}

GabeInterMap.prototype.hidePins = function() {
	this.hiddenPins = true;
	var len = this.pins.length;
	for(var i = 0; i < len; i++) {
		this.pins[i].image.style.display = "none";	
	}
}

GabeInterMap.prototype.showPins = function() {
	this.hiddenPins = false;
	var len = this.pins.length;
	for(var i = 0; i < len; i++) {
		this.pins[i].image.style.display = "block";
	}
}

GabeInterMap.prototype.setDiv = function(aDiv) {
	this.div = aDiv;
	this.div.style.position = "relative";
}

GabeInterMap.prototype.getMousePos = function(e) {
	var pos = GabeUtil.getMousePos(e);
	var parent = this.image.parentNode;
	var off = GabeUtil.getElementPosition(this.div);
	pos.x = pos.x - off.x;
	pos.y = pos.y - off.y;
	return pos;
}


function GabeInterMapPin(aUrl, left, top, title, description) {
	var thisObj = this;
	
	this.defaultInfoWidth = 350;
	this.defaultInfoHeight = 300;
	
	this.createImage(aUrl);
	
	this.infoDiv = document.createElement("div");
	this.infoDiv.style.width = this.defaultInfoWidth + "px";
	this.infoDiv.style.height = this.defaultInfoHeight + "px";
	this.infoDiv.style.overflow = "auto";
	this.infoDiv.style.padding = "5px";
	this.infoDiv.style.backgroundColor = "#ffffff";
	this.infoDiv.style.border = "#000000 2px solid";
	this.infoDiv.style.textAlign = "left";
	this.infoDiv.innerHTML = "<b>" + title + "</b><br />" + description + "<br />";
	this.infoDiv.style.zIndex = 10;
	this.infoDiv.style.position = "absolute";
	
	this.setVisible(false);
	
	
	var intervalId = null;
	
	var currEvent = null;
	
	var makeVisible = function() {
		thisObj.setVisible(true);
	}
	
	var makeInvisible = function() {
		thisObj.setVisible(false);	
	}
	
	this.image.onmouseover = function(e) {
		intervalId = setTimeout(makeVisible, 500);
	}
	
	this.image.onmouseout = function(e) {
		if(thisObj.visible == true) {
			intervalId = setTimeout(makeInvisible, 500);
		} else {
			clearTimeout(intervalId);
		}
	}
	
	this.infoDiv.onmouseover = function(e) {
		thisObj.setVisible(true);
		clearTimeout(intervalId);
	}
	
	this.infoDiv.onmouseout = function(e) {
		thisObj.setVisible(false);	
	}
	
	var movePin = function(e) {
		e = GabeUtil.getEvent(e);
		var mPos = GabeUtil.getMousePos(e);
		var ePos = GabeUtil.getElementPosition(thisObj.map.div);
		thisObj.setLeft(mPos.x - ePos.x);
		thisObj.setTop(mPos.y - ePos.y);
	}
	
	var stopMove = function(e) {
		if(typeof thisObj.listener != 'undefined') {
			thisObj.listener.update(thisObj);
		}
		GabeUtil.removeEventListener(document.body, "mousemove", movePin, false);
		GabeUtil.removeEventListener(thisObj.image, "mouseup", stopMove, false);
	}
	
	var startMove = function(e) {
		makeInvisible();
		GabeUtil.addEventListener(document.body, "mousemove", movePin, false);
		GabeUtil.addEventListener(thisObj.image, "mouseup", stopMove, false);
	}
	
	GabeUtil.addEventListener(this.image, "mousedown", startMove, false);
	
	this.setLeft(left);
	this.setTop(top);
	
}

GabeInterMapPin.prototype.setListener = function(listener) {
	this.listener = listener;
}

GabeInterMapPin.prototype.setLeft = function(left) {
	
	this.left = left;
	
	var divLeft = this.left;
	
	if(this.left > (this.defaultInfoWidth + 30)) {
		divLeft = this.left - this.defaultInfoWidth - 30;
	}
	
	this.infoDiv.style.left = (divLeft + 5) + "px";
	this.image.style.left = (this.left - 10) + "px";

}

GabeInterMapPin.prototype.setTop = function(top) {
	
	this.top = top;
	
	var divTop = this.top;
	
	if(this.top > (this.defaultInfoHeight + 30)) {
		divTop = this.top - this.defaultInfoHeight - 40;
	}
	
	this.infoDiv.style.top = divTop + "px";
	this.image.style.top = (this.top - 28) + "px";
	
}

GabeInterMapPin.prototype.setBackground = function(bg) {
	if(bg.length == 6) {
		this.infoDiv.style.backgroundColor = "#" + bg;	
	} else {
		this.infoDiv.style.backgroundImage = "url(" + bg + ")";
	}
}

GabeInterMapPin.prototype.setVisible = function(bool) {
	this.visible = bool;
	if(bool) {
		this.infoDiv.style.display = "block";
	} else {
		this.infoDiv.style.display = "none";
		//this.infoDiv.style.width = "10px";
	}
}

GabeInterMapPin.prototype.expand = function() {
	
	var thisObj = this;
	this.infoDiv.style.width = "10px";
	var intId = null;
	var newWidth = null;
	
	var expand = function() {
		newWidth = parseInt(thisObj.infoDiv.style.width) + 40;
		if(newWidth >= 400) {
			clearInterval(intId);
			return;
		}
		thisObj.infoDiv.style.width = newWidth + "px";
	}
	
	intId = setInterval(expand, 5);
	
}



GabeInterMapPin.prototype.createImage = function(aUrl) {
	this.image = document.createElement("img");
	this.image.src = aUrl;
	this.image.style.position = "absolute";
	this.image.style.width = '17px';
	
	var disable = function(e) {
		e = GabeUtil.getEvent(e);
		e.preventDefault();
	}
	
	GabeUtil.addEventListener(this.image, "mouseover", disable, false);
	GabeUtil.addEventListener(this.image, "mousedown", disable, false);
	GabeUtil.addEventListener(this.image, "mousemove", disable, false);
}

GabeInterMapPin.prototype.setInterMap = function(map) {
	this.map = map;
	this.map.div.appendChild(this.image);
	this.map.div.appendChild(this.infoDiv);
}

function GabeInterMapPinListener(afunc) {
	this.callback = afunc;
}

GabeInterMapPinListener.prototype.update = function(pin) {
	this.callback(pin);
}	

function GabeInterMapListener(aUrl) {
	
	var thisObj = this;
	
	this.image = document.createElement("img");
	this.image.style.position = "absolute";
	this.image.style.display = "none";
	this.image.src = aUrl;
	
	this.map = null;
	this.div = document.createElement("div");
	with(this.div.style) {
		width = "400px";
		textAlign = "left";
		position = "absolute";
		border = "#000000 2px solid";
		backgroundColor = "#ffffff";
		display = "none";
		padding = "3px";
		filter = "alpha(opacity=90)";
		opacity = .90;
		zIndex = 10;
	}
	this.closeButton = document.createElement("input");
	this.closeButton.type = "button";
	this.closeButton.value = "Close";
	this.closeButton.onclick = function(e) {
		thisObj.setVisible(false);
	}
}

GabeInterMapListener.prototype.setVisible = function(bool) {
	if(!bool) {
		this.div.style.display = "none";
		//this.image.style.display = "none";
	} else {
		this.div.style.zIndex = 10;
		this.div.style.display = "block";
		//this.image.style.display = "block";	
	}	 
}

GabeInterMapListener.prototype.setInterMap = function(map) {
	this.map = map;
	this.map.div.appendChild(this.div);
	this.map.div.appendChild(this.image);
	return true;
}

GabeInterMapListener.prototype.update = function(x, y, mx, my) {
	this.x = x;
	this.y = y;
	this.div.style.left = mx + "px";
	this.div.style.top = my + "px";
	this.div.style.display = "block";
	this.image.style.left = (mx - 15) + "px";
	this.image.style.top = (my - 15) + "px";
	//this.div.innerHTML = this.content.replace("{x}", x);
	//this.div.innerHTML = this.div.innerHTML.replace("{y}", y);
	this.div.innerHTML = "Add a new Location to this area in the map:<br /><form method='post' action='addWord.php' enctype='multipart/form-data'><input type='hidden' name='category' value='location' /><input type='hidden' name='xspace' value='" + x + "' /><input type='hidden' name='yspace' value='" + y + "' /><b>Location name:</b><br /><input type='text' name='word' /><br /><b>Description:</b><br /><textarea name='description' cols='40' rows='7'></textarea><br /><b>Location photo:</b><br /><input type='file' name='file' /><br /><input type='submit' name='addWord' value='Add Location!' /></form>";
	this.div.appendChild(this.closeButton);
	this.setVisible(true);
}

GabeInterMapListener.prototype.setContent = function(content) {
	this.content = content;
	this.div.innerHTML = content;	
}