/**
 * @class HD.MonthlyWidget
 * @description The purpose of MonthlyWidget is to display a list of months along with the number
 *              of media items posted within the given month.
 * @constructor
 * @extends HD.Widget
 * @see HD.MonthlyWidget.hooks
 * @see HD.MonthlyWidget.templates
 * @property {object} config
 *                 The configuration for the widget
 * @property {string}  config.dateFormat
 *                 The format that dates for months should be displayed in.
 * @property {string}  config.renderMode
 *                 The format that the menu should display as.
 *                 Default is 'links'
 * @property {object} [config.hooks=HD.MonthlyWidget.hooks]
 *                 Customized subset of hooks (merged with the defaults).
 * @property {object} [config.templates=HD.MonthlyWidget.templates]
 *                 Customized subset of templates (merged with the defaults).
 */
HD.MonthlyWidget = function(config) {
    this.config = config;
    this.config.renderMode = this.config.renderMode || 'list' || 'select';
	/** Observer collection */
    this.observers = [];
	this.loadTemplates(arguments.callee);
};

/**
 * The collection of default templates.
 */
HD.MonthlyWidget.templates = {
	/**
	 * Label for the first selectbox option
	 * @memberOf HD.MonthlyWidget
	 */
	defaultSelectLabel : 'By date',
		
	/**
	 * @constant
	 * @return {string}  Label for the first selectbox option
	 * @memberOf HD.MonthlyWidget
	 */
	getDefaultSelectLabel : function() {
		return this.defaultSelectLabel;
	},
	/**
	 * @constant
	 * @return {string} Main template for the widget
	 * @memberOf HD.MonthlyWidget
	 */
	getHtml : function() {
		return this.html;
	},
		
	/** 
	 * Main template for the widget
	 * @memberOf HD.MonthlyWidget
	 * @type jst_template
	 */
	html :  '\
		<div class="${classes.MONTHLY_BREAKDOWN} ${classes.WIDGET}">\
		{if config.renderMode == "list"}\
			{for item in items}\
				{if item && item.itemCount > 0}\
					<div>\
						<span class="${classes.TITLE} ${classes.CONTROL} ${hooks.ITEM}">${item.startDate|date}</span>\
						<span class="${classes.VALUE}"> (${item.itemCount})</span>\
					</div>\
				{/if}\
			{/for}\
		{elseif config.renderMode == "select"}\
			<select class="${hooks.LIST}">\
			<option class="${hooks.ITEM}" value="" selected="selected">${templates.getDefaultSelectLabel()}</option>\
			{for item in items}\
				{if item && item.itemCount > 0}\
					<option class="${hooks.ITEM}" value="${item_index}">${item.startDate|date}</option>\
				{/if}\
			{/for}\
			</select>\
		{/if}\
		</div>'
};

(function() {
	var classes = HD.CSS_CLASSES;
	
	/**
	 * The collection of hooks.
	 */
	HD.MonthlyWidget.hooks = {
		/**
		 * Standalone: 0..n <br/>
		 * Use: Selecting month nodes for filtering <br/>
		 * @memberOf HD.MonthlyWidget
		 */
		ITEM : classes.ITEM,
		
		/**
		 * Standalone: 0..1 <br/>
		 * Type: SELECT for config.renderMode="select" <br/>
		 * Use: Selecting the parent node of the list <br/>
		 * @memberOf HD.MonthlyWidget
		 */
		LIST : classes.LIST
	};
})();

HD.MonthlyWidget.prototype = {
	/**
	 * Sets event listeners for the widget.
	 * @param {object} [data]
	 *                 Event data from the render phase
	 */
    setListeners : function(data) {
    	var parentEl = this.getParent();
    	
    	var media = data.media;
    	// For list Mode
    	if (this.config.renderMode == 'list') {
	    	var titleEls = HD.getByClass(this.config.hooks.ITEM, "*", parentEl);
	    	//FIX for 19797 
	    	var cntr =0;
	    	for(var i = 0, len = media.length; i < len; i++) {
	    		var medium = media[i];
	    		if(medium != null && medium.itemCount > 0) {
					if (titleEls[cntr]) {
		    			this.setListener(titleEls[cntr], media[i]);	
					}
	    			cntr++;
	    		}    		
	    	}
	    	//END FIX 19797
    	}
    	// For Select Mode
    	else if (this.config.renderMode == 'select') {
    		var cb = this;
    		HD.getByClass(this.config.hooks.LIST, "*", parentEl, function(selectEl) {
    			selectEl.onchange = function(){
    				var monthValue = selectEl.options[selectEl.selectedIndex].value;
    				if (monthValue != "" && monthValue >= 0){
    		
    					var dataCb = media[monthValue];
    					var dateRange = { startDate : dataCb.startDate, endDate : dataCb.endDate };
    					
    					cb.model.setDateRange.call(cb.model, dateRange);
    				}
    				
    			};
    		});
		}
    },
    
	/**
	 * 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;
        if(data.itemCount > 0) {
			element.onclick = function() {
				var dateRange = { startDate : dataCb.startDate, endDate : dataCb.endDate };
				cb.model.setDateRange.call(cb.model, dateRange);
			}
		}
    },
    
	/**
	 * 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 == "getMonthly_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.MonthlyWidget, [HD.Widget]);

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