// ==============================
// STORE Control Second Page
// utf-8
// ==============================

window.onload = storeDisplaySet;

function storeDisplaySet(){

	//vars
	var mData = storeDisplayData.arr;
	var box = document.getElementById('storeDisplay');
	var moveM = 132;  // width:94px; margin-right:38px; total
	var defM  = -226; // margin-left:-226px;
	var defO  = 0;   // Oopacity:0.3; filter :alpha(opacity=30);

	//view magazine obj
	var setObj={
		now : 0,

		chk : function(){
			if(this.now > mData.length-1){this.now = 0;}
			if(this.now < 0){this.now = mData.length-1;}
		},

		r1 : function(){
			var r = this.now+1;
			if(r>mData.length-1){r = -1*(mData.length-1-r)-1;}
			return r;
		},

		r2 : function(){
			var r = this.now+2;
			if(r>mData.length-1){r = -1*(mData.length-1-r)-1;}
			return r;
		},

		l1 : function(){
			var l = this.now-1;
			if(l<0){l = (mData.length-1+l)+1;}
			return l;
		},

		l2 : function(){
			var l = this.now-2;
			if(l<0){l = (mData.length-1+l)+1;}
			return l;
		}
	};

	//img set Obj
	var imgSet = {
		//reset
		Init : function(){
			box.img.l2 = box.itemArea.wrap.getElementsByTagName('p')[0];
			box.img.l1 = box.itemArea.wrap.getElementsByTagName('p')[1];
			box.img.now= box.itemArea.wrap.getElementsByTagName('p')[2];
			box.img.r1 = box.itemArea.wrap.getElementsByTagName('p')[3];
			box.img.r2 = box.itemArea.wrap.getElementsByTagName('p')[4];
		},

		//load
		Load : function(){
			var cnt = 0;
			function loadChk(){
				cnt++;
				if(cnt==mData.length){
					start();
				}
			}
			for(i=0; i<mData.length; i++){
				var img = new Image();
				img.onload = function(){loadChk();}
				img.src = mData[i].imgSRC;
			}
		},

		//Create
		Create : function(pos){
			var a   = document.createElement('a');
			var img = new Image();
			if(mData.length == 1){
				img.src = mData[ 0 ].imgSRC;
				a.href  = mData[ 0 ].URL;
				box.btnL.style.display = 'none';
				box.btnR.style.display = 'none';
			}else{
				a.href  = pos=='now' ? mData[ setObj[pos] ].URL    : mData[ setObj[pos]() ].URL;	
				img.src = pos=='now' ? mData[ setObj[pos] ].imgSRC : mData[ setObj[pos]() ].imgSRC;
			}
			box.img[pos].appendChild(a);
			a.appendChild(img);
			a.target = 'vizstore';
		},

		//Delete
		Delete : function(pos){
			box.img[pos].removeChild(box.img[pos].lastChild);
		},

		Reset : function(flg){
			if(flg>-1){
				box.itemArea.wrap.insertBefore(box.img.r2, box.img.l2);
			}else{
				box.itemArea.wrap.appendChild(box.img.l2);
			}
			this.Init();
			if(flg>-1){
				this.Delete('l2');
				this.Create('l2');
			}else{
				this.Delete('r2');
				this.Create('r2');
			}
		}
	};
	

	//layer get
	(function(){
		var div = box.getElementsByTagName('div');
		for(i=0; i<div.length; i++){
			if(div[i].className == 'itemArea'){box.itemArea = div[i];}
			if(div[i].className == 'itemWrap'){box.itemArea.wrap = div[i];}
			if(div[i].className == 'textArea'){
				box.textArea = div[i];
				box.textArea.p = box.textArea.getElementsByTagName('p')[0];
			}
			if(div[i].className == 'btnArea'){
				box.btnArea = div[i];
				box.btnArea.btn1 = box.btnArea.getElementsByTagName('a')[0];
				//box.btnArea.btn2 = box.btnArea.getElementsByTagName('a')[1];
				//box.btnArea.btn3 = box.btnArea.getElementsByTagName('a')[2];
			}
			if(div[i].className == 'loading'){box.loading = div[i];}
		}

		var ul = box.getElementsByTagName('ul');
		for(i=0; i<ul.length; i++){
			if(ul[i].className == 'ctrlBtn'){
				box.btnL = ul[i].getElementsByTagName('li')[0];
				box.btnR = ul[i].getElementsByTagName('li')[1];
			}
		}

		//image init
		box.img = {};
		imgSet.Init();

		//style Init;
		kmsEFF.initStyle(box.itemArea.wrap, 'marginLeft');
	})();


	function start(){
		imgSet.Create('l2');
		imgSet.Create('l1');
		imgSet.Create('now');
		imgSet.Create('r1');
		imgSet.Create('r2');
		kmsEFF.alpha(box.img.now,100);
		btnCng();
		box.textArea.p.innerHTML = mData[setObj.now].title +'<br>'+ mData[setObj.now].text;

		box.btnL.onclick= function(){
			if(box.itemArea.wrap.moving)return;
			box.itemArea.wrap.moving = true;
			setObj.now--;
			setObj.chk();
			txtCng();
			btnCng();
			boxAlpha(1)
			moveing(1);
		}

		box.btnR.onclick= function(){
			if(box.itemArea.wrap.moving)return;
			box.itemArea.wrap.moving = true;
			setObj.now++;
			setObj.chk();
			txtCng();
			btnCng();
			boxAlpha(-1)
			moveing(-1);
		}

		box.btnL.onmouseover = function(){kmsEFF.alpha(this,60);}
		box.btnL.onmouseout  = function(){kmsEFF.alpha(this,100);}
		box.btnR.onmouseover = function(){kmsEFF.alpha(this,60);}
		box.btnR.onmouseout  = function(){kmsEFF.alpha(this,100);}

		function moveing(flg){
			var n = kmsEFF.getCssPropaty(box.itemArea.wrap,'marginLeft');
			kmsEFF.marginAnime(
				box.itemArea.wrap,
				'marginLeft',
				kmsEFF.getCssPropaty(box.itemArea.wrap,'marginLeft'),
				n+moveM*flg,
				0.3,
				'easeOutCubic',
				function(){	
					imgSet.Reset(flg);
					kmsEFF.margin(box.itemArea.wrap, 'marginLeft', defM)
					box.itemArea.wrap.moving = false;
				}
			);
		}

		function txtCng(){
			kmsEFF.alphaAnime(box.textArea, 100, 0, 0.15, function(){
				box.textArea.p.innerHTML = mData[setObj.now].title +'<br>'+ mData[setObj.now].text;
				kmsEFF.alphaAnime(box.textArea, 0, 100, 0.15, function(){
					if(/*@cc_on!@*/false){box.textArea.style.removeAttribute('filter');/*IE7 Meiryo*/}
				});
			});
		}

		function btnCng(){
			box.btnArea.btn1.href      =	mData[setObj.now].URL;
			box.btnArea.btn1.target    =	'vizstore';
			box.btnArea.btn1.className = '';
		}

		function boxAlpha(flg){
			var pos = flg ==1?'l1':'r1';
			kmsEFF.alphaAnime(box.img[pos], defO, 100, 0.3);
			kmsEFF.alphaAnime(box.img.now, 100, defO, 0.3);
		}
		
		box.btnL.style.display = 'block';
		box.btnR.style.display = 'block';
		//kmsEFF.alphaAnime(box.textArea, 0, 100, 0.3);
		//function(){if(/*@cc_on!@*/false){box.textArea.style.removeAttribute('filter');}}//IE7 Meiryo
		
		kmsEFF.alphaAnime(box.loading, 100, 0, 0.3, function(){	box.loading.style.display = 'none';})
	}

	imgSet.Load();


}