﻿
//容器对象
var SlideView = function(container, options){
	this._initialize( container, options );
	this._initContainer();
	this._initNodes();
	this.reset( this.options.defaultIndex );
};
SlideView.prototype = {
  //初始化程序
  _initialize: function(container, options) {
	
	var container = this._container = $$(container);//容器对象
	this._timerDelay = null;//延迟计时器
	this._timerMove = null;//移动计时器
	this._time = 0;//时间
	this._index = 0;//索引
	
	var opt = this._setOptions(options);
	
	this.interval = opt.interval | 0;
	this.delay = opt.delay | 0;
	this.duration = opt.duration | 0;
	this.tween = opt.tween;
	this.autoClose = !!opt.autoClose;
	this.onShow = opt.onShow;
	this.onClose = opt.onClose;
	
	//设置参数
	var pos =this._pos = /^(bottom|top|right|left)$/.test( opt.mode.toLowerCase() ) ? RegExp.$1 : "left";
	this._horizontal = /right|left/.test( this._pos );
	this._reverse = /bottom|right/.test( this._pos );
	
	//获取滑动元素
	var nodes = opt.nodes ? $$A.map( opt.nodes, function(n) { return n; } )
		: $$A.filter( container.childNodes, function(n) { return n.nodeType == 1; });
	//创建滑动对象集合
	this._nodes = $$A.map( nodes, function(node){
		var style = node.style;
		return { "node": node, "style": style[pos], "position": style.position, "zIndex": style.zIndex };
	});
	
	//设置程序
	this._MOVE = $$F.bind( this._move, this );
	
	var CLOSE = $$F.bind( this.close, this );
	this._LEAVE = $$F.bind( function(){
		clearTimeout(this._timerDelay);
		$$CE.fireEvent( this, "leave" );
		if ( this.autoClose ) { this._timerDelay = setTimeout( CLOSE, this.delay ); }
	}, this );
	
	$$CE.fireEvent( this, "init" );
  },
  //设置默认属性
  _setOptions: function(options) {
    this.options = {//默认值
		nodes:			null,//自定义展示元素集合
		mode:			"left",//方向
		max:			0,//展示尺寸(像素或百分比)
		min:			0,//收缩尺寸(像素或百分比)
		delay:			100,//触发延时
		interval:		20,//滑动间隔
		duration:		40,//滑动持续时间
		defaultIndex:	null,//默认展示索引
		autoClose:		true,//是否自动恢复
		tween:			function(t,b,c,d){ return -c * ((t=t/d-1)*t*t*t - 1) + b; },//tween算子
		onShow:			function(index){},//滑动展示时执行
		onClose:		function(){}//滑动关闭执行
    };
    return $$.extend(this.options, options || {});
  },
  //设置容器
  _initContainer: function() {
	//容器样式设置
	var container = this._container, style = container.style, position = $$D.getStyle( container, "position" );
	this._style = { "position": style.position, "overflow": style.overflow };//备份样式
	if ( position != "relative" && position != "absolute" ) { style.position = "relative"; }
	style.overflow = "hidden";
	//移出容器时
	$$E.addEvent( container, "mouseleave", this._LEAVE );
	//设置滑动元素
	var zIndex = 100, gradient = this._reverse ? -1 : 1;
	this._each( function(o){
		var style = o.node.style;
		style.position = "absolute"; style.zIndex = zIndex += gradient;
	});
	
	$$CE.fireEvent( this, "initContainer" );
  },
  //设置滑动对象
  _initNodes: function() {
	var len = this._nodes.length, maxIndex = len - 1,
		type = this._horizontal ? "Width" : "Height", offset = "offset" + type,
		clientSize = this._container[ "client" + type ],
		defaultSize = Math.round( clientSize / len ),
		//计算默认目标值的函数
		getDefaultTarget = this._reverse
			? function(i){ return defaultSize * ( maxIndex - i ); }
			: function(i){ return defaultSize * i; },
		max = this.options.max, min = this.options.min, getMax, getMin;
	//设置参数函数
	if ( max > 0 || min > 0 ) {//自定义参数值
		//小数按百分比设置
		if ( max > 0  ) {
			max = Math.max( max <= 1 ? max * clientSize : Math.min( max, clientSize ), defaultSize );
			min = ( clientSize - max ) / maxIndex;
		} else {
			min = Math.min( min < 1 ? min * clientSize : min, defaultSize );
			max = clientSize - maxIndex * min;
		}
		getMax = function(){ return max; };
		getMin = function(){ return min; };
	} else {//根据元素尺寸设置参数值
		getMax = function(o){ return Math.max( Math.min( o.node[ offset ], clientSize ), defaultSize ); };
		getMin = function(o){ return ( clientSize - o.max ) / maxIndex; };
	}
	
	//设置滑动对象
	this._each( function(o, i){
		//移入滑动元素时执行程序
		var node = o.node, SHOW = $$F.bind( this.show, this, i );
		o.SHOW = $$F.bind( function(){
			clearTimeout(this._timerDelay);
			this._timerDelay = setTimeout( SHOW, this.delay );
			$$CE.fireEvent( this, "enter", i );
		}, this );
		$$E.addEvent( node, "mouseenter", o.SHOW );
		//计算尺寸
		o.current = o.defaultTarget = getDefaultTarget(i);//默认目标值
		o.max = getMax(o); o.min = getMin(o);
	});
	
	$$CE.fireEvent( this, "initNodes" );
  },
  
  //根据索引滑动展示
  show: function(index) {
	this._setMove( index | 0 );
	this.onShow( this._index );
	this._easeMove();
  },
  //滑动到默认状态
  close: function() {
	this._setMove();
	this.onClose();
	this._easeMove();
  },
  //重置为默认状态或展开索引对应滑动对象
  reset: function(index) {
	clearTimeout(this._timerDelay);
	if ( index == undefined ) {
		this._defaultMove();
	} else {
		this._setMove(index);
		this.onShow( this._index );
		this._targetMove();
	}
  },
  
  //设置滑动参数
  _setMove: function(index) {
	var setTarget;//设置目标值函数
	if ( index == undefined ) {//设置默认状态目标值
		getTarget = function(o){ return o.defaultTarget; }
	} else {//根据索引设置滑动目标值
		var nodes = this._nodes, maxIndex = nodes.length - 1;
		//设置索引
		this._index = index = index < 0 || index > maxIndex ? 0 : index | 0;
		//设置展示参数
		var nodeShow = nodes[ index ], min = nodeShow.min, max = nodeShow.max;
		getTarget = function(o, i){ return i <= index ? min * i : min * ( i - 1 ) + max; };
		if ( this._reverse ) {
			var get = getTarget;
			index = maxIndex - index;
			getTarget = function(o, i){ return get( o, maxIndex - i ); }
		}
	}
	this._each( function(o, i){
		o.target = getTarget(o, i);//设置目标值
		o.begin = o.current;//设置开始值
		o.change = o.target - o.begin;//设置变化值
	});
	$$CE.fireEvent( this, "setMove", index );
  },
  
  //滑移程序
  _easeMove: function() {
	this._time = 0; this._move();
  },
  //移动程序
  _move: function() {
	if ( this._time < this.duration ){//未到达
		this._tweenMove();
		this._time++;
		this._timerMove = setTimeout( this._MOVE, this.interval );
	} else {//完成
		this._targetMove();//防止计算误差
		$$CE.fireEvent( this, "finish" );
	}
  },
  
  //tween移动函数
  _tweenMove: function() {
	this._setPos( function(o) {
		return this.tween( this._time, o.begin, o.change, this.duration );
	});
	$$CE.fireEvent( this, "tweenMove" );
  },
  //目标值移动函数
  _targetMove: function() {
	this._setPos( function(o) { return o.target; } );
	$$CE.fireEvent( this, "targetMove" );
  },
  //默认值移动函数
  _defaultMove: function() {
	this._setPos( function(o) { return o.defaultTarget; } );
	$$CE.fireEvent( this, "defaultMove" );
  },
  //设置坐标值
  _setPos: function(method) {
	clearTimeout(this._timerMove);
	var pos = this._pos;
	this._each( function(o, i) {
		o.node.style[ pos ] = (o.current = Math.round(method.call( this, o ))) + "px";
	});
  },
  
  //历遍滑动对象集合
  _each: function(callback) {
	$$A.forEach( this._nodes, callback, this );
  },
  
  //销毁程序
  dispose: function() {
	clearTimeout(this._timerDelay);
	clearTimeout(this._timerMove);
	
	$$CE.fireEvent( this, "dispose" );
	
	var pos = this._pos;
	this._each( function(o) {
		var style = o.node.style;
		style[pos] = o.style; style.zIndex = o.zIndex; style.position = o.position;//恢复样式
		$$E.removeEvent( o.node, "mouseenter", o.SHOW ); o.SHOW = o.node = null;
	});
	$$E.removeEvent( this._container, "mouseleave", this._LEAVE );
	
	$$D.setStyle( this._container, this._style );
	
	this._container = this._nodes = this._MOVE = this._LEAVE = null;
	$$CE.clearEvent( this );
  }
};


//自动展示扩展
SlideView.prototype._initialize = (function(){
	var init = SlideView.prototype._initialize,
		reset = SlideView.prototype.reset,
		methods = {
			"init": function(){
				this.autoDelay = this.options.autoDelay | 0;
				
				this._autoTimer = null;//定时器
				this._autoPause = false;//暂停自动展示
				//展示下一个滑动对象
				this._NEXT = $$F.bind( function(){ this.show( this._index + 1 ); }, this );
			},
			"leave": function(){
				this.autoClose = this._autoPause = false;
				this._autoNext();
			},
			"enter": function(){
				clearTimeout(this._autoTimer);
				this._autoPause = true;
			},
			"finish": function(){
				this._autoNext();
			},
			"dispose": function(){
				clearTimeout(this._autoTimer);
			}
		},
		prototype = {
			_autoNext: function(){
				if ( !this._autoPause ) {
					clearTimeout(this._autoTimer);
					this._autoTimer = setTimeout( this._NEXT, this.autoDelay );
				}
			},
			reset: function(index) {
				reset.call( this, index == undefined ? this._index : index );
				this._autoNext();
			}
		};
	return function(){
		var options = arguments[1];
		if ( options && options.auto ) {
			//扩展options
			$$.extend( options, {
				autoDelay:	2000//展示时间
			}, false );
			//扩展属性
			$$.extend( this, prototype );
			//扩展钩子
			$$A.forEach( methods, function( method, name ){
				$$CE.addEvent( this, name, method );
			}, this );
		}
		init.apply( this, arguments );
	}
})();


//提示信息扩展
SlideView.prototype._initialize = (function(){
	var init = SlideView.prototype._initialize,
		methods = {
			"init": function(){
				//坐标样式
				this._tipPos = /^(bottom|top|right|left)$/.test( this.options.tipPos.toLowerCase() ) ? RegExp.$1 : "bottom";
			},
			"initNodes": function(){
				var opt = this.options, tipTag = opt.tipTag, tipClass = opt.tipClass,
					re = tipClass && new RegExp("(^|\\s)" + tipClass + "(\\s|$)"),
					getTipNode =  function(node){
						var nodes = node.getElementsByTagName( tipTag );
						if ( tipClass ) {
							nodes = $$A.filter( nodes, function(n){ return re.test(n.className); } );
						}
						return nodes[0];
					};
				//设置提示对象
				var tipShow = opt.tipShow, tipClose = opt.tipClose,
					offset = /right|left/.test( this._tipPos ) ? "offsetWidth" : "offsetHeight";
				this._each( function(o) {
					var node = o.node, tipNode = getTipNode(node);
					node.style.overflow = "hidden";
					tipNode.style.position = "absolute";
					//创建提示对象
					o.tip = {
						"node": tipNode,
						"show": tipShow != undefined ? tipShow : 0,
						"close": tipClose != undefined ? tipClose : -tipNode[offset]
					};
				});
			},
			"setMove": function(index){
				var maxIndex = this._nodes.length - 1;
				this._each( function(o, i) {
					var tip = o.tip;
					if ( this._reverse ) { i = maxIndex -i; }
					tip.target = index == undefined || index != i ? tip.close : tip.show;
					tip.begin = tip.current; tip.change = tip.target - tip.begin;
				});
			},
			"tweenMove": function(){
				this._setTipPos( function(tip) {
					return this.tween( this._time, tip.begin, tip.change, this.duration );
				});
			},
			"targetMove": function(){
				this._setTipPos( function(tip){ return tip.target; });
			},
			"defaultMove": function(){
				this._setTipPos( function(tip){ return tip.close; });
			},
			"dispose": function(){
				this._each( function(o){ o.tip = null; });
			}
		},
		prototype = {
			//设置坐标值函数
			_setTipPos: function(method) {
				var pos = this._tipPos;
				this._each( function(o, i) {
					var tip = o.tip;
					tip.node.style[ pos ] = (tip.current = Math.round(method.call( this, tip ))) + "px";
				});
			}
		};
	return function(){
		var options = arguments[1];
		if ( options && options.tip == true ) {
			//扩展options
			$$.extend( options, {
				tipPos:		"bottom",//提示位置
				tipTag:		"*",//提示元素标签
				tipClass:	"",//提示元素样式
				tipShow:	null,//展示时目标坐标
				tipClose:	null//关闭时目标坐标
			}, false );
			//扩展属性
			$$.extend( this, prototype );
			//扩展钩子
			$$A.forEach( methods, function( method, name ){
				$$CE.addEvent( this, name, method );
			}, this );
		}
		init.apply( this, arguments );
	}
})();

