$(function(){
	/*δԪ�ص���β��ӳ���*/
	var $panels				= $('#slider .scrollcontainer > li');
	var $parent=$panels.parent();//�����ǰli�����һ���ĸ�Ԫ��
	var $length=$panels.length;//��ȡָ��lengthֵ
	var $first=$panels.eq(0).clone().addclass("panel cloned").attr("id",'panel_'+($length+1));//��ȡ��һ��Ԫ�ز�����
	var $last=$panels.eq($length-1).clone().addclass("cloned").attr("id",'panel_0');;//��ȡ���һ��Ԫ�ز�����
	$parent.append($first);//��li�����еĵ�һ����ӵ�ulԪ���е����һ��  $("#slide02").scrollleft(0);
	$parent.prepend($last);//��li�����е����һ����ӵ�ulԪ���еĵ�һ��
	var totalpanels			= $(".scrollcontainer").children().size();//������Ԫ�ص����֣�����Ԫ�صĸ��� 7
	var regwidth			= $(".panel").css("width");//��ȡliԪ�صŀ��
	var regimgwidth			= $(".panel img").css("width");//��ȡ����ͼƭ�ŀ��
	var movingdistance	    = 320;//ÿ���ƶ��ľ���
	var curwidth			= 400;//��ǰ�м�li�ŀ��ϊ350px
	var curheight         =500;//��ǰ�м�li�ĸ߶�δ312  
	var curimgwidth  =400;
	var curimgheight  =500;
	var othersw           =295;//����li�ŀ��
	var othersh           =500;//�߶�
	var othersimgw           =295;//����li�ŀ��
	var othersimgh           =369;//�߶�
	var $panels				= $('#slider .scrollcontainer > li');//�˴������ǽ����ƽ������׵�Ԫ�����¸�ֵ
	var $container			= $('#slider .scrollcontainer');
	$panels.css({'float' : 'left','position' : 'relative'});
	$("#slider").data("currentlymoving", false);//�ƿ������˶���
	$container.css('width', (($panels[0].offsetwidth+25) * $panels.length) + 60 ).css('left','0');//�����������ܵŀ�� ps��25ϊmarginֵ offsetwidth
	var scroll = $('#slider .scroll').css('overflow', 'hidden');
	function returntonormal(element) {//liԪ�ط��ص�����״̬
		$(element).animate({ width: othersw,height: othersh}).find("img").animate({width:othersimgw,height:othersimgh});
	};
	function growbigger(element) {//��ǰԪ��֮����
		$(element).addclass("current").animate({ width: curwidth,height:curheight}).siblings().removeclass("current")
		.end().find("img").animate({width:curimgwidth,height:curimgheight})
	}
	//direction true = right, false = left
	function change(direction) {
		//if not at the first or last panel
		if((direction && !(curpanel < totalpanels-2)) || (!direction && (curpanel <= 1))) {
			return false;
		}	
		//if not currently moving
		if (($("#slider").data("currentlymoving") == false)) {
			$("#slider").data("currentlymoving", true);
			var next         = direction ? curpanel + 1 : curpanel - 1;
			var leftvalue    = $(".scrollcontainer").css("left");
			var movement	 = direction ? parsefloat(leftvalue, 10) - movingdistance : parsefloat(leftvalue, 10) + movingdistance;
			$(".scrollcontainer").stop().animate({"left": movement}, function() {
				$("#slider").data("currentlymoving", false);
			});
			returntonormal("#panel_"+curpanel);
			growbigger("#panel_"+next);
			curpanel = next;
			//remove all previous bound functions
			$("#panel_"+(curpanel+1)).unbind();	
			//go forward
			$("#panel_"+(curpanel+1)).click(function(){ change(true); });
			//remove all previous bound functions															
			$("#panel_"+(curpanel-1)).unbind();
			//go back
			$("#panel_"+(curpanel-1)).click(function(){ change(false); }); 
			//remove all previous bound functions
			$("#panel_"+curpanel).unbind();
		}
	}
	// set up "current" panel and next and prev ���õ�ǰԪ�غ�����
	growbigger("#panel_1");	
	var curpanel = 1;
	$("#panel_"+(curpanel+1)).click(function(){ change(true);return false;});
	$("#panel_"+(curpanel-1)).click(function(){ change(false);return false;});
	//when the prev/next arrows are clicked
	$("#slider .next").click(function(){ change(true);});	
	$("#slider .prev").click(function(){ change(false);});
	$(window).keydown(function(event){//���̷��������
		switch (event.keycode) {
			case 13: //enter
				$(".next").click();
			break;
			case 37: //prev arrow
				$(".prev").click();
			break;
			case 39: //next arrow
				$(".next").click();
			break;
		}
	});	
	
});