(function(){
                                                
                                                function g(s){
                                                    return document.getelementbyid(s);
                                                }
                                                
                                                function getstyle(obj, attr){
                                                    if(obj.currentstyle){
                                                        return obj.currentstyle[attr];
                                                    }else{
                                                        return getcomputedstyle(obj, false)[attr];
                                                    }
                                                }
                                                
                                                function animate(obj, json){
                                                    if(obj.timer){
                                                        clearinterval(obj.timer);
                                                    }
                                                    obj.timer = setinterval(function(){
                                                        for(var attr in json){
                                                            var icur = parseint(getstyle(obj, attr));
                                                            icur = icur ? icur : 0;
                                                            var ispeed = (json[attr] - icur) / 5;
                                                            ispeed = ispeed > 0 ? math.ceil(ispeed) : math.floor(ispeed);
                                                            obj.style[attr] = icur + ispeed + 'px';
                                                            if(icur == json[attr]){
                                                                clearinterval(obj.timer);
                                                            }
                                                        }
                                                    }, 30);
                                                }

                                                var opic = g("picbox");
                                                var olist = g("listbox");
                                                
                                                var oprev = g("prev");
                                                var onext = g("next");
                                                var oprevtop = g("prevtop");
                                                var onexttop = g("nexttop");

                                                var opicli = opic.getelementsbytagname("li");
                                                var olistli = olist.getelementsbytagname("li");
                                                var len1 = opicli.length;
                                                var len2 = olistli.length;
                                                
                                                var opicul = opic.getelementsbytagname("ul")[0];
                                                var olistul = olist.getelementsbytagname("ul")[0];
                                                var w1 = opicli[0].offsetwidth;
                                                var w2 = olistli[0].offsetwidth;

                                                opicul.style.width = w1 * len1 + "px";
                                                olistul.style.width = w2 * len2 + "px";

                                                var index = 0;
                                                
                                                var num = 5;
                                                var num2 = math.ceil(num / 2);

                                                function change(){

                                                    animate(opicul, {left: - index * w1});
                                                    
                                                    if(index < num2){
                                                        animate(olistul, {left: 0});
                                                    }else if(index + num2 <= len2){
                                                        animate(olistul, {left: - (index - num2 + 1) * w2});
                                                    }else{
                                                        animate(olistul, {left: - (len2 - num) * w2});
                                                    }

                                                    for (var i = 0; i < len2; i++) {
                                                        olistli[i].classname = "";
                                                        if(i == index){
                                                            olistli[i].classname = "on";
                                                        }
                                                    }
                                                }
                                                
                                                onexttop.onclick = onext.onclick = function(){
                                                    
                                                    index ++;
                                                    index = index == len2 ? 0 : index;
                                                    change();
                                                }
                                                
                                                oprev.onmouseover = onext.onmouseover = oprevtop.onmouseover = onexttop.onmouseover = function(){
                                                    clearinterval(timer);
                                                    }
                                                oprev.onmouseout = onext.onmouseout = oprevtop.onmouseout = onexttop.onmouseout = function(){
                                                    timer=setinterval(autoplay,4000);
                                                    }

                                                oprevtop.onclick = oprev.onclick = function(){

                                                    index --;
                                                    index = index == -1 ? len2 -1 : index;
                                                    change();
                                                }
                                                
                                                var timer=null;
                                                timer=setinterval(autoplay,4000);
                                                function autoplay(){
                                                        index ++;
                                                        index = index == len2 ? 0 : index;
                                                        change();
                                                    }
                                                
                                                

                                                for (var i = 0; i < len2; i++) {
                                                    olistli[i].index = i;
                                                    olistli[i].onclick = function(){
                                                        index = this.index;
                                                        change();
                                                    }
                                                }
                                                
                                            })()