var ScrollViewer = {
	
	/* 
	 * 【プロパティ】
		* 
	================================================================================ */
	//ビューワーID
	viewerID:'',
	//ビューワーのサイズ
	viewerSize:{ w:0, h:0, iw:0 },
	//ビューワーコントローラーID
	viewerCtrlID:{ prev:"prevScroll", next:"nextScroll" },
	//ビューワーアイテムID
	viewerItemID:'',
	//ビューワークリップID
	viewerClipID:'ScrollViewerClip',
	
	//スクロールタイマー
	scrollTimer:null,
	//スクロール方向
	scrollDirection:-1,
	//スクロール速度
	scrollSpeed:1,
	//スクロール基本速度
	scrollBaseSpeed:1,
	//コントロールスクロール速度
	scrollCtrlSpeed:4,
	//ビューワーとコントローラーのスペース
	vcSpace:8,
	
	//ビューワーへの参照
	viewerObj:null,
	//ビューワークリップへの参照
	viewerClipObj:null,
	//ビューワーナビゲーションへの参照
	viewerPrevObj:null,
	viewerNextObj:null,
	//ビューワーアイテムへの参照
	viewerItemObj:null,
	//ビューワー各アイテムへの参照
	viewerItemList:[],
	
	
	/* 
	 * 【機能】スクロールビューワーの初期化
		* 【引数】params         => パラメータ                       [Object][必須]
		* 　　　　params.vID     => ビューワーのID名                 [String][必須]
		* 　　　　params.viID    => ビューワーアイテムリストのID名   [String][必須]
		* 　　　　params.vWidth  => ビューワーの幅                   [Number][必須]
		* 　　　　params.vHeight => ビューワーの高さ                 [Number][必須]
		* 　　　　params.uWidth  => ビューワーアイテム１つあたりの幅 [Number][必須]
		* 　　　　auto           => 自動スクロール設定               [Boolean][必須]
	================================================================================ */
	init:function(params,auto){
		
		//ビューワーIDを格納
		this.viewerID = params.vID;
		//ビューワーアイテムIDを格納
		this.viewerItemID = params.viID;

		
		//1アイテムの幅を格納
		this.viewerSize.iw = (params.uWidth)?params.uWidth:100;
		//ビューワーの幅を格納
		this.viewerSize.w = (params.vWidth)?params.vWidth:(this.viewerSize.iw * 3);
		//ビューワーの高さを格納
		this.viewerSize.h = (params.vHeight)?params.vHeight:this.viewerSize.iw;
		
		//ビューワーへの参照
		this.viewerObj = document.getElementById(this.viewerID);
		//ビューワークリップへの参照
		this.viewerClipObj = document.getElementById(this.viewerClipID);
		//ビューワーナビゲーションへの参照
		this.viewerPrevObj = document.getElementById(this.viewerCtrlID.prev);
		this.viewerNextObj = document.getElementById(this.viewerCtrlID.next);
		//ビューワーアイテムへの参照
		this.viewerItemObj = document.getElementById(this.viewerItemID);
		

		
		//対象オブジェクトがなければ終了
		if(!this.viewerObj||!this.viewerPrevObj||!this.viewerNextObj||!this.viewerItemObj||!this.viewerClipObj)	return false;
		
		//コントローラーのスタイル設定
		this.setCtrlStyle();
		//ビューワーのスタイル設定
		this.setViewerStyle();
		//クリップエリアのスタイル設定
		this.setClippingStyle();
		//アイテムリストのスタイル設定
		this.setItemListStyle();
		//アイテムのスタイル設定
		this.setItemStyle();
		
		
		//クリップ領域の幅
		var clipWidth = this.viewerSize.w;
		//全アイテム-1の合計幅
		var itemWidth = (this.viewerItemList.length) * this.viewerSize.iw;

		//コントローラーの表示・イベント設定
		if(itemWidth<=clipWidth){
			this.setEventController_noscroll();
		}else{
			this.setEventController();
		}
		//自動スクロール設定
		if(itemWidth>clipWidth&&auto==true){
			this.start();
		}
	},
	
	
	/* 
	 * 【機能】ビューワーのスタイル設定
		* 【引数】なし
	================================================================================ */
	setViewerStyle:function(){
		var v = this.viewerObj;
		v.style.position = "relative";
		v.style.overflow = "hidden";
		v.style.width = (this.viewerSize.w + (this.viewerPrevObj.clientWidth + this.vcSpace) + (this.viewerNextObj.clientWidth + this.vcSpace) + 25) + "px";
		v.style.height = this.viewerSize.h + "px";
	},
	
	
	/* 
	 * 【機能】アイテムリストのスタイル設定
		* 【引数】なし
	================================================================================ */
	setItemListStyle:function(){
		var i = this.viewerItemObj;
		i.style.position = "absolute";
		i.style.top = "0px";
		i.style.left = (this.viewerPrevObj.clientWidth + this.vcSpace) + "px";
	},
	
	
	/* 
	 * 【機能】アイテムのスタイル設定
		* 【引数】なし
	================================================================================ */
	setItemStyle:function(){
		var list = this.viewerItemObj.getElementsByTagName("li");
		for(var i=0;i<list.length;i++){
			this.viewerItemList.push(list[i]);
			list[i].style.position = "absolute";
			list[i].style.top = "0px";
			list[i].style.left = (i * this.viewerSize.iw) + "px";
		}
	},
	
	
	/* 
	 * 【機能】コントローラーのスタイル設定
		* 【引数】なし
	================================================================================ */
	setCtrlStyle:function(){
		var p = this.viewerPrevObj;
		var n = this.viewerNextObj;
		p.style.position = 
		n.style.position = "absolute";
		p.style.zIndex = 9999;
		n.style.zIndex = 9998;
		p.style.top = ((this.viewerSize.iw/2) - (this.viewerPrevObj.clientHeight/2)) + "px";
		n.style.top = ((this.viewerSize.iw/2) - (this.viewerNextObj.clientHeight/2)) + "px";
		p.style.left = 
		n.style.right = "0px";
	},
	
	
	/* 
	 * 【機能】クリップエリアのスタイル設定
		* 【引数】なし
	================================================================================ */
	setClippingStyle:function(){
		var c = this.viewerClipObj;
		var cl = this.viewerPrevObj.clientWidth + this.vcSpace;
		var cr = cl + this.viewerSize.w;
		c.style.width = (this.viewerSize.w + (this.viewerPrevObj.clientWidth + this.vcSpace) + (this.viewerNextObj.clientWidth + this.vcSpace)) + "px";
		c.style.height = this.viewerSize.h + "px";
		c.style.position = "absolute";
		c.style.top = 
		c.style.left = "0px";
		c.style.clip = "rect(auto " + cr + "px " + this.viewerSize.h + "px " + cl + "px)";
	},
	
	/* 
	 * 【機能】コントローラーのイベント設定
		* 【引数】なし
	================================================================================ */
	setEventController:function(){
		var p = this.viewerPrevObj;
		var n = this.viewerNextObj;
		p.firstChild.onmouseover = function(){
			//img('bt_prev','/images/hall/bt_scroll_prev_ov.gif');
			ScrollViewer.start();
			ScrollViewer.scrollDirection =  1;
			ScrollViewer.scrollSpeed = ScrollViewer.scrollCtrlSpeed;
		};
		n.firstChild.onmouseover = function(){
			//img('bt_next','/images/hall/bt_scroll_next_ov.gif');
			ScrollViewer.start();
			ScrollViewer.scrollDirection = -1;
			ScrollViewer.scrollSpeed = ScrollViewer.scrollCtrlSpeed;
		};
		p.firstChild.onmouseout = function(){
			ScrollViewer.scrollSpeed = ScrollViewer.scrollBaseSpeed;
			//img('bt_prev','/images/hall/bt_scroll_prev.gif');
		};
		n.firstChild.onmouseout = function(){
			ScrollViewer.scrollSpeed = ScrollViewer.scrollBaseSpeed;
			//img('bt_next','/images/hall/bt_scroll_next.gif');
		};
	},
	
	/* 
	* 【機能】コントローラーのイベント設定
	* 【引数】なし
	================================================================================ */
	setEventController_noscroll:function(){
		var p = this.viewerPrevObj;
		var n = this.viewerNextObj;
		p.firstChild.onmouseover = function(){
			//img('bt_prev','/images/hall/bt_scroll_prev_ov.gif');
		};
		n.firstChild.onmouseover = function(){
			//img('bt_next','/images/hall/bt_scroll_next_ov.gif');
		};
		p.firstChild.onmouseout = function(){
			//img('bt_prev','/images/hall/bt_scroll_prev.gif');
		};
		n.firstChild.onmouseout = function(){
			//img('bt_next','/images/hall/bt_scroll_next.gif');
		};
	},	


	/* 
	 * 【機能】スピードの設定
		* 【引数】s => スピード [Number][必須]
	================================================================================ */
	setSpeedBase:function(s){
		if(s) this.scrollBaseSpeed = s;
	},
	
	
	/* 
	 * 【機能】コントローラースピードの設定
		* 【引数】s => スピード [Number][必須]
	================================================================================ */
	setSpeedController:function(s){
		if(s) this.scrollCtrlSpeed = s;
	},
	
	
	/* 
	 * 【機能】スクロール関数
		* 【引数】なし
	================================================================================ */
	scrolling:function(){
		//スピード取得
		var nowSpeed = ScrollViewer.scrollSpeed;
		//現在地取得
		var nowPos = parseInt(this.viewerItemObj.style.left);
		//移動距離算出
		var movePos = ScrollViewer.scrollDirection * nowSpeed;
		//目標地算出
		var nextPos = nowPos + movePos;
		//位置更新
		this.viewerItemObj.style.left = nextPos + "px";
		
		//左端アイテムのX座標
		var leftSidePos = parseInt(this.viewerItemList[0].style.left);
		//右端アイテムのX座標
		var rightSidePos = parseInt(this.viewerItemList[this.viewerItemList.length-1].style.left);
		
		//ループ処理実行
		if((ScrollViewer.scrollDirection==-1)&&(nowPos + leftSidePos - (this.viewerPrevObj.clientWidth + this.vcSpace) <= -this.viewerSize.iw)){
			ScrollViewer.loop();
		}else if((ScrollViewer.scrollDirection==1)&&(nowPos + rightSidePos >= (this.viewerSize.w + this.viewerPrevObj.clientWidth + this.vcSpace))){
			ScrollViewer.loop();
		}
	},
	
	
	/* 
	 * 【機能】ループ処理関数
		* 【引数】なし
	================================================================================ */
	loop:function(){
		//アイテム数を取得
		var itemNum = this.viewerItemList.length;
		//移動方向による処理の振り分け
		switch(ScrollViewer.scrollDirection){
			case -1:
				var cache = this.viewerItemList.shift();
				cache.style.left = (parseInt(cache.style.left) + (this.viewerSize.iw * itemNum)) + "px";
				this.viewerItemList.push(cache);
				break;
			case 1:
				var cache = this.viewerItemList.pop();
				cache.style.left = (parseInt(cache.style.left) - (this.viewerSize.iw * itemNum)) + "px";
				this.viewerItemList.unshift(cache);
				break;	
		}
	},
	
	
	/* 
	 * 【機能】スクロール開始関数
		* 【引数】なし
	================================================================================ */
	start:function(){
		if(this.scrollTimer==null){
			this.scrollTimer = setInterval(function(){ ScrollViewer.scrolling(ScrollViewer.viewerItemObj,ScrollViewer.scrollDirection); },25);
		}
	},
		
	/* 
	 * 【機能】スクロール停止関数
		* 【引数】なし
	================================================================================ */
	stop:function(){
			ScrollViewer.scrollDirection =  0;
	},
	
	/* 
	 * 【機能】スクロール写真切替関数
		* 【引数】urlPrefix      => URLPrefix
		* 　　　　classNm        => タブのクラス
		* 　　　　carrouselWidth => 幅
	================================================================================ */
	tabClick:function(urlPrefix, classNm, carrouselWidth){
		if ($("#tab_box").find("a." + classNm).find("img").hasClass("on")) {
			// クリックされたタグがクラスにonを保持している場合、
			// 現在選択されているタブであるため、後続処理を行わない。
			return false;
		}
		
		// タイマーをストップ
		// ⇒タイマーを止めてあげないと<li>タグ以下をクリアした段階でJSエラーが発生してしまうため。
		if (this.scrollTimer!=null) {
			clearInterval(this.scrollTimer);
		}
		this.stop();
		
		// ScrollViewer.jsプロパティを初期化
		//スクロールタイマー
		this.scrollTimer = null;
		//スクロール方向
		this.scrollDirection = -1;
		//スクロール速度
		this.scrollSpeed = 1;
		//スクロール基本速度
		this.scrollBaseSpeed = 1;
		//コントロールスクロール速度
		this.scrollCtrlSpeed = 4;
		
		//ビューワーへの参照
		this.viewerObj = null;
		//ビューワークリップへの参照
		this.viewerClipObj = null;
		//ビューワー各アイテムへの参照
		this.viewerItemList = [];
		
		$.ajax({
			type: "GET",
			dataType: "json",
			data: {
				"photoTabName" : classNm
			},
			url: XY.config.pageContext.ctx + "/" + urlPrefix + "/changeTab",
			success: function(data){
				// HTMLの生成
				// ulタグ配下のHTLMを除去する。
				$("#ScrollItem").empty();
				$.each(data,function(index) { 
					$("#ScrollItem").append("<li><div class='ScrollItemGalleryBox'><div class='ScrollItemImageGalleryBox'><span class='ScrollItemImageText_" + index + "'><a href='" + data[index].url + "'><img src='" + data[index].imgUrl + "' alt='" + data[index].name + "' width='148px' height='148px' /></a></span></div><a href='" + data[index].url + "'><span class='links'>" + data[index].name + "</span></a></div></li>");
				});
				
				// スクロール部品の初期化
				vHeight = $("#ScrollItem").find("div.ScrollItemGalleryBox").innerHeight() + 30;
				viewScroll = ScrollViewer.init({ vID:'ScrollViewerBox', viID:'ScrollItem', vWidth:carrouselWidth, vHeight:vHeight, uWidth:158 },true);
				
				$("#tab_box").find("a").each(function(index){
					var className = $(this).attr("class");
					var classNameOn = $(this).attr("class") + "_on";
					if (className == classNm) {
						$("#tab_box").find("a." + className).find("img.off").parents("li").hide();
						$("#tab_box").find("a." + classNameOn).find("img.on").parents("li").show();
					} else {
						$("#tab_box").find("a." + className).find("img.off").parents("li").show();
						$("#tab_box").find("a." + classNameOn).find("img.on").parents("li").hide();
					}
				});
			}
		});
	}
		
	
};