// javascript document
$(document).ready(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) / 4;
				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 = 3;
	var num2 = math.ceil(num / 2);

	function change(){

		animate(opicul, {left: - index * w1});
		
		if(index < num){
			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 == 0){
					olistli[i].classname = "vied";
				}
			if(i == index){
				olistli[i].classname = "on";
				if(i == 0){
					olistli[i].classname = "on vied";
				}
			}
		}
	}
	
	onext.onclick =  function(){
		
		index ++;
		index = index == len2 ? 0 : index;
		change();
		$("#picbox").removeclass("hide");
		$("#a1").addclass("hide");
	}
	
	oprev.onmouseover =  onext.onmouseover =  function(){
		clearinterval(timer);
		}
	$("#picbox li, #listbox li").mouseover(function(){
		clearinterval(timer);
	});
	oprev.onmouseout = onext.onmouseout  = function(){
		timer=setinterval(autoplay,4000);
		}
	$("#picbox li, #listbox li").mouseout(function(){
		timer=setinterval(autoplay,4000);
	});

	oprev.onclick  = function(){

		index --;
		index = index == -1 ? len2 -1 : index;
		change();
		$("#picbox").removeclass("hide");
		$("#a1").addclass("hide");
	}
	
	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();
			$("#picbox").removeclass("hide");
			$("#a1").addclass("hide");
		}
	}
	
});