var _imageboxes = new Array();
var _imagetitles = new Array();
var _imageno = new Array();
var _imageflg = false;
var _changeflg = false;
var _currentGroup = '';
var _currentNo = 0;

var FADEIN_SPEED_OVERLAY = 800;
var FADEIN_SPEED_OPACITY = 0.85;
var FADEIN_SPEED_LAYER = 1000;

$(document).ready(function() {

	decodeImageBox();

    setImageBox();

	$('area[href][rel]').click(function() {
		return showImageBox($(this));
	});

	$('#overlay').click(function() {
		return hideImageBox();
	});

	$('#cl').click(function() {
		return hideImageBox();
	});

	$('#next').click(function() {
		return nextImage();
	});

	$('#prev').click(function() {
		return prevImage();
	});

	$(window).resize(function() {
    	return resizeBox();
	});

});

decodeImageBox = function() {

	$('area[href][rel]').each(function(idx,obj) {

		var rel = $(obj).attr("rel");
		if(rel.indexOf("imagebox") == 0) {
			if(rel != "imagebox") {
				var _imagebox =rel.match(/\w+/)[0];
				var _grp = rel.match(/\[(.*)\]/)[1];

				if(!_imageboxes[_grp]) {
					_imageboxes[_grp] = new Array();
					_imagetitles[_grp] = new Array();
					_imageno[_grp] = new Array();
					_imageno[_grp] = 0;
				}
				_imageboxes[_grp].push($(obj).attr("href"));
				_imagetitles[_grp].push($(obj).attr("title"));
				_imageno[_grp]++;
			}
		}

	});

}

setImageBox = function() {

	var nextSrc = '../img/next.gif';
	var prevSrc = '../img/prev.gif';
	var closeSrc = '../img/close.gif';

	$('body').prepend('<div id="layer"></div>');
	$('#layer').addClass('layer');

	$('#layer').append('<table border="0" cellspacing="0" cellpadding="0"></table>');
	$('#layer table').addClass('layer table');
	$('#layer table').append('<tr></tr>');

	$('#layer table tr').append('<td><input type="image" src="' + prevSrc + '" id="prev" value="前へ"></td>');
	$('#layer table tr').append('<td><img id="pic" src="" /></td>');
	$('#layer table tr').append('<td><input type="image" src="' + nextSrc + '" id="next" value="次へ"></td>');
	$('#layer table tr').addClass('layer td');

	$('#layer').append('<div id="photofooter"></div>');
	$('#photofooter').addClass('photofooter');

	$('#photofooter').append('<div id="phototext"></div>');
	$('#photofooter').append('<div id="photoclose"></div>');
	$('#photoclose').append('<input type="image" src="' + closeSrc + '" id="cl" value="CLOSE">');
	$('#phototext').addClass('phototext');
	$('#photoclose').addClass('photoclose');

	$('body').prepend('<div id="overlay"></div>');
	$('#overlay').addClass('overlay');

}

showImageBox = function(obj) {

	var ret = true;

	var rel = obj.attr('rel');
	if(rel.indexOf("imagebox") == 0) {

		if(rel != 'imagebox') {
			var _imagebox = rel.match(/\w+/)[0];
			var _grp = rel.match(/\[(.*)\]/)[1];

			_currentGroup = _grp;
			var i = 0;
			for(i=0;i<_imageboxes[_currentGroup].length;i++) {
				if(_imageboxes[_currentGroup][i] == obj.attr('href')) {
					_currentNo = i;
				}
			}
	
		} else {
			_currentGroup = 'alone';
			_currentNo = 0;

		}

		var arrayPageSize = getPageSize();

		$('select').hide();
		var width =  (arrayPageSize[0] + 'px');
		var height =  (arrayPageSize[1] + 'px');
		$('#overlay').width(width).height(height).show().fadeTo(FADEIN_SPEED_OVERLAY, FADEIN_SPEED_OPACITY, showImage(obj,arrayPageSize));

		ret = false;

	}

	return ret;

}

showImage = function(obj,arrayPageSize) {

	var scrollTop = document.documentElement.scrollTop;
	var top = (arrayPageSize[1] - $('#layer').height()) / 2 + scrollTop;
	var left = ($('html').width() - $('#layer').width()) / 2;

	$('#pic').attr('src',obj.attr('href'));
	$('#phototext').html(obj.attr('title'));

	if(_currentGroup == 'alone') {
		$('#next').hide();
		$('#prev').hide();
	} else {
		$('#next').show();
		$('#prev').show();
	}

	$('#layer').css('top', top).css('left', left).fadeIn(FADEIN_SPEED_LAYER);

	_imageflg = true;

}

hideImageBox = function() {

	if(!_changeflg) {

		$('#overlay').hide();
		$('#pic').attr('src','');
		$('#layer').hide();
		$('select').show();

		_imageflg = false;

	}

	return false;
}

resizeBox = function() {

	if(_imageflg) {

		var arrayPageSize = getPageSize();
		var width =  (arrayPageSize[0] + 'px');
		var height =  (arrayPageSize[1] + 'px');
		$('#overlay').width(width).height(height).show();

		var scrollTop = document.documentElement.scrollTop;
		var top = (arrayPageSize[1] - $('#layer').height()) / 2 + scrollTop;
		var left = ($('html').width() - $('#layer').width()) / 2;
		$('#layer').css('top', top).css('left', left).show();
	
	}

}

nextImage = function() {

	_changeflg = true;

	if((_currentNo + 1) == _imageno[_currentGroup]) {
		_currentNo = 0;
	} else {
		_currentNo++;
	}

	changeImage(_imageboxes[_currentGroup][_currentNo], _imagetitles[_currentGroup][_currentNo]);

}
prevImage = function() {

	_changeflg = true;

	if(_currentNo  == 0) {
		_currentNo = _imageno[_currentGroup] - 1;
	} else {
		_currentNo--;
	}

	changeImage(_imageboxes[_currentGroup][_currentNo], _imagetitles[_currentGroup][_currentNo]);

}

changeImage = function(imageSrc,title) {

	$('#layer').hide();
	$('#pic').attr('src',imageSrc);
	$('#phototext').html(title);

	var scrollTop = document.documentElement.scrollTop;
	var top = (arrayPageSize[1] - $('#layer').height()) / 2 + scrollTop;
	var left = ($('html').width() - $('#layer').width()) / 2;
	$('#layer').css('top', top).css('left', left).fadeIn(FADEIN_SPEED_LAYER,function(){_changeflg = false;});

}

getPageSize = function() {
	
	var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else {
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	if (self.innerHeight) {
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) {
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) {
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

	if(xScroll < windowWidth){	
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}

	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;
}