/*
	商品フォトギャラリーを表示するためのJavascript
	Copyright 2010 株式会社　メディアトラバース
*/

/*
  フォトギャラリーのコンテンツを入れ替える場合はここからcommentArrayまでの内容を
  書き換えてください。現在番号アイコンが16個までしか用意していないので、商品の
  最大数は16個です
*/
//商品の写真。サイズは160x120
var imageArray = new Array (
  "gallery/image01.bmp",
  "gallery/image02.bmp",
  "gallery/image03.bmp",
  "gallery/image04.bmp",
  "gallery/image05.bmp",
  "gallery/image06.bmp",
  "gallery/image07.bmp",
  "gallery/image08.bmp"
);
//番号アイコン
var numberArray = new Array (
  "gallery/b01.bmp",
  "gallery/b02.bmp",
  "gallery/b03.bmp",
  "gallery/b04.bmp",
  "gallery/b05.bmp",
  "gallery/b06.bmp",
  "gallery/b07.bmp",
  "gallery/b08.bmp");
//商品の写真をClickしたときにJumpするURL
var hrefArray = new Array (
  "products/teradek_vserver.html#odyssey",
  "products/teradek_vserver.html#citadel",
  "products/teradek_vserver.html#chimera",
  "products/teradek_cube.html",
  "services/service_design.html",
  "services/service_mobicam3.html",
  "services/service_drec.html",
  "services/service_3dnr.html");
//商品のコメント かならず最初に<br>を入れてください
var commentArray = new Array (
  "<br>H.264フルハイビジョンビデオサーバーOdyssey",
  "<br>DVB-ASI対応H.264ビデオサーバーCitadel",
  "<br>HD-SDI対応H.264ビデオサーバーChimera",
  "<br>手のひらサイズのH.264ビデオサーバーCube",
  "<br>Maxim/Mobilygen MG3500設計サポート",
  "<br>IP cameraリファレンスデザインMobicam3",
  "<br>ドライブレコーダーリファレンスデザイン", 
  "<br>3DノイズリダクションIP");  


/* ここから下は書き変えないでください
*/
var imageCount = imageArray.length; //商品の数
var imageGalleryObj, leftArrowObj, rightArrowObj, numberObj, commentObj;//各ElementのObject変数
var imageNo  = 0;//現在表示している商品番号
var slideshowImages;
var slideshowHrefs;
var numberImages;
var timeoutId=false;
var fadeinc=0;

//fadeIn/Out関数
function fadeSlide(inc) {
	var j=fadeinc/100;
	slideshowImages[0].style.filter = "alpha(opacity="+fadeinc+")"; //IE用
	slideshowImages[0].style.MozOpacity = j; //Mozilla用
	slideshowImages[0].style.opacity = j; //Safary用
	
	fadeinc += inc;
	
	if(fadeinc>100) {
		fadeinc = 100;
	} else if(fadeinc<0) {
		fadeinc = 0;
	}
}

//商品の表示を3秒間隔で変更する関数（再帰。initSlideShow()から最初は呼ばれる）
//fade In/Outつきなので少し制御が複雑になった（再帰の中で再帰をよべないことがあだとなった）
//変数fadeは0でfadeなし、+1でfadein、-1でfadeout
//再帰の流れは
// fade=0でスタート ->画像切り替え後fade=+1でFadeInへ->fadeinc=100になるまでfade=+1継続、100になったら
// fade=-1としfadeOutへ ->fadeinc=0になるまでfade=-1継続。0になったら画像切り替えにもどる。
function gallerySlide(inc,fade) {
	//現在のImageをFadeOutする。
	if(fade==0) {//画像を切り換えてFadeInへ
		//商品番号を更新する
		imageNo += inc
		if(imageNo >= imageCount) {
			imageNo = 0;
		}
		if(imageNo < 0) {
			imageNo = imageCount-1;
		}
		//切り替え時のフリッカ防止（透明度100になっているはずだが。。）
		slideshowImages[0].style.filter = "alpha(opacity=0)";
		slideshowImages[0].style.MozOpacity = 0.0;
		slideshowImages[0].style.opacity = 0.0;		
		//画像や付帯するものを変更する		
		slideshowImages[0].src = imageArray[imageNo]; 	//Imageを変更
		slideshowHrefs[0].href = hrefArray[imageNo];  	//Linkを変更
		numberImages[0].src = numberArray[imageNo];		//番号アイコンを変更
		commentObj.innerHTML = commentArray[imageNo];	//コメントを変更
		timeoutId=setTimeout("gallerySlide(1,+1)",50); //fade inへ		
	} else if(fade==-1) { //FadeOut。完全に終了したら画像切り替えへ。
		fadeSlide(-25);
		if(fadeinc == 0) {
			timeoutId=setTimeout("gallerySlide(1,0)",50); //fadeout終了 画像切り替えへ
		} else {
			timeoutId=setTimeout("gallerySlide(0,-1)",50);//fadeout継続
		}
	} else { //FadeIn. FadeInが完全に終わったら3秒待ってFadeOutへ
		fadeSlide(25);
		if(fadeinc == 100) {
			timeoutId=setTimeout("gallerySlide(1,-1)",3000); //fadeIn終了 3秒待ち fadeoutへ
		} else {
			timeoutId=setTimeout("gallerySlide(0,1)",50);//fadeIn継続
		}
	}
}

//右矢印ボタンが押されたら、gallerySlideの再帰callを一旦無効にして、即座に表示変更
function slideRight() {
	if(timeoutId) {
		clearTimeout(timeoutId);
	}
	timeoutId=false;
	gallerySlide(1,0);
}
//左矢印ボタンが押されたら、gallerySlideの再帰callを一旦無効にして、即座に表示変更
function slideLeft() {
	if(timeoutId) {
		clearTimeout(timeoutId);
	}
	timeoutId=false;
	gallerySlide(-1,0);
}

//初期化
function initSlideShow() {
	imageNo = 0;
	//画像
	imageGalleryObj = document.getElementById('slide_image');
	slideshowImages = imageGalleryObj.getElementsByTagName('IMG');
	slideshowImages[0].src = imageArray[imageNo];
	//リンク
	slideshowHrefs  = imageGalleryObj.getElementsByTagName('A');
	slideshowHrefs[0].href = hrefArray[imageNo];
	//番号アイコン
	numberObj    = document.getElementById('number');
	numberImages = numberObj.getElementsByTagName('IMG');
	numberImages[0].src = numberArray[imageNo];
	//左矢印
	leftArrowObj = document.getElementById('arrow_left');
	leftArrowObj.onmouseup = slideLeft;
	//右矢印
	rightArrowObj= document.getElementById('arrow_right');
	rightArrowObj.onmouseup = slideRight;
	//コメントテキスト
	commentObj = document.getElementById('slide_text');
	
	gallerySlide(0,0);
}

	
window.onload = initSlideShow;