var arr_data_img = ['<li><a href="/web_design/" ><img src="images/web_product/web_design_product.jpg" alt="web design"  /></a></li>',
                    '<li><a href="/web_design/" ><img src="images/web_product/web_base_product.jpg" alt="web base"  /></a></li>',
                    '<li><a href="/web_design/" ><img src="images/web_product/flash_app_product.jpg" alt="flash application"  /></a></li>',
                    '<li><a href="/web_design/" ><img src="images/web_product/logo_banner_product.jpg" alt="logo &amp banner"  /></a></li>',
                    '<li><a href="/web_design/" ><img src="images/web_product/dtc_product.jpg" alt="desktop publishing"  /></a></li>'];
					
					
var _speed = 500;
var _time  = 5000;

var _now = 1;
var _checking = 0;

function web_box_action(_num)
{
	if (_checking == 0)
	{
		if ($('.web_box #btn'+_num).hasClass('focus') == false)
		{
			_checking = 1;
			if (_now < _num)
			{	
				$('.webbox_slitebox').append(arr_data_img[(_num-1)]);
				$('.webbox_slitebox').css({'left':'0px'});
				
				$('.webbox_slitebox').animate({left:'-=295px'},_speed,function(){
					$('.webbox_slitebox li:first').remove();
							
					$('.webbox_slitebox').css({'left':'0px'});	
					_checking = 0;
				}); 
			}
			else if (_now > _num)
			{
				$('.webbox_slitebox').prepend(arr_data_img[(_num-1)]);
				$('.webbox_slitebox').css({'left':'-295px'});
				
				$('.webbox_slitebox').animate({left:'+=295px'},_speed,function(){
					$('.webbox_slitebox li:last').remove();
							
					$('.webbox_slitebox').css({'left':'0px'});	
							_checking = 0;
				}); 
			}
			else
			{
				_checking = 0;
			}	
					
			for (i=1;i<=arr_data_img.length;i++) 
			{ 
				$('.web_box #btn'+i).removeClass('focus');
			}
				
			$('.web_box #btn'+_num).addClass('focus');	
											
		}
				
		_now = _num;
	}
}

function web_box_click(_num)
{
	$('.web_box #btn'+_num).click(
		function()
		{
			web_box_action(_num);
			
		}
	);
}

function webbox_next()
{
	if (_now == arr_data_img.length)
	{
		_now = 0;
	}
	
	web_box_action((_now+1));
}

$(document).ready(
function()
{
	$('.webbox_slitebox').html('');
	$('.webbox_group').html('');
	
	
	$('.webbox_slitebox').append(arr_data_img[0]);
	$('.web_box #btn1').addClass('focus');

	for (i=1;i<=arr_data_img.length;i++)
	{ 
		web_box_click(i);
	}
	
	$(document).everyTime(_time, "webbox_next", webbox_next);
	
	
	$('.web_box').hover(
		function()
		{
			$(document).stopTime("webbox_next", webbox_next);
		},
		function()
		{
			$(document).everyTime(_time, "webbox_next", webbox_next);
		}
	);
	
});