var MarqueeFrame = function( divId)
{
	this.advsFrame = document.getElementById(divId);	
	this.init();
}
MarqueeFrame.prototype = {
	advsFrame: null,
	innerFrame: null,
	intervalId: null,
	frameWidth: 500,
	
	init: function()
	{
		if( this.advsFrame)
		{
			this.id = MarqueeFrame.objArray.length;
			MarqueeFrame.objArray.push( this);
			
			with( this.advsFrame)
			{
				style.display = 'none';
				style.width = this.frameWidth + 'px';
				style.height = '70px';
				style.borderStyle = 'solid';
				style.borderWidth = '1px';
				style.borderColor = 'white';
				style.position = 'absolute';
				style.overflow = 'hidden';
				style.left = '50px';
				style.top = '50px';
			}
			
			this.innerFrame = document.createElement('div'); 
			this.advsFrame.appendChild( this.innerFrame);
			with( this.innerFrame)
			{
				style.width = "3000px";
				style.height = '70px';
				style.borderWidth = 0;
				style.position = 'relative';
				style.top = 0;
				style.left = 0;
			}			
		}
	},
	
	show: function()
	{
		this._copies();
		this.advsFrame.style.display = 'block';
	},
	
	hidden: function()
	{		
		this.advsFrame.style.display = 'none';
	},
	
	setPosition: function( x, y)
	{
		this.advsFrame.style.left = x + 'px';
		this.advsFrame.style.top = y + 'px';
	},
	
	setWidth: function( w)
	{
		this.frameWidth = w;
		this.advsFrame.style.width = w  + 'px';
	},
	
	height: 70,
	width: 144,
	
	setHeight: function( h)
	{
		this.height = h;
		this.advsFrame.style.height = h + 'px';
		this.innerFrame.style.height = h + 'px';
		//this.innerFrame.style.height = this.advsFrame.clientHeight;
	},
	
	picTotalWidth: 0,
	addImage: function( url, width, title)
	{
		if( !title) 
			title = ''; // default
			
		if( !width)
			width = this.width; // default
			
		var imageElmt = document.createElement("img");
		imageElmt.src = url;
		imageElmt.alt = title;		
		imageElmt.style.height = this.height + 'px';
		imageElmt.style.width = width + 'px';
		this.picTotalWidth += width;
		
		this.innerFrame.appendChild(imageElmt);
	},
	
	activate: function( offset, milliSecond)
	{
		if( this.intervalId == null)
		{
			this.intervalId = setInterval( 'MarqueeFrame.motion(' + this.id + ',' + offset + ')', milliSecond);
		}
	},
	
	relaPosition: 0,
	shift: function( movement)
	{
		this.relaPosition += movement;
		
		if( this.relaPosition == -this.picTotalWidth || this.relaPosition == this.picTotalWidth)
		{
			this.innerFrame.style.left = '0px';
			this.relaPosition = 0;
		}
		else
			this.innerFrame.style.left = this.relaPosition + 'px';
	},
		
	_copies: function()
	{	
		var tmp = this.innerFrame.innerHTML;
		var widthTmp = this.picTotalWidth;
		
		this.innerFrame.innerHTML += tmp;
		widthTmp += this.picTotalWidth;
			
		while( this.frameWidth > widthTmp - this.picTotalWidth)
		{
			this.innerFrame.innerHTML += tmp;
			widthTmp += this.picTotalWidth;
		}
		
		this.innerFrame.style.width = widthTmp + 'px';
	}
}

MarqueeFrame.motion = function( id, offset)
{
	var obj = MarqueeFrame.getObj( id);
	obj.shift(offset);
}

MarqueeFrame.objArray = [];
MarqueeFrame.getObj = function( id)
{
	if(id != null && id < MarqueeFrame.objArray.length)
		return MarqueeFrame.objArray[id];
	return null;
}

var f = new MarqueeFrame('advs_frame');
f.setPosition(193,70); // 設定座標
f.setHeight( 108);	// 設定frame高
f.setWidth( 725);	// 設定frame寬

f.addImage('advs/01.jpg');
f.addImage('advs/02.jpg');
f.addImage('advs/03.jpg');
f.addImage('advs/04.jpg');
f.addImage('advs/05.jpg');
f.addImage('advs/06.jpg');
f.addImage('advs/07.jpg');
f.addImage('advs/08.jpg');
f.addImage('advs/09.jpg');
f.addImage('advs/10.jpg');
f.addImage('advs/11.jpg');
f.addImage('advs/12.jpg');
f.show();
f.activate(-1, 10);