var $$ = $.fn;	/* $はJQueryオブジェクト */
$$.extend({		/* extend()はプロトタイプへ追加 */
	SplitID : function()
	{
		return this.attr('id').split('-').pop();
	},
	Slideshow : {
		Ready : function()
		{
			// hoverイベント パラメータは２つ。
			// 第一引数 - マウスオーバーで呼び出される関数
			// 第二引数 - マウスアウトで呼び出される関数
			$('li.slideshowControl').hover(
				function() {
					$(this).addClass('slideshowControlOn');
				},
				function() {
					$(this).removeClass('slideshowControlOn');
				}
			)
			// clickイベント
			$('li.slideshowControl').click(
				function() {
					// コンテナ番号(#slideshowContainer-N)
					var slideshowContainerNo = $(this).parent('ul.slideshowControls').SplitID();
					var slideshowContainer = 'div#slideshowContainer-' + slideshowContainerNo
					// 画像オブジェクト
					var imgElem = new Image();
					// srcの設定
					imgElem.src = 'slide' + $(this).SplitID() + '.jpg';
					// 画像オブジェクトの非表示(display:none)
					$(imgElem).hide();
					$(slideshowContainer + ' > img').remove();
					// 画像オブジェクト追加
					$(slideshowContainer).append(imgElem); 

					$('li.slideshowControl').removeClass('slideshowControlActive');

					// スライド操作
					var elem = $(slideshowContainer + ' > img');

					// 表示 -通常-
					//elem.show();

					// 表示 -フェードイン1- 初期不透明度0 -> 100% (例 1000ミリ秒で不透明度100%)
					elem.fadeIn(1000);

					// 表示 -フェードイン2- 初期不透明度 任意 -> 任意 (例 30%から1000ミリ秒で80%)
					/*elem.css({"opacity": "0.3"})
					elem.show();
					elem.fadeTo(1000,0.8);*/

					// 表示 -アニメーション-
					/*elem.css({"width": "20px", "opacity": "0.1"});
					elem.animate(
						{width: "100%", opacity: "1.0"},
						{duration: "slow"}
					);*/

					$(this).addClass('slideshowControlActive');
				}
			);
		}
	}
});

$(function()
{
	$$.Slideshow.Ready();
});