//-----------------------------------------------------------------------------
//
// MDS Slide Show v1.0.0
//																   2008-07-29
// 文字コードはUTF-8のページで利用してください。Shift_JIS等他文字コードを利用する場合
// 本ファイルを、利用する文字コードに合わせてください。
//
// 使い方）
// 1. HTMLのheader内のscriptタグで本ファイルを読み込んでください。
//    mds_common.jsを先に読み込むことが必須です。
//    例）
//      <script language="JavaScript" type="text/javascript" src="./js/mds_common.js"></script>
//	    <script language="JavaScript" type="text/javascript" src="./js/mds_slideshow.js"></script>
// 2. HTMLページ内に以下のidでタグを記述してください
//
//    <div id="slideshow-panel-album">
//       スライドショーにしたい画像リンクの一覧を、このidのdivタグで囲ってください。
//       スタイルやクラスは自由に指定しても動作に影響ありません。
//       内部にあるaタグで、 class="slide-image"となっているリンクがスライド画像の対象となります。
//       リンクは全て大きく表示する場合の画像URLへのリンクにしてください。
//       他のページへのリンクは現在のバージョンでは設定できません。その他は自由にHTMLを書いて問題ありません。
//       aタグclass="slide-image"はクリックするとスライドショーを表示するように自動的に変換されます。
//       また、aタグ内にtitle属性を記述すると、スライドにタイトルを表示できます。
//       aタグ内にdescription属性を記述すると、スライドの画像説明を表示できます。
//       詳しくはsample.htmlの記述を参考にしてください。
//
//    <div id="slideshow-panel-slide-show">
//       スライドショーの表示パネルです。内部に<img>タグをひとつだけ入れることが必須です。
//       内部のHTMLは<img>タグがひとつ必要以外自由に記述できます。スタイルやクラスも自由に記述してください。
//       idが[slideshow-slide-prev]のリンクやボタンを内部に記述しておくと、クリックして前のスライドに戻れます。
//       idが[slideshow-slide-next]のリンクやボタンを内部に記述しておくと、クリックして次のスライドに進めます。
//       idが[slideshow-slide-close]のリンクやボタンを内部に記述しておくと、閉じるボタンになります。
//       idが[slide-show-title]のブロックを用意しておくと、Aタグのtitleを表示します。
//       idが[slide-show-description]のブロックを用意しておくと、Aタグのdescriptionを表示します。
//       idが[slide-show-paging]のブロックを用意しておくと、画像何枚目を表示しているかを表示します。
//       その他の制限はありませんのでHTMLとCSSは自由に書いてください。
//
//    ※ IE6の場合、自動的にbodyタグにheight:100%;を指定するので注意が必要です。
//
//-----------------------------------------------------------------------------
onload = function() {
	mdsSlideShow.init();
}
onscroll = function() {
	if( mdsSlideShow ) {
		mdsSlideShow.backGround.style.left	= getScrollWidth() + 'px';
		mdsSlideShow.backGround.style.top	= getScrollHeight() + 'px';
	}
}
/**
 * MDS Slide Show class object
 */
var mdsSlideShow	= {

	init : function(){

		this.panelAlbum     		= $('slideshow-panel-album');
		this.panelSlideShow 		= $('slideshow-panel-slide-show');
		this.panelSlideShowImage 	= $('slide-show-main-image');
		this.panelSlideShowBtnPrev	= $('slideshow-slide-prev');
		this.panelSlideShowBtnNext	= $('slideshow-slide-next');
		this.panelSlideShowBtnClose	= $('slideshow-slide-close');
		this.panelSlideShowImageTitle		= $('slide-show-title');
		this.panelSlideShowImageDescription	= $('slide-show-description');
		this.panelSlideShowImagePaging		= $('slide-show-paging');

		this.activeImageNumber		= 0;
		this.totalImageCount		= 0;
		this.panelWidth				= 150;
		this.panelHeight			= 150;
		this.panelPadding			= 10;
		this.panelDescriptionHeight	= 80;
		this.backgroundColorNumber	= 255;
		this.panelAlphaNum			= 100;

		this.albumImageArray	 			= new Array();
		this.albumImageTitleArray 			= new Array();
		this.albumImageDescriptionArray 	= new Array();
		this.backGround						= document.createElement('div');

		this.panelSlideShowBtnPrev.onclick			= mdsSlideShow.showPrev;
		this.panelSlideShowBtnPrev.style.cursor		= 'pointer';
		this.panelSlideShowBtnNext.onclick			= mdsSlideShow.showNext;
		this.panelSlideShowBtnNext.style.cursor		= 'pointer';
		this.panelSlideShowBtnClose.onclick			= mdsSlideShow.hide;
		this.panelSlideShowBtnClose.style.cursor	= 'pointer';
		
		this.digAlbumImage( this.panelAlbum );

		this.panelSlideShowImage.style.cursor	= 'pointer';
		this.panelSlideShowImage.title			= 'click to close this image!';
		this.panelSlideShowImage.onclick		= mdsSlideShow.hide;

		this.panelSlideShow.style.width			= String(this.panelWidth) + 'px';
		this.panelSlideShow.style.height		= String(this.panelHeight) + 'px';

		// 背景ブラックアウトに関する前処理
		if( navigator.userAgent.indexOf("MSIE 6") >= 0 ){
			document.body.style.width			= '100%';
			document.body.style.height			= '100%';
			document.body.style.margin			= '0px';
			document.body.style.padding			= '0px';
		}
		this.backGround.id	= 'slide-background';
		this.backGround.style.backgroundColor	= '#' + int2hexString(this.backgroundColorNumber) + int2hexString(this.backgroundColorNumber) + int2hexString(this.backgroundColorNumber);
		this.backGround.style.filter			= 'alpha(opacity=60)';
		this.backGround.style.opacity			= '0.6';
		this.backGround.style.position			= 'absolute';
		this.backGround.style.left				= '0px';
		this.backGround.style.top				= '0px';
		this.backGround.style.width				= '100%';
		this.backGround.style.height			= '100%';
		this.backGround.style.zIndex			= '-1';
		document.getElementsByTagName("body").item(0).appendChild(this.backGround);
		
		this.panelSlideShow.style.visibility	= 'hidden';
		this.panelSlideShow.style.position		= 'absolute';
		this.panelSlideShow.style.zIndex		= '-2';
		this.panelSlideShow.style.left			= '0px';
		this.panelSlideShow.style.top			= '0px';
	},

	digAlbumImage : function( tagObject ) {
		var childs = tagObject.childNodes;
		for( var i=0; i < childs.length; i++ ) {
			var child = childs[i];
			var tag_name   = child.nodeName;
			var class_name = child.className;
			if( 'A' == tag_name && 'slide-image' == class_name ) {
				var imageObject		= new Image();
				imageObject.src		= child.href;
				child.imageNumber	= this.totalImageCount;
				child.onclick		= function() { mdsSlideShow.show(this.imageNumber); return false; };
				this.albumImageArray.push( imageObject );
				this.albumImageTitleArray.push(child.title);
				this.albumImageDescriptionArray.push(child.description);
				this.totalImageCount++;
			}
			this.digAlbumImage( child );
		}
	},

	hide: function() {
		if( mdsSlideShow.panelAlphaNum > 0 ) {
			mdsSlideShow.panelAlphaNum -= 4;
		}
		if( mdsSlideShow.backgroundColorNumber < 255 ) {
			mdsSlideShow.backgroundColorNumber	+= 9;
			if( mdsSlideShow.backgroundColorNumber > 255 ) { mdsSlideShow.backgroundColorNumber = 255; }
		}
		var colorNum	= int2hexString( mdsSlideShow.backgroundColorNumber );
		mdsSlideShow.panelSlideShow.style.filter		= 'alpha(opacity=' + mdsSlideShow.panelAlphaNum + ')';
		mdsSlideShow.panelSlideShow.opacity				= String(mdsSlideShow.panelAlphaNum/100);
		mdsSlideShow.backGround.style.backgroundColor	= '#' + colorNum + colorNum + colorNum;

		if( navigator.userAgent.indexOf("MSIE") < 0 ){
			// IE以外の場合は先にパネルを隠す
			mdsSlideShow.panelSlideShow.style.visibility		= 'hidden';
		}
		if( mdsSlideShow.panelAlphaNum <= 0 && mdsSlideShow.backgroundColorNumber == 255 ) {
			mdsSlideShow.backgroundColorNumber				= 255;
			mdsSlideShow.panelSlideShow.style.visibility	= 'hidden';
			mdsSlideShow.backGround.style.visibility		= 'hidden';
			mdsSlideShow.backGround.style.position			= 'absolute';
			mdsSlideShow.backGround.style.zIndex			= '-1';
			mdsSlideShow.panelSlideShow.style.zIndex		= '-2';
		} else {
			setTimeout("mdsSlideShow.hide()",10);
		}
	},

	show: function(number) {
		mdsSlideShow.activeImageNumber	= number;
		var imageWidth	= mdsSlideShow.albumImageArray[this.activeImageNumber].width;
		var imageHeight	= mdsSlideShow.albumImageArray[this.activeImageNumber].height;
		var nowWidth	= parseInt( mdsSlideShow.panelSlideShow.style.width );
		var nowHeight	= parseInt( mdsSlideShow.panelSlideShow.style.height );
		mdsSlideShow.panelSlideShowImage.src				= './images/loading.gif';
		mdsSlideShow.panelSlideShowImage.style.marginTop	= ( ( nowHeight - mdsSlideShow.panelSlideShowImage.height - mdsSlideShow.panelDescriptionHeight ) / 2 ) + 'px';
		mdsSlideShow.panelSlideShowImage.style.marginBottom	= ( ( nowHeight - mdsSlideShow.panelSlideShowImage.height - mdsSlideShow.panelDescriptionHeight ) / 2 ) + 'px';
		setTimeout("mdsSlideShow.showPanel()",30);
	},

	showPanel: function(number) {
		if( mdsSlideShow.backgroundColorNumber > 0 ) {
			mdsSlideShow.backgroundColorNumber	-= 9;
			if( mdsSlideShow.backgroundColorNumber < 0 ) { mdsSlideShow.backgroundColorNumber = 0; }
		}
		var colorNum	= int2hexString( mdsSlideShow.backgroundColorNumber );
		mdsSlideShow.backGround.style.backgroundColor	= '#' + colorNum + colorNum + colorNum;
		mdsSlideShow.backGround.style.visibility		= 'visible';
		mdsSlideShow.backGround.style.position			= 'absolute';
		mdsSlideShow.backGround.style.width				= '100%';
		mdsSlideShow.backGround.style.height			= '100%';
		mdsSlideShow.backGround.style.zIndex			= '999';
		var imageWidth	= mdsSlideShow.albumImageArray[this.activeImageNumber].width;
		var imageHeight	= mdsSlideShow.albumImageArray[this.activeImageNumber].height;
		var nowWidth	= parseInt( mdsSlideShow.panelSlideShow.style.width );
		var nowHeight	= parseInt( mdsSlideShow.panelSlideShow.style.height );
		mdsSlideShow.panelSlideShowImage.style.marginTop	= ( ( nowHeight - mdsSlideShow.panelSlideShowImage.height - mdsSlideShow.panelDescriptionHeight ) / 2 ) + 'px';
		mdsSlideShow.panelSlideShowImage.style.marginBottom	= ( ( nowHeight - mdsSlideShow.panelSlideShowImage.height - mdsSlideShow.panelDescriptionHeight ) / 2 ) + 'px';
		if( mdsSlideShow.backgroundColorNumber <= 0 ) {
			mdsSlideShow.panelSlideShow.style.visibility		= 'visible';
			mdsSlideShow.panelWidth								= imageWidth + mdsSlideShow.panelPadding;
			mdsSlideShow.panelHeight							= imageHeight + mdsSlideShow.panelDescriptionHeight;
			mdsSlideShow.panelSlideShow.style.top				= String( getScrollHeight() + 20 ) + 'px';
			mdsSlideShow.panelSlideShow.style.left				= String( ( getBrowserWidth() - nowWidth ) / 2 ) + 'px';
			mdsSlideShow.panelSlideShow.style.zIndex			= '1000';
			mdsSlideShow.panelSlideShow.style.filter			= 'alpha(opacity=100)';
			mdsSlideShow.panelSlideShow.opacity					= '1';
			setTimeout("mdsSlideShow.panelResizeTo()",500);
		} else {
			setTimeout("mdsSlideShow.showPanel()",30);
		}
	},

	panelResizeTo: function() {
		var nowWidth	= parseInt( this.panelSlideShow.style.width );
		var nowHeight	= parseInt( this.panelSlideShow.style.height );
		if( nowWidth < this.panelWidth ) {
			nowWidth	+= 10;
			if( nowWidth > this.panelWidth ) { nowWidth = this.panelWidth; }
		} else if ( nowWidth > this.panelWidth ) {
			nowWidth	-= 10;
			if( nowWidth < this.panelWidth ) { nowWidth = this.panelWidth; }
		}
		if( nowHeight < this.panelHeight ) {
			nowHeight	+= 10;
			if( nowHeight > this.panelHeight ) { nowHeight = this.panelHeight; }
		} else if( nowHeight > this.panelHeight ) {
			nowHeight	-= 10;
			if( nowHeight < this.panelHeight ) { nowHeight = this.panelHeight; }
		}

		this.panelSlideShow.style.width		= String(nowWidth) + 'px';
		this.panelSlideShow.style.height	= String(nowHeight) + 'px';
		this.panelSlideShow.style.left		= String( ( getBrowserWidth() - nowWidth ) / 2 ) + 'px';

		if( nowWidth == this.panelWidth && nowHeight == this.panelHeight ) {
			mdsSlideShow.panelSlideShowImage.src				= './images/transparent.gif';
			mdsSlideShow.panelSlideShowImage.style.marginTop	= '0px';
			mdsSlideShow.panelSlideShowImage.style.marginBottom	= '0px';
			setTimeout("mdsSlideShow.showImage()",30);
		} else {
			mdsSlideShow.panelSlideShowImage.style.marginTop	= ( ( nowHeight - mdsSlideShow.panelSlideShowImage.height - mdsSlideShow.panelDescriptionHeight ) / 2 ) + 'px';
			mdsSlideShow.panelSlideShowImage.style.marginBottom	= ( ( nowHeight - mdsSlideShow.panelSlideShowImage.height - mdsSlideShow.panelDescriptionHeight ) / 2 ) + 'px';
			setTimeout("mdsSlideShow.panelResizeTo()",10);
		}
	},

	showImage: function() {
		this.panelSlideShowImage.src					= this.albumImageArray[this.activeImageNumber].src;
		this.panelSlideShowImageTitle.innerHTML			= this.albumImageTitleArray[this.activeImageNumber];
		this.panelSlideShowImageDescription.innerHTML	= this.albumImageDescriptionArray[this.activeImageNumber];
		var num	= this.activeImageNumber + 1;
		this.panelSlideShowImagePaging.innerHTML		= 'image ' + String(num) + ' of ' + String(this.totalImageCount);
		if( this.activeImageNumber == 0 ) {
			this.panelSlideShowBtnPrev.style.visibility	= 'hidden';
		} else {
			this.panelSlideShowBtnPrev.style.visibility	= 'visible';
		}
		if( this.activeImageNumber == this.totalImageCount - 1 ) {
			this.panelSlideShowBtnNext.style.visibility	= 'hidden';
		} else {
			this.panelSlideShowBtnNext.style.visibility	= 'visible';
		}
	},

	showNext: function() {
		if( mdsSlideShow.activeImageNumber < mdsSlideShow.totalImageCount - 1 ) {
			mdsSlideShow.activeImageNumber++;
			mdsSlideShow.show(mdsSlideShow.activeImageNumber);
		}
	},

	showPrev: function() {
		if( mdsSlideShow.activeImageNumber > 0 ) {
			mdsSlideShow.activeImageNumber--;
			mdsSlideShow.show(mdsSlideShow.activeImageNumber);
		}
	}

};