var Reports = Class.create({
	initialize: function(reports){
		this.container = $(reports);
		this.containerParent = this.container.parentNode;
		this.toggler = this.container.select('a.toggler')[0];
		this.setup();
	},
	setup: function(){
		this.toggler.observe('click', this.toggle.bindAsEventListener(this));
		this.container.observe('mouse:leave', function(event){
			this.container.removeClassName('reports-active')
		}.bind(this));
		$(document).observe('click', function(event){
			this.container.fire('mouse:leave');
		this.containerParent.style.zIndex = 0;
		}.bind(this));
	},
	toggle: function(event, el){
		Event.stop(event);
		this.containerParent.style.zIndex = 10;
		this.container.toggleClassName('reports-active');
	}
});

/* ---------------------------------------------------------------- */

var ProductDetails = Class.create(Callout, {
	initialize: function($super, el, triggers){
		this.querystring = Object.toHTML(window.location).toQueryParams();
		$super(el, triggers);
	},
	setup: function($super){
		$super();
		if(this.querystring.view){
			this.show();
		}
	}
});

/* ---------------------------------------------------------------- */

document.observe("dom:loaded", function(){
	$$('a.tip').each(function(el){
		if(el.rev <= 70 && el.rev > 50) el.morph('width: ' + el.rev + '%; background: #ecd61f;');
		else if(el.rev <= 50) el.morph('width: ' + el.rev + '%; background: #f30000;');
		else el.morph('width: ' + el.rev + '%;');
		new Tip(el, el.name, {title: el.rel, stem: 'leftMiddle', hook: {target: 'rightMiddle', tip: 'leftMiddle'}});
	});

	$$('div.reports').each(function(el){
		new Reports(el);
	});

	new ProductDetails('product-details', $$('a.details'));
});