/* photo js */
/*--------------------------------------------------------------------------------
/product/_workphoto/photo.css
プロダクト　施工事例の写真スライド用css

構成
・必須js
prototype.js
browserinfo.js


div#photoBox -------- メインdiv
ul#ul_photoList ----- メインの写真のリスト
li.li_photo --------- js取得クラス

div#thumbBox -------- サムネイルのdiv
ul#ul_thumbList ----- サムネイルのリスト
li.li_thumb --------- js取得クラス
li.li_thumb a ------- html上でclassを指定しない。CSSでクラスをつくっておく。(active時と、hover時)
                      a.ahover:hover, a.aActive, a.aActive:hover{background:url(img/thumbBgline.gif) 0 0 no-repeat;}
li.li_thumb img ----- 画像の横幅を設定（取得）する。
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
［フロー］
li.li_photoクラスの数を取得
クラスの数によって、ul#ul_photoListのwidthを変更


--------------------------------------------------------------------------------*/

try{
window.addEventListener('load',xInit,false);
}catch(e){window.attachEvent('onload',xInit);
}

var nPhotoWidth = 448 + 12;/*写真の幅+右マージン*/
var nTumbWidth = 448;
//var nThumbWidthEle = 3 + 56 + 3 + 3;/*paddingL + サムネイルの幅 + paddingR + marginR */
var nThumbWidthEle = 0;/*サムネイルの幅*/
var nPadMar = 3 + 3 + 6;/*paddingL + paddingR + marginR */
function xInit(){
	var nUlWidth = 0;
	var photoObj = document.getElementsByClassName('li_thumb');
	photoObj.each(function(obj){
	
	var bi = new BrowserInfo();
	if(bi.ie){
		/*IE MV under6 only*/
		obj.childNodes[0].setAttribute('onclick',new Function('xScroll('+nUlWidth+');return false;'));
		obj.childNodes[0].setAttribute('onkeypress',new Function('xScroll('+nUlWidth+');return false;'));
		if(nUlWidth == 0){
			obj.childNodes[0].setAttribute('className','aActive');//setHoverStyle
		}else{
			obj.childNodes[0].setAttribute('className','ahover');//setHoverStyle
		}
	}else{
		obj.childNodes[0].setAttribute('onclick','xScroll('+nUlWidth+');return false;');
		obj.childNodes[0].setAttribute('onkeypress','xScroll('+nUlWidth+');return false;');
		if(nUlWidth == 0){
			obj.childNodes[0].setAttribute('class','aActive');//setHoverStyle
		}else{
			obj.childNodes[0].setAttribute('class','ahover');//setHoverStyle
		}
	}
	//alert(obj.firstChild.firstChild.getAttribute('width'));
	//thumbnail centering
	nThumbWidthEle += (obj.firstChild.firstChild.getAttribute('width') * 1) + nPadMar;
	/**/
	nUlWidth++;
	});
	nUlWidthAll = nUlWidth * nPhotoWidth;
	var ulPList = $('ul_photoList');/*ul_photoList*/
	Element.setStyle(ulPList, { "width":nUlWidthAll+"px"});
	Element.setStyle(ulPList, { "left":"0px"});
	/* thumb padding */
	var nThumEle = (nTumbWidth - nThumbWidthEle) / 2;
	var ulTList = $('ul_thumbList');
	Element.setStyle(ulTList, { "padding":"0 " + nThumEle+"px"});
}
function xScroll(tar_left){
	var ulPList = $('ul_photoList');/*ul_photoList*/
	var nMovVol = tar_left * nPhotoWidth;/*target location*/
	var nNowLocPx = Element.getStyle(ulPList, "left");
	
	var nNowLoc = nNowLocPx.substr(0,(nNowLocPx.length -2));//pxを除去
	
/* active , over */
	var photoObj = document.getElementsByClassName('li_thumb');
	var photoBool = 0;
	photoObj.each(function(obj){
								  	var bi = new BrowserInfo();
									if(bi.ie){
											if(photoBool == tar_left){
													obj.childNodes[0].setAttribute('className','aActive');//setHoverStyle

											}else{
													obj.childNodes[0].setAttribute('className','ahover');//setHoverStyle

											}
									}else{
											if(photoBool == tar_left){
													obj.childNodes[0].setAttribute('class','aActive');//setHoverStyle

											}else{
													obj.childNodes[0].setAttribute('class','ahover');//setHoverStyle

											}
									}
									photoBool++;	
										});
	//alert(photoObj[tar_left]);
/*----*/
if(Math.abs(nNowLoc) > Math.abs(nMovVol)){
		new Effect.MoveBy(ulPList , 0 , Math.abs(nMovVol - Math.abs(nNowLoc)),{duration:0.8,fps:1000,transition:Effect.Transitions.EaseFromTo});
	}else{
		new Effect.MoveBy(ulPList , 0 , -Math.abs(Math.abs(nNowLoc) - nMovVol),{duration:0.8,fps:1000,transition:Effect.Transitions.EaseFromTo});
	}
}






/*scriptaculousエフェクト*/
/*
transitions.js

Based on Easing Equations v2.0
(c) 2003 Robert Penner, all rights reserved. 
This work is subject to the terms in http://www.robertpenner.com/easing_terms_of_use.html

Adapted for Scriptaculous by Ken Snyder (kendsnyder ~at~ gmail ~dot~ com) June 2006
*/

// EaseFromTo (adapted from "Quart.EaseInOut")
Effect.Transitions.EaseFromTo = function(pos) {
    if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,4);
    return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2);    
};