$(function(){
	var swidth = $("#slider_name").width();
	var len = $("#slider_name .silder_panel").length;
	var index = 0;
	var pictimer;
	
	var btn = "<a class='prev'>prev</a><a class='next'>next</a>";
	$("#slider_name").append(btn);

	$("#slider_name .silder_nav li").css({"opacity":"0.6","filter":"alpha(opacity=60)"}).mouseenter(function() {																		
		index = $("#slider_name .silder_nav li").index(this);
		showpics(index);
	}).eq(0).trigger("mouseenter");

	$("#slider_name .prev,#slider_name .next").css({"opacity":"0.2","filter":"alpha(opacity=20)"}).hover(function(){
		$(this).stop(true,false).animate({"opacity":"0.6","filter":"alpha(opacity=60)"},1000);
	},function() {
		$(this).stop(true,false).animate({"opacity":"0.2","filter":"alpha(opacity=20)"},1000);
	});


	// prev
	$("#slider_name .prev").click(function() {
		index -= 1;
		if(index == -1) {index = len - 1;}
		showpics(index);
	});

	// next
	$("#slider_name .next").click(function() {
		index += 1;
		if(index == len) {index = 0;}
		showpics(index);
	});

	// 
	$("#slider_name .silder_con").css("width",swidth * (len));
	
	// mouse 
	$("#slider_name").hover(function() {
		clearinterval(pictimer);
	},function() {
		pictimer = setinterval(function() {
			showpics(index);
			index++;
			if(index == len) {index = 0;}
		},5000); 
	}).trigger("mouseleave");
	
	// showpics
	function showpics(index) {
		var nowleft = -index*swidth; 
		$("#slider_name .silder_con").stop(true,false).animate({"left":nowleft},1000);
		$("#slider_name .silder_nav li").removeclass("current").eq(index).addclass("current"); 
		$("#slider_name .silder_nav li").stop(true,false).animate({"opacity":"0.5"},500).eq(index).stop(true,false).animate({"opacity":"1"},1000);
	}
});