var ProductManager = new Class({
	ClassName: 'ProductManager',
	Extends: Base,

	initialize: function(options) {
		this.parent(options);
		this.panel = $('products-panel');
		this.productList         = this.panel.getElement('div.product-list ul');
		this.productImg          = this.panel.getElement('div.product-image img');
		this.productDescription  = this.panel.getElement('div.product-description');
		this.productIngredients  = this.panel.getElement('div.product-ingredients');
		this.ingredientsBtn      = this.panel.getElement('div.ingredients-btn');
		this.ingredientsCloseBtn = this.panel.getElement('div.close-ingredients-btn');
		this.supplementImg       = this.panel.getElement('div.product-supplement-image img');

		this.ingredientsBtn.addEvent('click', function(event) {
			event.stop();
			this.productIngredients.show();
		}.bind(this));
		this.ingredientsCloseBtn.addEvent('click', function(event) {
			event.stop();
			this.productIngredients.hide();
		}.bind(this));

		this.supplementImgAttr = {
			frame: {
				height: 252,
				width: 135,
				maxHeight: 332,
				maxTop: -30
			},
			normal: {},
			expanded: {}
		}

		this.supplementImgFx = new Fx.Morph(this.supplementImg, {duration: 300, link:'cancel'});
		this.supplementImg.addEvents({
			load: function() {
				// Calculate normal size
				this.supplementImgAttr.normal.height = this.supplementImgAttr.frame.height;
				this.supplementImgAttr.normal.width  = this.supplementImg.naturalWidth * (this.supplementImgAttr.frame.height / this.supplementImg.naturalHeight);
				this.supplementImgAttr.normal.top    = 0;
				this.supplementImg.setStyles({
					top: this.supplementImgAttr.normal.top,
					height: this.supplementImgAttr.normal.height,
					width: this.supplementImgAttr.normal.width
				});

				this.supplementImgAttr.expanded.height = Math.min(this.supplementImgAttr.frame.maxHeight, this.supplementImg.naturalHeight);
				this.supplementImgAttr.expanded.width  = this.supplementImg.naturalWidth * Math.round(this.supplementImgAttr.expanded.height / this.supplementImg.naturalHeight);
				this.supplementImgAttr.expanded.top    = Math.max(this.supplementImgAttr.frame.maxTop, Math.round((this.supplementImgAttr.normal.height-this.supplementImgAttr.expanded.height) / 2));
				// console.log("supplementAttr:");
				// console.dir(this.supplementImgAttr);
			}.bind(this),

			mouseenter: function() {
				this.supplementImgFx.start({
					top: this.supplementImgAttr.expanded.top,
					height: this.supplementImgAttr.expanded.height,
					width: this.supplementImgAttr.expanded.width
				});
			}.bind(this),

			mouseleave: function() {
				this.supplementImgFx.start({
					top: this.supplementImgAttr.normal.top,
					height: this.supplementImgAttr.normal.height,
					width: this.supplementImgAttr.normal.width
				});
			}.bind(this)
		});
	},

	processMessage: function(msg) {
		if (msg.msg == 'tabChanged') {
			this.loadProducts(msg.data.className);
		}
	},

	loadProducts: function(category) {
		this.productList.empty();
		Monster.Products.each(function(product){
			if (product.category == category) {
				var el = new Element('li');
				el.grab(new Element('a').grab(new Element('span', {text: product.name})));
				this.productList.grab(el);
				el.addEvent('click', function(event) { event.stop(); this.selectProduct($(event.target).getParent('li')); }.bind(this));
				el.store('product-info', product);
			}
		}.bind(this));
		this.selectProduct(this.productList.getChildren()[0]);
	},

	selectProduct: function(item) {
		if (!item) return;
		this.productList.getChildren().removeClass('selected');
		item.addClass('selected');
		var product = item.retrieve('product-info');
		this.productImg.set('src', product.image).set('alt', product.name);
		this.productDescription.set('html', product.description);
		this.productIngredients.getElement('div.content').set('html', product.ingredients);
		this.supplementImg.set('src', product.supplements).set('alt', 'Supplements');
		this.productIngredients.hide();
		Register.broadcastMessage({msg:'shoutOutSetGid', data: product.id+1000000000});
	}
});

new ProductManager();