/**
 * FontResizeWatcher. Fires fontResized event when user changes browser's default font size
 * 
 * Options:
 * 		period int polling time in milliseconds
 */
var FontResizeWatcher = new Class({
	
	options: {
		period: 200
	},
	
	/**
	 * @constructor
	 * @param {Object} options
	 */
	initialize: function (options) {
		this.setOptions(options);
		
		// Create a hidden span with a font size relative width and inject it in the document
		this.watchedElement = new Element("span").appendText("Watcher").setStyles({
			width: "1em",
			position: "absolute",
			visibility: "hidden"
		}).injectInside(document.getElement("body"));
		
		// Get the current span width
		this.lastWidth = this.watchedElement.getSize().size.x;
		
		// Setup the listener
		this._listener.periodical(this.options.period, this);
	},
	
	/**
	 * Listener function
	 */
	_listener: function () {
		var newWidth = this.watchedElement.getSize().size.x;
		if (this.lastWidth != newWidth) {
			// The width has changed so store the new width and fire the event
			this.lastWidth = newWidth;
			this.fireEvent("fontResized");
		}
	}
	
});

FontResizeWatcher.implement(new Events());
FontResizeWatcher.implement(new Options());

/**
 * This class fixes the publication listing. It applies the following rules:
 *  - moves the product title out of the description div and places them above the product image (as per design)
 *  - finds the highest title and description in each row and applies it to all items to align everything as per design
 *  
 *  If JS is switched off (including for pre IE6 browsers) the css crops the title/descriptions to prevent the grid from breaking
 */
var TMG_ProductListFix = new Class({
	
	initialize: function (theList) {
		
		if (!theList) {
			return;
		}
				
		var row;
		var i;
		var j = 0;
		
		this.listItems = theList.getElements("li");
		
		this.rows = [];
		
		// Build an array of rows (3 items for large items, 4 items for small)
		for (i = 0; i < this.listItems.length; i++) {
			if (this.listItems[0].hasClass("TMG_3n-2")) {
				if (j % 3 === 0) {
					j = 0;
					row = [];
					this.rows.push(row);
				}
			}
			if (this.listItems[0].hasClass("TMG_4n-3")) {
				if (j % 4 === 0) {
					j = 0;
					row = [];
					this.rows.push(row);
				}
			}
			row.push(this.listItems[i]);
			j++;
		}
		
		// Fix the rows
		this.rows.each(this.syncHeights.bind(this));

		// Setup a font resize watcher
		var fontResizeWatcher = new FontResizeWatcher({ period: 1000 });
	 	
		// Fix rows every time the font size changes
		fontResizeWatcher.addEvent("fontResized", this.fixRows.bind(this));
	},
	
	/**
	 * Resets the heights back to "auto" (this is needed for fixing rows after font size changes)
	 */
	resetHeights: function () {
		this.listItems.each(function (item) {
			item.getElement("h2").setStyle("height", "auto");
			item.getElement("h3").setStyle("height", "auto");
		});
	},
	
	fixRows: function() {
		this.resetHeights();
		this.rows.each(this.syncHeights.bind(this));
	},
	
	syncHeights: function(row) {
		var maxSectionHeight = 0;
		var maxProductHeight = 0;
		var maxLinkHeight = 0;
		
		// Work out what the maximum height is for the row
		row.each(function (item) {
			var section = item.getElement("h2");
			var product = item.getElement("h3");
/*
			var link = item.getElement("p > p");

*/			if (section) {
				var sectionsize = section.getSize().size.y;
				sectionsize -= parseInt(section.getStyle("padding-top"));
				sectionsize -= parseInt(section.getStyle("padding-bottom"));
				if (sectionsize > maxSectionHeight) {
					maxSectionHeight = sectionsize;
				}
			}

			if (product) {
				var productsize = product.getSize().size.y;
				productsize -= parseInt(product.getStyle("padding-top"));
				productsize -= parseInt(product.getStyle("padding-bottom"));
				if (productsize > maxProductHeight) {
					maxProductHeight = productsize;
				}
			}
			
/*
			if (link) {
				var linksize = link.getSize().size.y;
				linksize -= parseInt(link.getStyle("padding-top"));
				linksize -= parseInt(link.getStyle("padding-bottom"));
				if (linksize > maxLinkHeight) {
					maxLinkHeight = linksize;
				}
			}
*/
		});
		
		// Apply the new height
		row.each(function (item) {
			if (item.getElement("h2")) {
				item.getElement("h2").setStyle("height", maxSectionHeight);
            }
            if (item.getElement("h3")) {
			    item.getElement("h3").setStyle("height", maxProductHeight);
			}
/*
			item.getElement("p > p").setStyle("height", maxLinkHeight);

*/		});
	}
});

// Apply enhancements when the DOM is ready
window.addEvent("domready", function () {
	
	// Fix the product list
	var productListFix = new TMG_ProductListFix($E(".TMG_items"));
	var productListFix2 = new TMG_ProductListFix($E(".TMG_items-list"));
		
});