/*
 *
 * マウスオーバーでギュッとまわりから線が寄ってくる効果を出します。
 *
 *
 * オプション
 *
 * start: 開始する画像のインデックス(0〜)
 * interval: 切り替え間隔(秒)
 * delay: 最初の切り替えまでの遅延(秒)
 * show: 画像表示のエフェクト
 * hide: 画像非表示のエフェクト
 * speed: 画像の切り替わるスピード('slow', 'normal', 'fast')
 * activate: アクティブ化処理
 * inactivate: 非アクティブ化処理
 *
 */

/*
 * オプションのデフォルト
 */
var jquery_jbanner_options = {
	'start': 0,
	'interval': 5,
	'delay': 0,
	'show' : jQuery.fn.fadeIn,
	'hide' : jQuery.fn.fadeOut,
	'speed' : 'normal',
	'pouse_on': null,
	'rotate': true,
	'controller_events': ['click'],
	'controller_bubbling': false,
	'activate' : function() { this.addClass('active'); },
	'inactivate' : function() { this.removeClass('active'); },
	placement: null
};

/*
 * デフォルト値をカスタマイズ
 */
jQuery.jbanner = function(opts) {
	jquery_jbanner_options = jQuery.extend(
		jquery_jbanner_options, opts
	);
}

/*
 * 一定時間置きに画像の切り替わるバナーを作成します。
 */
jQuery.fn.jbanner = function(opts) {
	var $ = jQuery;

	opts = $.extend({}, jquery_jbanner_options, opts);

	$(['start', 'interval', 'delay']).each(function(i, key) {
		if (typeof(opts[key]) == 'function') {
			opts[key] = opts[key]();
		}
	});

	return this.each(function(i, container) {
		container = $(container);
		var timer = null;
		var hovering = false;
		var pouse_on = $(opts['pouse_on']) || container;
		var index = opts['start'];
		var banners = container.find('.banner');
		var controllers = container.find('.controller');
		var interval = opts['interval'] * 1000;
		var delay = opts['delay'] * 1000;
		var finished = false;

		pouse_on.hover(
			function() { hovering = true; },
			function() { hovering = false; }
		);
		banners.filter(':gt(' + index + '), :lt(' + index + ')').hide();
		opts['activate'].call(controllers.eq(index));

		function show(i) {
			if (index == i) {
				return;
			}
			if (finished) {
				return;
			}
			if (timer) {
				clearInterval(timer);
			}
			timer = setInterval(update, interval);

			var old_index = index;
			index = i;
			opts['hide'].call(banners.eq(old_index), opts['speed'], function() {
				if (index == i) {
					opts['show'].call(banners.eq(i), opts['speed']);
				}
			});

			opts['inactivate'].call(controllers.eq(old_index));
			opts['activate'].call(controllers.eq(i));
		}
		function update() {
			if (! hovering) {
				var length = banners.length;
				var next_index = index + 1;
				if ((next_index == length) && (! opts['rotate'])) {
					finished = true;
				}
				var next = (index + 1) % banners.length;
				show(next);
			}
		}
		timer = setInterval(update, interval+delay);

		controllers.each(function(i, elm) {
			var id = elm.id.match(/[_-]([^_]*)$/);
			if (! id) {
				return true;
			}
			id = id[1];

			var banner_index = null;
			var found = false;
			var re = new RegExp('[_-]' + id + '$');
			banners.each(function(i, obj) {
				if (obj.id.match(re)) {
					banner_index = i;
					found = true;
					return false;
				}
			});

			if (! found) {
				return true;
			}
			
			$(opts['controller_events']).each(function(j, key) {
				$(elm)[key](function(ev) {
					show(i);
					return opts['controller_bubbling'];
				});
			});

			return true;
		});
	});
}

/*
 *
 * マウスオーバーでギュッとまわりから線が寄ってくる効果を出します。
 *
 *
 * オプション
 *
 * offset: 線の幅
 * color: 線の色
 * opacity: 不透明度
 *
 */
jQuery.fn.jframe = function(opts) {
	var $ = jQuery;

	opts = $.extend({
		'offset': 15,
		'color' : '#fff',
		'opacity' : 0.5,
		placement: null
	}, opts);

	return this.each(function(i, container) {
		container = $(container);

		var cw = container.width();
		var cw2px = cw-opts['offset']*2 + 'px';
		var ch = container.height();

		var inner = $(document.createElement('div'));
		inner.css('position', 'absolute');
		inner.width(0);
		inner.height(0);

		var inner2 = $(document.createElement('div'));
		inner2.css('position', 'relative');
		inner2.width(0);
		inner2.height(0);
		inner.append(inner2);

		var init_pos = [
			[ 0, 0, cw, 0 ],
			[ 0, cw, 0, ch ],
			[ ch, 0, cw, 0 ],
			[ 0, 0, 0, ch ]
		];

		var masks = [];
		for (var j = 0; j < 4; j++) {
			var m = $(document.createElement('div'));
			m.css('background', opts['color']);
			m.css('position', 'absolute');
			m.css('opacity', opts['opacity']);
			inner2.append(m);

			m.css('top', init_pos[j][0]);
			m.css('left', init_pos[j][1]);
			m.width(init_pos[j][2]);
			m.height(init_pos[j][3]);

			masks[j] = m;
		}

		for (var k = 0; k < 4; k++) {
			masks[k]
		}

		var offs = [];
		offs[0] = '0px';
		offs[1] = (cw-opts['offset']) + 'px';
		offs[2] = (ch-opts['offset']) + 'px';
		offs[3] = '0px';

		container.hover(
			function() {
				masks[0].animate({
					'height': opts['offset'],
					'left': opts['offset'],
					'width': cw2px
				});
				masks[1].animate({
					'width': opts['offset'],
					'left': offs[1]
				});
				masks[2].animate({
					'height': opts['offset'],
					'top': offs[2],
					'left': opts['offset'],
					'width': cw2px
				});
				masks[3].animate({
					'width': opts['offset']
				});
			},
			function() {
				masks[0].animate({
					'height': '0px',
					'left': '0px',
					'width': cw
				});
				masks[1].animate({
					'width': '0px',
					'left': cw
				});
				masks[2].animate({
					'height': '0px',
					'width': cw,
					'left': '0px',
					'top': ch
				});
				masks[3].animate({
					'width': '0px'
				});
			}
		);

		container.append(inner);
	});
}