/*
*组图图集显示处理js
*版本：v1.0
*作者：xf
*日期：2011-7-05
*/
function vsbGallery()
{
    _this = this;
    
    ///////////外部传递的编号/////////
    this.pagepicimgsid;     //图片  编号
    this.pagepicthumbimgsid;   //缩略图片  编号
    this.pagepictitlesid;  //组图标题  编号
    this.pagepiccontentsid; //组图内容  编号
    this.currenttotalsizeid;    //当前页和总页数    编号
    this.imgcontentid;    //大图    编号
    this.titlecontentid;    //标题    编号
    this.desccontentid;   //内容    编号
    this.thumbleftimgsid;   //缩略图上一页  编号
    this.thumbrightimgsid;  //缩略图下一页  编号
    this.thumbimgcontentid;    //缩略图内容 编号
    this.previousimgid;     //上一个图片  编号
    this.nextimgid;     //下一个图片  编号
    this.startautoplayid;     //自动播放  编号
    this.stopautoplayid;     //停止播放  编号
    this.tdnextid;//td上一页下一页编号
    //////////////////////////////
    
    
    /////////外部js对象/////////  
    this.preloadimgs; //vsb vsbpreloadimg.js 图片缩略对象
    ////////////////////////////
    
    
    ///////////可以设置的资源/////////   
    this.imgwidth=480; //显示大图图片宽度    
    this.imgheight=380;//显示大图图片高度
    this.imgstyle="border:2px solid #eee;border-bottom-color:#999;border-right-color:#999;";//显示大图图片样式
    this.leftcur="/system/resource/js/gallery/arr_left.cur";   //上一页手形
    this.rightcur="/system/resource/js/gallery/arr_right.cur";    //下一页手形
    this.iscycle= true;    //是否图片循环
    this.loadingimg = "/system/resource/images/loading.gif";    //读取中图片
    this.isstretch = false;     //是否变形
    this.iszoomin = false;    //是否放大
    this.thumbimgsize = 5; //缩略图显示数量    
    this.thumbimgwidth = 120; //缩略图显示宽度    
    this.thumbimgheight = 80; //缩略图显示高度    
    this.thumbtdstyle="2px solid red";  //缩略图选中边框样式
    this.thumbtdstyle0="2px solid white";  //缩略图选中边框样式
    this.autostarttimes = 3000;//自动播放间隔时间  毫秒
    this.previousurl    =    "";    //上一页地址  iscycle 为false时起效
    this.nextimgurl = "";    //下一页地址 iscycle 为false时起效    
    this.showpagesign = "/";//中间间隔符号
    this.showpagefront = "(";//当前页前显示字符串
    this.showpageback = ")";//当前页后显示字符串
    this.currentshowpagecolor = "red";//当前页颜色
    this.istdnext = false; // 是否td显示上一页下一页

    ////////////////////////
    
    
    ///////////存放数据对象/////////               
    this.pagepicimgs;;  //显示的大图数据数组    
    this.pagepicthumbimgs;  //图片缩略图数据数组    
    this.pagepictitles;    //图片标题数据    
    this.pagepiccontents;    //图片简介内容数据
    ///////////////////////////////////

    
    /////////逻辑操作///////// 
    this.currentindex=0;    //当前显示的索引号
    this.totalsize=0;   //总的数量
    this.imgid = "__showimgcontentid_"+parseInt(Math.random()*100+1);    //大图图片显示时的编号
    this.thumbimgid = "__showthumbimgcontentid_"+parseInt(Math.random()*100+1)+"_";     //缩略图图片编号组
    this.thumbfill = 4;     //缩略图滚动时填充值
    this.thumbmovelock  = false;    //缩略图滚动时锁定
    this.thumbspeed = 10;    //速度(毫秒)    
    this.thumbspace = 10;   //每次移动距离    
    this.thumbcomp = 0;    //已经移动距离    
    this.thumbisleft = false;   //滚动方向
    this.selectthumbimgid = "";     //被选中的缩略图编号
    this.thumbisclick=false;    //是否点击了缩略图的滚动
    this.autoplayobj;   //自动播放对象
    this.imageshowintervaltime = 10;
    ////////////////////////
    
}

vsbGallery.prototype = 
{  
        test:function()
        {
            
        },
        //外部调用的显示
        show:function()
        {
            _this.addEvent(window,"load",_this.initpara,true);
        },
        //初始化数据
        initpara:function()
        {
            _this.pagepicimgs = _this.$(_this.pagepicimgsid).getElementsByTagName("span");
            _this.totalsize = _this.pagepicimgs.length;
            _this.pagepicthumbimgs = _this.$(_this.pagepicthumbimgsid).getElementsByTagName("span");
            _this.pagepictitles = _this.$(_this.pagepictitlesid).getElementsByTagName("span");
            _this.pagepiccontents = _this.$(_this.pagepiccontentsid).getElementsByTagName("textarea");
            _this.preloadimgs = new VsbPreloadImgArray();  
            
            _this.showimgcontent();
            _this.showthumbimgcontent();
            _this.registerevent();
        },
        //真实显示图片内容的方法
        showrealimgcontent:function()
        {
            var showimgcontent = _this.$(_this.imgcontentid);
            if(showimgcontent && _this.pagepicimgs.length>0)
            {
                var imgsrc = _this.pagepicimgs[_this.currentindex].innerHTML;
                showimgcontent.innerHTML="<img id='"+_this.imgid+"' src='"+_this.loadingimg+"' showwidth='"+_this.imgwidth+"'  showheight='"+_this.imgheight+"'  style='"+_this.imgstyle+"'/>";
                _this.preloadimgs.addImg(imgsrc, _this.imgid, _this.onimgload);
                if(_this.istdnext)
                {
                    _this.addEvent(_this.$(_this.tdnextid),"mouseover",_this.uptdnext,true);    
                }else
                {
                    _this.addEvent(_this.$(_this.imgid),"mouseover",_this.upimgnext,true);        
                }
                
            }            
            _this.showcurrenttotalsize(); 
            _this.showcurrenttitle();
            _this.showcurrentcontent();
            _this.removethumbimgtdstyle(_this.selectthumbimgid)
            _this.setthumbimgtdstyle(_this.currentindex);
            
        },
        //显示内容
        showimgcontent:function()
        {
            //改为延时一段时间显示，不然狂点页面会出现未知错误
            setTimeout('_this.showrealimgcontent()',_this.imageshowintervaltime); 
        },
        //加载大图图片
        onimgload:function(img,imgid)
        {
            var imgobj = _this.$(imgid);
            img.showImg(imgobj, imgobj.getAttribute("showwidth"),imgobj.getAttribute("showheight"),_this.isstretch,_this.iszoomin);
        },
        //加载缩略图
        onthumbimgload:function(img,imgid)
        {
            var imgobj = _this.$(imgid);
            img.showImg(imgobj, imgobj.getAttribute("showwidth"),imgobj.getAttribute("showheight"));
        },
        
        //td事件
        uptdnext:function()
        {
            var showtd =_this.$(_this.tdnextid);
            
            //初始化执行
            var isleft = _this.showtdcursor(showtd);
            showtd.onmouseover=function()
            {
                
                isleft = _this.showtdcursor(showtd);
            }
            showtd.onmousemove=function()
            {
                isleft = _this.showtdcursor(showtd);
            }
            showtd.onclick=function(){
                _this.handleimgnext(isleft);
            }
        },        
        //显示td手形
        showtdcursor:function(tdobj)
        {
            var width = tdobj.clientWidth;
            var isleft = false;
            var evt = _this.getEvent();
            var eventwidth = evt.clientX-_this.tgetAbsLeft(tdobj);
            return _this.showcursor(tdobj,width,eventwidth);
            
        },
        //显示手形
        showcursor:function(obj,objwidth,eventwidth)
        {
            if(eventwidth< parseInt(objwidth/2)){
                obj.style.cursor	= 'url('+_this.leftcur+'),auto';
                return true;
            }
            else
            {
                obj.style.cursor	= 'url('+_this.rightcur+'),auto';
                return false;
            }
            
        },
        //图像事件
        upimgnext:function()
        {
            var showimg =_this.$(_this.imgid);
            //初始化执行
            var isleft = _this.showimgcursor(showimg);
            showimg.onmouseover=function()
            {
                isleft = _this.showimgcursor(showimg);
            }
            showimg.onmousemove=function()
            {
                isleft = _this.showimgcursor(showimg);
            }
            showimg.onclick=function(){
                _this.handleimgnext(isleft);
            }
        },
        //显示img手形
        showimgcursor:function(imgobj)
        {
            var width = imgobj.width;
            var isleft = false;
            var evt=_this.getEventOffset() ;
            return _this.showcursor(imgobj,width,evt[0]);
        },
        //处理点击
        handleimgnext:function(isleft)
        {
            //向左
            if(isleft)
            {
                 _this.previousimg()
            }
            //向右
            else
            {
                
                _this.nextimg();
            }
        },
        //上一个图片        
        previousimg:function()
        {
            var previousindex = (parseInt(_this.currentindex)-1);
            if(previousindex>=0)
            {
                
                _this.currentindex = parseInt(_this.currentindex)-1;
                if(_this.thumbisclick)
                {
                    _this.scrolltoimage();    
                    _this.thumbisclick=false;
                }else
                {
                    _this.thumbmovelock = true;
                    _this.thumbisleft =true;
                    _this.scrollimage()                          
                }
            }
            else
            {
                 
                 if(_this.iscycle)
                 {
                     
                       _this.scrolltoend(); 
                       _this.currentindex = parseInt(_this.totalsize) -1;
                 }else
                 {
                       if(_this.previousurl!="")
                       {
                            _this.topage(_this.previousurl);
                       }
                 }
            }
            _this.showimgcontent();
        },
        //下一个图片        
        nextimg:function()
        {
            
            
            var nextindex = (parseInt(_this.currentindex)+1);
            if(nextindex<(parseInt(_this.totalsize)))
            { 
                _this.currentindex = parseInt(_this.currentindex)+1;   
                if(_this.thumbisclick)
                {
                    _this.scrolltoimage();    
                    _this.thumbisclick=false;
                }else
                {
                    
                    if(_this.currentindex!=0 && ((_this.currentindex+1)%(_this.thumbimgsize)==0) )
                    {  
                       
                         _this.scrolltoimage();                  
                    }
                } 
            }
            else
            {
                
                 if(_this.iscycle)
                 {
                       _this.scrolltostart(); 
                       _this.currentindex = 0;
                 }else
                 {
                       if(_this.nextimgurl!="")
                       {
                            _this.topage(_this.nextimgurl);
                       }                     
                }
            }
            _this.showimgcontent();            
        }, 
        //页面跳转
        topage:function(pageurl)
        {
            
            window.location.href =   pageurl;
        },
        //跳到某一张图片       
        arriveimg:function(toindex)
        {
               if(parseInt(toindex)>=0 && (parseInt(toindex)<parseInt(_this.totalsize)))
               {
                     _this.removethumbimgtdstyle(_this.currentindex)
                     _this.currentindex = toindex;
                     _this.showimgcontent();           
               }
        },
        //显示当前和总的页面数量        
        showcurrenttotalsize:function()
        {
            var currenttotalsize = _this.$(_this.currenttotalsizeid);
            if(currenttotalsize && _this.pagepicimgs.length>0)
            {
                var showcurrenttotalsizehtml =  _this.showpagefront ;
                
                if(_this.currentshowpagecolor!="")
                {
                    showcurrenttotalsizehtml +="<font style='color:"+_this.currentshowpagecolor+"'>"
                }
                
                showcurrenttotalsizehtml += (parseInt(_this.currentindex)+1) 
                
                if(_this.currentshowpagecolor!="")
                {
                    showcurrenttotalsizehtml += "</font>";
                }
                showcurrenttotalsizehtml +=_this.showpagesign
                showcurrenttotalsizehtml +=_this.totalsize
                showcurrenttotalsizehtml +=_this.showpageback; 
                currenttotalsize.innerHTML= showcurrenttotalsizehtml;
            }
        },        
        //显示标题
        showcurrenttitle:function()
        {
            var titlecontent = _this.$(_this.titlecontentid);
            if(titlecontent && _this.pagepictitles.length>0)
            {    
                var  titlecontentvalue= _this.pagepictitles[_this.currentindex];
                titlecontent.innerHTML = titlecontentvalue.innerHTML;
            }
        },       
        //显示内容
        showcurrentcontent:function()
        {
            var desccontent = _this.$(_this.desccontentid);
            if(desccontent && _this.pagepiccontents.length>0)
            {    
                var desccontentvalue = _this.pagepiccontents[_this.currentindex];
                desccontent.innerHTML = desccontentvalue.value;
            
            }            
        },        
        //去除缩略图边框样式
        removethumbimgtdstyle:function(showindex)
        {
            var thumbimgcontent = _this.$(_this.thumbimgcontentid);
            if(thumbimgcontent)
            {
                var selectimg = _this.$(_this.thumbimgid+showindex);
                if(selectimg)
                {                   
                       selectimg.parentNode.style.border=_this.thumbtdstyle0;
                }
            }           
        },
        //设置缩略图边框样式
        setthumbimgtdstyle:function(showindex)
        {
            var thumbimgcontent = _this.$(_this.thumbimgcontentid);
            if(thumbimgcontent)
            {
                var selectimg = _this.$(_this.thumbimgid+showindex);
                if(selectimg)
                {                   
                       selectimg.parentNode.style.border=_this.thumbtdstyle;
                       _this.selectthumbimgid = showindex;
                }
            }            
        },       
        //显示缩略图
        showthumbimgcontent:function()
        {
           var showthumbimgcontent = _this.$(_this.thumbimgcontentid);
           if(showthumbimgcontent)
           {
                var result="<table border=0 width='" + ((_this.thumbimgwidth + _this.thumbfill)*this.pagepicthumbimgs.length) + "' cellspacing=0 cellpadding=0><tr>";
                for(var i=0;i<this.pagepicthumbimgs.length;i++)
                {
                       result+="<td  width='"+_this.thumbimgwidth+"' nowrap align=center style='cursor:pointer;border:" + _this.thumbtdstyle0 + "'>";
                       result+="<img id='"+_this.thumbimgid+i+"' src='"+_this.loadingimg+"' showwidth='"+ (parseInt(_this.thumbimgwidth)-10) +"'  showheight='"+_this.thumbimgheight+"' onclick='_this.thumbshowimage("+(parseInt(i))+")' style='"+_this.imgstyle+"'></img>";
                       result+="</td>";
                }
                result+="</tr></table>";
                showthumbimgcontent.style.width = ((_this.thumbimgwidth + _this.thumbfill)*_this.thumbimgsize)+"px";
                showthumbimgcontent.style.overflow = "hidden";
                showthumbimgcontent.style.margin = "0 auto;";
                showthumbimgcontent.innerHTML = result;
                
                for(var i=0;i<_this.pagepicthumbimgs.length;i++)
                {
                    var imgsrc = _this.pagepicthumbimgs[i].innerHTML;
                    _this.preloadimgs.addImg(imgsrc, _this.thumbimgid+i, _this.onthumbimgload);
                }
                _this.setthumbimgtdstyle(_this.currentindex);
                
                _this.registerscrollevent();
           }            
        },
        //注册按钮事件
        registerscrollevent:function()
        {
            var leftimage = _this.$(_this.thumbleftimgsid)
            if(leftimage)
            {
                _this.addEvent(leftimage,"click",_this.scrollleft,true); 
            }
            var rightimage = _this.$(_this.thumbrightimgsid)
            if(rightimage)
            {
                _this.addEvent(rightimage,"click",_this.scrollright,true); 
            }
        },   
        //注册页面事件   
         registerevent:function()
        {
            //上一页
            var previousimg = _this.$(_this.previousimgid)
            if(previousimg)
            {
                _this.addEvent(previousimg,"click",_this.previousimg,true); 
            }
            //下一页
            var nextimg = _this.$(_this.nextimgid)
            if(nextimg)
            {
                _this.addEvent(nextimg,"click",_this.nextimg,true); 
            }
            //自动播放
            var startautoplay = _this.$(_this.startautoplayid)
            if(startautoplay)
            {
                _this.addEvent(startautoplay,"click",_this.startautoplay,true); 
            }
            //停止播放
            var stopautoplay = _this.$(_this.stopautoplayid)
            if(stopautoplay)
            {
                _this.addEvent(stopautoplay,"click",_this.stopautoplay,true); 
            }            
        },           
        //向左滚动    
        scrollleft:function()
        {
            _this.thumbmovelock = true;
            _this.thumbisleft =true;
            _this.thumbisclick = true;
            _this.scrollimage()
        },         
        //向右滚动
        scrollright:function()
        {
            _this.thumbmovelock = true;
            _this.thumbisleft =false;
            _this.thumbisclick = true;
            _this.scrollimage()    
        },            
        //缩略图滚动
        scrollimage:function()
        {
            var thumbimgcontent = _this.$(_this.thumbimgcontentid);
            if(thumbimgcontent)
            {
                if(_this.thumbmovelock==false)
                {
                    return; 
                }
                var num=0;
            
                num += parseInt(_this.thumbspace);
                _this.thumbcomp  += num;
                if(_this.thumbisleft)
                {
                    thumbimgcontent.scrollLeft -=num; 
                }else
                {
                    thumbimgcontent.scrollLeft+=num;;
                }
                if(_this.thumbcomp<_this.thumbimgwidth)
                {
                    setTimeout('_this.scrollimage()',_this.thumbspeed);      
                }
                else
                {
                    if(_this.thumbisleft)
                    {
                        thumbimgcontent.scrollLeft-=_this.thumbfill;   
                    }else
                    {
                        thumbimgcontent.scrollLeft+=_this.thumbfill;   
                    }
                    _this.thumbcomp=0;
                    _this.thumbmovelock=false;
                }
            }            
        },      
        //缩略图点击处理
        thumbshowimage:function(showindex)
        {
            _this.arriveimg(showindex)
            _this.setthumbimgtdstyle(showindex);            
        },        
        //缩略图跳转处理
        scrolltoimage:function()
        {
            var thumbimgcontent = _this.$(_this.thumbimgcontentid);
            if(thumbimgcontent)
            {
                    var tosize;
                    tosize = parseInt (parseInt(_this.thumbimgwidth) * parseInt(_this.currentindex))+parseInt (parseInt(_this.thumbfill) * parseInt(_this.currentindex));
                    thumbimgcontent.scrollLeft =tosize;
            }            
        },        
       //缩略图滚动到尾
        scrolltoend:function()
        {
            var thumbimgcontent = _this.$(_this.thumbimgcontentid);
            if(thumbimgcontent)
            {
                var tosize = (_this.thumbimgwidth* _this.totalsize)+_this.thumbfill; 
                if(_this.isFF())
                {
                    tosize=tosize+10;                        
                }
                thumbimgcontent.scrollLeft =tosize;
            }            
        },      
        //缩略图滚动到首     
        scrolltostart:function()
        {
           
            var thumbimgcontent = _this.$(_this.thumbimgcontentid);
            if(thumbimgcontent)
            {
                 thumbimgcontent.scrollLeft =0; 
            }      
        },           
        startautoplay:function()
        {
            _this.stopautoplay()
            _this.autoplayobj = setInterval('_this.nextimg()', _this.autostarttimes);             
        },        
        stopautoplay:function()
        {
            clearInterval(_this.autoplayobj );           
        },            
        
        //通用工具函数
    	$:function(element)//获取对象
	{
            return document.getElementById(element);
	},
	isFF:function(element)//当前浏览器是否是ff
	{
	     return (navigator.userAgent.indexOf("Firefox")!=-1);
	},
	addEvent:function(elm, evType, fn, useCapture)//注册事件
	{
            if (elm.addEventListener)
             {  
                elm.addEventListener(evType, fn, useCapture)   
                return true; 
            } 
            else if (elm.attachEvent) 
            { 
                var r = elm.attachEvent('on' + evType, fn);
                return r; 
            }
            else 
            {  
                elm['on' + evType] = fn;
            } 
	},      
	getEvent:function()//获取事件
	{
            if(document.all)       
                return window.event;            
            func=_this.getEvent.caller;   
            while(func!=null)
            {   
                var arg0=func.arguments[0];   
                if(arg0)
                {   
                    if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))
                    {   
                    return arg0;   
                    }               
                }   
                func=func.caller;   
            }   
            return null;
	},
	getOffset:function(evt)
	{
	    var target = evt.target;
            if (target.offsetLeft == undefined)
            {
                target = target.parentNode;
            }
            
            var pageCoord = _this.getPageCoord(target);
            var eventCoord =
            { 
                x: window.pageXOffset + evt.clientX,
                y: window.pageYOffset + evt.clientY
            };
            var offset =
            {
                offsetX: eventCoord.x - pageCoord.x,
                offsetY: eventCoord.y - pageCoord.y
            };
            return offset;
	},
	getPageCoord:function(element)
	{
            var coord = {x: 0, y: 0};
            while (element)
            {
                coord.x += element.offsetLeft;
                coord.y += element.offsetTop;
                element = element.offsetParent;
            }
            return coord;  	    
	},
	getEventOffset:function()//兼容ff的获取evtOffsets方法
        {
            var evt = _this.getEvent();
            var offestarray = new Array();
            if (evt.offsetX == undefined)
            {
                var evtOffsets = _this.getOffset(evt);
                offestarray.push(evtOffsets.offsetX);
                offestarray.push(evtOffsets.offsetY);
            }
            else
            {
                
                offestarray.push(evt.offsetX);
                offestarray.push(evt.offsetY);
            }
            return offestarray;   
        } ,
        tgetAbsLeft:function(e)//获取元素位于窗体left距离
        {
            var   t=e.offsetLeft;
            while(e=e.offsetParent)
                t += e.offsetLeft;
            return t; 
        }
}