$(document).ready(function(){
	/*carousel control*/
	$('div.carousel-special').each(function(){
		var _control = $(this);
		_control.data('position', 0).data('direction', 'right').data('inProgress',true);
		var _items = $('ul.cs-items>li', _control);
		var _layout = $('ul.csi-animate', _control);
		$('>a.prev', _control).click(function(){
			animation('left');
			return false;
		});
		$('>a.next', _control).click(function(){
			animation('right');
			return false;
		});
		
		function animation(direction, onComplete)
		{
			var inProgress = _control.data('inProgress');
			if(!inProgress)
			{
				_control.data('inProgress', true);
				var item = null;
				var d = _control.data('direction');
				_control.data('direction', direction);
				var pos = _control.data('position');
				if(d!=direction)
				{
					if(direction=='left') pos=pos-4; else pos=pos+4;
					if(pos<0) pos=_items.length+pos;
					if(pos>=_items.length) pos=pos-_items.length;
				}
				if(direction=='left')
				{
					pos--;
					if(pos<0) pos=_items.length-1;
				}else{
					pos++;
					if(pos>=_items.length) pos=0;
				}
				item = $(_items[pos]).clone();
				removeItem(
					function(){
						moveItems( 
							(direction=='left') ?  $('>li:last-child', _layout) : $('>li:first-child', _layout),
							function(){
								addItem( item,
												function(){
													_control.data('inProgress', false);
												},
												direction);
							},
							direction);
					},
					direction);
				_control.data('position', pos);
			}
		}
		
		function removeItem(onComplete, direction)
		{
			var items = $('>li', _layout);
			if(items.length==3)
			{
				var item = (direction=='left') ? items.last() : items.first();
				item.remove(); onComplete();
				item.addClass('bgWhite')
					.fadeOut(500);
			}else{
				onComplete();
			}
		}
		function addItem(item, onComplete, direction)
		{onComplete();
			var options = (direction=='left') ? 
								{width:77, 'padding-top':24, left:10, 'z-index':0, display:'none'} :
								{width:77, 'padding-top':24, left:220, 'z-index':0, display:'none'} ;
			item.css(options)
				.addClass('bgWhite');
			if(direction!='left') 
				item.addClass('item-right');
			else
				item.addClass('item-left');
			if(direction=='left') _layout.prepend(item);
			else _layout.append(item);
			item.fadeIn(500, function(){  });
		}
		function moveItems(item, onComplete, direction)
		{
			var _speed = 300;
			var _correction = 2-$('>li', _layout).length;
			if(item.length>0)
			{
				var _left = 0;
				var _index = _correction+item.index() + (direction=='left'?1:0);
				var _options = {}, _optionsMiddle = {}, _optionsInit = {};
				var _zindex = 101;
				var _css = false;
				switch(_index)
				{
					case 2:
						_css = false;
						_zindex = 103;
						_options = {width:77, 'padding-top':24, left:220};
						break;
					case 1:
						_css = false;
						_zindex = 102;
						_options = {width:77, 'padding-top':0, left:100};
						break;
					case 0:
						_css = false;
						_zindex = 101;
						_options	= {width:77, 'padding-top':24, left:10 };
						break;
				}
				var next = (direction=='left') ? item.prev() : item.next();
				if(_css)
					item.addClass('item-right');
				else{
					item.removeClass('item-right');
					item.addClass('item-left');
				}
				item.removeClass('current');
				item.removeClass('bgWhite')
					.css('z-index',_zindex)
					.animate( _options,
								 _speed,
								 function(){
									if(_index==1){
									 	item.addClass('current');
									 	item.removeClass('item-left');
									} else {
									 	item.removeClass('current');
									}
									 /*if(next)
										moveItems( next, onComplete, direction );
									*/
									 if(next.length==0){
										onComplete();
									 }
								});
				 if(next.length>0)
				 	moveItems( next, onComplete, direction );
				
			}else{
				onComplete();
			}
		}
		function initItems()
		{
			var _styles = [
							{width:77, 'padding-top':24, left:10, 'z-index':101},
							{width:77, 'padding-top':0, left:100, 'z-index':103},
							{width:77, 'padding-top':24, left:220, 'z-index':101}
						];
			for(_pos=0;_pos<3;_pos++)
			{
				var item = $(_items[_pos]).clone();
				item.css(_styles[_pos]);
				if(_pos==0) item.addClass('item-left');
				if(_pos==1) item.addClass('current');
				//if(_pos==0) item.addClass('prev');
				//if(_pos==2) item.addClass('next');
				if(_pos>1) item.addClass('item-right');
				_layout.append(item);
			}
			_control.data('inProgress', false); 
			_control.data('position', 2); 
		}
		initItems();
	});
});