//300枠表示用 photoreport_silde js

var PhotoReport = Class.create();

PhotoReport.prototype ={
	initialize: function(opts){
		
		//initialize
		this.changeInterval = opts.changeInterval;
		this.photoItem = opts.item;
		this.currentNum = this.photoItem.length -1; //最終を初期値に
	

		this.targetEle = $(opts.targetEle);
		this.targetEleName = opts.targetEle;
	
		this.targetEle.innerHTML ="";


		//build titleElement
		var titleEle = document.createElement("h3");
		titleEle.className = "heading08";
		var titleAnchorEle = document.createElement("A");
		titleAnchorEle.href = opts.title.link;

		titleAnchorEle.appendChild(document.createTextNode(opts.title.name));
		titleEle.appendChild(titleAnchorEle);


		//build mainElement
		this.mainEle = document.createElement("span");
		this.mainEle.id = this.targetEleName + "_main";
		this.mainEle.className = "main08";

		//build activeElement
		this.activeEle = document.createElement("span");
		this.activeEle.id = this.targetEleName + "_active";
		
		this.activeImgAnchorEle = document.createElement("A");
		this.activeImgImgEle = document.createElement("img");
		this.activeImgImgEle.src = this.photoItem[0].imgL;
		this.activeImgImgEle.width = "184";
		this.activeImgImgEle.height = "138";
		this.activeImgAnchorEle.appendChild(this.activeImgImgEle);
		
		this.activeTitleAnchorEle = document.createElement("A");
		this.activeTitleAnchorEle.className = "title08";
		
		this.activePropertyEle = document.createElement("p");
		this.activePropertyEle.className="date08";
		
		this.activeEle.appendChild(this.activeImgAnchorEle);
		this.activeEle.appendChild(this.activeTitleAnchorEle);
		this.activeEle.appendChild(this.activePropertyEle);

		//build ollist
		this.activeStatEle = document.createElement("ol");
		this.activeStatEleLiArray = $A(this.photoItem).collect(function(e, i){
				var listEle = document.createElement("li");
				
				var anchorEle = document.createElement("A");
				anchorEle.href = "javascript: void(0);";
				anchorEle.onclick = function(){ this.subInvoke(i) }.bind(this);
				
				listEle.appendChild(anchorEle);
				this.activeStatEle.appendChild(listEle);
				return(listEle);
			}.bind(this)
		);

		this.activeEle.appendChild(this.activeStatEle );

		//build pagenation
		this.activePageEle = document.createElement("ul");
		this.activePagePrevEle = document.createElement("li");
		this.activePagePrevEle.className = "prev08";
		this.activePagePrevAnchorEle = document.createElement("A");
		this.activePagePrevAnchorEle.href="javascript: void(0);";
		this.activePagePrevAnchorEle.onclick=function(){ this.changeActivePrev()}.bind(this);
		this.activePagePrevAnchorEle.appendChild( document.createTextNode("前の写真を見る") );
		this.activePagePrevEle.appendChild(this.activePagePrevAnchorEle);
		
		this.activePageNextEle = document.createElement("li");
		this.activePageNextEle.className = "next08";
		this.activePageNextAnchorEle = document.createElement("A");
		this.activePageNextAnchorEle.href="javascript: void(0);";
		this.activePageNextAnchorEle.onclick=function(){ this.changeActiveNext()}.bind(this);
		this.activePageNextAnchorEle.appendChild( document.createTextNode("次の写真を見る") );
		this.activePageNextEle.appendChild(this.activePageNextAnchorEle);

		this.activePageEle.appendChild(this.activePagePrevEle);
		this.activePageEle.appendChild(this.activePageNextEle);

		this.activeEle.appendChild(this.activePageEle );

		//build subElement
		this.subEle = document.createElement("span");
		this.subEleid =  this.targetEleName + "_sub";
		this.subEle.className = "sub08";

		this.subEleUl = document.createElement("ul");

		this.subEleLiArray = $A(this.photoItem).collect(function(e, i){
				var listEle = document.createElement("li");
				
				var anchorEle = document.createElement("A");
				anchorEle.href = "http://japan.cnet.com" + this.photoItem[i].link;;
				anchorEle.onmouseover = function(){ this.subInvoke(i) }.bind(this);
				//anchorEle.onclick = function(){location.href = "http://japan.cnet.com" + this.photoItem[i].link;}.bind(this);
				
				var imgEle = document.createElement("img");
				imgEle.src = e.imgM;
				imgEle.width = "40";
				imgEle.height = "30";

				anchorEle.appendChild(imgEle);
				listEle.appendChild(anchorEle);
				this.subEleUl.appendChild(listEle);
				return(listEle);
			}.bind(this)
		);

		this.subEle.appendChild(this.subEleUl);
		

		//build archiveElement
		var archiveEle = document.createElement("p");
		var archiveAnchorEle = document.createElement("A");
		archiveAnchorEle.href = opts.archive.link; 
		archiveAnchorEle.appendChild( document.createTextNode(opts.archive.name) );
		archiveEle.appendChild( archiveAnchorEle );

		//finalize
		this.targetEle.appendChild(titleEle);
		this.mainEle.appendChild(this.activeEle);
		this.targetEle.appendChild(this.mainEle);
		this.subEle.appendChild(archiveEle);
		this.targetEle.appendChild(this.subEle);


		this.changeActiveNext();

	},
	subInvoke: function(invokeNum){
		this.currentNum = invokeNum;
		this.setActive();
		this.animationId = setTimeout(this.changeActiveNext.bind(this), this.changeInterval);
	},
	changeActiveNext: function(){

		this.currentNum++;
		if( this.currentNum > this.photoItem.length -1){
			this.currentNum = 0;
		}

		this.setActive();

		//preload
		var nextNum = this.currentNum + 1;
		if( nextNum < this.photoItem.length){
			this.createImageCache(nextNum);
		}
		
		this.animationId = setTimeout(this.changeActiveNext.bind(this), this.changeInterval);
	},
	changeActivePrev: function(){
		this.currentNum--;
		if( this.currentNum < 0){
			this.currentNum = this.photoItem.length -1;
		}
		this.setActive();

		this.animationId = setTimeout(this.changeActiveNext.bind(this), this.changeInterval);
	
	},
	setActive: function(){
		clearTimeout(this.animationId);


		this.createImageCache(this.currentNum);

		//this.activeImgImgEle.src = this.photoItem[this.currentNum].imgL;

		Element.remove(this.activeImgImgEle);
		this.activeImgImgEle = this.imgEle[this.currentNum];
		this.activeImgAnchorEle.appendChild(this.activeImgImgEle);

		this.activeTitleAnchorEle.innerHTML =  this.photoItem[this.currentNum].title;
		this.activeImgAnchorEle.href = this.photoItem[this.currentNum].link;
		this.activeTitleAnchorEle.href = this.photoItem[this.currentNum].link;
		this.activePropertyEle.innerHTML = this.photoItem[this.currentNum].date;
		this.activeStatEleLiArray.each( function(e){
			Element.removeClassName(e, "active");
		});
		Element.addClassName(this.activeStatEleLiArray[this.currentNum], "active");


		this.subEleLiArray.each( function(e){
			Element.removeClassName(e, "active");
		});
		Element.addClassName(this.subEleLiArray[this.currentNum], "active");
	},
	createImageCache: function(createImgNum){
		if(this.imgEle == undefined){ this.imgEle = []; }
		
		if(this.imgEle[createImgNum] == undefined){
			this.imgEle[createImgNum] = document.createElement("img");
			this.imgEle[createImgNum].width = "184";
			this.imgEle[createImgNum].height = "138"
			this.imgEle[createImgNum].src = this.photoItem[createImgNum].imgL;
		}

	
	}

};