/******************************
*                             
*   Name:     SlideNav
*   Author:   Aken li           
*   Date:     2008.04.30 
*   Modified: 2008.11.03
*   Blog:     www.kxbd.com      
*                             
******************************/

var SlideNav = Class.create();
SlideNav.prototype = {
	initialize:function(elMove,goL,goR,option){
		this.ele = $(elMove);//被移动的元素
		this.goL = $(goL);//向左走控制
		this.goR = $(goR);//向右走控制
		this.option = Object.extend({thumbW:100,gap:10,dur:0.3,moveNum:1}, option || {});
		this.inW=this.option.thumbW;//子元素宽度
		this.gap=this.option.gap;//子元素之间的空白
		this.mN = this.option.moveNum;//一次移动的子元素个数
		this.mD = this.option.dur;//一次移动的持续时间
		this.mDis = (this.inW+this.gap)*this.mN;//一次移动的距离
		this.inA = this.ele.childElements().length;
		this.wAll = this.inA*(this.inW+this.gap);
		this.W=this.ele.getWidth();//显示区域宽度
		this.initDiv();
	},
	
	initDiv:function(){
		this.ele.setStyle({position: "absolute",left:0});
		this.ele.childElements().each(function(s,i){
			s.setStyle({
				float:"none",
				position: "absolute",
				left:5 + (i*(this.inW+this.gap))+'px'
			});
			//s.observe('mouseover',this.onDiv.bind(this));
			//s.observe('mouseout',this.outDiv.bind(this));
			//s.observe('click',this.clickDiv.bind(this));
		}.bind(this));
		
		
		if(this.wAll>this.W){
			this.goL.observe('click', this.goLeft.bind(this));
			this.goR.observe('click', this.goRight.bind(this));
			/*
			$(this.goL).observe('mouseover', this.onArrow.bind(this));
			$(this.goL).observe('mouseout', this.outArrow.bind(this));
			$(this.goR).observe('mouseover', this.onArrow.bind(this));
			$(this.goR).observe('mouseout', this.outArrow.bind(this));
			$(this.goL).setStyle({
				display:'block'
			})
			*/
		}
	},
	
	
	goLeft:function(){
		if (parseInt(this.ele.getStyle('left'))+this.wAll > this.W) {
			new Effect.Move(this.ele, {
				x: -this.mDis,
				y: 0,
				duration: this.mD,
				//transition:Effect.Transitions.spring,
				//afterFinish:this.leftFinishCB.bind(this),
				queue: {
					scope: 'myscope',
					position: 'end',
					limit: 1
				}
			});
		}
	},
	
	goRight:function(){
		if (parseInt(this.ele.getStyle('left')) < 0) {
			new Effect.Move(this.ele, {
				x: this.mDis,
				y: 0,
				duration: this.mD,
				//transition:Effect.Transitions.spring,
				//afterFinish:this.rightFinishCB.bind(this),
				queue: {
					scope: 'myscope',
					position: 'end',
					limit: 1
				}
			});
		}
	},
	
	leftFinishCB:function(){
		this.goR.setStyle({
				display:'block'
			})
		if(parseInt(this.ele.getStyle('left'))+this.wAll<= this.W){
			this.goL.setStyle({
				display:'none'
			})
		}
	},
	
	rightFinishCB:function(){
		this.goL.setStyle({
				display:'block'
			})
		if(parseInt(this.ele.getStyle('left')) >= 0){
			this.goR.setStyle({
				display:'none'
			})
		}
	},
	
	onArrow:function(e){
		e.element().setStyle({
			background:'#F66'
		})
	},
	
	outArrow:function(e){
		e.element().setStyle({
			background:'#666'
		})
	},
	onDiv:function(e){
		e.element().setStyle({
			background:'#0FF'
		})
	},
	outDiv:function(e){
		e.element().setStyle({
			background:'#CCC'
		})
	},
	clickDiv:function(e){
		
	}
}