/*_____________________________________________________________

   sticky canvas (rev002_JAL_BRANCH1)
   Copyright (C) 2005 Business Architects Inc.
_______________________________________________________________*/

// require common.js


/* ------ Settings ------ */

var JLJS_STICKYCANVAS_BLOCK_CNAME  = 'stickyCanvas';
var JLJS_STICKYCANVAS_CANVAS_CNAME = 'stickyCanvas-canvas';
var JLJS_STICKYCANVAS_STICKY_CNAME = 'stickyCanvas-sticky';

var JLJS_STICKYCANVAS_CLOSEBTN = {
	'src'    : './img/icon_map-close_001.gif',
	'width'  : '12',
	'height' : '12',
	'alt'    : '',
	'title'  : 'CLOSE',
	'class'  : 'stickyCanvas-closeButton'
};

var JLJS_STICKYCANVAS_BGIMAGE = {
	'SC-CityInfo' : [
		{ 'normal' : './img/bg_map-ci_001_c.jpg', 'dim' : './img/bg_map-ci_001_g.jpg' }
	],
	'SC-WorldHeritage' : [
		{ 'normal' : './img/bg_map-wh_001_c.jpg', 'dim' : './img/bg_map-wh_001_g.jpg' },
		{ 'normal' : './img/bg_map-wh_002_c.jpg', 'dim' : './img/bg_map-wh_002_g.jpg' },
		{ 'normal' : './img/bg_map-wh_003_c.jpg', 'dim' : './img/bg_map-wh_003_g.jpg' }
	]
}

var JLJS_STICKYCANVAS_USEANIMATION      = true;
var JLJS_STICKYCANVAS_ANIMATION_TIMEOUT =  800; // [1/1000sec]





/* ------ JLJS_StickyCanvas_init() ------ */

function JLJS_StickyCanvas_init() {
	var query = location.search.substring(1);
	if (query == 'enable_animation')  JLJS_STICKYCANVAS_USEANIMATION = true;
	if (query == 'disable_animation') JLJS_STICKYCANVAS_USEANIMATION = false;

	JLJS.env.availAnonyFuncTimer = false;
	setTimeout(function() { JLJS.env.availAnonyFuncTimer = true }, 0);

	var str  = '';
	    str += '<style type="text/css" media="screen">';
	    str += 'div.' + JLJS_STICKYCANVAS_BLOCK_CNAME;
	    str += '{ background-image: none !important }';
	    str += 'div.' + JLJS_STICKYCANVAS_BLOCK_CNAME + ' ul.' + JLJS_STICKYCANVAS_STICKY_CNAME + ' li';
	    str += '{ position: absolute; margin: 0; padding: 0; visibility: hidden; }';
	    str += '</style>';
	document.write(str);

	JLJS.addOnload(JLJS_StickyCanvas_init2);
}



/* ------ JLJS_StickyCanvas_init2() ------ */

function JLJS_StickyCanvas_init2() {
	var blocks = JLJS.getElementsByClassName(JLJS_STICKYCANVAS_BLOCK_CNAME, 'div');
	for (var i = 0, n = blocks.length; i < n; i++) {
		var canvas = JLJS.getElementsByClassName(JLJS_STICKYCANVAS_CANVAS_CNAME, 'ul', blocks[i])[0];
		if (canvas) {
			var SC    = new JLJS_StickyCanvas(blocks[i], canvas)
			var areas = JLJS.getElementsByTagName('area', blocks[i]);
			for (var j = 0, m = areas.length; j < m; j++) {
				var sticky = JLJS.getAttr(areas[j], 'href');
				    sticky = (sticky) ? sticky.split('#')[1] : null;
				    sticky = (sticky) ? document.getElementById(sticky) : null;
				if (sticky) {
					SC.addSticky(new JLJS_StickyCanvas_Sticky(areas[j], sticky));
				}
			}
		}
	}
}



/* ------ Constructor : JLJS_StickyCanvas ------ */

function JLJS_StickyCanvas(block, canvas) {
	this.block    = block;
	this.canvas   = canvas;
	this.stickies = [];
	this.bgImages = {};
	this.setNode();
	this.setBgImage();
	this.setBgToNormal();
}
JLJS_StickyCanvas.prototype = {
	setNode : function() {
		this.block.__JLJS_StickyCanvas__  = this;
		this.canvas.__JLJS_StickyCanvas__ = this;
		JLJS.addEvent(this.canvas, 'click', this.hideStickies);
	},

	setBgImage : function() {
		var id = this.block.id;
		if (id && JLJS_STICKYCANVAS_BGIMAGE[id]) {
			var n = Math.floor(Math.random() * JLJS_STICKYCANVAS_BGIMAGE[id].length);
			for (var kind in JLJS_STICKYCANVAS_BGIMAGE[id][n]) {
				this.bgImages[kind] = JLJS.preloadImage(JLJS_STICKYCANVAS_BGIMAGE[id][n][kind]);
			}
		}
	},

	addSticky : function(sticky) {
		sticky.__JLJS_StickyCanvas__ = this;
		this.stickies[this.stickies.length] = sticky;
	},
	
	hideStickies : function(e) {
		if (typeof e == 'object') {
			var _this = e.currentTarget.__JLJS_StickyCanvas__;
			_this.preventBgChangeToNormal = false;
		} else {
			var _this = this;
		}
		for (var i = 0, n = _this.stickies.length; i < n; i++) {
			_this.stickies[i].hideSticky();
		}
	},
	
	setBgToNormal : function() {
		if (this.bgImages.normal && !this.preventBgChangeToNormal) {
			this.preventBgChangeToNormal = true;
			this.canvas.style.backgroundImage = 'url(' + this.bgImages.normal.src + ')';
		}
	},

	setBgToDim : function() {
		if (this.bgImages.dim) {
			this.preventBgChangeToNormal = false;
			this.canvas.style.backgroundImage = 'url(' + this.bgImages.dim.src + ')';
		}
	}
}



/* ------ Constructor : JLJS_StickyCanvas_Sticky ------ */

function JLJS_StickyCanvas_Sticky(button, sticky) {
	this.button = button;
	this.sticky = sticky;
	this.setCloseBtn();
	this.setNode();
}
JLJS_StickyCanvas_Sticky.prototype = {
	setCloseBtn : function() {
		this.closer = document.createElement('img');
		this.sticky.appendChild(this.closer);
		for (var prop in JLJS_STICKYCANVAS_CLOSEBTN) {
			JLJS.setAttr(this.closer, prop, JLJS_STICKYCANVAS_CLOSEBTN[prop]);
		}
		JLJS.addEvent(this.closer, 'click', this.hideSticky);
	},

	setNode : function() {
		this.button.__JLJS_StickyCanvas_Sticky__ = this;
		this.closer.__JLJS_StickyCanvas_Sticky__ = this;
		this.sticky.__JLJS_StickyCanvas_Sticky__ = this;
		this.sticky.setOpacity = function(opacity) {
			opacity = Math.round(opacity * 10) * 10;
			if (this.runtimeStyle) {
				this.runtimeStyle.filter  = 'Alpha(opacity=' + opacity + ')';
			} else {
				this.style.opacity = (opacity / 100);
			}
		};
		JLJS.setAttr(this.button, 'href', '#');
		JLJS.addEvent(this.button, 'click', this.showSticky);
		JLJS.addEvent(this.sticky, 'click', this.doNothing);
		this.sticky.style.visibility = 'hidden';
		if (JLJS.env.isSafari) {
			this.button.onclick = function() { return false }
		}
	},

	showSticky : function(e) {
		if (typeof e == 'object') {
			e.preventDefault();
			e.stopPropagation();
			var _this = e.currentTarget.__JLJS_StickyCanvas_Sticky__;
		} else {
			var _this = this;
		}
		if (_this.sticky.style.visibility == 'hidden') {
			_this.__JLJS_StickyCanvas__.preventBgChangeToNormal = true;
			_this.__JLJS_StickyCanvas__.hideStickies();
			_this.__JLJS_StickyCanvas__.setBgToDim();
			_this.setVisibility('visible');
		}
	},

	hideSticky : function(e) {
		if (typeof e == 'object') {
			e.preventDefault();
			e.stopPropagation();
			var _this = e.currentTarget.__JLJS_StickyCanvas_Sticky__;
		} else {
			var _this = this;
		}
		_this.__JLJS_StickyCanvas__.setBgToNormal();
		_this.setVisibility('hidden');
	},
	
	doNothing : function(e) {
		e.stopPropagation();
	},

	setVisibility : function(visibility) {
		var node = this.sticky;
		if (node.style.visibility == visibility) return;
		if (!JLJS_STICKYCANVAS_USEANIMATION || !JLJS.env.availAnonyFuncTimer) {
			node.style.visibility = visibility;
			node.style.marginTop  = '0';
			node.setOpacity(1.0);
			return;
		}
		if (typeof JLJS_STICKYCANVAS_ANIMATION_TIMESPEC == 'undefined') {
			JLJS_STICKYCANVAS_ANIMATION_TIMESPEC = 0;
		}
		var rtimer = new JLJS_Timer;
		var dist   = 30;
		var step   =  3;
		var cur    = (visibility == 'visible') ? -1 * dist :    0;
		var end    = (visibility == 'visible') ?         0 : dist;
		node.style.marginTop = cur + 'px';
		var atimer = setInterval(function() {
			cur += step;
			if (cur <= end) {
				var time = JLJS_STICKYCANVAS_ANIMATION_TIMESPEC || rtimer.getTime();
				if (time > JLJS_STICKYCANVAS_ANIMATION_TIMEOUT) {
					cur = end;
					JLJS_STICKYCANVAS_USEANIMATION = false;
				}
				node.style.marginTop  = cur + 'px';
				node.style.visibility = 'visible'
				node.setOpacity(1 - Math.abs(cur) / dist);
			} else {
				clearInterval(atimer);
				if (!JLJS_STICKYCANVAS_ANIMATION_TIMESPEC) {
					JLJS_STICKYCANVAS_ANIMATION_TIMESPEC = rtimer.getTime();
				}
				node.style.marginTop  = end + 'px';
				node.style.visibility = visibility;
				node.setOpacity((visibility == 'visible') ? '1.0' : '0');
			}
		}, 1);
	}
}



/* ------ Constructor : JLJS_Timer ------ */

function JLJS_Timer() {
	this.startTime = (new Date()).getTime();
	this.getTime   = function() { return (new Date()).getTime() - this.startTime }
	this.getSecond = function() { return this.getTime() / 1000 }
}





/* ------ main ------ */

if (typeof JLJS == 'object' && JLJS.env.DOMok) {
	JLJS_StickyCanvas_init();
}