/**
 * @class HD.MostPopularWidget
 * @description The purpose of MostPopularWidget is to display a list of the most popular media entries.
 * @constructor
 * @extends HD.Widget
 * @see HD.MostPopularWidget.hooks
 * @see HD.MostPopularWidget.templates
 * @property {object} config
 *                 The configuration for the widget
 * @property {object} [config.hooks=HD.MostPopularWidget.hooks]
 *                 Customized subset of hooks (merged with the defaults).
 * @property {object} [config.templates=HD.MostPopularWidget.templates]
 *                 Customized subset of templates (merged with the defaults).
 */
HD.MostPopularWidget = function(config) {
    this.config = config;
    
	/** Observer collection */
    this.observers = [];
	this.loadTemplates(arguments.callee);
};

/**
 * The collection of default templates.
 */
HD.MostPopularWidget.templates = {
	/**
	 * @constant
	 * @return {string} Main template for the widget
	 * @memberOf HD.MostPopularWidget
	 */
	getHtml : function() {
		return this.html;
	},
		
	/** 
	 * Main template for the widget
	 * @memberOf HD.MostPopularWidget
	 * @type jst_template
	 */
	html :  '\
		<div class="${classes.MOST_POPULAR} ${classes.WIDGET}">\
		{for item in items}\
			<div class="${classes.TITLE} ${classes.CONTROL} ${hooks.ITEM}">${item.title}</div>\
		{/for}\
		</div>'
};

(function() {
	var classes = HD.CSS_CLASSES;
	
	/**
	 * The collection of hooks.
	 */
	HD.MostPopularWidget.hooks = {
		/**
		 * Standalone: 0..n <br/>
		 * Use: Selecting popular media nodes <br/>
		 * @memberOf HD.MostPopularWidget
		 */
		ITEM : classes.ITEM
	};
})();

HD.MostPopularWidget.prototype = {
	/**
	 * Sets event listeners for the widget.
	 * @param {object} [data]
	 *                 Event data from the render phase
	 */
    setListeners : function(data) {
    	var classes = HD.CSS_CLASSES;
    	var parentEl = this.getParent();
    	
    	var media = data.media;
    	var titleEls = HD.getByClass(this.config.hooks.ITEM, "*", parentEl);
    	for(var i = 0, len = media.length; i < len; i++) {
			if (titleEls[i]) {
	    		this.setListener(titleEls[i], media[i]);
			}
    	}
    },
    
	/**
	 * Sets event listeners for a given element with a set of media.
	 * @param {object} [element]
	 *                 The element to apply listeners to.
	 * @param {object} [data]
	 *                 Media data for the month.
	 */
    setListener : function(element, data) {
    	if(element == null || data == null) {
    		return;
    	}
    	var cb = this;
    	var dataCb = data;
		element.onclick = function() {
			cb.model.setActiveItem.call(cb.model, dataCb);
			cb.notifyObservers.call(cb, "itemSelected", dataCb);
		}
    },
    
	/**
	 * Monitors events by HD.CommunityDAO.
	 * @param {string} eventName
	 *                 The name of the event
	 * @param {object} [eventData]
	 *                 Data for the event
	 */
    update : function(eventName, eventData) {
    	if(eventName == "getPopular_Start") {
    		this.loading(true);
    	} else if(eventName == "getPopular_Finish") {
    		this.loading(false);
    		this.render(eventData);
    	}
    },
    
	/**
	 * Renders the HTML for the widget based on dynamic data.
	 * @param {object} [data]
	 *                 Event data from the render phase
	 * @returns HTML for the widget
	 * @type string
	 */
    getHtml : function(data) {
		return this.processTemplate(this.config.templates.getHtml(), {
			items : (data && data.media) || []
		});
    }
};

HD.extend(HD.MostPopularWidget, [HD.Widget]);

HD.register('hd_most_popular_widget', 'HD.MostPopularWidget', {version: "1.0", build: "1"});