var outLoop = null;
var bannerClass = {
	rollSpanNo : 0,
	rollEnd : 0,
	thisLoop : '',

	rollStart : function()
	{
		if( banner_arr.length > 0 ) {
			bannerImage = Array();
			/** ¹è³ÊÀ̹ÌÁö ¹Ì¸® ·Îµù ²­»¶ÀÓ ¹æÁö **/
			for( i = 0; i < banner_arr.length; i++ )
			{
				bannerImage[i] = new Image();
				bannerImage[i].src = banner_arr[i];
			}
			/** ·Îµù Á¾·á **/
			
			rollSpan = document.getElementById('banner_roll');
			rollSpan.attachEvent("onmouseover", this.rollingStop);
			rollSpan.attachEvent("onmouseout", this.rollingLoop);
			rollSpan.style.width = bannerSizeWidth[this.rollSpanNo];
			rollSpan.style.height = bannerSizeHeight[this.rollSpanNo];
			rollSpan.style.cursor = "pointer";
			rollSpan.style.backgroundImage = "url("+ bannerImage[this.rollSpanNo].src +")";
			this.rollSpanNo++;
			this.rollEnd = banner_arr.length - 1;
			/** rolling Loop Start **/
			setTimeout(
				function()
				{
					supprtRolling();
				}, 3000 
			);
		}
	},

	rollingLoop : function()
	{
		this.thisLoop = setTimeout(
			function()
			{
				supprtRolling();
			}, 3000 );
	},

	/** ommouseover rollingstop **/
	rollingStop : function()
	{
		clearTimeout( this.thisLoop );
		clearTimeout( outLoop );
	}
}

/** rolling Loop  **/
supprtRolling = function()
{
	thisNo = bannerClass.rollSpanNo;
	rollSpan = document.getElementById('banner_roll');
	rollSpan.style.width = bannerSizeWidth[thisNo];
	rollSpan.style.height = bannerSizeHeight[thisNo];
	rollSpan.style.backgroundImage = "url("+ bannerImage[thisNo].src +")";	
	if( bannerClass.rollEnd > thisNo ) {
		bannerClass.rollSpanNo++;
	}
	else {
		bannerClass.rollSpanNo = 0;
	}
	outLoop = setTimeout(
		function()
		{
			bannerClass.rollingLoop();
		}, 3000 
	);
}