// JavaScript Document

/*
########################################################
  メイン画像、サムネイル画像、リンク先
########################################################
*/

/*　メイン画像
---------- ---------- ---------- ---------- */
var img02_l_common = 'http://www.sobre.jp/user_data/packages/sobre01/img/top/';
var img02_l = new Array(
img02_l_common +'201202/bnr_120201.jpg',
img02_l_common +'201202/bnr_120202.jpg',
img02_l_common +'201202/bnr_120203.jpg',
img02_l_common +'201202/bnr_120204.jpg',
img02_l_common +'201202/bnr_120205.jpg',
img02_l_common +'201111/bnr_111116.jpg',
img02_l_common +'201111/bnr_111109.jpg'
);

/*　サムネイル画像
---------- ---------- ---------- ---------- */
var img02_s_common = 'http://www.sobre.jp/user_data/packages/sobre01/img/top/';
var img02_s = new Array(
img02_s_common +'201202/bnr_120201_1.jpg?_ex=185x70',
img02_s_common +'201202/bnr_120202_1.jpg?_ex=185x70',
img02_s_common +'201202/bnr_120203_1.jpg?_ex=185x70',
img02_s_common +'201202/bnr_120204_1.jpg?_ex=185x70',
img02_s_common +'201202/bnr_120205_1.jpg?_ex=185x70',
img02_s_common +'201111/bnr_111116_1.jpg?_ex=185x70',
img02_s_common +'201111/bnr_111109_1.jpg?_ex=185x70'
);

/*　リンク先画像
---------- ---------- ---------- ---------- */
var img02_link_common = 'http://www.sobre.jp/';
var img02_link = new Array(
img02_link_common +'index.php',
img02_link_common +'products/list.php?mode=search&name=vs',
img02_link_common +'products/list.php?category_id=80',
img02_link_common +'products/list.php?category_id=1',
img02_link_common +'products/list.php?mode=search&name=%e3%83%97%e3%83%81%e3%83%97%e3%83%a9',
img02_link_common +'products/list.php?category_id=153',
img02_link_common +'products/list.php?category_id=148'
);

/*　プリロード
---------- ---------- ---------- ---------- */
var preload02_l = new Array();
var preload02_s = new Array();
for (i = 0, len = img02_l.length; i < len; i++) {
    preload02_l[i] = new Image();
    preload02_l[i].src = img02_l[i];
	
	preload02_s[i] = new Image();
    preload02_s[i].src = img02_s[i];
}


/*
########################################################
  グローバル関数
########################################################
*/

var slide02_now = 0; //現在のメイン表示画像
var slide02_mainWait_time = 5000;
var slide02_mainTime;

var slide02Alpha = new Array(0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1);
var slide02_alphaPlus;
var slide02_alphaTime = 90;

var thum_Max = 4; //サムネイルの最大表示数
var thum02_img = 185; //サムネの横幅
var thum02_imgLeft = 9; //サムネのmargin-left
var thum02_posi = 0;
var thumMove_waitTime = 50; //サムネの早さ
var thumMove_waitTime_px = 2;
var thumMove_NextPrev = 30; //サムネの早送り戻し
var thumMove_NextPrev_px = 6;
var thum02_moveTime;
var thum02_nextTime;
var thum02_prevTime;

var thumY = 300; //slideShow02Boxの高さ
var thumY02 = thumY - 86; //thumY - slideShow02_thumUlの高さ
var thumY_standard = 170;
var thum_px = 300;
var thumY_time = 50;
var thumY_px = 4;


/*
########################################################
  メイン画像の表示
########################################################
*/

function slide_main02(){
	clearInterval(slide02_mainTime);
	
	/* メイン画像表示
	---------- ---------- ---------- ---------- */
	var slideHtml02 = '<p><img src="'+ img02_l[slide02_now]+'" alt="" onclick="top.location.href=' + "'"+ img02_link[slide02_now] +"'" + '" id="slide02_main" class="thum03_'+ slide02_now +'" style="opacity:0; filter:alpha(opacity=0);" /></p>';
	
	document.getElementById("slideShow02Box").innerHTML = slideHtml02;
	
	/* サムネイルのalpha処理
	---------- ---------- ---------- ---------- */
	if (document.getElementById('slideShow02_thumUl')){
		var thum_alpha = document.getElementsByName('thum03_'+ slide02_now);
		
		thum_alpha[0].style.opacity = '0.75';
		thum_alpha[0].style.filter = 'alpha(opacity = 75)';
		if (img02_l.length - 1 > thum_Max){
			thum_alpha[1].style.opacity = '0.75';
			thum_alpha[1].style.filter = 'alpha(opacity = 75)';
		}
		
		var thum_nowName = slide02_now - 1;
		var thum_alpha2 = document.getElementsByName('thum03_'+ thum_nowName);
		
		if (slide02_now == 0){
			var thum_nowName = img02_l.length - 1;
			var thum_alpha2 = document.getElementsByName('thum03_'+ thum_nowName);
			
			thum_alpha2[0].style.opacity = '1';
			thum_alpha2[0].style.filter = 'alpha(opacity = 100)';
			if (img02_l.length - 1 > thum_Max){
				thum_alpha2[1].style.opacity = '1';
				thum_alpha2[1].style.filter = 'alpha(opacity = 100)';
			}
		}else{
			thum_alpha2[0].style.opacity = '1';
			thum_alpha2[0].style.filter = 'alpha(opacity = 100)';
			if (img02_l.length - 1 > thum_Max){
				thum_alpha2[1].style.opacity = '1';
				thum_alpha2[1].style.filter = 'alpha(opacity = 100)';
			}
		}
	}
	
	/* メイン画像alpha
	---------- ---------- ---------- ---------- */
	var slide02_main_style = document.getElementById('slide02_main').style;
	var slide02Alpha_x = 0;
	
	function slide02_plus(){
		if (slide02Alpha_x == slide02Alpha.length){
			clearInterval(slide02_alphaPlus);
		}else {
			slide02_main_style.opacity = slide02Alpha[slide02Alpha_x];
			slide02_main_style.filter = 'alpha(opacity='+ (slide02Alpha[slide02Alpha_x]*100) +')';
			slide02Alpha_x++;
		}
	}
	
	slide02_alphaPlus = setInterval(slide02_plus,slide02_alphaTime); 
	
	//次のメイン画像
	if (slide02_now == img02_l.length - 1){
		slide02_now = 0;
	}else {
		slide02_now++;
	}
	
	slide02_mainWait();
}

function slide02_mainWait(){
	slide02_mainTime = setInterval(slide_main02,slide02_mainWait_time);
}

/*
########################################################
  サムネイルの表示
########################################################
*/

/* サムイルの表示
---------- ---------- ---------- ---------- */
function slideThum02(){
	var Thum02Html = '<ul id="slideShow02_thumUl">';
	
	for (i = 0, len = img02_s.length; i < len; i++){
		if (i == 0){
			Thum02Html += '<li><img src="'+ img02_s[i] +'" name="thum03_'+ i +'" alt="" onmouseover="slide02_nextImg(this.name, '+ i +')" onmouseout="set_thumMove()" onclick="top.location.href=' + "'"+ img02_link[i] +"'" + '" style="opacity:0.75; filter:alpha(opacity=75);" /></li>';
		}else {
			Thum02Html += '<li><img src="'+ img02_s[i] +'" name="thum03_'+ i +'" alt="" onmouseover="slide02_nextImg(this.name, '+ i +')" onmouseout="set_thumMove()" onclick="top.location.href=' + "'"+ img02_link[i] +"'" + '" /></li>';
		}
	}
	
	if (img02_l.length - 1 > thum_Max){
		for (i = 0, len = img02_s.length; i < len; i++){
			if (i == 0){
				Thum02Html += '<li><img src="'+ img02_s[i] +'" name="thum03_'+ i +'" alt="" onmouseover="slide02_nextImg(this.name, '+ i +')" onmouseout="set_thumMove()" onclick="top.location.href=' + "'"+ img02_link[i] +"'" + '" style="opacity:0.75; filter:alpha(opacity=75);" /></li>';
			}else {
				Thum02Html += '<li><img src="'+ img02_s[i] +'" name="thum03_'+ i +'" alt="" onmouseover="slide02_nextImg(this.name, '+ i +')" onmouseout="set_thumMove()" onclick="top.location.href=' + "'"+ img02_link[i] +"'" + '" /></li>';
			}
		}
	}
	
	Thum02Html += '</ul>';
	
	if (img02_l.length - 1 > thum_Max){
		//早送り早戻しの枠
		Thum02Html += '<div id="slidePrev" onmouseover="thumScllor_Prev()" onmouseout="set_thumMove()"></div>';
		Thum02Html += '<div id="slideNext" onmouseover="thumScllor_Next()" onmouseout="set_thumMove()"></div>';
	}
	
	// more images の表示
	Thum02Html += '<p class="moreImg"><img src="http://www.sobre.jp/user_data/packages/sobre01/img/base/btn_otherimages.png" alt="" width="130" height="25" /></p>';
	
	document.getElementById("slideShow02_ThumBox").innerHTML = Thum02Html;
	
	document.getElementById("slideShow02_thumUl").style.width = (thum02_img + thum02_imgLeft) * (img02_s.length * 2) +'px';
}

/* サムイルのオンマウス
---------- ---------- ---------- ---------- */
function slide02_nextImg(r, q){
	if (thum02_moveTime){
		clearInterval(thum02_moveTime);
	}
	if (thum02_nextTime){
		clearInterval(thum02_nextTime);
	}
	if (thum02_prevTime){
		clearInterval(thum02_prevTime);
	}
	if (slide02_alphaPlus){
		clearInterval(slide02_alphaPlus);
	}
	if (slide02_mainTime){
		clearInterval(slide02_mainTime);
	}
	
	/* 現在のメインのサムネを表示
	---------- ---------- ---------- ---------- */
	var thum_Name = document.getElementById('slide02_main').className;
	var thum_alpha = document.getElementsByName(thum_Name);
	
	thum_alpha[0].style.opacity = '1';
	thum_alpha[0].style.filter = 'alpha(opacity = 100)';
	if (img02_l.length - 1 > thum_Max){
		thum_alpha[1].style.opacity = '1';
		thum_alpha[1].style.filter = 'alpha(opacity = 100)';
	}
	
	/* オンマウスしたサムネを透過
	---------- ---------- ---------- ---------- */
	var thum_alpha2 = document.getElementsByName(r);
	
	thum_alpha2[0].style.opacity = '0.75';
	thum_alpha2[0].style.filter = 'alpha(opacity = 75)';
	if (img02_l.length - 1 > thum_Max){
		thum_alpha2[1].style.opacity = '0.75';
		thum_alpha2[1].style.filter = 'alpha(opacity = 75)';
	}
	
	slide02_now = q;
	slide_main02();
}

/*
########################################################
  サムネイルのMOVE
########################################################
*/

/* サムイルのMOVE
---------- ---------- ---------- ---------- */
function thum_move2(){
	var thum02_Ul_id = document.getElementById("slideShow02_thumUl");
	var thum02_Ul_style = thum02_Ul_id.style;
	var thum_pxMax = -((thum02_img + thum02_imgLeft) * img02_s.length);
	
	if (thum02_posi <= thum_pxMax){
		thum02_posi = 0;
		thum02_Ul_style.right =  thum02_posi+'px';
	}else {
		thum02_posi = thum02_posi -thumMove_waitTime_px;
		thum02_Ul_style.right =  thum02_posi+'px';
	}
}

function thum_move(){
	if (thum02_nextTime){
		clearInterval(thum02_nextTime);
	}
	if (thum02_prevTime){
		clearInterval(thum02_prevTime);
	}
	
	if (img02_l.length - 1 > thum_Max){
		thum02_moveTime = setInterval(thum_move2,thumMove_waitTime);
	}
}

/* 早戻し
---------- ---------- ---------- ---------- */
function thumScllor_Next2(){
	var thum02_Ul_id = document.getElementById("slideShow02_thumUl");
	var thum02_Ul_style = thum02_Ul_id.style;
	var thum_pxMax = -((thum02_img + thum02_imgLeft) * img02_s.length);
	
	if (thum02_posi >= 0){
		thum02_posi = thum_pxMax;
		thum02_Ul_style.right =  thum02_posi+'px';
	}else {
		thum02_posi = thum02_posi + thumMove_NextPrev_px;
		thum02_Ul_style.right =  thum02_posi+'px';
	}
}

function thumScllor_Next(){
	if (thum02_moveTime){
		clearInterval(thum02_moveTime);
	}
	if (thum02_prevTime){
		clearInterval(thum02_prevTime);
	}
	thum02_nextTime = setInterval(thumScllor_Next2,thumMove_NextPrev);
}

/* 早送り
---------- ---------- ---------- ---------- */
function thumScllor_Prev2(){
	var thum02_Ul_id = document.getElementById("slideShow02_thumUl");
	var thum02_Ul_style = thum02_Ul_id.style;
	var thum_pxMax = -((thum02_img + thum02_imgLeft) * img02_s.length);
	
	if (thum02_posi <= thum_pxMax){
		thum02_posi = 0;
		thum02_Ul_style.right =  thum02_posi+'px';
	}else {
		thum02_posi = thum02_posi - thumMove_NextPrev_px;
		thum02_Ul_style.right =  thum02_posi+'px';
	}
}

function thumScllor_Prev(){
	if (thum02_moveTime){
		clearInterval(thum02_moveTime);
	}
	if (thum02_nextTime){
		clearInterval(thum02_nextTime);
	}
	thum02_prevTime = setInterval(thumScllor_Prev2,thumMove_NextPrev);
}

/* 早送り・早戻し　マウスアウト
---------- ---------- ---------- ---------- */
function set_thumMove(){
	if (thum02_moveTime){
		clearInterval(thum02_moveTime);
	}
	if (thum02_nextTime){
		clearInterval(thum02_nextTime);
	}
	if (thum02_prevTime){
		clearInterval(thum02_prevTime);
	}
	thum_move();
}


/*
########################################################
  座標の取得
########################################################
*/
function slideXY02() {
	var x;
	var y;
	//id="slideShow02Box"のエレメントを取得
	var slideShow02Box = document.getElementById('slideShow02Box');

	//documentからslideShowBoxに範囲変更
	slideShow02Box.onmousemove = function(e) {
  	if (slideShow02Box.all) { // for IE
    	x = event.offsetX;
    	y = event.offsetY;
    }else {
    	x = e.layerX;
    	y = e.layerY;
    }
	
	var thum002Box_style = document.getElementById('slideShow02_ThumBox').style;
	var thum02_Up_time;
	var thum02_Down_time;
	
	if (y >= thumY_standard && thum_px == thumY) {
		/* サムネイルが上がる
		---------- ---------- ---------- ---------- */
		function thum02_Up(){
			if (thum02_Down_time){
				clearInterval(thum02_Down_time);
			}
			if (thum02_moveTime){
				clearInterval(thum02_moveTime);
			}
			
			if (thum_px <= thumY02){
				clearInterval(thum02_Up_time);
				thum_px = thumY02;
				thum002Box_style.top = thum_px +'px';
				
				//タイマーが動いているかを判定
				if (thum02_prevTime == null && thum02_nextTime == null){
					thum_move();
				}
			
			}else {
				thum_px = thum_px - thumY_px;
				thum002Box_style.top = thum_px +'px';
			}
		}
		
		thum02_Up_time = setInterval(thum02_Up,thumY_time);
		
	}else if(y < thumY_standard && thum_px == thumY02){
		/* サムネイルが下がる
		---------- ---------- ---------- ---------- */
		function thum02_Down(){
			if (thum02_Up_time){
				clearInterval(thum02_Up_time);
			}
			if (thum02_moveTime){
				clearInterval(thum02_moveTime);
			}
			
			if (thum_px >= thumY){
				clearInterval(thum02_Down_time);
				thum_px = thumY;
				thum002Box_style.top = thum_px +'px';
				
			}else {				
				thum_px = thum_px + thumY_px;
				thum002Box_style.top = thum_px +'px';
			}
		}
		
		//タイマー判定の初期化
		thum02_prevTime = null;
		thum02_nextTime = null;
		
		
		thum02_Down_time = setInterval(thum02_Down,thumY_time);
	}
  }
}



/*
########################################################
  開始
########################################################
*/

if(window.addEventListener) {
window.addEventListener("load",slideShow02Start, false);
}
else if(window.attachEvent) {
window.attachEvent("onload",slideShow02Start);
}
else {
window.onload = slideShow02Start;
}


//slideShow関数とslideShowTimer関数を実行
function slideShow02Start() {
	if (document.getElementById("slideShow02Area")){
		document.getElementById('slideShow02Area').style.background = 'none';
		slide_main02();
		slideThum02();
		slideXY02();
	}
}