/*
 * $Id: Amesh.js,v 1.14 2007/07/10 02:40:56 ito Exp $
 * $Revision: 1.14 $
 */

function Amesh() {

	// element id attribute
	this.meshImageId = null;
	this.backgroundId = null;
	this.frontLayerId = null;
	this.datetimeId = null;
	this.explanationId = null;
	this.nowLoadingId = null;
	this.errorDisplayId = null;

	//
	this.imageList = [];

	this.regionMap = {};// 000 | 100
	this.areaMap   = {};// 000 - 013

	this.buttons   = {};
	this.localizeDateStrings = [];

	// field
	this.length = null;
	this.time = null;
	this.region = null;
	this.index = 0;
	this.area  = "000";

	this.hasNext = false;
	this.hasPrev = false;
	this.isSliderMove  = false;
	this.isImageLoaded = true;
	this.canAreaChange = true;
	this.enableLoadingStatus = true;

	this.meshImage = null;
	this.imageName = null;
	this.lastImageSrc = null;
	this.datetime = null;
	this.explanation = null;

	this.meshImagePath = "mesh";
	this.fixedMapPath  = "images/map";
	this.errorImage    = "images/spacer.gif";
	// option 

	// object conposition
	this.dynamicloadScript = null;
	this.dragLayer = null;
	this.slider    = null;
	this.animation = null;
	this.areaBoundary = null;
	this.reloadContent = null;

	this.lastTop  = null;
	this.lastLeft = null;
}

Amesh.prototype.setProperties = function (props) {
	for (var key in props) {
		if (typeof this[key] != "undefined") this[key] = props[key];
		else throw new Error("Amesh Invalid Property [" + key + "]");
	}
	return this;
};

Amesh.prototype.initialize = function () {
	if (this.slider)    this.slider.create();
	this.initializeDragLayer();
	var that = this;
	this.length = this.slider.max;
	this.slider.onmouseup = function (time) {that.changeSlider(time);};
	if (!this.meshImage) {
		this.meshImage = document.getElementById(this.meshImageId);
		Event.observe(this.meshImage, 'load', function (evt) {
			that.buttonStatusOnLoading(false);
			that.animation.isGoAhead = true;
			that.writeDatetime(that.imageName);
		}, false);
		Event.observe(this.meshImage, 'error', function (evt) {
			that.buttonStatusOnLoading(false);
			that.animation.isGoAhead = true;
			that.writeDatetime(that.imageName);
			that.doErrorDisplay(true);
		}, false);
	}
	if (!this.background)   this.background   = document.getElementById(this.backgroundId);
	if (!this.frontLayer)   this.frontLayer   = document.getElementById(this.frontLayerId);
	if (!this.datetime)     this.datetime     = document.getElementById(this.datetimeId);
	if (!this.explanation)  this.explanation  = document.getElementById(this.explanationId);
	if (!this.nowLoading)   this.nowLoading   = document.getElementById(this.nowLoadingId);
	if (!this.errorDisplay) this.errorDisplay = document.getElementById(this.errorDisplayId);

	this.initializeButtons();
	this.initializeAnimation();
	this.reloadContent.initialize();

	this.setAreaMap();
	if (this.dynamicloadScript) {
		this.dynamicloadScript.read();
		this.dynamicloadScript.setInterval();
	}
	this.slider.target.appendChild(this.slider.lane);
	this.slider.lane.appendChild(this.slider.knob);
};

Amesh.prototype.changeImage = function () {
	if (this.imageList.length <= 0) return;

	// 値を変更
	if (this.index <= 0) {
		this.hasNext = false;
		this.index = 0;
	} else {
		this.hasNext = true;
	}
	if (this.index >= this.length) {
		this.hasPrev = false;
		this.index = this.length;
	} else {
		this.hasPrev = true;
	}
	this.time = this.length - this.index;
	// not slider move
	if (!this.isSliderMove) {
		this.slider.setValue(this.time);
	}
	this.isSliderMove = false;
	// on animation
	if (!this.animation.isMove()) {
		this.animation.setValue(this.index);
	}

	var imageSrc = null;
	var imageName = this.imageList[this.index];
	if (imageName && imageName.match(/\d{12}/)) {
		imageSrc = this.meshImagePath + "/" + this.region + "/" + imageName + ".gif";
	} else {
		imageSrc = this.errorImage;
		this.doErrorDisplay(true);
	}
	if (this.lastImageSrc != imageSrc) {
		this.lastImageSrc = imageSrc;
		this.imageName = imageName;
		if (this.enableLoadingStatus) {
			this.isImageLoaded = false;
			this.animation.isGoAhead = false;
		} else {
			this.writeDatetime(imageName);
		}
		var that = this;
		CommonBase.delayedExecute(function () {
			that.buttonStatusOnLoading(!that.isImageLoaded);
		}, 300)

		this.doErrorDisplay(false);
		this.meshImage.src = imageSrc;
	}
	this.buttonStatusBackNext();
};

Amesh.prototype.restoreStates = function () {
	this.time = this.slider.lastV;
	this.index = this.length - this.time;
	this.slider.setValue(this.time);
};

Amesh.prototype.doErrorDisplay = function (isVisible) {
	if (isVisible) this.meshImage.src = this.errorImage;
	this.errorDisplay.style.display = isVisible ? "block" : "none";
};

Amesh.prototype.writeDatetime = function (datetime) {
	var dates = null;
	if (datetime && datetime.match(/\d{12}/)) {
		dates = datetime.match(/(\d{4})(\d\d)(\d\d)(\d\d)(\d\d)/);
	} else {
		dates = ["", "----", "--", "--", "--", "--"];
	}
	var localizeDateString
		= dates[1] + this.localizeDateStrings[0]
		+ dates[2] + this.localizeDateStrings[1]
		+ dates[3] + this.localizeDateStrings[2]
		+ dates[4] + this.localizeDateStrings[3]
		+ dates[5] + this.localizeDateStrings[4];
	this.datetime.innerHTML = localizeDateString;
};


Amesh.prototype.changeSlider = function (time) {
	this.isSliderMove = true;
	this.index = this.length - time;
	this.changeImage();
};
Amesh.prototype.changeTime = function (time) {
	this.index = this.length - time;
	this.changeImage();
};
Amesh.prototype.changeIndex = function (index) {
	this.index = index;
	this.changeImage();
};

Amesh.prototype.backImage = function (code) {
	this.changeIndex(this.index + 1);
};

Amesh.prototype.nextImage = function (code) {
	this.changeIndex(this.index - 1);
};

/*---------------------------------------------------------------------------*/
Amesh.prototype.initializeDragLayer = function () {
	if (this.areaBoundary) this.areaBoundary.create();
	this.areaBoundary.style.width   = parseInt(770 / this.areaBoundary.retioX) + "px";
	this.areaBoundary.style.height  = parseInt(480 / this.areaBoundary.retioY) + "px";
	var that = this;
	this.dragLayer.onMouseDragHandler = function (x, y) {
		that.setAreaBoundary(-x, -y);
	};
	if (this.dragLayer) this.dragLayer.create();
	var clickMap = document.getElementById(this.areaBoundary.clickMapId);
	var ab = this.areaBoundary.dragElement;
	// hide near pointer
	Event.observe(ab.parentNode, 'mouseover', function (evt) {
		ab.style.display = "none";
		Event.stop(evt);
	}, false);
	Event.observe(clickMap, 'mouseover', function (evt) {
		ab.style.display = "none";
		Event.stop(evt);
	}, false);
	Event.observe(document, 'mouseover', function (evt) {
		ab.style.display = "block";
	}, false);
};

/*---------------------------------------------------------------------------*/
Amesh.prototype.changeRegion = function (code) {
	if (!this.canAreaChange) return;
	if (this.region == code) return;
	this.region = code;
	this.setRegionMap();
};

Amesh.prototype.setRegionMap = function () {
	var regionMap = this.regionMap["region" + this.region];
	this.changeMapAttributes(regionMap);

	if (regionMap.hasChild) {
		this.buttons.wholeMap.doEnable();
		this.buttons.magnifyMap.doSelect();
		if (this.lastTop && this.lastLeft) {
			this.dragLayer.moveTo(this.lastLeft, this.lastTop);
			this.setAreaBoundary(-this.lastLeft, -this.lastTop);
		} else {
			this.dragLayer.moveTo(regionMap.left, regionMap.top);
			this.setAreaBoundary(-regionMap.left, -regionMap.top);
		}
		this.explanation.style.display = "block";
	} else {
		this.buttons.wholeMap.doSelect();
		this.buttons.magnifyMap.doEnable();
		this.lastLeft = parseInt(this.dragLayer.style.left);
		this.lastTop  = parseInt(this.dragLayer.style.top);
		this.dragLayer.moveTo(regionMap.left, regionMap.top);
		this.explanation.style.display = "none";
		this.setAreaBoundary(-100, -100);
	}
	this.dragLayer.enableDrag = regionMap.enableDrag;
};

Amesh.prototype.changeMapAttributes = function (regionMap) {
	this.changeImage();
	this.background.style.width  = regionMap.width  + "px";
	this.background.style.height = regionMap.height + "px";
	this.meshImage.style.width   = regionMap.width  + "px";
	this.meshImage.style.height  = regionMap.height + "px";
	this.frontLayer.style.width  = regionMap.width  + "px";
	this.frontLayer.style.height = regionMap.height + "px";
	this.dragLayer.style.width   = regionMap.width  + "px";
	this.dragLayer.style.height  = regionMap.height + "px";
	this.background.src = this.fixedMapPath + "/map" + this.region + ".jpg";
	this.frontLayer.src = this.fixedMapPath + "/msk" + this.region + ".png";
};

/*---------------------------------------------------------------------------*/
Amesh.prototype.changeArea = function (code) {
	if (!this.canAreaChange) return;
	this.area = code;
	this.setAreaMap();
}

Amesh.prototype.setAreaMap = function () {
	var areaMap = this.areaMap["area" + this.area];
	this.changeRegion(areaMap.parentMap);
	if (this.area == areaMap.parentMap) return;
	this.dragLayer.moveTo(-areaMap.left, -areaMap.top);
	this.setAreaBoundary(areaMap.left, areaMap.top)
}

Amesh.prototype.setAreaBoundary = function (x, y) {
	var bound = this.areaBoundary;
	x = parseInt(x / bound.retioX) - bound.offsetX;
	y = parseInt(y / bound.retioY) - bound.offsetY;
	bound.moveTo(x, y);
}

/*---------------------------------------------------------------------------*/
Amesh.prototype.initializeButtons = function () {
	var that = this;
	var buttons = this.buttons;
	buttons.recordBack.callback = function () {that.backImage()};
	buttons.recordNext.callback = function () {that.nextImage()};
	buttons.moviePlay.callback = function () {
		if (that.index == 0) that.animation.last();
		that.animation.backwards();
	};
	buttons.moviePause.callback = function () {
		that.animation.stop()
	};
	buttons.movieStop.callback = function () {
		that.animation.stop()
		that.changeIndex(0);
	};
	buttons.wholeMap.callback   = function () {that.changeRegion("000")};
	buttons.magnifyMap.callback = function () {that.changeRegion("100")};
	for (var key in buttons) {
		buttons[key].activate();
	}
};

Amesh.prototype.buttonStatusBackNext = function () {
	if (this.animation.isMove()) return;
	if (!this.isImageLoaded) return;
	var buttons = this.buttons;
	if (this.hasNext) {
		buttons.movieStop.doEnable();
		buttons.recordNext.doEnable();
		this.setSliderKnobImage(false);
	} else {
		buttons.movieStop.doDisable();
		buttons.recordNext.doDisable();
		this.setSliderKnobImage(true);
	}
	if (this.hasPrev) {
		buttons.recordBack.doEnable();
	} else {
		buttons.recordBack.doDisable();
	}
};

Amesh.prototype.setSliderKnobImage = function (isLatest) {
	var knob = this.slider.knob;
	knob.isLatest = isLatest;
	knob.knobMouseUp();
};

Amesh.prototype.buttonStatusOnMove = function (isMove) {
	this.slider.enableDrag = !isMove;
	// area select
	this.canAreaChange = this.region == "000" ? !isMove : true;
	var buttons = this.buttons;
	buttons.moviePlay.img.style.display  = isMove ? "none" : "inline";
	buttons.moviePause.img.style.display = isMove ? "inline" : "none";
	if (isMove) {
		buttons.recordBack.doDisable();
		buttons.recordNext.doDisable();
		buttons.movieStop.doEnable();
		buttons.moviePlay.img.src = buttons.moviePlay.enabledImg.src;
		this.setSliderKnobImage(false);
	} else {
		this.buttonStatusBackNext();
		buttons.moviePause.img.src = buttons.moviePlay.enabledImg.src;
		buttons.moviePlay.doEnable();
	}
};

Amesh.prototype.buttonStatusOnLoading = function (isLoading) {
	this.slider.enableDrag = !isLoading;
	this.isImageLoaded = !isLoading;
	var buttons = this.buttons;
	this.nowLoading.style.display = isLoading ? "block" : "none";
	if (this.isImageLoaded) {
		// 本来のボタンに
		this.buttonStatusBackNext();
		this.buttonStatusOnMove(this.animation.isMove());
	} else {
		// グレー化
		buttons.recordBack.doDisable();
		buttons.recordNext.doDisable();
		buttons.moviePlay.doDisable()
	}
};
/*---------------------------------------------------------------------------*/
Amesh.prototype.initializeAnimation = function () {
	var that = this;
	this.animation.setProperties({
		length : this.slider.max + 1,
		index  : this.index,
		callback : function (index) {
			that.index = index;
			that.changeImage();
		},
		moveStartCallback : function () {
			that.buttonStatusOnMove(true);
		},
		moveStopCallback  : function () {
			that.buttonStatusOnMove(false);
		}//,
	});
};

/*---------------------------------------------------------------------------*/
Amesh.prototype.addOnloadListener = function (value) {
	var that = this;
	var listener = function () {
		that.initialize();
		Event.stopObserving(window, 'load', listener, false);
	};
	Event.observe(window, 'load', listener, false);
	return this;
};