jQuery(document).ready(function(){
	var timerid=0;
	var _w=jQuery(".visual li").outerWidth(true);
	var _w2=jQuery(".info li").outerWidth(true);
	var clicked=0;
	
	jQuery(".qu").each(function(index) {
		jQuery(this).mouseleave(function(){
			if(clicked==0)
				timerid=setInterval("scrollEl()",6000);
		});
		jQuery(this).mouseenter(function(){
			clearInterval(timerid);
		});		
	});
	jQuery("#item-lists li").each(function(index) {
		if(index==0){
			jQuery(this).addClass("active");			
		}
	jQuery(this).click(function(){
		jQuery("#item-lists li").removeClass("active");
		jQuery(this).addClass("active");
		//alert(jQuery(".visual li").outerWidth(true)+ "\n" + jQuery(".info li").outerWidth(true));
		var _list = jQuery(".visual li").parent();
		var _list2 = jQuery(".info li").parent();
		_list.animate({marginLeft: -(_w * index)}, {queue:false, duration: 500});
		_list2.animate({marginLeft: -(_w2 * index)}, {queue:false, duration: 500});
		clearInterval(timerid);
		clicked=1;
	});	
	jQuery(this).mouseleave(function(){
	if(clicked==0)
		timerid=setInterval("scrollEl()",6000);
	});
	jQuery(this).mouseenter(function(){
		clearInterval(timerid);
	});
});
timerid=setInterval("scrollEl()",6000);
});

function scrollEl(){
	
	var _list = jQuery(".visual li").parent();
	var _list2 = jQuery(".info li").parent();
	var _w=jQuery(".visual li").outerWidth(true);
	var _w2=jQuery(".info li").outerWidth(true);			
	var _active = jQuery('.items li').index(jQuery('.items li').filter('.active:eq(0)'));	
	_active++;
		 if(_active==jQuery('.items li').index(jQuery('.items li').filter(':last'))+1) var _active = 0;
	_list.animate({marginLeft: -(_w * _active)}, {queue:false, duration: 500});
	_list2.animate({marginLeft: -(_w2 * _active)}, {queue:false, duration: 500});
	 jQuery('.items li').removeClass('active').eq(_active).addClass('active');

	
}