window.fire.add(function() {
		
	$('viewport-center').update('<div id="slide"></div>');
	
	var action = new Controller.Action.FadeOverlay('slide', { 
		duration: 1.8, delay: 0.5, direction: ['n', 'n'],
		transition: Effect.Transitions.Presets.easeOutExpo		
	});	
	action.addLayers('slide_inner', 'slide_next');
	action.addMapping('aa', 251, 0)
	action.addMapping('aaa', 250, 0)
	action.addMapping('bb', 320, 0)
	action.addMapping('bbb', 319, 0)
	action.addMapping('e', 251, 0)
	
	window.list = new Loob.FadeOverlayList([], action, 'thumbs-list', { 
		loop: true, padding: 1, 
		initialized: function(list) {
			var go_next = function(ev) { Event.stop(ev); list.flipNext(); return false; }
			var prev_img = $('prev_img');
			var next_img = $('next_img');
			prev_img.onclick = function() { return false; }
			next_img.onclick = function() { return false; }
			prev_img.observe('click', function(ev) { Event.stop(ev); list.flipPrev(); return false; });
			next_img.observe('click', go_next);
			list.action.base_element.observe('click', go_next);
			var parent = $(list.element.parentNode);
			list.rollover = false;
						
			list.show_all = function() {
				parent.addClassName('enabled');
				list.elements.each(function(elem) { elem.setOpacity(1.0) });			
			}
			
			list.hide_all = function() {
				parent.removeClassName('enabled');
				list.elements.each(function(elem) { elem.setOpacity(0.0) });
			}
			
			list.show_active = function() {
				parent.addClassName('enabled');
				list.elements.each(function(elem) {
					elem.hasClassName('active') ? elem.setOpacity(1.0) : elem.setOpacity(0.0);
				});
			}
		
			Event.observe(document, 'mousemove', function(ev) {
				if(!list.element.parentNode.hasClassName('busy')) { 
					var parent_offset = Position.page(list.element);
					var pos_x = (Event.pointerX(ev) - parent_offset[0]);
					var pos_y = (Event.pointerY(ev) - parent_offset[1]);
					if(pos_x > 0 && pos_x < 178 && pos_y > 0 && pos_y < 178) {
						list.show_all();
					} else {
						list.show_active();
					}
				}	
			});
		}	
	});
	
});


Loob.FadeOverlayList = Class.create();
Object.extend(Object.extend(Loob.FadeOverlayList.prototype, Loob.ElementActionList.prototype), {

	mapValue: function(value) {
		value.action = null;
		return value;
	},
	
	mapPrevValue: function(value) {
		value.action = 'prev';
		return value;
	},
	
	mapNextValue: function(value) {
		value.action = 'next';
		return value;
	},	

	processValues: function(values) {
		var list = this;
		return $A(values).inject([], function(groups, images, index) {					
			groups[index] = $A(list.action.elements).inject([], function(srcs, elem, i) {
				if(images[i]) {
					srcs[i] = Object.extend({ idx: i, position: list.action.getPosition(images[i].type) }, images[i]);
				} else {
					srcs[i] = { idx: i, src: images[0].src, clear: true };
				}
				return srcs;
			});
			return groups;
		});
	},
	
	processElement: function(element) {
		var list = this;
		element.observe('click', function(ev) {
			Event.stop(ev);
			if(element.action == 'prev') {
				list.showItem(element.item_index - 1);
			} else if(element.item_index != null) { 
				list.showItem(element.item_index);
			}
			return false;
		});
		return element;
	},
					
	updateList: function(set, item, local_index, indices) {
		
		//$('subheader').innerHTML = (this.itemIndexToValueIndex(indices[local_index]) + 1) + '/' + this.values.length;
		
		var self = this;
		this.elements.each(function(elem, idx) {
			if(set.values[idx] && set.values[idx][0]) {
				elem.action = set.values[idx].action;
				if(elem.action == 'prev') {
					elem.item_index = indices[idx] - 1;
				} else if(elem.action == 'next') {
					elem.item_index = indices[idx] + 1;
				} else {
					elem.item_index = indices[idx];
				}			
				
				Element.Style.setBackgroundImage(elem, set.values[idx][0].thumb);
				elem.addClassName(set.values[idx].action || '');
				elem.addClassName('clickable');
				
				if(idx == local_index) {
					elem.addClassName('active');
					elem.setOpacity(1.0);
				} else {
					elem.removeClassName('active');	
					elem.setOpacity(0.0);
				}
			
			} else {
				elem.action = null;
				elem.item_index = null;
				Element.Style.clearBackgroundImage(elem);
				elem.removeClassName('clickable');
				elem.removeClassName('active');				
				elem.removeClassName('prev');
				elem.removeClassName('next');
			}
		});	
	}

});