/* -------- 
 * very simple Lightbox script.
 * Copyright (c) 2009 Hiroya Fujii
 * http://blog.3ot.net/design/javascript/20090817153430.html
 * Dual licensed under the MIT and GPL licenses
 * This script uses jQuery and SimpleModal plugin.
 -------- */

var sbox = {};

sbox.conf = {

// ローダー画像へのパス。
	loader: './ajax-loader.gif',

// 画像へのホバー時のcssスタイル。'rel=lightbox' があるaタグに囲まれたimgタグに適用される。
	hoverIn: { opacity: 0.8, border: 'solid 1px red', margin: '2px' },
	hoverOut: { opacity: 1.0, border: 'solid 1px #535353', margin: '2px' },

// モーダル時の画像背景のパディング幅ピクセル値。
	padding: 25,

// モーダル時の画像背景のパディング色。
	bgColor: '#ffffff'

};

$(function(){ sbox.func.start(); });

sbox.func = {

	start: function(){
		var idx, img;
		img = new Image();
		img.onload = function(){ sbox.conf.loaderSize = sbox.func.imgSize(img); };
		img.src = sbox.conf.loader;
		$("a[rel='lightbox']").each(function(idx){
			$('img', this).css(sbox.conf.hoverOut);
			$(this).hover(
				function(){$('img', this).css(sbox.conf.hoverIn)},
				function(){$('img', this).css(sbox.conf.hoverOut)}
			).click(function(ev){
				sbox.func.modal($(this).attr('href'));
				ev.preventDefault();
			});
		});
	},

	modal: function(src){
		$('<img src="'+ sbox.conf.loader +'" id="modalLoader" />').modal({
			opacity: 80,
			containerId: 'modalCon',
			overlayId: 'modalOverlay',
			overlayCss: {
				backgroundColor: '#000'
			},
			containerCss: {
				width: sbox.conf.loaderSize.w + 'px',
				height: sbox.conf.loaderSize.h + 'px'
			},
			closeHTML: '',
			escClose: true,
			overlayClose: true,
			onClose: function(e){ sbox.func.close(); },
			onOpen: function(e){ sbox.func.open(e, src); }
		});
	},

	open: function(e, src){
		winSize = $.modal.impl.getDimensions();
		e.overlay.css({height:winSize[0]+'px'}).fadeIn('fast', function(){
			e.container.fadeIn('fast', function(){
				$('#modalLoader').fadeIn('fast', function(){
					sbox.func.loadImg(src);
				});
			});
		});
	},

	close: function(){
		$('#modalCon').fadeOut('fast', function(){
			$('#modalOverlay').fadeOut('fast', function(){
				$.modal.close();
			});
		});
	},


	loadImg: function(src){
		var img = new Image();
		img = document.createElement('img');
		img.onload = function(){
				sbox.func.showImg(src, img);
		}
		img.src = src;
	},

	showImg: function(src, img){
		var param = this.param(src, img);
		$('.simplemodal-wrap').remove();

		$('#modalCon').css({
			width: param.wrapW + 'px',
			height: param.wrapH + 'px',
			left: param.conL + 'px',
			top: param.conT + 'px',
			zIndex: 1003
		}).append(this.dom(param));
		$('#modalCon, #modalWrap').fadeIn('slow', function(){
			$('#modalLoader').hide();
			$('#modalImg').slideDown('slow').click(function(){ sbox.func.close(); });
		});
	},

	dom: function(param){
		var wrap = $('<div id="modalWrap"></div>');
		var img = $('<img src="' + param.path + '" id="modalImg" />');
		$(wrap).css({
			width: param.wrapW + 'px',
			height: param.wrapH + 'px',
			zIndex: 1004,
			position: 'relative',
			bottom: 0,
			left: 0,
			display: 'none'
		});
		$(img).attr({
			width: param.w + 'px',
			height: param.h + 'px'
		}).css({
			width: param.w + 'px',
			height: param.h + 'px',
			position: 'absolute',
			top: sbox.conf.padding + 'px',
			left: sbox.conf.padding + 'px',
			cursor: 'pointer',
			zIndex: 1006,
			display: 'none'
		});
		$(wrap).css( { background: sbox.conf.bgColor } ).append(img);
		return wrap;
	},

	param: function(src, img){
		var imgSize, winSize, wrapW, wrapH;
		winSize = $.modal.impl.getDimensions();
		imgSize = this.imgSize(img);
		imgSize = this.resize(imgSize.w, imgSize.h, winSize[1] - 180, winSize[0] - 120);
		wrapW = imgSize.w + sbox.conf.padding*2;
		wrapH = imgSize.h + sbox.conf.padding*2;
		return {
			path: src,
			w: imgSize.w,
			h: imgSize.h,
			wrapW: wrapW,
			wrapH: wrapH,
			conL: (winSize[1] - wrapW) / 2,
			conT: (winSize[0] - wrapH) / 2
		};
	},

	resize: function(w, h, maxW, maxH){
		var x = (maxH/h >= maxW/w ? maxW/w : maxH/h);
		x = (x > 1 ? 1 : x);
		return { w:parseInt(x*w), h:parseInt(x*h) };
	},

	imgSize: function(img){
		var w, h;
		if($(img).width() && $(img).width() != 0){
			w = img.width();
			h = img.height();
		}else if(img.naturalWidth && img.naturalWidth != 0){
			w = img.naturalWidth;
			h = img.naturalHeight;
		}else{
			$('body').append(img);
			$(img).css({
				position: 'absolute',
				visibility: 'hidden',
				top: 0,
				left: 0
			});
			w = img.offsetWidth;
			h = img.offsetHeight;
			$(img).remove();
		}
		return {
			w: (w ? w : 'NA'),
			h: (h ? h : 'NA')
		};
	}

};