var img = {
	
	 imagenum: 5  ,
	 imagenumwidth:163,
	 num:0,
	 count:document.getelementbyid("imagebg").getelementsbytagname("li").length,
	 
	 current:document.getelementbyid("current"),
	 imagebg:document.getelementbyid("imagebg"),
	 imagebg_li:document.getelementbyid("imagebg").getelementsbytagname("li"),
	 small_pic:document.getelementbyid("small_pic"),
	 
	 imageshow:document.getelementbyid("imageshow"),
	 scrollbg:document.getelementbyid("scrollbg"),
	 
	 left_img_btn:document.getelementbyid("left_img_btn"),
	 right_img_btn:document.getelementbyid("right_img_btn"),
	 
	 small_pic_html:[],
	 
	 animate:null,
	 autoplay:null,
	 
	 init:function(){
		 img.imagebg.innerhtml = img.imagebg.innerhtml+img.imagebg.innerhtml+img.imagebg.innerhtml;
		for(var i=0;i<img.imagebg_li.length;i++){
			//console.log(img.imagebg_li[i]+" is ok")
			if(i!=0){
				img.small_pic_html.push("<li onclick='img.play("+i+")'><img src='"+img.imagebg_li[i].getattribute("data-spic")+"' /></li>");
				img.imagebg.getelementsbytagname("li")[i].style.display ="none";
			}else{
				img.small_pic_html.push("<li onclick='img.play("+i+")' class='currently'><img src='"+img.imagebg_li[i].getattribute("data-spic")+"' /></li>");
			}
			//console.log(img.small_pic_html);
		}
		//console.log(img.small_pic_html)
		
		img.small_pic.innerhtml = img.small_pic_html.join("");
		img.current.style.left = "77px";
		img.small_pic.style.left = "0px";
		img.imagebg_li[0].style.filter = "alpha(opacity=100)";
		img.imagebg_li[0].style.opacity = 1;
		
		img.left_img_btn.onclick = function(){img.play(img.num-1);}
		img.right_img_btn.onclick = function(){img.play(img.num+1)};
		
		img.autoplay= setinterval(function(){img.play(img.num+1)},5000);
		
		img.imageshow.onmouseover = function(){clearinterval(img.autoplay);}
		img.imageshow.onmouseout = function(){img.autoplay= setinterval(function(){img.play(img.num+1)},5000); }
		
	},
	
	play:function(i){
		var small_pic_left = parseint(img.small_pic.style.left);
		var current_left = parseint(img.current.style.left);
		var op = 0;
		
		if(i == img.num|| img.animate!=null || i>img.count*3 || i<-1){return;}
		
		
		
		for(var x=0;x<img.imagebg_li.length;x++){
			
			img.small_pic.getelementsbytagname("li")[x].classname = "";
			img.imagebg_li[x].style.filter = "alpha(opacity="+op*10+")";
			img.imagebg_li[x].style.opacity = op/10;
			img.imagebg_li[x].style.display = "none";
		}
		
		
		if(i>(img.count*3-1)){
			i-=img.count;
			img.num -=img.count;
			
			img.small_pic.style.left = small_pic_left + img.imagenumwidth*(i-img.count) +"px" ;
			img.small_pic.getelementsbytagname("li")[i].classname="currently";
			
			small_pic_left = parseint(img.small_pic.style.left);
			current_left = parseint(img.current.style.left);
			
		}else if(i<0){
			i+=img.count;
			img.num +=img.count;
			
			img.small_pic.style.left = small_pic_left - img.imagenumwidth*img.count +"px" ;
			img.small_pic.getelementsbytagname("li")[i].classname="currently";
			
			small_pic_left = parseint(img.small_pic.style.left);
			current_left = parseint(img.current.style.left);
		}
	
		if(i>img.num){
			//濡傛灉姣斿綋鍓嶅ぇ;
			img.imagebg_li[i].style.display = "block";
			if(parseint(img.current.style.left)>700){
				//濡傛灉娲诲姩妗嗗埌浜嗘渶鍙宠竟--瀹屾垚
				//灏忓浘鐗囧悜宸?
				img.animate = setinterval(function(){
					if(parseint(img.small_pic.style.left)>(small_pic_left- img.imagenumwidth*(i-img.num)+img.imagenumwidth*(i-img.num)/10)){
						img.small_pic.style.left = parseint(img.small_pic.style.left) - img.imagenumwidth*(i-img.num)/10 +"px" ;
						img.imagebg_li[i].style.filter = "alpha(opacity="+(++op)*11+")";
						img.imagebg_li[i].style.opacity = op/9;
					}else{
						img.small_pic.style.left = small_pic_left - img.imagenumwidth*(i-img.num) +"px" ;
						img.small_pic.getelementsbytagname("li")[i].classname="currently";
						clearinterval(img.animate);
						img.num = i;
						img.animate = null;
					}
				},30);
			}else{
				//娲诲姩妗嗗悜鍙?-瀹屾垚
				img.animate = setinterval(function(){
					if(parseint(img.current.style.left)<(current_left + img.imagenumwidth*(i-img.num)-img.imagenumwidth*(i-img.num)/10)){
						img.current.style.left = parseint(img.current.style.left) + img.imagenumwidth*(i-img.num)/10 +"px" ;
						//涓轰簡ie鑱旂洘
						
						img.imagebg_li[i].style.filter = "alpha(opacity="+(++op)*11+")"; //"alpha(opacity=100)";
						
						//涓轰簡鐏嫄閮ㄨ惤
						img.imagebg_li[i].style.opacity = op/9;
					}else{
						img.current.style.left = current_left + img.imagenumwidth*(i-img.num) +"px" ;
						img.small_pic.getelementsbytagname("li")[i].classname="currently";
						clearinterval(img.animate);
						img.num = i;
						img.animate = null;
					}
				},30);
			}
			
		}else if(i<img.num){
			img.imagebg_li[i].style.display = "block";
			//濡傛灉姣斿綋鍓嶅皬;
			if(parseint(img.current.style.left)<100){
				//濡傛灉娲诲姩妗嗗埌浜嗘渶宸﹁竟
				//灏忓浘鐗囧悜鍙?
				img.animate = setinterval(function(){
					//console.log(small_pic_left+"+"+ img.imagenumwidth*(img.num-i))
					if(parseint(img.small_pic.style.left)<(small_pic_left- img.imagenumwidth*(i-img.num)+img.imagenumwidth*(i-img.num)/10)){
						img.small_pic.style.left = parseint(img.small_pic.style.left) - img.imagenumwidth*(i-img.num)/10 +"px" ;
						img.imagebg_li[i].style.filter = "alpha(opacity="+(++op)*11+")";
						img.imagebg_li[i].style.opacity = op/9;
					}else{
						img.small_pic.style.left = small_pic_left - img.imagenumwidth*(i-img.num) +"px" ;
						img.small_pic.getelementsbytagname("li")[i].classname="currently";
						clearinterval(img.animate);
						img.num = i;
						img.animate = null;
					}
				},30);
			}else{
				//娲诲姩妗嗗悜宸?
				img.animate = setinterval(function(){
					if(parseint(img.current.style.left)>(current_left - img.imagenumwidth*(img.num-i)+img.imagenumwidth*(img.num-i)/10)){
						img.current.style.left = parseint(img.current.style.left) - img.imagenumwidth*(img.num-i)/10 +"px" ;
						img.imagebg_li[i].style.filter = "alpha(opacity="+(++op)*11+")";
						img.imagebg_li[i].style.opacity = op/9;
					}else{
						img.current.style.left = current_left - img.imagenumwidth*(img.num-i) +"px" ;
						img.small_pic.getelementsbytagname("li")[i].classname="currently";
						clearinterval(img.animate);
						img.num = i;
						img.animate = null;
					}
				},30);
			}
		}
	}
	
	
}