var SlideContent = Class.create();
SlideContent.prototype = {
	initialize : function (target, fbtn, fval, rbtn, rval) {
		this.target = target;
		this.fval = fval;
		this.rval = rval;
		this.fbtn = fbtn;
		this.rbtn = rbtn;
		this.allowance = 10;

		//進行方向。0：rewind　1：forward
		this.dir = 1;
		//stopObservingのために、ハンドラメソッドをキャッシュ
		this.eventRewind = this.rewind.bindAsEventListener(this);
		this.eventForward = this.foward.bindAsEventListener(this);
		//バナー1枚当たりの幅
		this.elmWidth = Element.getWidth($(this.target).getElementsByTagName("li")[0]);
		//<ul>の幅
		this.baseWidth = this.elmWidth * $(this.target).getElementsByTagName("li").length;
		//<li>要素をコピー
		$A($(this.target).getElementsByTagName("li")).each(function(elm){
			new Insertion.Bottom(target, elm.cloneNode(true));
		});
		//コピー後の幅をset
		Element.setStyle($(this.target),{width:(this.baseWidth*2)+"px"});
		
		//リスナセット
		this.set();
	},
	rewind : function() {
		this.kill();
		this.dir = 0;
		var _target = $(this.target);
		var _targetVal = $(this.target).offsetLeft;
		var agt = navigator.userAgent.toLowerCase();
		var is_opera = (agt.indexOf("opera") != -1)
		var is_ff2 = (agt.indexOf("firefox/2.0") != -1)
		
		if(_targetVal > -this.allowance) {
			Element.setStyle(_target, {'left':-this.baseWidth+'px'});
		}
		var scope = this;
		new Effect.MoveBy(this.target,
											0,
											this.fval,
											{
												duration:0.6,
												fps:60,
												delay:0,
												afterFinishInternal:function(){
													scope.set();
												}
											});

	},
	foward : function() {
		this.kill();
		this.dir = 1;
		var _target = $(this.target);
		var _targetVal = $(this.target).offsetLeft;
		var agt = navigator.userAgent.toLowerCase();
		var is_opera = (agt.indexOf("opera") != -1)
		var is_ff2 = (agt.indexOf("firefox/2.0") != -1)
		
		if(_targetVal < -this.baseWidth + this.allowance) {
			Element.setStyle(_target, {'left':'0px'});
		}
		var scope = this;
		new Effect.MoveBy(this.target,
											0,
											this.rval,
											{
												duration:0.6,
												fps:60,
												delay:0,
												afterFinishInternal:function(){
													scope.set();
												}
											});
	},
	slide : function() {
		if(this.dir==0) {
			this.rewind();
		} else if(this.dir == 1) {
			this.foward();
		}
	},
	set : function() {
		Event.observe(this.rbtn, 'click', this.eventRewind, false);
		Event.observe(this.fbtn, 'click', this.eventForward, false);
	},
	kill : function() {
		Event.stopObserving(this.rbtn, 'click', this.eventRewind, false);
		Event.stopObserving(this.fbtn, 'click', this.eventFoward, false);
	},
	direct: function(val){
		new Effect.MoveBy(this.target,
			0,
			val, {
			duration:0.6,
			fps:60,
			delay:0,
			afterFinishInternal: function(){}
		});
	},
	up : function()
	{
		var _target = $(this.target);

		new Effect.MoveBy(this.target,
			-194,
			0, {
			duration:0.6,
			fps:60,
			delay:0,
			afterFinishInternal: function( ){
				Element.setStyle(_target, {'top':'0px'});
				var hotItemsToArray = new ContentsToArray("jp_hotItemsInner", "ul");
				hotItemsToArray.show()}
			});
	},
	down : function()
	{
		var _target = $(this.target);
		var hotItemsToArray = new ContentsToArray("jp_hotItemsInner", "ul");
		hotItemsToArray.rev();
		Element.setStyle(_target, {'top':'-190px'});
		new Effect.MoveBy(this.target,
				190,
				0, {
				duration:0.6,
				fps:60,
				delay:0,
				afterFinishInternal: function(){}
			});
	}
}

var ScrollTimer = Class.create();
ScrollTimer.prototype = 
{
	initialize: function(func, time)
	{
		this.func = func;
		this.time = time;
	},
	exec: function ()
	{
		this.timer = setInterval(this.func,this.time);
	},
	stopTimer: function ()
	{
		clearInterval(this.timer);
	}
}



document.observe('dom:loaded', function() {
	var horizontalSlide = new SlideContent("cpnSlideInnerUL","btnRight","680","btnLeft","-680");
	//自動再生タイマーセット
	var timer = new ScrollTimer(function(){horizontalSlide.slide()}, 5000);
	timer.exec();
	//バナーにマウスが乗っているときは勝手に動かない
	Event.observe('cpnSlide', 'mouseover', function(){timer.stopTimer()}, false);
	Event.observe('cpnSlide', 'mouseout', function(){timer.exec()}, false);

});