var InfoBox = Class.create({
	jsonPath : '/us/includes/nutrition.js',
	json : null,
	infobox : null,
	actor: null,
	initialize : function(_target) {
		if(!_target) return;
		this._target = $$(_target);
		
		this.wireEvent();
		this.getData();
	},
	wireEvent : function() {
		this._target.each(function(node) {
			$(node).observe('mouseover',this.build.bindAsEventListener(this))
		}.bind(this));
	},
	getData : function() {
		var _this = this;
		new Ajax.Request(this.jsonPath, {
			method : 'get',
			evalJson : true,
			onSuccess: function(data) {
				_this.onGetData(data);
			}
		})
	},
	onGetData : function(data) {
		this.json = data.responseText.evalJSON();
	},
	build : function(e) {
		if(this.infobox!=null) this.destroy(this.infobox);
		this.actor = Event.element(e);
		
		var eClass;
		if (this.actor.hasClassName('extendxlg')) {
			eClass = 'info-popup info-popup-extendxlg';
		} else if (this.actor.hasClassName('extendlg')) {
			eClass = 'info-popup info-popup-extendlg';
		} else if (this.actor.hasClassName('extendlg2')) {
			eClass = 'info-popup info-popup-extendlg2';
		} else if (this.actor.hasClassName('extendmed')) {
			eClass = 'info-popup info-popup-extendmed';
		} else if (this.actor.hasClassName('extendsm')) {
			eClass = 'info-popup info-popup-extendsm';
		} else {
			eClass = 'info-popup';
		}
		
		this.infobox = new Element('div',{'class':eClass});
		this.onBuild();
	},
	onBuild : function() {
		$(document.body).insert(this.infobox.update(new InfoData(this.json[this.actor.identify()])));
		new Popup(this.infobox, {
			actor: "#" + this.actor.identify(),
			position: 'relative',
			closer: '.close'
		})
	},
	destroy: function(e) {
		e.remove();
	}
})
var InfoData = Class.create({
	info: null,
	tmplt: null,
	initialize : function(info) {
		this.info = info;
		this.format();
	},
	format : function() {
		var strbuilder = "";
		this.info.nutrition.each(function(item, index) {
			strbuilder += (index==1) ? '<div class="info-panel second">' : '<div class="info-panel">';
			strbuilder += '<a class="close" href="#">Close</a>';
			strbuilder += '<h6 class="product">' + this.info.ProductName + '</h6>';
			strbuilder += '	<h6>Serving Size ';
			strbuilder += (item.Packaging != undefined) ? item.Packaging + ' ' : '';
			strbuilder += item.ServingSize;
			strbuilder += (item.ServingWeight != '') ? ' (' + item.ServingWeight + ')' : '';
			strbuilder += '</h6>';
			strbuilder += '	<table>';
			strbuilder += ' <colgroup /><colgroup class="break" /><colgroup />';
			strbuilder += ' 	<tr><th colspan="2">Amount/Serving</th><th>%DV**<th></tr>';
			strbuilder += ' 	<tr><td>Calories</td><td>' + item.Calories.amount + '</td><td>' + item.Calories.percent + '</td></tr>';
			strbuilder += ' 	<tr><td>Fat  Calories</td><td>' + item.FatCalories.amount + '</td><td>' + item.FatCalories.percent + '</td></tr>';
			strbuilder += ' 	<tr><td>Total Fat</td><td>' + item.TotalFat.amount + '</td><td>' + item.TotalFat.percent + '</td></tr>';
			strbuilder += ' 	<tr><td>Sat. Fat</td><td>' + item.SaturatedFat.amount + '</td><td>' + item.SaturatedFat.percent + '</td></tr>';
			strbuilder += ' 	<tr><td>Trans Fat</td><td>' + item.TransFat.amount + '</td><td>' + item.TransFat.percent + '</td></tr>';
			strbuilder += ' 	<tr><td>Cholest.</td><td>' + item.Cholesterol.amount + '</td><td>' + item.Cholesterol.percent + '</td></tr>';
			strbuilder += ' 	<tr><td>Sodium</td><td>' + item.Sodium.amount + '</td><td>' + item.Sodium.percent + '</td></tr>';
			strbuilder += ' 	<tr><td>Total Carb.</td><td>' + item.TotalCarbs.amount + '</td><td>' + item.TotalCarbs.percent + '</td></tr>';
			strbuilder += ' 	<tr><td>Fiber</td><td>' + item.DietaryFiber.amount + '</td><td>' + item.DietaryFiber.percent + '</td></tr>';
			strbuilder += ' 	<tr><td>Sugars</td><td>' + item.Sugars.amount + '</td><td>' + item.Sugars.percent + '</td></tr>';
			strbuilder += ' 	<tr><td>Protein</td><td>' + item.Protein.amount + '</td><td>' + item.Protein.percent + '</td></tr>';
			strbuilder += ' 	<tr><td>Vitamin A</td><td>' + item.VitaminA.amount + '</td><td>' + item.VitaminA.percent + '</td></tr>';
			strbuilder += ' 	<tr><td>Vitamin C</td><td>' + item.VitaminC.amount + '</td><td>' + item.VitaminC.percent + '</td></tr>';
			strbuilder += ' 	<tr><td>Calcium</td><td>' + item.Calcium.amount + '</td><td>' + item.Calcium.percent + '</td></tr>';
			strbuilder += ' 	<tr><td>Iron</td><td>' + item.Iron.amount + '</td><td>' + item.Iron.percent + '</td></tr>';
			if (typeof item.Thiamine != 'undefined'){strbuilder += ' 	<tr><td>Thiamine</td><td>' + item.Thiamine.amount + '</td><td>' + item.Thiamine.percent + '</td></tr>';}
			if (typeof item.Riboflavin != 'undefined'){strbuilder += ' 	<tr><td>Riboflavin</td><td>' + item.Riboflavin.amount + '</td><td>' + item.Riboflavin.percent + '</td></tr>';}
			if (typeof item.Niacin != 'undefined'){strbuilder += ' 	<tr><td>Niacin</td><td>' + item.Niacin.amount + '</td><td>' + item.Niacin.percent + '</td></tr>';}
			strbuilder += (item.Kosher != undefined) ? ' 	<tr><td>Kosher</td><td></td><td>Yes</td></tr>' : '';
			strbuilder += '	</table>';
			strbuilder += '</div>'
		}.bind(this))			
		this.tmplt = new Template(strbuilder + '<p class="single">*Contains less than 2 percent of the Daily Value of these nutrients.</p><p class="single">**Percent Daily Values (DV) are based on a 2,000 calorie diet.</p><p>Ingredients: #{Ingredients}</p>');
	},
	toString : function() {
		return this.tmplt.evaluate(this.info);
	}
})