Weather = function(c, json) {
	this.init(c, json, true);
}

Weather.prototype = {
	init: function(c, json, doRender) {
		this.container = c;
		this.json = json;
		if(doRender) {
			this.render();
		}
	},
	_TPL: [
		'<table cellpadding="0" cellspacing="0">',
			'<tr>',
				'<td valign="top">{1}</td>',
				'<td valign="top" class="td-bg-l">{0}</td>',
			'</tr>',
		'</table>'
	].join(''),
	render: function() {
		this.c_id = pjs.id();
		this.nav_id = pjs.id();
		
		var lbuf = [
			'<div id="',this.c_id,'">','</div>'
		];
		
		var rbuf = [
			'<div id="',this.nav_id,'">','</div>'
		];
		this.container.innerHTML = 
			pjs.util.stringFormat(this._TPL, 
				lbuf.join(''), rbuf.join(''));
				
		jQuery('#' + this.nav_id).append(this.createNav());
		this.lDiv = jQuery('#' + this.c_id);
		this.lDiv.width(180);
		//this.lDiv.addClass('nijansa1-aborder-dotted');
		this.changeView(this.json['Skopje']);
	},
	
	createNav: function() {
		var _this = this;
		var ul = jQuery('<ul class="weatherUl"/>');
		for(var k in this.json) {
			var g = this.json[k];
			g.lid = pjs.id();
			var li = jQuery('<li id="'+g.lid+'" class="weatherLi nijansa1"/>');
			li.click((function() {
				var _ig = g;
				return function() {
					_this.changeView(_ig);
				}
			})());
			//console.log(g);
			li.html('<a href="javascript:void(0)">' + g.grad + '</a>');
			ul.append(li);
		}
		return ul;
	},
	viewTPL: [
		'<table width="100%" cellpadding="0" cellspacing="0">',
			'<tr>',
				'<td>',
					'<table class="weathertemp" width="100%">',
						'<tr>',
							'<td valign="middle">&nbsp;</td>',
							'<td valign="middle" style="font-size:28px; font-weight: bold">{0}°C</td>',
							'<td valign="middle"><img src="{1}" /> </td>',
						'</tr>',
					'</table>',
				'</td>',
			'</tr>',
			'<tr>',
				'<td>',
					'<table class="weather" width="100%">',
						'<tr>',
							'<td>Ветер: </td>',
							'<td>{2}km/h</td>',
						'</tr>',
						'<tr>',
							'<td>Влажност: </td>',
							'<td>{3}%</td>',
						'</tr>',
					'</table>',
				'</td>',
			'</tr>',
			'<tr>',
				'<td>{4}</td>',
			'</tr>',
		'</table>'
	].join(''),
	changeView: function(p) {
		if(this.activeGradLi) {
			this.activeGradLi.removeClass('selected');
		}
		this.activeGradLi = jQuery('#' + p.lid);
		this.activeGradLi.addClass('selected');
		
		var t = pjs.util.stringFormat(
			this.viewTPL, 
			p.condition.temperature,
			p.condition.image,
			p.wind.speed,
			p.atmosphere.humidity,
			this.foramtPrognoza(p.forecast));			
		this.lDiv.html('<div style="display:none"> <div class="cityHead">'+p.grad+'</div>' + t + '</div>');
		this.lDiv.children(0).fadeIn();
	},
	
	foramtPrognoza: function(forecast) {
		var buf = [
			'<hr style="border:dashed #B9D7D4; border-width:1px 0 0; height:0;">',
			
			'<table class="denesutre" width="100%">',
				'<tr>',
					'<td>',this.renderDenTable('Денес', forecast[0]),'</td>',
					'<td>',this.renderDenTable('Утре', forecast[1]),'</td>',
				'</tr>',
			'</table>'
		];
		return buf.join('');
	},
	
	renderDenTable: function(label, f) {
		var buf = [
			'<table class="denesutre" width="100%">',
				'<tr><td align="center">',label,'</td></tr>',
				'<tr><td>Min: ',f.low_temperature,'°C <br /> Max: ',f.high_temperature,'°C </td></tr>',
			'</table>'
		];
		return buf.join('');
	}
}