//通用TAB标签
suningKidtab = function(tabs, datas, curId, tabon, dataon, onchange) {
	this.tabs = tabs;
	this.datas = datas;
	this.curId;
	this.tabon = tabon;
	this.dataon = dataon;
	this.ontabChange = onchange || (function(){});
	this.init(curId);
}
suningKidtab.prototype = {
	init: function(locId) {
		var ref = this;
		this.tabs.each(function(i) {
			$(this).click(function(e) {
				if (this.tagName == "A")  e.preventDefault();
				this.blur();
				if (ref.curId != i) {
					ref.changeTab(i);
				}
				
			});
		});
		ref.changeTab(locId);
	},
	changeTab: function(loc) {
		
		if (this.curId || this.curId == 0) {
			$(this.tabs[this.curId]).removeClass(this.tabon);
			if (this.dataon && this.dataon.length > 0) {
				$(this.datas[this.curId]).removeClass(this.dataon);
			} else {
				
				$(this.datas[this.curId]).css("display", "none");
			}
		}
		this.curId = loc;
		$(this.tabs[this.curId]).addClass(this.tabon);
		if (this.dataon) {
			$(this.datas[this.curId]).addClass(this.dataon);
		} else {
			$(this.datas[this.curId]).css("display", "block");
		}
		this.ontabChange();
	}
}


suningScrollBar = function(lab, arrow, type) {
	var ref = this;

	this.bp = type == 0 ? parseInt($(lab).css("top")) :  parseInt($(lab).css("left"));
	this.startp = 0;
	this.lab = $(lab);
	this.type = type;
	this.percent = 0;
	this.step = .1;
	if (arrow.length > 1) {
		this.arrow = arrow;
	}	
}

suningScrollBar.prototype = {
	onMousemove: function(e) {
		
		var ref = e.data.ref;
		var tx = ref.type == 0 ? (e.pageY - ref.bpoint.top ): (e.pageX - ref.bpoint.left);
	
		tx -= ref.startp;
		
		if (tx <  0) {
			tx = 0;
		}else if (tx > ref.maxlen) {
			tx = ref.maxlen;
		}
		
		ref.view(tx/ref.maxlen);
		e.stopPropagation();
		return false;
	},
	view: function(p, motion) {
		this.percent = p;
		var temp = this.maxlen * p + this.bp;
		var pcss = (this.type == 0  ? "top" : 'left');
		if (motion) {
			this.lab.stop();
			if (this.type == 0) {
				this.lab.animate({top: Math.floor(temp)}, 500);
			} else {
				this.lab.animate({left: Math.floor(temp)}, 500);
			}
			this.onscroll(p, true);
		} else {
			
			this.onscroll(p);
			this.lab.css(pcss, Math.floor(temp));
		}
	},
	onMouseUp: function(e) {
		var ref = e.data.ref;
		$(document).unbind("mouseup", ref.onMouseUp);
		$(document).unbind("mousemove", ref.onMousemove);
		$(document).unbind("selectstart", ref.onSelect);
		
	},
	onSelect: function(e) {
		return false;
	},
	init: function(maxlen, onscroll, step) {
		this.maxlen = maxlen;
		this.onscroll = onscroll;
		this.step = step;
		this.percent = 0;
		var ref = this;
		$(this.lab).unbind();
		if(this.arrow) {
			$(this.arrow[0]).unbind();
			$(this.arrow[1]).unbind();
		}
		$(this.lab).mousedown(function(e) {
			if (!ref.bpoint) {
				ref.bpoint = ref.lab.offset();
			}
			ref.startp = ref.type == 0 ? (e.pageY - ref.lab.offset().top) : (e.pageX - ref.lab.offset().left);
			$(document).bind("mouseup",{ref:ref}, ref.onMouseUp);
			$(document).bind("mousemove",{ref:ref}, ref.onMousemove);
			$(document).bind("selectstart", {ref:ref}, ref.onSelect);
			e.stopPropagation();
			return false;
		}).css(this.type == 0 ? "top" : "left", this.bp);
		if (this.arrow) {
			$(this.arrow[0]).click(function(e) {
				e.stopPropagation();
				if (ref.percent > 0) {
					var temp = ref.percent - ref.step;
					ref.view(temp < 0 ? 0 : temp, true);
				}
				return false;
			});
			$(this.arrow[1]).click(function(e) {
				e.stopPropagation();
				if (ref.percent < 1) {
					var temp = ref.percent + ref.step;
					ref.view(temp > 1 ? 1 : temp, true);
				}
				return false;
			});
		}
	}
}


$(document).ready(function(){
		var tabScroll = new suningScrollBar($("#scroll div")[1], 1);
		var tab = new suningKidtab($("#integral_list span"),	//tab集合
							  $("#integral_list ul"),			//data集合
							   0,									//当前索引
							   "on",								//当前tab的className
							   "on",								//当前data的className
							   function() {						//切换后额外的处理函数
							   		var ul = $(this.datas[this.curId]);
									var len = ul.find(".li_num").length;
									if (len <= 4) {
										return;
									}
									ul.css("width", len * 150);
									var tol = -(len - 4) * 120;
							   		tabScroll.init(558, function(percent, p) {
										if (p) {
											ul.animate({"marginLeft": tol* percent}, 500);
										} else {
											ul.css("marginLeft", tol * percent);
										}
									}, 1/(len-3));
							   });
	
	
})