// top apps slider
var slider = Class.create();
Object.extend(Object.extend(slider.prototype, AC.Slider.prototype), {
	// get's called in initialize upon construction
	populate: function() {
		var items = document.getElementsByClassName('slideritem');
		for (var i=0; i<items.length; i++) {
			var html = items[i];
			var sliderItem = new AC.SliderItem(html);
			this.items.push(sliderItem);
		}
		this.render(3);
		this.container.down('ul').id="collection";
	}

});

AC.SliderItem.prototype.render = function() {
	var li = new Element('li', { 'class':'app' }).update(this.html);
	return li;
}

var Hoverlay = Class.create({
	trigger: null,
	initialize:function(trigger) {
		this.trigger = trigger;
		this.hoverlay = $('hoverlay');
		this.hoverlay_html = $('hoverlay_html');
		trigger.observe('mouseover', this.setup.bind(this));		
	},
	
	setup: function() {
		this.hoverlay.hide();
		var extraVspace = this.trigger.getHeight() == 136 ? 20 : 0;
		var windowTop = document.viewport.getScrollOffsets()[1];

		var vSpace = this.trigger.cumulativeOffset()[1]+extraVspace - windowTop;
		
		if(vSpace < 265) {
			this.hoverlay.setStyle({
				left: this.trigger.cumulativeOffset()[0]+this.trigger.getWidth()+'px',
				top: this.trigger.cumulativeOffset()[1] +60+extraVspace+'px'
			});
			this.hoverlay.addClassName('lowered');
		} else {
			this.hoverlay.setStyle({
				left: this.trigger.cumulativeOffset()[0]+this.trigger.getWidth()/2-25 +'px',
				top: this.trigger.cumulativeOffset()[1]- this.hoverlay.getHeight()+extraVspace +'px'
			});
		}
		
		hoverlayTimer = window.setTimeout(this.show.bind(this), 300);
		Event.observe(document, 'mousemove', function(e) {
			if(!(e.findElement('#hoverlay')) && !(e.findElement('.hoverlaytrigger'))) {
				window.clearTimeout(hoverlayTimer);
				this.hide();				
			}
		}.bind(this))
	},
	show: function() {
		var html = this.trigger.up('li').down('.details').innerHTML;
		this.hoverlay_html.update(html);
		this.hoverlay.appear({ duration:0.3 });
	},
	
	hide: function() {
		this.hoverlay.hide();
		if(this.hoverlay.hasClassName('lowered')) this.hoverlay.removeClassName('lowered');				
	}
});

Event.onDOMReady(function() {
	// top apps slider
	new slider('appslider');
	$$('.hoverlaytrigger').each(function(trigger) {
		new Hoverlay(trigger);
	})
})