﻿// JavaScript Document
var rollbanner_styles = {
						rollbanner:"rollbanner",
						panel:"panel",
						text:"text"
					};

var preimages = [];
var btn_n_images = [];
var btn_a_images = [];
function preloader(rollimages, preimages, btn_n_images, btn_a_images){
	for (var i = 0; i < rollimages.length; i++) {
		preimages[i] = new Image();
		btn_n_images[i] = new Image();
		btn_a_images[i] = new Image();
		preimages[i].src = rollimages[i].src;
		preimages[i].alt = rollimages[i].alt;
		btn_n_images[i].src = rollimages[i].btn_n_src;
		btn_a_images[i].src = rollimages[i].btn_a_src;
	}
}

function rollbanner(rollimages, preimages, btn_n_images, btn_a_images, rollbanner_styles){
	this.rollimages = rollimages;
	this.preimages = preimages;
	this.styles = rollbanner_styles;
	this.btn_n_images = btn_n_images;
	this.btn_a_images = btn_a_images;
	
	var oRollBanner;
	var oA_image;
	var oImage;
	var oPanel;
	var oA;
	//var oText;
	var oAs;
	var interval = 0;
	var pId = 1;
	
	this.createToObj = function(obj){
		oRollBanner = document.createElement('div');
		oRollBanner.className = this.styles.rollbanner;
		oA_image = document.createElement('a'); 
		oImage = document.createElement('img');
		oImage.border = 0;
		oImage.src = this.preimages[0].src;
		oImage.alt = this.preimages[0].alt;
		oA_image.href = this.rollimages[0].href;
		oA_image.title = this.rollimages[0].title;
		oA_image.onmouseover = function(){
			clearTimeout(interval);
		}
		oA_image.onmouseout = function(){
			this.autoRoll();
		}.bind(this)
		
		oA_image.appendChild(oImage);
		oPanel = document.createElement('div');
		oPanel.className = this.styles.panel;
		//oText = document.createElement('div');
		//oText.className = this.styles.text;
		for(var i = 0; i < rollimages.length; i++){
			oA = document.createElement('a');
			oA.oId = i;
			oA.href = "javascript:void(0)";
			oA.title = this.rollimages[i].title;
			oA.onfocus = function(){
				this.blur();
			}
			oA.style.background = "url(" + this.btn_n_images[i].src + ") no-repeat left top"
			oA.onmouseover = function(){
				clearTimeout(interval);
				oAs = this.parentNode.getElementsByTagName("a");
				for(var i = 0; i < oAs.length; i++){
					oAs[i].style.background = "url(" + btn_n_images[i].src + ") no-repeat left top"
				}
				this.style.background = "url(" + btn_a_images[this.oId].src + ") no-repeat left top"
				//oText.innerHTML = rollimages[this.oId].title.split("　")[0] + "<br />" + rollimages[this.oId].title.split("　")[1];
				if(this.oId < oAs.length - 1){
					pId = this.oId + 1;
				}else{
					pId = 0;
				}
				oImage.src = preimages[this.oId].src;
				oImage.alt = preimages[this.oId].alt;
				oA_image.href = rollimages[this.oId].href;
				oA_image.title = rollimages[this.oId].title;
			}
			oA.onmouseout = function(){
				this.autoRoll();
			}.bind(this)
			
			/*oA.onclick = function(){
				
			}*/
			
			oPanel.appendChild(oA);
		}
		//oText.innerHTML = this.rollimages[0].title.split("　")[0] + "<br />" + this.rollimages[0].title.split("　")[1];
		//oPanel.appendChild(oText);
		
		oRollBanner.appendChild(oA_image);
		oRollBanner.appendChild(oPanel);
		
		obj.appendChild(oRollBanner);
		
		oAs = oPanel.getElementsByTagName("a");
		for(var i = 0; i < oAs.length; i++){
			oAs[i].style.background = "url(" + this.btn_n_images[i].src + ") no-repeat left top";
		}
		oAs[0].style.background = "url(" + this.btn_a_images[0].src + ") no-repeat left top";
		
		this.autoRoll();
	}
	
	this.autoRoll = function(){
		interval = setInterval(this.switchScene,5000);
	}.bind(this)
	
	this.switchScene = function(){
		oImage.src = this.preimages[pId].src;
		oImage.alt = this.preimages[pId].alt;
		//oText.innerHTML = this.rollimages[pId].title.split("　")[0] + "<br />" + this.rollimages[pId].title.split("　")[1];
		oAs = oPanel.getElementsByTagName("a");
		for(var i = 0; i < oAs.length; i++){
			oAs[i].style.background = "url(" + this.btn_n_images[i].src + ") no-repeat left top";
		}
		oAs[pId].style.background = "url(" + this.btn_a_images[pId].src + ") no-repeat left top";
		if(pId < oAs.length - 1){
			pId++;
		}else{
			pId = 0;
		}
	}
}