/**
基础部分
*/
/**
* 动画
* @method movePic
* @param  timer{Timer}  动画的time 引用
* @param  elm{String/Dom node}  要添加动画的物体
* @param  v1{Number}  动画开始时物体的位置
* @param  v2{Number}  动画结束时物体的位置
* @param  duration{Number}  动画持续的时间
* @param  whenDone{Function}  动画完成 调用的函数
* @return  无返回值
*/
var Animation_FPS=30;
function movePic(timer, elm, v1, v2, duration, whenDone){
	//alert('start');
	clearInterval(timer);
	timer=null;
	var scrollStart=false;
	var startTime=null;
	timer=setInterval(scroll, 15);
	function scroll(){
		//alert(1);
		if(scrollStart){
			var now=new Date();
			var percent=parseFloat((now-startTime)/duration);
			var sl=Math.round(kAnimator.getPV(v1, v2, percent));
			if(percent<0.99999){
				try{
					elm.style.left=sl+'px';
				}catch(er){/*alert(er.name);*/}
				return;
			}else{
				elm.style.left=v2+'px';
				clearInterval(timer);
				timer=null;
				scrollStart=false;
				if(whenDone && (typeof whenDone=='function')){
					whenDone();
				}
				//alert('end');
			}
		}else{
			scrollStart=true;
			startTime=new Date();
		}
	}
}
function movePic2(timer, elm, v1, v2, duration, whenDone){
	//alert('start');
	clearInterval(timer);
	timer=null;
	var scrollStart=false;
	var startTime=null;
	timer=setInterval(scroll, 15);
	function scroll(){
		//alert(1);
		if(scrollStart){
			var now=new Date();
			var percent=parseFloat((now-startTime)/duration);
			var sl=Math.round(kAnimator.getPV(v1, v2, percent));
			if(percent<0.99999){
				try{
					elm.style.top=sl+'px';
					//alert(parseInt(kStyle.getRealStyle(Dom.$id('pic_show')).left));
				}catch(er){/*alert(er.name);*/}
				return;
			}else{
				elm.style.top=v2+'px';
				clearInterval(timer);
				timer=null;
				scrollStart=false;
				if(whenDone && (typeof whenDone=='function')){
					whenDone();
				}
				//alert('end');
			}
		}else{
			scrollStart=true;
			startTime=new Date();
		}
	}
}


var module=function(moduleId){
	this.elmId=moduleId;
	return this;
};
/**
标签页的页面结构说明：
* 将id(例如: 'm_sample_01') 添加到div.md 中
* 在div.md_hd 中添加ul.mh_tabs，并添加id+'_tabs' (例如: 'm_sample_01_tabs')
* 在div.md_bd 中添加和标签一样多的div，并给它们添加id，id 命名是 div.md 中的id+'_content_x'(例如: 'm_sample_01_content_1' ~ ) 其中x 是这些div 的序号，从1 开始。除了第一个，其他几个都添加style="display: none;" 属性
添加脚本：
* (new module('m_sample_01')).initTabs();
*/
module.prototype.initTabs=function(){
		this.tabsId=this.elmId+'_tabs';
		this.contentIdPreText=this.elmId+'_content_';
		new Module.Tabs(this.tabsId, this.contentIdPreText);
	};

var Module={};
Module.Tabs=function(nodeId, contentIdPreText){
	if((!nodeId)||(!(Dom.$id(nodeId)))){return null;}
	var selfObj=this;
	this.elmId=nodeId;
	this.contentIdPreText=contentIdPreText;
	this.eTabBox=Dom.$id(nodeId);
	this.eTabs=this.eTabBox.getElementsByTagName('li');//eTab -> li tag
	this.tabNum=this.eTabs.length;
	this.curTabIndex=0;
	this.targetTabIndex=0;
	this.content=[];
	var i,j,k;

	this.changeContent=function(curIndex, targetIndex){
		this.content[curIndex].style['display']='none';
		this.content[targetIndex].style['display']='';
	};

	this.chgTab=function(){
try{
		if(this.curTabIndex==this.targetTabIndex){return;}
		Dom.removeClass('cur', this.eTabs[this.curTabIndex]);
		Dom.addClass('cur', this.eTabs[this.targetTabIndex]);
		var temC=this.curTabIndex;
		var temT=this.targetTabIndex;
		this.curTabIndex=this.targetTabIndex;
		this.changeContent(temC, temT);
}catch(e){}
	};
	this.init=function(){
		for(i=0; i<this.eTabs.length; i++){
			var ttTab=this.eTabs[i];
			if(Dom.hasClass("cur", ttTab)){
				this.curTabIndex=this.targetTabIndex=i;
			}
			this.content[i]=Dom.$id(this.contentIdPreText+(i+1));
			var ttLink=ttTab.getElementsByTagName('a')[0];
			ttLink.setAttribute('i',i);
			ttLink.onclick=function(ev){
				this.blur();
				selfObj.targetTabIndex=this.getAttribute('i');
				selfObj.chgTab();
				return false;
			};
		}
	};
	this.init();
	return selfObj;
};

var kPage={
	fixColsHeight: function(col, opt){
		var maxH=0;
		var maxHi=0;
		var heights=[];
		var cols=[];
		var col1=Dom.$tagHasClassInNodeChild('div', 'col_1', col);
		var col2=Dom.$tagHasClassInNodeChild('div', 'col_2', col);
		var col3=Dom.$tagHasClassInNodeChild('div', 'col_3', col);
		var col4=Dom.$tagHasClassInNodeChild('div', 'col_4', col);
		if(col1.length){
			cols[0]=col1[0];
		}
		if(col2.length){
			cols[1]=col2[0];
		}
		if(col3.length){
			cols[2]=col3[0];
		}
		if(col4.length){
			cols[3]=col4[0];
		}
		if(cols.length==1){
			return;
		}
		col1=col2=col3=col4=null;
		for(var i=0; i<cols.length; i++){
			var h=cols[i].offsetHeight;
			if(h>maxH){
				maxH=h;
				maxHi=i;
			}
			heights.push(h);
		}
		for(var i=0; i<cols.length; i++){
			var mds=Dom.$tagHasClassInNodeChild('div', 'md', cols[i]);
			if(!mds || !mds.length){
				continue;
			}
			var hs=maxH-heights[i];
			var dToFix=null;
			
			if(!opt || (typeof opt!='object')){//修正md
				dToFix=mds[mds.length-1];//每列中最后一个md
			}else{
				if(opt.fixElm){
					if(opt.fixElm=='md'){
						dToFix=mds[mds.length-1];//每列中最后一个md
					}else if(opt.fixElm=='md_bd'){//修正md_bd
						dToFix=Dom.$tagHasClassInNodeChild('div', 'md_bd', mds[mds.length-1])[0];
					}
				}
			}
			if(dToFix==null){
				dToFix=Dom.$tagHasClassInNodeChild('div', 'md_bd', mds[mds.length-1])[0];
			}
			var hCur=dToFix.offsetHeight;
			var temStyle=kStyle.getRealStyle(dToFix);
			var fixH=0;
			fixH+=isNaN(parseInt(temStyle.borderTopWidth))?0:parseInt(temStyle.borderTopWidth);
			 fixH+=isNaN(parseInt(temStyle.borderBottomWidth))?0:parseInt(temStyle.paddingTop);
			 if(isNaN(fixH)){fixH=0};
			 fixH+=isNaN(parseInt(temStyle.paddingTop))?0:parseInt(temStyle.paddingTop);
			 fixH+=isNaN(parseInt(temStyle.paddingBottom))?0:parseInt(temStyle.paddingBottom);
			if(isNaN(fixH)){fixH=0};
			hCur=hCur-fixH;
			dToFix.style['height']=(hCur+hs)+"px"
		}
	},
	initFixColsHeight: function(opt){
		var pageBody=Dom.$id('page_body');
		if(!pageBody){return;}
		var pageCols=Dom.$tagHasClassInNodeChild('div', 'column_wrapper', pageBody);
		for(var i=0; i<pageCols.length; i++){
			try{
				kPage.fixColsHeight(pageCols[i], opt);
			}catch(er){}
		}
	}
};

/**
*图像浏览
*新建一个图像浏览
*/
function imageView(elmId, opt){
	new imageView_build(elmId, opt);
}

function imageView_build(elmId, opt){
	var me=this;
	this.elmRoot=Dom.$id(elmId);
	if(!this.elmRoot){return false;}
	if(opt){//如果带了配置，则读取
	}
	var elmListW=Dom.$tagHasClassInNodeChild('div', 'pic_list_box', this.elmRoot)[0];
	this.elmList=Dom.$tagHasClassInNodeChild('div', 'pic_list', elmListW)[0];//图像选择列表，放置的各图片
	this.elmList.style.width=(elmListW.offsetWidth-56)+'px';
	var sty=kStyle.getRealStyle(elmListW);
	var sty2=kStyle.getRealStyle(this.elmList);
	
	this.elmListWidth=elmListW.offsetWidth-(parseInt(sty.paddingLeft)+parseInt(sty.paddingRight)+parseInt(sty2.marginLeft)+parseInt(sty2.marginRight));//显示的宽度(之所以这样算，是因为ie 与firefox 计算宽度的方式不一样)
	sty=null;
	sty2=null;
	//alert('显示宽度是: '+this.elmListWidth);
	this.elmListData=this.elmList.getElementsByTagName('ul')[0];
	this.elmListDataLeft=parseInt(kStyle.getRealStyle(this.elmListData).left);
	if(isNaN(this.elmListDataLeft)){this.elmListDataLeft=0;}
	this.listItems=Dom.$tagInNodeChild('ul', this.elmList);
	this.lists=Dom.$tagInNode('li', this.elmList);
	this.totalWidth=this.lists[0].offsetWidth*this.lists.length;//所有选择图像的宽度
	///	计算每次翻页滚动的距离
	var ow=this.lists[1].offsetLeft-this.lists[0].offsetLeft;
	this.elmListWidth=Math.floor(this.elmListWidth/ow)*(ow);
	ow=null;
	this.listItemsLen=this.listItems.length;
	this.listsLen=this.lists.length;
	this.currentItem=0;//当前显示的大图是第几个
	this.elmPic_show=Dom.$tagHasClassInNodeChild('div', 'text_box', this.elmRoot)[0];//大图片显示区域
	this.elmPic=Dom.$tagInNode('img', this.elmPic_show)[0];
	this.elmText=Dom.$tagHasClassInNode('div', 'text_data', this.elmPic_show)[0];
	/*this.elmData=Dom.$tagHasClassInNodeChild('ul', 'img_desp_data', this.elmRoot)[0];//存储数据的块*/
	this.picDatas=Dom.$tagInNodeChild('li', this.elmData);
	this.timerMovePic=null;//切换大图用的timer
	this.timerMovePicSelect=null;//图片选择行用的timer
	this.btn={};//按钮
	this.btn.previous=Dom.$tagHasClassInNodeChild('a', 'previous', elmListW)[0];
	this.btn.next=Dom.$tagHasClassInNodeChild('a', 'next', elmListW)[0];
	/**
	*按钮事件
	*/
	this.btn.previous.onclick=function(){//图像选择列表  前n 张，需要向左移动，则style.left 应该减小增加
		this.blur();
		var v1=parseInt(kStyle.getRealStyle(me.elmListData).left);
		if(isNaN(v1)){v1=0;}
		var duration=300;
		if(me.elmListDataLeft+me.elmListWidth<=0){
			me.elmListDataLeft+=me.elmListWidth;
			var v2=me.elmListDataLeft;
			clearInterval(me.timerMovePicSelect);
			me.timerMovePicSelect=null;
			movePic(me.timerMovePicSelect, me.elmListData, v1, v2, duration, function(){});//最后一个参数是动画完成后要调用的函数
		}
		return false;
	};
	
	this.btn.next.onclick=function(){//图像选择列表  后n 张，需要向右移动，则style.left 应该减小(left<0)
		this.blur();
		var v1=parseInt(kStyle.getRealStyle(me.elmListData).left);
		if(isNaN(v1)){v1=0;}
		var duration=300;
		if(me.elmListDataLeft-me.elmListWidth>=-me.totalWidth){
			me.elmListDataLeft-=me.elmListWidth;
			var v2=me.elmListDataLeft;
			clearInterval(me.timerMovePicSelect);
			me.timerMovePicSelect=null;
			movePic(me.timerMovePicSelect, me.elmListData, v1, v2, duration, function(){});//最后一个参数是动画完成后要调用的函数
		}
		return false;
	};
	//var picDatasLen=picDatas.length;
	for(var i=0; i<this.listsLen; i++){
		var li=this.lists[i];
		if(Dom.hasClass('cur', li)){
			this.currentItem=i;
		}
		li.setAttribute('i',i);
		li.onmouseover=function(ev){
			Dom.addClass('hover', this);//此处的this 是元素本身
		};
		li.onmouseout=function(ev){
			Dom.removeClass('hover', this);//此处的this 是元素本身
		};
		li.onclick=function(ev){
			try{
				this.getElementsByTagName('a')[0].blur();
				if(me.currentItem!=undefined){
					Dom.removeClass('cur', me.lists[me.currentItem]);
				}
				Dom.addClass('cur', this);
				me.currentItem=parseInt(this.getAttribute('i'));
				me.changePic(me.currentItem);
				return false;
			}catch(er){
				return;
			}
		};
	}
	/**
	*直接切换图片(和下面的函数任选)
	*~link {function} this.changePic_2
	*/
	this.changePic=function(){
		this.updatePicShow();
	}
	/**
	*动态切换图片，没用
	*/
	this.changePic_2=function()
	{
		clearInterval(this.timerMovePic);
		this.timerMovePic=null;
		var v1=parseInt(kStyle.getRealStyle(Dom.$id('pic_show')).left), v2=100-Dom.$id('pic_show').offsetWidth;
		var duration=300;
		movePic(timerMovePic, Dom.$id('pic_show'), v1, v2, duration,
			function(){
				updatePicShow();
				movePic(timerMovePic, Dom.$id('pic_show'), parseInt(kStyle.getRealStyle(Dom.$id('pic_show')).left), 0, duration);
			}
		);
	}
	this.updatePicShow=function(){
		var tList=this.lists[this.currentItem];
		var dLink=tList.getElementsByTagName('a')[0];
		this.elmPic.src=dLink.href;
		if(dLink.getAttribute('title')){
			this.elmPic.parentNode.href=dLink.getAttribute('title');
		}
		this.elmText.innerHTML=Dom.$tagHasClassInNode('div', 'hide', tList)[0].innerHTML;
	}
	return this;
}

function imageView_v(elmId, opt){
	new imageView_vBuild(elmId, opt);
}
function imageView_vBuild(elmId, opt){
	var me=this;
	this.elmRoot=Dom.$id(elmId);
	if(!this.elmRoot){return false;}
	if(opt){//如果带了配置，则读取
	}
	var elmListW=Dom.$tagHasClassInNodeChild('div', 'pic_list_box', this.elmRoot)[0];
	this.elmList=Dom.$tagHasClassInNodeChild('div', 'pic_list', elmListW)[0];//图像选择列表，放置的各图片
	var sty=kStyle.getRealStyle(elmListW);
	var sty2=kStyle.getRealStyle(this.elmList);
	this.elmListHeight=elmListW.offsetHeight-(parseInt(sty.paddingTop)+parseInt(sty.paddingBottom)+parseInt(sty2.marginTop)+parseInt(sty2.marginBottom))-59;//显示的宽度(之所以这样算，是因为ie 与firefox 计算宽度的方式不一样)
	sty=null;
	sty2=null;
	//alert('显示宽度是: '+this.elmListHeight);
	this.elmListData=this.elmList.getElementsByTagName('ul')[0];
	this.elmListDataTop=parseInt(kStyle.getRealStyle(this.elmListData).top);
	if(isNaN(this.elmListDataTop)){this.elmListDataTop=0;}
	this.listItems=Dom.$tagInNodeChild('ul', this.elmList);
	this.lists=Dom.$tagInNode('li', this.elmList);
	this.totalHeight=this.lists[0].offsetHeight*this.lists.length;//所有选择图像的宽度
	
	///	计算每次翻页滚动的距离
	var ow=this.lists[1].offsetTop-this.lists[0].offsetTop;
	this.elmListHeigt=Math.floor(this.elmListHeight/ow)*(ow);
	ow=null;
	this.listItemsLen=this.listItems.length;
	this.listsLen=this.lists.length;
	this.currentItem=0;//当前显示的大图是第几个
	this.elmPic_show=Dom.$tagHasClassInNodeChild('div', 'text_box', this.elmRoot)[0];//大图片显示区域
	this.elmPic=Dom.$tagInNode('img', this.elmPic_show)[0];
	this.elmText=Dom.$tagHasClassInNode('div', 'text_data', this.elmPic_show)[0];
	/*this.elmData=Dom.$tagHasClassInNodeChild('ul', 'img_desp_data', this.elmRoot)[0];//存储数据的块*/
	this.picDatas=Dom.$tagInNodeChild('li', this.elmData);
	this.timerMovePic=null;//切换大图用的timer
	this.timerMovePicSelect=null;//图片选择行用的timer
	this.btn={};//按钮
	this.btn.previous=Dom.$tagHasClassInNodeChild('a', 'previous', elmListW)[0];
	this.btn.next=Dom.$tagHasClassInNodeChild('a', 'next', elmListW)[0];
	/**
	*按钮事件
	*/
	this.btn.previous.onclick=function(){//图像选择列表  前n 张，需要向左移动，则style.left 应该减小增加
		this.blur();
		var v1=parseInt(kStyle.getRealStyle(me.elmListData).top);
		//alert(v1)
		if(isNaN(v1)){v1=0;}
		var duration=300;
		if(me.elmListDataTop+me.elmListHeight<=0){
			me.elmListDataTop+=me.elmListHeight;
			//lert(me.elmListDataTop)
			var v2=me.elmListDataTop;
			clearInterval(me.timerMovePicSelect);
			me.timerMovePicSelect=null;
			movePic2(me.timerMovePicSelect, me.elmListData, v1, v2, duration, function(){});//最后一个参数是动画完成后要调用的函数
		}
		return false;
	};
	this.btn.next.onclick=function(){//图像选择列表  后n 张，需要向右移动，则style.left 应该减小(left<0)
		this.blur();
		var v1=parseInt(kStyle.getRealStyle(me.elmListData).top);
		//alert(v1)
		if(isNaN(v1)){v1=0;}
		var duration=300;
		if(me.elmListDataTop-me.elmListHeight>=-me.totalHeight){
			me.elmListDataTop-=me.elmListHeight;
			//alert(me.elmListDataTop)
			var v2=me.elmListDataTop;
			clearInterval(me.timerMovePicSelect);
			me.timerMovePicSelect=null;
			movePic2(me.timerMovePicSelect, me.elmListData, v1, v2, duration, function(){});//最后一个参数是动画完成后要调用的函数
		}
		return false;
	};
	//var picDatasLen=picDatas.length;
	for(var i=0; i<this.listsLen; i++){
		var li=this.lists[i];
		if(Dom.hasClass('cur', li)){
			this.currentItem=i;
		}
		li.setAttribute('i',i);
		li.onmouseover=function(ev){
			Dom.addClass('hover', this);//此处的this 是元素本身
		};
		li.onmouseout=function(ev){
			Dom.removeClass('hover', this);//此处的this 是元素本身
		};
		li.onclick=function(ev){
			try{
				this.getElementsByTagName('a')[0].blur();
				if(me.currentItem!=undefined){
					Dom.removeClass('cur', me.lists[me.currentItem]);
				}
				Dom.addClass('cur', this);
				me.currentItem=parseInt(this.getAttribute('i'));
				me.changePic(me.currentItem);
				return false;
			}catch(er){
				return;
			}
		};
	}
	/**
	*直接切换图片(和下面的函数任选)
	*~link {function} this.changePic_2
	*/
	this.changePic=function(){
		this.updatePicShow();
	}
	/**
	*动态切换图片
	*/
	this.updatePicShow=function(){
		var tList=this.lists[this.currentItem];
		var dLink=tList.getElementsByTagName('a')[0];
		this.elmPic.src=dLink.href;
		if(dLink.getAttribute('title')){
			this.elmPic.parentNode.href=dLink.getAttribute('title');
		}
		this.elmText.innerHTML=Dom.$tagHasClassInNode('div', 'hide', tList)[0].innerHTML;
	}
	return this;
}

/**
图像浏览
*/
/**
*初始化
* @method imageScroll
* @param  elm{String/Dom node}  需要添加滚动效果的模块
* @param  opt{Object}  动画效果的一些设置
* 页面结构限制：
* 在 div.image_list_box 之外添加id
* 每个id 下面只能有1 个ul
* 每个ul 下面的图片必须足够多(不能在1 行完全显示)才会滚动
*/
function imageScroll(elmId, opt){
	new imageScroll_build(elmId, opt);
}
function imageScroll_build(elmId, opt)
{
	var me=this;
	this.elmRoot=Dom.$id(elmId);
	if(!this.elmRoot){return false;}
	if(opt){//如果带了配置，则读取
	}
	var elmListW=Dom.$tagHasClassInNodeChild('div', 'image_list_box', this.elmRoot)[0];//动画显示的范围
	this.lists=Dom.$tagInNode('li', elmListW);//所有图片框的集合
	this.realListsLen=this.listsLen=this.lists.length;//图片总数
	var list_0=this.lists[0];//第一张图片
	var list_0_style=kStyle.getRealStyle(list_0);
	this.elmList=list_0.parentNode;//存放图片的ul, 滚动动画就是靠控制它的位置来实现的(滚动的整体)
	this.listSize=[
		this.lists[1].offsetLeft-this.lists[0].offsetLeft,
		list_0.offsetHeight+parseInt(list_0_style.marginTop)+parseInt(list_0_style.marginBottom)
	];//一个图片框的尺寸[width, height]
	if(this.elmList.offsetHeight<(2 * this.lists[0].offsetHeight)){//如果没有2 行，则返回
		//setTimeout(function(){me=null;},100); //此功能未测试,不知道是否能清空内存数据
		return false;
	}
	elmListW.style.position='relative';
	elmListW.style.width=elmListW.offsetWidth+'px';
	elmListW.style.overflow='hidden';//限制动画显示区域
	this.positionMax=this.listsLen*this.listSize[0];
	var iZ=Math.ceil(elmListW.offsetWidth/this.listSize[0]);
	for(var i=0; i<iZ; i++){
		this.elmList.appendChild(this.lists[i].cloneNode(true));
	}
	this.realListsLen=this.listsLen;//真实图片总数，因为最后几张图片是copy 出来的
	this.listsLen=this.lists.length;//重新计算图片总数
	this.elmList.style.width=this.listsLen*this.listSize[0]+100+'px';
	this.elmList.style.position='relative';
	this.currentLeft=0;
	this.scrollTimer;
	this.isHover=false;
	var startScroll=function(){
		if(!me.isHover){
			clearInterval(me.scrollTimer);
			me.scrollTimer=setInterval(_scroll, 1000/Animation_FPS);
		}
		/*
		//鼠标离开一会儿以后才开始滚动
		var startTimer;
		if(!me.isHover){
			clearTimeout(startTimer);
			startTimer=setTimeout(
					function(){
						clearTimeout(startTimer);
						clearInterval(me.scrollTimer);
						me.scrollTimer=setInterval(_scroll, 60);
					},
					1000);
		}
		*/
	}
	var stopScroll=function(){
		clearInterval(me.scrollTimer);
	}
	this.elmList.onmouseover=function(){
		me.isHover=true;
	};
	this.elmList.onmouseout=function(){
		me.isHover=false;
		var timer;
		clearTimeout(timer);
		timer=setTimeout(function(){startScroll();},300);
	};
	var _scroll=function(){
		me.currentLeft+=1;
		if(me.currentLeft>me.positionMax){
			me.currentLeft=0;
		}
		elmListW.scrollLeft=me.currentLeft;
		if(me.isHover)
		{
			stopScroll();
		}
	};
	var _scroll_bak=function(){
		//向左侧移动，left 在变小
		me.currentLeft-=1;
		if(me.currentLeft<-me.positionMax){
			me.currentLeft=0;
		}
		me.elmList.style.left=me.currentLeft+'px';
		if(me.isHover)
		{//当鼠标滑过动画区域，停止动画
			stopScroll();
		}
		/*
		if((me.isHover)&&(Math.abs(me.currentLeft%me.listSize[0])<=1))
		{//当鼠标滑过动画区域，并且左侧显示完整图片的时候，停止动画
			stopScroll();
		}
		*/
	};
	setTimeout(startScroll,0);
	/*
	var sty=kStyle.getRealStyle(elmListW);
	var sty2=kStyle.getRealStyle(this.elmList);
	*/
}


/**
图像(翻页)浏览
*/
/**
*初始化
* @method imagePageView
* @param  elm{String/Dom node}  需要添加滚动效果的模块
* @param  opt{Object}  动画效果的一些设置
* 页面结构限制：
* 在 div.image_list_box 之外添加id
* 每个id 下面只能有1 个ul
* 每个ul 下面的图片必须足够多(不能在1 行完全显示)才会滚动
*/
function imagePageView(elmId, opt){
	new imagePageView_build(elmId, opt);
}
function imagePageView_build(elmId, opt){
	var me=this;
	this.elmId=elmId;
	this.elmRoot=Dom.$id(elmId);
	if(!this.elmRoot){return false;}
	if(opt){//如果带了配置，则读取
	}
	var elmListW=Dom.$tagHasClassInNodeChild('div', 'image_list_box', this.elmRoot)[0];//动画显示的范围
	this.lists=Dom.$tagInNode('li', elmListW);//所有图片框的集合
	this.listsLen=this.lists.length;//图片总数
	var list_0=this.lists[0];//第一张图片
	var list_0_style=kStyle.getRealStyle(list_0);
	this.elmList=list_0.parentNode;//存放图片的ul, 滚动动画就是靠控制它的位置来实现的(滚动的整体)
	this.listSize=[
		this.lists[1].offsetLeft-this.lists[0].offsetLeft,
		list_0.offsetHeight+parseInt(list_0_style.marginTop)+parseInt(list_0_style.marginBottom)
	];//一个图片框的尺寸[width, height]
	if(this.elmList.offsetHeight<(2 * this.lists[0].offsetHeight)){//如果没有2 行，则返回
		//setTimeout(function(){me=null;},100); //此功能未测试,不知道是否能清空内存数据
		return false;
	}
	elmListW.style.position='relative';
	elmListW.style.width=elmListW.offsetWidth+'px';
	elmListW.style.overflow='hidden';//限制动画显示区域
	/*
	此处之前的代码与imageScroll_build 类似
	*/
	this.positionMax=this.listsLen*this.listSize[0];
	var numberPerPage=Math.floor((elmListW.offsetWidth + parseInt(list_0_style.marginRight))/this.listSize[0]);
	this.pages=Math.ceil(this.listsLen/numberPerPage);
	this.elmList.style.width=this.listsLen*this.listSize[0]+100+'px';
	var i;
	this.positions=[];
	for(i=0; i<this.pages; i++){
		this.positions[i]=0-this.lists[numberPerPage*i].offsetLeft;
		//console.log('position['+i+'] is: '+this.positions[i]);
	}
	this.elmList.style.position='relative';
	this.current=0;
	this.roundView=false;//可以循环浏览
	this.duration=1200;//每次翻页时间(ms)
	this.scrollTimer;
	this.nav={};//按钮，状态栏等
	/**
	更新按钮等
	*/
	var updateNav=function() {
		var i, link;
		for(i=0; (link=me.nav.link[i]); i++){
			link.className='';
		}
		me.nav.link[me.current].className='current';
		if(!me.roundView){
			if(me.current==0){
				Dom.addClass('p_off', me.nav.previous);
			}else{
				Dom.removeClass('p_off', me.nav.previous);
			}
			if(me.current==me.pages-1){
				Dom.addClass('n_off', me.nav.next);
			}else{
				Dom.removeClass('n_off', me.nav.next);
			}
		}
	};
	/**
	添加翻页按钮
	*/
	var addNavButtons=function() {
		var p=document.createElement('a'), n=p.cloneNode(true);
		n.href=p.href="javascript:;"//"#"+me.elmId;
		p.innerHTML="&lt;&lt;"
		n.innerHTML="&gt;&gt;"
		p.className="previous";
		n.className="next";
		// insert nodes after <div class="image_list_box">
		//console.log(me);
		me.elmRoot.appendChild(p);
		me.elmRoot.appendChild(n);
		p.style.top=n.style.top=(Dom.$tagHasClassInNode('div', 'image', list_0)[0].offsetHeight-p.offsetHeight)/2+'px';
		p.style.left=(0-p.offsetWidth/2+2)+'px';//这里的2 起修正作用，往右边移2 px
		n.style.left=(me.elmRoot.offsetWidth-n.offsetWidth/2-2)+'px';//这里的2 起修正作用，往左边移2 px
		n.style.right='auto';
		// add handlers
		p.onmousedown=me.scrollPrev_click;
		n.onmousedown=me.scrollNext_click;
		me.nav.previous=p
		me.nav.next=n;
		//n.relIPV=p.relIPV=this;
	};
	
	/**
	添加翻页状态条
	*/
	var addNavStatus=function(){
		function findElmInParent(elm, opt){
			elm=elm.parentNode;
			//console.log(elm);
			if((!elm) || (!opt) || ((!opt.tag) && (!opt.className) && (!opt.id))){return;}
			if(opt.tag && (elm.nodeName.toLowerCase()!=opt.tag.toLowerCase())){
				return findElmInParent(elm, opt);
			}
			if(opt.className && (!(Dom.hasClass(opt.className, elm)))){
				return findElmInParent(elm, opt);
			}
			if(opt.id && (!(elm.id && elm.id==opt.id))){
				return findElmInParent(elm, opt);
			}
			return elm;
		}
		var md=findElmInParent(me.elmRoot, {tag:'div', className:'md'});
		var md_hd = Dom.$tagHasClassInNode('div', 'md_hd', md)[0];
		md_hd.style.position='relative';
		var na=document.createElement('div');
		na.className='image_page_view_nav';
		na.style.visibility='hidden';
		md_hd.appendChild(na);
		me.nav.link=[];
		for(var i=0; i<me.pages; i++){
			var l=document.createElement('a');
			l.href="javascript:;"//+me.elmId;
			if(i==me.current){
				l.className='current';
			}
			l.setAttribute('i', i);
			l.onclick=function(ev){
				this.blur();
				var v1, v2;
				v1=v2=0;
				var ito=this.getAttribute('i');
				v1=me.positions[me.current];
				me.current=ito;
				v2=me.positions[ito];
				if(v1!=v2){
					clearInterval(me.scrollTimer);
					me.scrollTimer=null;
					movePic(me.scrollTimer, me.elmList, v1, v2, me.duration, updateNav);
				}
				return false;
			};
			na.appendChild(l);
			me.nav.link.push(l);
		}
		na.style.left=(md_hd.offsetWidth-na.offsetWidth)/2+'px';
		na.style.top=(md_hd.offsetHeight-na.offsetHeight)/2+'px';
		na.style.visibility='visible';
	};
	
	this.init=function(){
		addNavButtons();
		addNavStatus();
		updateNav();
	};
	this.scrollPrev_click=function(){
		this.blur();
		if(this.className.indexOf('off')!=-1){
			return false;
		}
		var v1, v2;
		v1=v2=0;
		if(me.current>0){
			v1=me.positions[me.current];
			me.current--;
			v2=me.positions[me.current];
		}else if(me.current==0){
			if(me.roundView){
				v1=me.positions[me.current];
				me.current=me.pages-1;
				v2=me.positions[me.current];
			}
		}
		if(v1!=v2){
			clearInterval(me.scrollTimer);
			me.scrollTimer=null;
			movePic(me.scrollTimer, me.elmList, v1, v2, me.duration, updateNav);
		}
		return false;
	};
	this.scrollNext_click=function(){
		this.blur();
		if(this.className.indexOf('off')!=-1){
			return false;
		}
		var v1, v2;
		v1=v2=0;
		if(me.current<me.pages-1){
			v1=me.positions[me.current];
			me.current++;
			v2=me.positions[me.current];
		}else if(me.current==(me.pages-1)){
			if(me.roundView){
				v1=me.positions[me.current];
				me.current=0;
				v2=me.positions[me.current];
			}
		}
		if(v1!=v2){
			clearInterval(me.scrollTimer);
			me.scrollTimer=null;
			movePic(me.scrollTimer, me.elmList, v1, v2, me.duration, updateNav);
		}
		return false;
	};
	
	this.init();
}