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

var photoframe = {
	jQuery: $,

	settings: {
		autostart: true
	},

	selectors: {
		pf_container: 'photoframe-container',
		pf_stage: 'photoframe-stage',
		pf_image: 'photoframe-image',
		pf_loading: 'photoframe-loading',
		pf_list: 'photoframe-list'
	},

/* objects~ */
	_ready: false,
	_action: false,
	_stageImage: false,
	_imageList: [],
/* ~objects */

/* action~ */
	init: function() {
		if (this.settings.autostart) {
			this.getStageImage();
			this.setImageList();
		} else {
			this._action = true;
		}
		this._ready = true;
	},

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

		if (photoframe._action) {
			if (!photoframe._stageImage) photoframe.getStageImage();
			if (photoframe._stageImage != image) {
				photoframe._action = false
				var $pf_stage = $('#' + selectors.pf_stage),
					imageLoader = new Image(),
					load_flg = false,
					timer_id;
				imageLoader.onload = function() {
					this.onload = null;
					var $pf_prev_image = $('.' + selectors.pf_image, '#' + selectors.pf_stage),
						$pf_loading = $('.' + selectors.pf_loading, '#' + selectors.pf_stage),
						pf_image_html = photoframe._imageList[num] ? ('<p class="' + selectors.pf_image + '"><a href="' + photoframe._imageList[num].image + '" onclick="lightbox.show(\'' + photoframe._imageList[num].group + '\', ' + photoframe._imageList[num].num + ');return false;" title="' + photoframe._imageList[num].title + '"><img src="' + image + '" width="' + imageLoader.width + '" height="' + imageLoader.height + '" alt="' + photoframe._imageList[num].title + '" /></a></p>') : ('<p class="' + selectors.pf_image + '"><img src="' + image + '" width="' + imageLoader.width + '" height="' + imageLoader.height + '" alt="' + title + '" /></p>');
					load_flg = true;
					if (!$pf_loading) clearTimeout(timer_id);
						else $pf_loading.remove();
					$(pf_image_html).css({left: $pf_stage.outerWidth()}).animate(
						{left: 0},
						200,
						'swing',
						function() {
							$pf_prev_image.remove();
							photoframe._stageImage = image;
							photoframe._action = true;
						}
					).appendTo($pf_stage);
				}
				timer_id = setTimeout(function() {
					if (!load_flg) $pf_stage.append('<div class="' + selectors.pf_loading + '"></div>');
					clearTimeout(timer_id);
				}, 500);
				imageLoader.src = image;
			}
		}
	},
/* ~action */

	getStageImage: function() {
		var photoframe = this,
			$ = this.jQuery,
			settings = this.settings,
			selectors = this.selectors;

		var $pf_image = $('.' + selectors.pf_image, '#' + selectors.pf_stage),
			$pf_stage_img = $('img', '#' + selectors.pf_stage);
		photoframe._stageImage = $pf_stage_img.attr('src');
		var cnt = 0,
			group = 'photoframe';
		$('a[rel=lightbox\[' + group + '\]]').each(function() {
			$this = $(this);
			var num = cnt,
				image = $this.attr('href'),
				title = $this.attr('title');
			photoframe._imageList[num] = {group:group, num:num, image:image, title:title};
			cnt ++;
		});
		if (photoframe._imageList[0]) $pf_image.html('<a href="' + photoframe._imageList[0]['image'] + '" onclick="lightbox.show(\'' + photoframe._imageList[0].group + '\', ' + photoframe._imageList[0].num + ');return false;" title="' + photoframe._imageList[0].title + '">' + $pf_image.html() + '</a>');
	},

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

		var reg = /(\.jpg|\.jpeg|\.png|\.gif|\.bmp)(\?(.*))?$/,
			cnt = 0;
		$('a', '#' + selectors.pf_list).each(function() {
			$this = $(this);
			var image = $this.attr('href'),
				title = $this.attr('title'),
				num = cnt;
			if (image.toLowerCase().match(reg)) {
				$(this).click(function() {
					photoframe.show(num, image, title);
					return false;
				});
				cnt ++;
			}
		});
		photoframe._action = true;
	}
}

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

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