var _SLIDE_AUTO_START_ = false;
var _SLIDE_EFFECT_ = 0;
var _SLIDE_FADE_SPEED_ = 40;	// [ms]
var _SLIDE_FADE_DELTA_ = 0.10; 
var _SLIDE_INTERVAL_ = 6;	// [sec]
var _SLIDE_NAV_FADE_ = 5000; 	// [ms]
var _SLIDE_DESCR_FADE_ = 7000; 	// [ms]
var _SLIDE_MASK_ = 'slide_mask';
var _SLIDE_BASE_ = 'slide_base';
var _SLIDE_HEADER_ = 'slide_header';
var _SLIDE_FOOTER_ = 'slide_footer';
var _SLIDE_CANVAS_ = 'slide_canvas';
var _SLIDE_BACBUF_ = 'slide_bacbuf';
var _SLIDE_HOLE_ = 'slide_hole';
var _SLIDE_MESSAGE_ = 'slide_message';
var _SLIDE_DESCR_ = 'slide_descr';
var _SLIDE_NAV_PANEL_ = 'slide_nav_panel';
var _SLIDE_PROGRESS_PANEL_ = 'slide_progress_panel';
var _SLIDE_BAR_FRAME_ = 'slide_bar_frame';
var _SLIDE_BAR_ = 'slide_bar';
var _SLIDE_NAV_BTN_ = 'slide_nav_button';
var _SLIDE_BTN_AUTO_ = 'slide_btn_auto';

var slide_cntr;
var slide_canvas;
var slide_bacbuf;
var slide_hole;
var prev_slide;
var curr_slide;
var slide_imgs;
var slide_urls;
var slide_ttls;
var slide_timer;
var effect_timer;
var nav_timer;
var descr_timer;
var slide_evx;
var slide_evy;

function redraw(hidden, obj, idx) {
	
	// get available canvas area

	var w = getWindowWidth();
	var h = getWindowHeight();
	if(w < 1 || h < 1) return;
	
	// determin cavas size

	if(!slide_imgs) return;
	if(!idx) idx = curr_slide;
	var img = slide_imgs[idx];
	if(!img) return;
	if(img.width == 0 || img.height == 0) return;
	var rw = w / img.width;
	var rh = h / img.height;
	var rr = Math.min(rw, rh);
	if(rr > 1.0) rr = 1.0;
	var cw = img.width * rr;
	var ch = img.height * rr

	// draw canvas
			   
	if(!obj) obj = slide_canvas;
	obj.style.display = hidden ? 'none' : 'block';
	obj.src = slide_imgs[idx].src;
	obj.width = Math.floor(cw);
	obj.style.top = (h - ch) / 2;
	obj.style.left = (w - cw) / 2;

	// draw description

	showDescription(true);

}

function startEffect() {

	if(effect_timer) clearTimeout(effect_timer);
	if(_SLIDE_EFFECT_ == 0) {
		redraw();
	}
	else if(_SLIDE_EFFECT_ == 1) {
		redraw(true);
		effect_timer = setTimeout('fadein()', _SLIDE_FADE_SPEED_);
	}
	else if(_SLIDE_EFFECT_ == 2) {
		effect_timer = setTimeout('fadeout()', _SLIDE_FADE_SPEED_);
	}
	else if(_SLIDE_EFFECT_ == 3) {
		effect_timer = setTimeout('xfade()', _SLIDE_FADE_SPEED_);
	}
}

function setOpacity(obj, opac) {
	obj.style.display = (opac > 0.0 ? 'block' : 'none');
	obj.style.filter = 'alpha(opacity=' + (opac * 100) + ')'; 
	obj.style.MozOpacity = opac; 
	obj.style.opacity = opac;
}

function showHole(img, visible) {
	if(visible == true) {
		slide_hole.style.display = 'block';
		slide_hole.style.width = img.width;
		slide_hole.style.height = img.height;
		slide_hole.style.top = img.style.top;
		slide_hole.style.left = img.style.left;
	}
	else {
		slide_hole.style.display = 'none';
	}
}

function fadein(alpha) {

	if(!alpha) {
		alpha = 0.0;
	}
	setOpacity(slide_canvas, alpha);

	alpha += _SLIDE_FADE_DELTA_;
	if(alpha < 1.0) {
		effect_timer = setTimeout('fadein(' + alpha + ')', _SLIDE_FADE_SPEED_);
		showHole(slide_canvas, true);
	}
	else {
		clearTimeout(effect_timer);
		showHole(slide_canvas, false);
		setOpacity(slide_canvas, 1.0);
	}
}

function fadeout(alpha) {

	if(!alpha) {
		alpha = 1.0;
		slide_canvas.src = slide_imgs[prev_slide].src;
	}
	setOpacity(slide_canvas, alpha);

	alpha -= _SLIDE_FADE_DELTA_;
	if(alpha >= 0.0) {
		effect_timer = setTimeout('fadeout(' + alpha + ')', _SLIDE_FADE_SPEED_);
		showHole(slide_canvas, true);
	}
	else {
		clearTimeout(effect_timer);
		showHole(slide_canvas, false);
		slide_canvas.src = slide_imgs[curr_slide].src;
		setOpacity(slide_canvas, 1.0);
		redraw();
	}
}

function xfade(alpha) {
	if(!alpha) {
		alpha = 1.0;
		slide_canvas.src = slide_imgs[prev_slide].src;
		slide_bacbuf.src = slide_imgs[curr_slide].src;
		redraw(false, slide_bacbuf, curr_slide);
	}
	setOpacity(slide_canvas, alpha);
	setOpacity(slide_bacbuf, 1.0 - alpha);

	alpha -= _SLIDE_FADE_DELTA_;
	if(alpha >= 0.0) {
		effect_timer = setTimeout('xfade(' + alpha + ')', _SLIDE_FADE_SPEED_);
		showHole(true, slide_bacbuf);
	}
	else {
		clearTimeout(effect_timer);
		showHole(slide_bacbuf, false);
		setOpacity(slide_canvas, 0.0);
		setOpacity(slide_bacbuf, 1.0);
		redraw();
	}
}

function clearSlide() {
	if(!slide_canvas) return;
	slide_canvas.style.display = 'none';
}

function slide(inc) {
	if(!slide_imgs) return;
	if(slide_imgs.length < 2) return;
	if(_SLIDE_EFFECT_ == 0) {
		clearSlide();
	}
	showDescription(false);
	prev_slide = curr_slide;
	curr_slide += inc;
	if(curr_slide  > slide_imgs.length - 1) curr_slide = 0;
	else if(curr_slide < 0) curr_slide = slide_imgs.length - 1;
	prepareImage(curr_slide, true);
}

function jump(pos) {
	if(!slide_imgs) return;
	if(slide_imgs.length < 2) return;
	prev_slide = curr_slide;
	curr_slide = pos;
	prepareImage(curr_slide, true);
}

function jumpTop() {
	jump(0);
}

function jumpTail() {
	jump(slide_imgs.length - 1);
}

function prepareImage(idx, startEffectOnLoad) {
	var img = slide_imgs[idx];
	if(img && (img.width == 0 || img.height == 0)) {
		if(startEffectOnLoad) {
			slide_imgs[idx].onload = function () {
				slide_imgs[idx].onload = null;
				showLoading(false);
				startEffect();
			}
			showLoading(true);
		}
		slide_imgs[idx].src = slide_urls[idx];
	}
	else if(startEffectOnLoad) startEffect();
}

function prepareNextImage() {
	var idx = curr_slide + 1;
	if(idx  > slide_imgs.length - 1) idx = 0;
	prepareImage(idx);
}

function countDownSlide() {
	if(!_SLIDE_AUTO_START_) return;
	--slide_cntr;
	if(slide_cntr == 0) {
		slide(1);
		slide_cntr = _SLIDE_INTERVAL_;
		prepareNextImage();
	}
	showProgress(true);
	slide_timer = setTimeout('countDownSlide()', 1000);
}

function startSlide() {
	if(!slide_imgs) return;
	if(slide_imgs.length < 2) return;
	slide_cntr = _SLIDE_INTERVAL_;
	showProgress(true);
	slide_timer = setTimeout('countDownSlide()', 1000);
	var obj = document.getElementById(_SLIDE_BTN_AUTO_);
	obj.value = '||';
}

function stopSlide() {
	if(!slide_imgs) return;
	if(slide_imgs.length < 2) return;
	if(slide_timer) clearTimeout(slide_timer);
	slide_timer = null;
	slide_cntr = 0;
	showProgress(false);
	showProgressBar(false);
	var obj = document.getElementById(_SLIDE_BTN_AUTO_);
	obj.value = '>>';
}

function switchSlide() {
	if(_SLIDE_AUTO_START_) {
		_SLIDE_AUTO_START_ = false;
		stopSlide();
	}
	else {
		_SLIDE_AUTO_START_ = true;
		startSlide();
	}
	var nav = document.getElementById(_SLIDE_NAV_PANEL_);
	if(nav.style.display == 'block' && slide_imgs.length > 1) {
		showProgressBar(_SLIDE_AUTO_START_);
	}
}

function showProgress(visible) {	
	var str='';
	if(visible) {
		var pct = (slide_cntr * 100) / _SLIDE_INTERVAL_;
		str += '<center><table><tr><td>';
		str += '<input type="button" class="' + _SLIDE_NAV_BTN_ + '" value="-" title="表示時間・減(-)" onClick="addInterval(-1)">';
		str += '<input type="button" class="' + _SLIDE_NAV_BTN_ + '" value="+" title="表示時間・増(+)" onClick="addInterval(1)">';
		str += '</td><td>';
		str += '<table class="' + _SLIDE_BAR_FRAME_ + '"><tr>';
		str += '<td class="' + _SLIDE_BAR_ + '" width="' + pct + '%" ></td>';
		str += '<td width="' + (100 - pct) + '%"></td></tr></table>';
		str += '</td></tr></table></center>';
	}

	var progress = document.getElementById(_SLIDE_PROGRESS_PANEL_+'_cont');
	progress.innerHTML = str;

}

function showDescription(visible) {
	if(descr_timer) clearTimeout(descr_timer);
	if(visible == true) {
		var idx = curr_slide;
		var title = slide_ttls[idx];
		if(title.length > 0) {
			var cont = document.getElementById(_SLIDE_DESCR_ + '_cont');
			cont.innerHTML = title;
			descr_timer = setTimeout('showDescription()', _SLIDE_DESCR_FADE_);
		}
		else 
			visible = false;
	}
	var descr = document.getElementById(_SLIDE_DESCR_);
	descr.style.display = visible ? 'block' : 'none';
}

function showNavPanel(visible) {
	var nav_panel = document.getElementById(_SLIDE_NAV_PANEL_);
	nav_panel.style.display = visible ? 'block' : 'none';
}

function showProgressBar(visible) {
	var progress = document.getElementById(_SLIDE_PROGRESS_PANEL_);
	progress.style.display = visible ? 'block' : 'none';
}

function showMessage(text) {
	var msg = document.getElementById(_SLIDE_MESSAGE_);
	if(text) {
		msg.style.display = 'block';
		msg.style.top = getWindowHeight() / 2;
		msg.innerHTML = text;
	}
	else
		msg.style.display = 'none';
}

function showLoading(visible) {
	if(visible) showMessage('読み込んでいます...');
	else showMessage();
}

function showSlide(idx) {

	prev_slide = idx;
	curr_slide = idx;

	if(getWindowWidth() < 1 || getWindowHeight() < 1) {
		alert('no screen');
		return;		
	}

	var progress = document.getElementById(_SLIDE_PROGRESS_PANEL_);
	if(!progress) {
		alert('not available ' + _SLIDE_PROGRESS_PANEL_);
		return;
	}
	progress.style.display = 'none';

	var nav_panel = document.getElementById(_SLIDE_NAV_PANEL_);
	if(!nav_panel) {
		alert('not available ' + _SLIDE_NAV_PANEL_);
		return;
	}
	nav_panel.style.display = 'none';

	var msg = document.getElementById(_SLIDE_MESSAGE_);
	if(!msg) {
		alert('not available ' + _SLIDE_MESSAGE_);
		return;
	}

	var descr = document.getElementById(_SLIDE_DESCR_);
	if(!descr) {
		alert('not available ' + _SLIDE_DESCR_);
		return;
	}

	try {
		slide_canvas =
		document.getElementById(_SLIDE_CANVAS_).getElementsByTagName("img")[0];
		slide_bacbuf = 
		document.getElementById(_SLIDE_BACBUF_).getElementsByTagName("img")[0];
		slide_hole = 
		document.getElementById(_SLIDE_HOLE_).getElementsByTagName("span")[0];
	}
	catch(ex) { }
	if(!slide_canvas) {
		alert('not available ' + _SLIDE_CANVAS_);
		return;
	}
	if(!slide_bacbuf) {
		alert('not available ' + _SLIDE_BACBUF_);
		return;
	}
	if(!slide_hole) {
		alert('not available ' + _SLIDE_HOLE_);
		return;
	}

	slide_canvas.style.display = 'none';
	slide_bacbuf.style.display = 'none';
	slide_hole.style.display = 'none';
	
	var mask = document.getElementById(_SLIDE_MASK_);
	if(!mask) {
		alert('not available ' + _SLIDE_MASK_);
		return;
	} 
	var base = document.getElementById(_SLIDE_BASE_);
	if(!base) {
		alert('not available ' + _SLIDE_BASE_);
		return;
	} 

	mask.style.display = 'block';
	base.style.display = 'block';
	base.focus();

	if(slide_urls.length != slide_imgs.length) {
		for(var i=0;i < slide_urls.length;i++) {
			slide_imgs[i] = new Image();
		}
	}

	var obj = document.getElementById(_SLIDE_BTN_AUTO_);
	if(!obj) {
		alert('not available ' + _SLIDE_BTN_AUTO_);
		return;
	} 
	obj.value = _SLIDE_AUTO_START_ ? '||' : '>>';

	var img = slide_imgs[idx];
	if(img && (img.width == 0 || img.height == 0)) {
		slide_imgs[idx].onload = function () {
			slide_imgs[idx].onload = null;
			showLoading(false);
			redraw();
		}
		showLoading(true);
		slide_imgs[idx].src = slide_urls[idx];
	}
	else redraw();

	if(slide_imgs.length > 1) prepareNextImage();

	if(_SLIDE_AUTO_START_ && slide_imgs.length > 1) {
		addInterval(0);
		startSlide();
	}

	showProgressBarAndNavPanel();
}

function hideSlide() {
	clearTimeout(effect_timer);
	stopSlide();
	slide_canvas.style.display = 'none';
	slide_bacbuf.style.display = 'none';
	slide_hole.style.display = 'none';
	var mask = document.getElementById(_SLIDE_MASK_);
	mask.style.display = 'none';
	var base = document.getElementById(_SLIDE_BASE_);
	base.style.display = 'none';
}

function addInterval(inc) {
	_SLIDE_INTERVAL_ = Math.min(Math.max(_SLIDE_INTERVAL_ + inc, 3), 16);
}

function switchProgressBarAndNavPanel() {
	var nav = document.getElementById(_SLIDE_NAV_PANEL_);
	if(nav.style.display != 'block') {
		showProgressBarAndNavPanel();	
		showDescription(true);
	}
	else {
		hideProgressBarAndNavPanel();
		showDescription(false);
	}
}

function showProgressBarAndNavPanel() {
	var base = document.getElementById(_SLIDE_BASE_);
	if(base.style.display != 'block') return;
	if(nav_timer) clearTimeout(nav_timer);
	showNavPanel(true);
	if(_SLIDE_AUTO_START_  && slide_imgs.length > 1) showProgressBar(true);
	nav_timer = setTimeout('hideProgressBarAndNavPanel()', _SLIDE_NAV_FADE_);
}

function hideProgressBarAndNavPanel() {
	var base = document.getElementById(_SLIDE_BASE_);
	if(base.style.display != 'block') return;
	showNavPanel(false);
	showProgressBar(false);
	if(nav_timer) clearTimeout(nav_timer);
}

function slide_mousemove_event(event) {
	var base = document.getElementById(_SLIDE_BASE_);
	if(base.style.display != 'block') return true;
	if(!event) var event = window.event;
	if(event) {
		if(!event.pageX) event.pageX = event.clientX + document.body.scrollLeft;
		if(!event.pageY) event.pageY = event.clientY + document.body.scrollTop;
		if(slide_evx == event.pageX && slide_evy == event.pageY) return;
		slide_evx = event.pageX;
		slide_evy = event.pageY;
	}
	showProgressBarAndNavPanel();
	showDescription(true);
	return false;
}

function slide_mouseout_event(event) {
	var base = document.getElementById(_SLIDE_BASE_);
	if(base.style.display != 'block') return true;
	hideProgressBarAndNavPanel();
	showDescription(false);
	return false;
}

function slide_mousewheel_event(event) {
	var base = document.getElementById(_SLIDE_BASE_);
	if(base.style.display != 'block') return true;
	return false;
}

function slide_key_event(e) { 

	var base = document.getElementById(_SLIDE_BASE_);
	if(base.style.display != 'block') return true;

	var keycode = 0; 
	if(e.which && e.which > 0) {
		keycode = e.which;
	}
	else if(e.charCode && e.charCode > 0) {
		keycode = e.charCode; 
	} 
	else if(e.keyCode && e.keyCode > 0) {
		keycode = e.keyCode; 
	} 

	// 'Esc' 
	if(keycode == 27) { 
		hideSlide(); 
	} 
	// 'Space'
	else if(keycode == 32) { 
		switchProgressBarAndNavPanel();
	}
	// 'Right' 
	else if(keycode == 39) { 
		slide(1); 
	} 
	// 'Left' 
	else if(keycode == 37) { 
		slide(-1); 
	} 
	// 'Ctrl'
	else if(keycode == 17) { 
		switchSlide(); 
	} 
	// 'Up'
	else if(keycode == 38) { 
		jumpTop(); 
	} 
	// 'Down'
	else if(keycode == 40) { 
		jumpTail(); 
	} 
	// '+'
	else if(keycode == 107 || keycode == 43) { 
		addInterval(1); 
	} 
	// '-'
	else if(keycode == 109 || keycode == 45) { 
		addInterval(-1); 
	} 
	else {
		//alert(keycode);
	}

	return false;
}

function addSlide(url, ttl) {
	if(!slide_urls || !slide_ttls) return;
	slide_urls[slide_urls.length] = url;
	slide_ttls[slide_ttls.length] = ttl ? ttl : '';
}

function addEventHandler(target, type, func) {
	if(target.attachEvent){
		target.attachEvent("on" + type, func);
	} else if(target.addEventListener){
		target.addEventListener(type, func, true);
	} else {
		target["on" + type] = func;
	}
}

function embedSlide() {

	slide_urls = new Array();
	slide_ttls = new Array();
	slide_imgs = new Array();

	document.write('<div id="' + _SLIDE_MASK_ + '"></div>');
	document.write('<div id="' + _SLIDE_BASE_ + '">');

	document.write('<div id="' + _SLIDE_HEADER_ + '">');
	document.write('<div id="' + _SLIDE_PROGRESS_PANEL_ + '">');
	document.write('<div id="' + _SLIDE_PROGRESS_PANEL_ + '_cont"></div>');
	document.write('<div id="' + _SLIDE_PROGRESS_PANEL_ + '_bottom"></div>');
	document.write('</div>'); // _SLIDE_PROGRESS_PANEL_
	document.write('</div>'); // _SLIDE_HEADER_

	document.write('<div id="' + _SLIDE_MESSAGE_ + '"></div>');

	document.write('<div id="' + _SLIDE_CANVAS_ + '"><img src=""></div>');
	document.write('<div id="' + _SLIDE_BACBUF_ + '"><img src=""></div>');
	document.write('<div id="' + _SLIDE_HOLE_ + '"><span></span></div>');

	document.write('<div id="' + _SLIDE_DESCR_ + '">');
	document.write('<div id="' + _SLIDE_DESCR_ + '_top"></div>');
	document.write('<div id="' + _SLIDE_DESCR_ + '_cont"></div>');
	document.write('</div>'); // _SLIDE_DESCR_

	document.write('<div id="' + _SLIDE_FOOTER_ + '">');
	document.write('<div id="' + _SLIDE_NAV_PANEL_ + '">');
	document.write('<div id="' + _SLIDE_NAV_PANEL_ + '_top"></div>');

	document.write('<div id="' + _SLIDE_NAV_PANEL_ + '_cont">');
	document.write('<input type="button" class="' + _SLIDE_NAV_BTN_ + '" value="|<" title="先頭へ(↑)" onClick="jumpTop();showProgressBarAndNavPanel();">');
	document.write('&nbsp;');
	document.write('<input type="button" class="' + _SLIDE_NAV_BTN_ + '" value="<" title="前へ(←)" onClick="slide(-1);showProgressBarAndNavPanel();">');
	document.write('&nbsp;');
	document.write('<input type="button" class="' + _SLIDE_NAV_BTN_ + '" value="" title="自動更新/停止(Ctrl)" onClick="switchSlide()" id="' + _SLIDE_BTN_AUTO_ + '">');
	document.write('&nbsp;');
	document.write('<input type="button" class="' + _SLIDE_NAV_BTN_ + '" value=">" title="次へ(→)" onClick="slide(1);showProgressBarAndNavPanel();">');
	document.write('&nbsp;');
	document.write('<input type="button" class="' + _SLIDE_NAV_BTN_ + '" value=">|" title="末尾へ(↓)" onClick="jumpTail();showProgressBarAndNavPanel();">');
	document.write('&nbsp;&nbsp;&nbsp;');
	document.write('<input type="button" class="' + _SLIDE_NAV_BTN_ + '" value="X" title="閉じる(Esc)" onClick="hideSlide()">');
	document.write('</div>'); // _SLIDE_NAV_PANEL_ + _cont

	document.write('</div>'); // _SLIDE_NAV_PANEL_
	document.write('</div>'); // _SLIDE_FOOTER_
	document.write('</div>'); // _SLIDE_BASE_

	addEventHandler(document, "keydown", slide_key_event);
	addEventHandler(document, "mousemove", slide_mousemove_event);
	addEventHandler(document, "mouseout", slide_mouseout_event);
	addEventHandler(document, "mousewheel", slide_mousewheel_event);

	window.onresize = function(event) { redraw(); };

}