function AppItem(args) {
	this.id = args.id;
	this.dom = $(args.id);
	this.content = $(args.content_id);
	this.dom.style.zIndex = 10;
	this.img = this.dom.select('img')[0];
	this.highlighter = $('app-highlight');
}
AppItem.prototype.clicked  = function() {
	apps.focus_index(this.index, true);
}

AppItem.prototype.init = function() {
	this.content.setOpacity(0);
	Event.observe(this.dom, 'click',  this.clicked.bindAsEventListener(this));
}

AppItem.prototype.unfocus_item = function(animated) {
	this.content.style.display = 'none';
	new Effect.Opacity(this.content, { from: this.content.getOpacity(), to: 0.0, duration: 0.5 });
}

AppItem.prototype.focus_item = function(animated) {
	this.highlighter.style.zIndex = 0; 
	this.dom.style.zIndex = 100;

	// Get position of the LI , realtive to it's parent
	cont_pos = $('app-item-ul').cumulativeOffset();
	pos = this.img.cumulativeOffset();
	x = pos.left - cont_pos.left;
	y = pos.top  - cont_pos.top;
	// Get the size of the image	
	size = { width: this.img.getWidth(),
		 height: this.img.getHeight() 
	       };
	       
	// Get the size of the 
	highlight_size = { width: this.highlighter.getWidth(),
			  height: this.highlighter.getHeight()
			 };

	x -= (highlight_size.width / 2) - (size.width / 2)  ;
	y -= (highlight_size.height / 2) - (size.height / 2);

	y -= 5;  // Padding

	if (animated) {
		if (this.highlighter.effect) {
			this.highlighter.effect.cancel();
		}
		this.highlighter.effect = new Effect.Move(this.highlighter, 
					{ x: x, 
					  y: y, 
					  mode: 'absolute',
					  duration: 0.5  });
		this.content.style.display = 'block';					  	
		this.highlighter.style.display = 'block';
		
		//this.content.style.left = '0px';
		//this.content.style.top  = '100px';
		//new Effect.Move(this.content, { x: 0, y: 0, mode: 'absolute', duration: 0.85 });
		new Effect.Opacity(this.content, { from: this.content.getOpacity(), to: 1.0, duration:
		0.85 });
		
	} else {
		this.content.setOpacity(1);
		this.content.style.display = 'block';
		this.highlighter.style.display = 'block';
		this.highlighter.style.left = x + 'px';
		this.highlighter.style.top = y + 'px';
	}

}

function Apps(args) {
	this.items = [];
	this.selectedItem;
}

Apps.prototype.init = function() {
	for (i = 0; i < this.items.length; i++) {
		this.items[i].index = i;
		this.items[i].init();
	}
}

Apps.prototype.focus_index = function(idx, animated) {
	if (this.selectedItem) {
		this.selectedItem.unfocus_item(animated);
	}	
	itemm = this.items[idx];
	if (itemm) {
		itemm.focus_item(animated);
		this.selectedItem = itemm;
		this.current_index = idx;
	}

	// Restart the timer
	if (this.timer) {
		this.timer.stop();
	}
	this.timer = new PeriodicalExecuter(this.focus_random.bind(this), 4);
}

Apps.prototype.focus_next = function() {
	this.current_index++;
	if (this.current_index >= this.items.length) {
		this.current_index = 0;
	}
	this.focus_index(this.current_index, true);
}


Apps.prototype.focus_random = function() {
	this.focus_index(Math.floor(Math.random()* this.items.length), true);
}


Apps.prototype.onload = function() {
	// Load random 
	this.focus_index(Math.floor(Math.random()* apps.items.length ), false);
}