var blender = new Class({
	current: 0,
	timer: 7000,
	initialize: function(items) {
		this.items = items;
	},
	play: function() {
		this.initItems();
		this.showNext.delay(this.timer, this);
	},
	showNext: function() {
		var next = this.current + 1;
		var current = this.current;
		if (this.current == this.items.length - 1)
			next = 0;
		this.items[current].fade('out');
		this.items[next].fade('in');
		this.showNext.delay(this.timer, this);
		this.current = next;
	},
	initItems: function() {
		this.items.each(function(item, index) {
			if (index > 0)
				item.setStyle('opacity', 0);
			item.setStyle('visibility', 'visible'); 
		});
	},
	hideAll: function() {
		this.items.each(function(item, index) { item.fade('hide'); });
	}
});

window.addEvent('domready', function() {
	var container = $('front_screens');
	var screens = container.getElements('div');
	var b = new blender(screens);
	b.play();
	
	var box = $('front_features');
	var scroll = 0;
	var tips = $$('.il_item');
	tips.each(function(item, index) {
		var tip = item.getElement('.tip');
		var fx = new Fx.Morph(tip);
		var s = tip.measure(function() {
			return this.getSize();
		});
		fx.set({
			'margin-top': -s.y + 'px',
			'opacity': 0
		});
		tip.setStyle('display', 'block');
		item.addEvent('mouseenter', function() {
			fx.cancel();
			fx.start({
				'margin-top': -(s.y - 10) + 'px',
				'opacity': 1
			});
		});
		item.addEvent('mouseleave', function() {
			fx.cancel();
			fx.start({
				'margin-top': -s.y + 'px',
				'opacity': 0
			});
		});
	});
	
	var frames = Math.ceil(tips.length / 8) - 1;
	var current = 0;
	var btnRemoteNext = $('btnRemoteNext');
	var btnRemotePrev = $('btnRemotePrev');
	var fxScroll = new Fx.Tween($('front_features_scroll'), {'duration': 300});
	function scrollBox(up) {
		if (up)
			current++;
		else
			current--;
	
		if (current > frames)
			current = frames;
		else if (current < 0)
			current = 0;
		else {
			if (current == 0)
				btnRemotePrev.addClass('stop');
			else if (current == frames)
				btnRemoteNext.addClass('stop');
			else {
				btnRemotePrev.removeClass('stop');
				btnRemoteNext.removeClass('stop');
			}
			fxScroll.cancel();
			fxScroll.start('margin-top', (-current * 230) + 'px');
		}
	}
	btnRemoteNext.addEvent('click', function() {
		scrollBox(true);
	});
	btnRemotePrev.addEvent('click', function() {
		scrollBox(false);
	});
});