Ext.ns("AVM.Calendar");

/**
 * Calendar lite widget (depends only on ext-core.js)
 *
 * @author Maxim Bazhenov
 * @class AVM.Calendar.Widget
 */
AVM.Calendar.Widget = Ext.extend(Ext.util.Observable, 
{
	/**
	 * @cfg {String} hidden_day_name
	 */
	hidden_day_name : 'day',
	
	/**
	 * @cfg {String} hidden_month_name
	 */
	hidden_month_name : 'month',
	
	/**
	 * @cfg {String} hidden_year_name
	 */
	hidden_year_name : 'year',

	/**
	 * @cfg {Mixed} render_to
	 */
	render_to : null,
	
	/**
	 * Is component already rendered.
	 *
	 * @access private
	 */
	rendered : false,
	
	/**
	 * Calendar templates.
	 *
	 * @access private
	 */
	tpls : null,
	
	/**
	 * Calendar root element.
	 *
	 * @access private
	 */
	el : null,
	
	month_up_el : null,
	month_down_el : null,
	year_up_el : null,
	year_down_el : null,	
	
	/**
	 * Constructor
	 */
	constructor : function(config)
	{
		var prop;
		
		AVM.Calendar.Widget.superclass.constructor.call(this);
		
		this.tpls = {
			root : new Ext.Template(
				"<div class='avm-calendar'>",
					"{mynav}",
					"<table class='avm-calendar-grid' id='{id}' cellspacing='0' cellpadding='0' border='0'>",
						"{head}",
						"{body}",
					"</table>",
					"<input type='hidden' name='{day_name}' value='{day_value}'/>",
					"<input type='hidden' name='{month_name}' value='{month_value}'/>",
					"<input type='hidden' name='{year_name}' value='{year_value}'/>",
				"</div>"
			),
			mynav : new Ext.Template(
				"<div class='avm-calendar-mynav'>",
					"<div class='avm-calendar-month'>",
						"<span class='avm-calendar-text'>&#160;</span>",
						"<div class='avm-calendar-up'>&#160;</div>",
						"<div class='avm-calendar-drag'>&#160;</div>",
						"<div class='avm-calendar-down'>&#160;</div>",
					"</div>",
					"<div class='avm-calendar-year'>",
						"<span class='avm-calendar-text'>&#160;</span>",
						"<div class='avm-calendar-up'>&#160;</div>",
						"<div class='avm-calendar-drag'>&#160;</div>",
						"<div class='avm-calendar-down'>&#160;</div>",
					"</div>",
				"</div>"
			),
			head : new Ext.Template(
				"<thead>{rows}</thead>"
			),
			body : new Ext.Template(
				"<tbody>{rows}</tbody>"
			),
			row : new Ext.Template(
				"<tr>{cells}</tr>"
			),
			cell : new Ext.Template(
				"<td class='{cls}' id='{id}'>{text}</td>"
			)
		}
		for (prop in this.tpls) {
			if (this.tpls.hasOwnProperty(prop)) {
				this.tpls[prop].compile();
			}
		}
	},
	
	/**
	 * @param {Mixed} container Container element where to render the calendar.
	 * @access public
	 */
	render : function(container)
	{
		if (!this.rendered) {
			this.doRender(container || this.render_to || Ext.getBody())
		}
	},
	
	/**
	 * @access private
	 */
	doRender : function(container)
	{
		var cells, rows, head, body, mynav, root, w, weeks, d, days, day_names, i, len, id = Ext.id();
		
		cells = [];
		day_names = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
		for (i = 0, len = day_names.length; i < len; i++) {
			cells.push(
				this.tpls.cell.apply({
					cls: 'day_name',
					id: id + '-dn-' + (i + 1),
					text: day_names[i]
				})
			);
		}
		rows = this.tpls.row.apply({
			cells: cells.join("\n")
		});
		head = this.tpls.head.apply({
			rows : rows
		});
		
		rows = [];
		for (w = 0, weeks = 6; w < weeks; w++) {
			cells = [];
			for (d = 0, days = 7; d < days; d++) {
				cells.push(
					this.tpls.cell.apply({
						cls: 'day',
						text: d + 1,
						id: id+'-cell-'+(w * weeks + d + 1)
					})
				);
			}
			rows.push(
				this.tpls.row.apply({
					cells: cells.join("\n")
				})
			);
		}
		
		body = this.tpls.body.apply({
			rows: rows.join("\n")
		});
		
		mynav = this.tpls.mynav.apply();
		
		this.el = this.tpls.root.append(container, {
			id: id,
			mynav: mynav,
			head: head,
			body: body
		});
	}
});