PREX = {}
PREX.RecommendedBox = Class.create({}, {
	initialize: function (el, url, cid) {
		this.el 			= $(el);
		this.url			= url;

		this.el.down('.control_prev').observe('click', this.scroll.bindAsEventListener(this, -1));		
		this.el.down('.control_next').observe('click', this.scroll.bindAsEventListener(this, 1));
		this.steps = this.el.select('a.step-indicator');
		
		this.setCID(cid);
		
		var o = this;
		this.el.down('#prnav').select('a').each(function(a) {
			a.observe('click', function(ev) {
				ev.stop();
				o.setCID(a.href.split('#').pop());
			});
		});
		
		this.steps.each(function(a) {
			a.observe('click', function(ev) {
				ev.stop();
				o.setStep(a.href.split('#').pop());
				o.request();
			});
		});
		
		this.initialized = true;
	},
	
	setCID: function(cid) {
		this.setStep(0);
		this.cid	= cid;
		
		if (this.initialized)
			this.request();
		
		this.el.down('#prnav').select('td').each(function(el) {
			if (el.hasClassName('nav-off'))
				el.hasClassName('nav-c' + cid) ? el.hide() : el.show();
			else
				el.hasClassName('nav-c' + cid) ? el.show() : el.hide();
		});
	},
	
	scroll: function(e, d) {
		e.stop();
		
		var step = this.step + d; 
		
		if (step < 0 || step >= this.steps.length)
			return;
		
		this.setStep(step);
		this.request();
	},
	
	request: function() {
		var items = this.el.down('.items')
		new Effect.Opacity(items, { from: 1.0, to: 0.1, duration: 0.1 });

		new Ajax.Request(this.url, {
			parameters: { scroller_step: this.step, cid: this.cid },
			onComplete: function(t) {
				items.update(t.responseText);
				Effect.Appear(items, { duration: 0.3 });
			}
		})
	},
	
	setStep: function(step)
	{
		if (this.step != undefined)
			this.steps[this.step].down('img').src = 'img/dot.gif';
			
		this.step = parseInt(step);
		
		this.steps[this.step].down('img').src = 'img/dot2.gif';

		if (this.step > 0) {
			this.el.down('.control_prev').down('img').hide();
			this.el.down('.control_prev').down('a').show();
		} else {
			this.el.down('.control_prev').down('img').show();
			this.el.down('.control_prev').down('a').hide();
		}		
		
		if (this.step < this.steps.length - 1) {
			this.el.down('.control_next').down('img').hide();
			this.el.down('.control_next').down('a').show();
		} else {
			this.el.down('.control_next').down('img').show();
			this.el.down('.control_next').down('a').hide();
		}
	}
});