var ContentTicker = Class.create({

	initialize: function() {
	
		this.idx = 4; // featured content array index
		this.cIdx = 1; // container TD index
		
		this.max = featured.length;
		this.cacheImages();
	
	},

	changeItem: function(container, item) {

		var html = '<div class="thumbnail" style="width:194px; height:150px; padding: 4px 0px;">';
		html += '<a href="' + item['href'] + '">';
		html += '<img src="' + item['src'] + '" alt="' + item['title'].replace(/(<([^>]+)>)/ig,"");
		html += '" title="' + item['title'].replace(/(<([^>]+)>)/ig,"") + '" height="150" /></a></div>';
		html += '<div style="width: 194px; height: 80px;"><a href="' + item['href'] + '">';
		html += '<i>' + item['title'] + '</i></a>';
		
		if (item['summary'] != undefined) {
			html += item['summary'];
		}
		
		html += '</div>';
	
		container.setStyle({opacity: 0});
		container.innerHTML = html;
		new Effect.Opacity(container, { from: 0, to: 1, duration: 1 });
		
	},
	
	cascade: function() {
	
		// Once all 4 containers have had
		// their contents changed, start 
		// from the left hand side again
		if (this.cIdx > 4) {
			this.cIdx = 1;
			window.clearInterval(this.itemTimer);
			return;
		}
		
		// Loop around the featured content
		if (this.idx >= this.max) {
			this.idx = 0;
		}
		
		this.changeItem($('featured_item_' + this.cIdx), featured[this.idx]);
		
		this.cIdx++;
		this.idx++;
	
	},
	
	changeRow: function() {

		this.itemTimer = window.setInterval('ticker.cascade()', 1200);
		
	},
	
	cacheImages: function() {

		var cache = new Array();
	
		for (var i = 0, j = featured.length; i < j; i++) {
			var img = new Image();
			img.src = featured[i].src;
			cache[i] = img;
		}
	
	}

});

ticker = new ContentTicker();
rowTimer = window.setInterval('ticker.changeRow()', 12000);