/*
 * Light Box
 *
 * Copyright: (c) 2009 九州旅客鉄道株式会社
 *
 * Depends Script:
 *	js/jQuery/jquery.js (1.3.2)
 *	js/lightbox.js
 */

var lightbox = {
	jQuery: $,

	settings: {
		autostart: true,
		background_click: true
	},

	selectors: {
		background: 'lightbox-background',
		container: 'lightbox-container',
		frame_top: 'lightbox-frame-top',
		frame_bottom: 'lightbox-frame-bottom',
		content: 'lightbox-content',
		image: 'lightbox-image',
		prev: 'lightbox-prev',
		next: 'lightbox-next',
		footer: 'lightbox-footer',
		caption: 'lightbox-caption',
		number: 'lightbox-number',
		close: 'lightbox-close',
		clone_image: 'lightbox-clone-image',
		clone_footer: 'lightbox-clone-footer'
	},

/* objects~ */
	_ready: false,
	_view: false,
	_action: false,
	_msie: false,
	_msie6: false,
	_imageList: {},
	_unview_selectbox: [],
	_padding_top: 0,
	_padding_bottom: 0,
	_padding_left: 0,
	_padding_right: 0,
	_btn_width: 0,
	_timer_id: false,
/* ~objects */

/* action~ */
	init: function() {
		if (this.jQuery.browser.msie) {
			this._msie = true;
			if (parseInt(this.jQuery.browser.version) <= 6) this._msie6 = true;
		}
		if (this.settings.autostart) this.setImageList();
		this._ready = true;
	},

	show: function(group, num, image, title) {
		var lightbox = this,
			$ = this.jQuery,
			settings = this.settings,
			selectors = this.selectors;

		if (lightbox._ready && group && (num || num == '0')) {
			if (!image && lightbox._imageList[group][num].image) image = lightbox._imageList[group][num].image;
			if (!title && lightbox._imageList[group][num].title) title = lightbox._imageList[group][num].title;
			if (image) {
				lightbox._ready = false;
				lightbox._view = true;
				lightbox.setBackground();
				lightbox.setContainer();
				if (settings.background_click) {
					var $background = $('#' + selectors.background);
					$background.click(function() {
						lightbox.removeLightbox();
					});
				}
				lightbox.setResize();
				lightbox.loadImage(group, num, image, title);
			}
		}
	},

	slide: function(group, num, image, title) {
		var lightbox = this,
			$ = this.jQuery,
			settings = this.settings,
			selectors = this.selectors;

		if (lightbox._action && group && (num || num == '0')) {
			if (!image && lightbox._imageList[group][num].image) image = lightbox._imageList[group][num].image;
			if (!title && lightbox._imageList[group][num].title) title = lightbox._imageList[group][num].title;
			if (image) {
				lightbox._action = false;
				var $contents = $('#' + selectors.image + ',' + '#' + selectors.footer);
				if (lightbox._msie) {
					var $image = $('#' + selectors.image),
						$footer = $('#' + selectors.footer),
						$clone_image = $('#' + selectors.clone_image),
						$clone_footer = $('#' + selectors.clone_footer);
					$clone_image.css({
						display: 'block',
						top: $image.offset().top,
						left: $image.offset().left,
						width: $image.outerWidth(),
						height: $image.outerHeight()
					});
					$clone_footer.css({
						display: 'block',
						top: $footer.offset().top,
						left: $footer.offset().left,
						width: $footer.outerWidth(),
						height: $footer.outerHeight()
					});
				}
				$contents.animate(
					{opacity: 'hide'},
					300,
					'swing',
					function() {
						if (this.id == selectors.image) {
							lightbox.loadImage(group, num, image, title);
							if (lightbox._msie) $clone_image.css({display: 'none'});
						} else {
							if (lightbox._msie) $clone_footer.css({display: 'none'});
						}
					}
				);
			}
		}
	},
/* ~action */

	setImageList: function() {
		var lightbox = this,
			$ = this.jQuery,
			settings = this.settings,
			selectors = this.selectors;

		var reg = /lightbox\[(.+?)\]$/,
			cnt = new Object();
		$('a[rel^=lightbox]').each(function() {
			$this = $(this);
			var group = ($this.attr('rel')).replace(reg, '$1'),
				image = $this.attr('href'),
				title = $this.attr('title');
			if (!lightbox._imageList[group]) {
				lightbox._imageList[group] = new Array();
				cnt[group] = 0;
			}
			var num = cnt[group];
			lightbox._imageList[group][num] = {group:group, num:num, image:image, title:title};
			$this.click(function() {
				lightbox.show(group, num);
				return false;
			});
			cnt[group] ++;
		});
	},

	setContainer: function() {
		var lightbox = this,
			$ = this.jQuery,
			settings = this.settings,
			selectors = this.selectors;

		lightbox.removeContainer();
		var container_html = '<div id="' + selectors.container + '">' + 
								'<div id="' + selectors.frame_top + '">' + 
									'<div class="l"></div>' + 
									'<div class="c"></div>' + 
									'<div class="r"></div>' + 
								'</div>' + 
								'<div id="' + selectors.content + '">' + 
									'<p id="' + selectors.image + '"></p>' + 
									'<div id="' + selectors.footer + '">' + 
										'<p id="' + selectors.number + '" class="ntxt1j"></p>' + 
										'<p id="' + selectors.close + '"></p>' + 
									'</div>' + 
								'</div>' + 
								'<div id="' + selectors.frame_bottom + '">' + 
									'<div class="l"></div>' + 
									'<div class="c"></div>' + 
									'<div class="r"></div>' + 
								'</div>' + 
							'</div>' + 
							'<div id="' + selectors.clone_image + '"></div>' + 
							'<div id="' + selectors.clone_footer + '"></div>';
		$('body').append(container_html);
		var $container = $('#' + selectors.container),
			$content = $('#' + selectors.content),
			$footer = $('#' + selectors.footer);
		if (lightbox._msie6) $container.css({position: 'absolute'});
		lightbox.positionContainer();
		var $close = $('#' + selectors.close),
			$frame_tl = $('.l', '#' + selectors.frame_top),
			$frame_br = $('.r', '#' + selectors.frame_bottom);
		$close.click(function() {
			lightbox.removeLightbox();
		});
		lightbox._btn_width = $close.outerWidth() + 10;
		lightbox._padding_top = $frame_tl.outerHeight();
		lightbox._padding_bottom = $frame_br.outerHeight();
		lightbox._padding_left = $frame_tl.outerWidth();
		lightbox._padding_right = $frame_br.outerWidth();
		$container.css({display: 'none'});
		$footer.css({display: 'none'});
		$container.animate(
			{opacity: 'show'},
			200,
			'swing'
		);
	},

	removeContainer: function() {
		var lightbox = this,
			$ = this.jQuery,
			settings = this.settings,
			selectors = this.selectors;

		var $containers = $('#' + selectors.container + ',' + '#' + selectors.clone_image + ',' + '#' + selectors.clone_footer);
		$containers.remove();
	},

	positionContainer: function() {
		var lightbox = this,
			$ = this.jQuery,
			settings = this.settings,
			selectors = this.selectors;

		var $window = $(window),
			$container = $('#' + selectors.container),
			top = ($window.height() / 2) - ($container.outerHeight() / 2) + (lightbox._msie6 ? $window.scrollTop() : 0),
			left = ($window.width() / 2) - ($container.outerWidth() / 2) + (lightbox._msie6 ? $window.scrollLeft() : 0);
		$container.css({
			top: top,
			left: left
		});
	},

	setBackground: function() {
		var lightbox = this,
			$ = this.jQuery,
			settings = this.settings,
			selectors = this.selectors;

		lightbox.removeBackground();
		if (lightbox._msie6) {
			$('select').each(function() {
				$this = $(this);
				if ($this.is(':visible')) {
					$this.css({visibility: 'hidden'});
					lightbox._unview_selectbox.push($this);
				}
			});
		}
		$('body').append('<div id="' + selectors.background + '"></div>');
		lightbox.positionBackground();
	},

	removeBackground: function() {
		var lightbox = this,
			$ = this.jQuery,
			settings = this.settings,
			selectors = this.selectors;

		var $background = $('#' + selectors.background);
		$background.remove();
		if (lightbox._msie6) {
			if (lightbox._unview_selectbox.length > 0) {
				$.each(lightbox._unview_selectbox, function(i) {
					this.css({visibility: 'visible'});
				});
			}
		}
	},

	positionBackground: function() {
		var lightbox = this,
			$ = this.jQuery,
			settings = this.settings,
			selectors = this.selectors;

		var $document = $(document),
			width = $document.width(),
			height = $document.height();
		if (lightbox._msie6) {
			if (width > document.body.clientWidth) width = document.body.clientWidth;
			if (height > document.body.clientHeight) height = document.documentElement.clientHeight;
		}
		var $background = $('#' + selectors.background);
		$background.css({
			width: width,
			height: height
		});
	},

	setResize: function() {
		var lightbox = this,
			$ = this.jQuery,
			settings = this.settings,
			selectors = this.selectors;

		lightbox.unsetResize();
		var $window = $(window);
		$window.bind('resize', function() {
			lightbox.positionContainer();
			lightbox.positionBackground();
		});
		if (lightbox._msie6) {
			$window.bind('scroll', function() {
				$window.trigger('resize');
			});
		}
	},

	unsetResize: function() {
		var lightbox = this,
			$ = this.jQuery,
			settings = this.settings,
			selectors = this.selectors;

		var $window = $(window);
		$window.unbind('resize');
		if (lightbox._msie6) $window.unbind('scroll');
	},

	removeLightbox: function() {
		var lightbox = this,
			$ = this.jQuery,
			settings = this.settings,
			selectors = this.selectors;

		if (lightbox._view) {
			var $container = $('#' + selectors.container),
				$lightboxes = lightbox._msie ? $container : $('#' + selectors.background + ',' + '#' + selectors.container);
			$container.stop();
			if (lightbox._timer_id) clearTimeout(lightbox._timer_id);
			lightbox._timer_id = false;
			$lightboxes.animate(
				{opacity: 'hide'},
				lightbox._msie ? 100 : 200,
				'swing',
				function() {
					if (this.id == selectors.container) {
						lightbox.removeContainer();
						lightbox.removeBackground();
						lightbox.unsetResize();
						lightbox._ready = true;
						lightbox._view = false;
						lightbox._action = false;
					}
				}
			);
		}
	},

	loadImage: function(group, num, image, title) {
		var lightbox = this,
			$ = this.jQuery,
			settings = this.settings,
			selectors = this.selectors;

		var $content = $('#' + selectors.content),
			imageLoader = new Image(),
			load_flg = false;
		imageLoader.onload = function() {
			this.onload = null;
			load_flg = true;
			if (lightbox._timer_id) clearTimeout(lightbox._timer_id);
			lightbox._timer_id = false;
			var $footer = $('#' + selectors.footer),
				$close = $('#' + selectors.close),
				$caption = $('#' + selectors.caption);
			$close.css({visibility: 'visible'});
			$caption.remove();
			$footer.css({
				width: imageLoader.width
			});
			if (title) $footer.prepend('<p id="' + selectors.caption + '" style="width: ' + (imageLoader.width - lightbox._btn_width) + 'px;" class="ntxt2j">' + title + '</p>');
			if (lightbox._imageList[group].length > 1) {
				var $number = $('#' + selectors.number);
				$number.html('Image&nbsp;' + (num + 1) + '&nbsp;/&nbsp;' + lightbox._imageList[group].length);
			}
			var $window = $(window),
				$image = $('#' + selectors.image),
				size = lightbox.getImageSize(imageLoader.width, imageLoader.height, $window.width() - lightbox._padding_left - lightbox._padding_right, $window.height() - lightbox._padding_top - lightbox._padding_bottom - $footer.outerHeight());
				image_html = '<img src="' + image + '" width="' + size.width + '" height="' + size.height + '" alt="' + (title ? title: '') + '" />',
				navi_html = '';
			if (num > 0) navi_html += '<a href="#" id="' + selectors.prev + '" style="width: ' + Math.floor(size.width / 2) + 'px; height: ' + size.height + 'px;" onclick="lightbox.slide(\'' + group + '\', ' + (num - 1) + ');return false;">&nbsp;</a>';
			if (num + 1 < lightbox._imageList[group].length) navi_html += '<a href="#" id="' + selectors.next + '" style="width: ' + Math.floor(size.width / 2) + 'px; height: ' + size.height + 'px;" onclick="lightbox.slide(\'' + group + '\', ' + (num + 1) + ');return false;">&nbsp;</a>';
			$image.html(image_html);
			$image.css({
				width: size.width,
				height: size.height
			});
			if (imageLoader.width > size.width) {
				$footer.css({width: size.width});
				var $caption = $('#' + selectors.caption);
				$caption.css({width: size.width - lightbox._btn_width});
			}
			var $container = $('#' + selectors.container),
				container_width = size.width + lightbox._padding_left + lightbox._padding_right,
				container_height1 = $image.outerHeight(),
				container_height2 = container_height1 + $footer.outerHeight(),
				container_top = ($window.height() / 2) - ((container_height2 + lightbox._padding_top + lightbox._padding_bottom) / 2) + (lightbox._msie6 ? $window.scrollTop() : 0),
				container_left = ($window.width() / 2) - (container_width / 2) + (lightbox._msie6 ? $window.scrollLeft() : 0),
				duration1 = 500,
				duration2 = ($container.outerWidth() != container_width) ? 500 : 0;
			$content.removeClass('loading');
			$container.animate(
				{top: container_top, height: container_height1},
				duration1,
				'swing'
			).animate(
				{width: container_width, left: container_left},
				duration2,
				'swing',
				function() {
					if (lightbox._msie) {
						$image.css({
							display: 'block',
							opacity: 0
						});
						var $clone_image = $('#' + selectors.clone_image);
						$clone_image.css({
							display: 'block',
							top: $image.offset().top,
							left: $image.offset().left,
							width: $image.outerWidth(),
							height: $image.outerHeight()
						});
						$image.css({
							display: 'none',
							opacity: 'show'
						});
					}
					$image.animate(
						{opacity: 'show'},
						400,
						'swing',
						function() {
							if (lightbox._msie) $clone_image.css({display: 'none'});
							$container.animate(
								{height: container_height2},
								300,
								'swing',
								function() {
									if (lightbox._msie) {
										$footer.css({
											display: 'block',
											opacity: 0
										});
										var $clone_footer = $('#' + selectors.clone_footer);
										$clone_footer.css({
											display: 'block',
											top: $footer.offset().top,
											left: $footer.offset().left,
											width: $footer.outerWidth(),
											height: $footer.outerHeight()
										});
										$footer.css({
											display: 'none',
											opacity: 'show'
										});
									}
									$footer.animate(
										{opacity: 'show'},
										200,
										'swing',
										function() {
											if (lightbox._msie) {
												$clone_footer.css({display: 'none'});
											}
											if (navi_html) $image.append(navi_html);
											lightbox._action = true;
										}
									);
								}
							);
						}
					);
				}
			);
		}
		lightbox._timer_id = setTimeout(function() {
			if (!load_flg) $content.addClass('loading');
			clearTimeout(lightbox._timer_id);
			lightbox._timer_id = false;
		}, 500);
		imageLoader.src = image;
	},

	getImageSize: function(orig_width, orig_height, max_width, max_height) {
		var lightbox = this,
			$ = this.jQuery,
			settings = this.settings,
			selectors = this.selectors;

		var size = new Object();
		if (orig_width > max_width || orig_height > max_height) {
			size = {width: max_width, height: Math.round(orig_height * max_width / orig_width)}
			if (size.height > max_height) size = {width: Math.round(orig_width * max_height / orig_height), height: max_height}
		} else {
			size = {width: orig_width, height: orig_height}
		}
		return size;
	}
}

$(function() {
	lightbox.init();
});

$(window).unload(function() {
	clearTimeout();
});