//-------------------------------
// Class
//-------------------------------

function BlogShowcaseView() {

	var _self = this;

	//-------------------------------
	// Constants
	//-------------------------------
	
	//-------------------------------
	// Properties
	//-------------------------------
	
	var $view = $j("#blogShowcaseScroller .blogShowcase");
	
	var listeners = [];
	
	//-------------------------------
	// Constructor
	//-------------------------------
	
	//-------------------------------
	// Public Methods
	//-------------------------------
	
	_self.deploy = function(data) {
		$j(data.BlogShowcase).each(function(i, item) {
			$view.append(views.feature(item));
		});
		
		$view.append("<div class='clear'></div>");
		
		$j("li", $view).mouseover(onShowcaseItemOver);
		
		Cufon('.blogShowcase .hd', { textShadow: '-1px 1px 0 #000' });
	};
	
	_self.update = function(index) {
		changeShowcaseFeature($j("li", $view).eq(index));
	};
	
	_self.addEventListener = function() {
		for (var n in arguments[0]) { listeners[n] = arguments[0][n]; }
	};
	
	//-------------------------------
	// Private Methods
	//-------------------------------
	
	var views = new Object({
		feature : function(data) {
			var content		= "<li>";
			content			+= "<div class='meta'>";
			content			+= "<h3 class='hd'><a href='" + data.Permalink + "'>" + data.Title + "</a></h3>";
			content			+= "<span class='info'>Posted in <a href='" + data.Permalink + "'>" + data.Blogname + "</a> / Posted on " + data.DateAdded + "</span>";
			content			+= "<span class='comments fb alt'><a href='" + data.Permalink + "#comments'>Comments<span class='fb-o alt'>" + data.commentCount + "<div class='arrow'></div></span></a></span>";
			content			+= "<div class='clear'></div>";
			content			+= "<p class='description'>" + ((data.Description.length > 250) ? data.Description.substr(0, 250) : data.Description) + ((data.Description.length > 100) ? "..." : "") + "</p>";
			content			+= "<a class='btn story' href='" + data.Permalink + "'>Full Story</a>";
			content			+= "</div>";
			content			+= "<img class='background' width='710' height='250' src='" + data.Image + "'/>";
			content			+= "</li>";
			
			return content;
		}
	});
	
	function changeShowcaseFeature(target) {
		$j("li", $view).each(function(i, item) {
			onShowcaseItemOut(item);
		});
		
		$j(target).stop().animate({ "width" : "709px", "opacity" : 1});
		$j(".background", target).stop().animate({ "left" : "0"});
	};
	
	//-------------------------------
	// Listeners
	//-------------------------------
	
	function onShowcaseItemOver(event) {
		changeShowcaseFeature(event.currentTarget);
		
		listeners.onCounterReset($j(event.currentTarget).index());
	};
	
	function onShowcaseItemOut(target) {
		$j(target).stop().animate({ "width" : "59px", "opacity" : 0.3});
		$j(".background", target).stop().animate({ "left" : "-150px"});
	};

};