window.addEvent('domready', function() {
    var _hold = $('gallery');
	if(_hold){
		var change_speed = 500; //in ms
		var _a = 0;
		var _flag = true;
		var btn_next = _hold.getElement('.btn-next');
		var list_h = _hold.getElement('.list-hold ul');
		var _list = list_h.getElements('li');
		_list.setStyle('display','none');
		_list[_a].setStyle('display','block');
		list_h.moo = new Fx.Tween(list_h, {
			duration: change_speed,
			onComplete: function(){
				list_h.getChildren().setStyles({display: 'none', width: '100%'});
				_list[_a].setStyle('display','block');
				list_h.setStyles({marginLeft: 0, width: '100%'});
				_flag = true;
			}
		});
		var list_f = _list[_list.length - 1].clone().setStyle('display','none');
		var list_l = _list[0].clone().setStyle('display','none');
		list_h.grab(list_f, 'top').grab(list_l, 'bottom');
		
		_hold.getElement('.btn-prev').addEvent('click', function(){
			changeEl(false);
			return false;
		});
		
		_hold.getElement('.btn-next').addEvent('click', function(){
			changeEl(true);
			return false;
		});
		function changeEl(_f){
			if(_flag){
				_flag = false;
				var _w = list_h.offsetWidth;
				list_h.setStyle('width', _w*2 + 'px');
				list_h.getChildren().setStyle('width', _w + 'px');
				if(_f){
					_a++;
					if(_a == _list.length){
						_a = 0;
						list_l.setStyle('display','block');
					}
					else{
						_list[_a].setStyle('display','block');
					}
					list_h.moo.start('margin-left', -_w);
				}
				else{
					_a--;
					if(_a == -1){
						_a = _list.length - 1;
						list_f.setStyle('display','block');
					}
					else{
						_list[_a].setStyle('display','block');
					}
					list_h.setStyle('margin-left', -_w);
					list_h.moo.start('margin-left', 0);
				}
			}
		}
	}
});