window.addEvent('domready', function() {
    var _hold = $('gallery');
	if(_hold){
		var btn_prev = _hold.getElement('.btn-prev');
		var btn_next = _hold.getElement('.btn-next');
		var list_hold = _hold.getElement('.list-hold ul');
		var t_list = list_hold.getElements('li');
		var n_list = t_list.clone();
		var _element;
		var _a;
		var _f = true;
		t_list.each(function(_el, _i){
			if(!$(_el).hasClass('active')){
				$(_el).destroy();
			}
			else{
				_element = $(_el);
				_a = _i;
			}
		});
		btn_next.addEvent('click', function(){
			if(_f) changeEl(true);
			return false;
		});
		btn_prev.addEvent('click', function(){
			if(_f) changeEl(false);
			return false;
		});
	}
	function changeEl(_flag){
		if(_flag){
			_f = false;
			if(_a == n_list.length - 1) _a = 0;
			else _a++;
			var _w = list_hold.offsetWidth;
			var _clon = n_list[_a].clone().setStyle('width', _w).addClass('active');
			var myFx = new Fx.Tween(list_hold, {duration: 700, onComplete: function(){
				list_hold.setStyles({
					marginLeft:0,
					width: '100%'
				});
				_element.destroy();
				_element = _clon.setStyle('width', '100%');
				_f = true;
			}});
			list_hold.setStyle('width', _w*2);
			_element.setStyle('width', _w).grab(_clon, 'after');
			myFx.start('margin-left', -_w);
		}
		else{
			_f = false;
			if(_a == 0) _a = n_list.length - 1;
			else _a--;
			var _w = list_hold.offsetWidth;
			var _clon = n_list[_a].clone().setStyle('width', _w).addClass('active');
			var myFx = new Fx.Tween(list_hold, {duration: 700, onComplete: function(){
				list_hold.setStyles({
					marginLeft:0,
					width: '100%'
				});
				_element.destroy();
				_element = _clon.setStyle('width', '100%');
				_f = true;
			}});
			list_hold.setStyles({
				width: _w*2,
				marginLeft: -_w
			});
			_element.setStyle('width', _w).grab(_clon, 'before');
			myFx.start('margin-left', 0);
		}
	}
});