var chart;
	
	$(document).ready(function() { 
		VK.init({apiId: 1939128, onlyWidgets: true});

		$.get('json.php', function(data){
			var panelContainer = $("div.panelContainer");
			var week_html = panelContainer.html();
			panelContainer.html('');
			
			var curr_element = '';
			$.each(data, function(key, elem){
				curr_element = $(week_html);
				curr_element.attr('title', elem['day']);
				curr_element.find('.night img').attr('src', elem['n_img']).attr('alt', elem['n_descr']);
				curr_element.find('.night .degrees').html(elem['n_temp_1'] + '°');
				curr_element.find('.day img').attr('src', elem['d_img']).attr('alt', elem['d_descr']);
				curr_element.find('.day .degrees').html(elem['d_temp_1'] + '°');
				panelContainer.append(curr_element);
			});
			$("div#slider1").codaSlider();
			
			panelContainer = $("#more_clone");
			var more_html = panelContainer.html();
			panelContainer.html('');
			
			curr_element = $(more_html);
			curr_element.addClass('today')
			curr_element.find('.night img').attr('src', data[0]['n_img']).attr('alt', data[0]['n_descr']);
			curr_element.find('.night .degrees').html(data[0]['n_temp_1'] + '°');
			curr_element.find('.day img').attr('src', data[0]['d_img']).attr('alt', data[0]['d_descr']);
			curr_element.find('.day .degrees').html(data[0]['d_temp_1'] + '°');
			curr_element.find('.evening img').attr('src', data[0]['e_img']).attr('alt', data[0]['e_descr']);
			curr_element.find('.evening .degrees').html(data[0]['e_temp_1'] + '°');
			curr_element.find('.morning img').attr('src', data[0]['m_img']).attr('alt', data[0]['m_descr']);
			curr_element.find('.morning .degrees').html(data[0]['m_temp_1'] + '°');
			panelContainer.append(curr_element);
			
			curr_element = $(more_html);
			curr_element.addClass('tomorrow')
			curr_element.find('.night img').attr('src', data[1]['n_img']).attr('alt', data[1]['n_descr']);
			curr_element.find('.night .degrees').html(data[1]['n_temp_1'] + '°');
			curr_element.find('.day img').attr('src', data[1]['d_img']).attr('alt', data[1]['d_descr']);
			curr_element.find('.day .degrees').html(data[1]['d_temp_1'] + '°');
			curr_element.find('.evening img').attr('src', data[1]['e_img']).attr('alt', data[1]['e_descr']);
			curr_element.find('.evening .degrees').html(data[1]['e_temp_1'] + '°');
			curr_element.find('.morning img').attr('src', data[1]['m_img']).attr('alt', data[1]['m_descr']);
			curr_element.find('.morning .degrees').html(data[1]['m_temp_1'] + '°');
			panelContainer.append(curr_element);
			
			curr_element = $(more_html);
			curr_element.addClass('atomorrow')
			curr_element.find('.night img').attr('src', data[2]['n_img']).attr('alt', data[2]['n_descr']);
			curr_element.find('.night .degrees').html(data[2]['n_temp_1'] + '°');
			curr_element.find('.day img').attr('src', data[2]['d_img']).attr('alt', data[2]['d_descr']);
			curr_element.find('.day .degrees').html(data[2]['d_temp_1'] + '°');
			curr_element.find('.evening img').attr('src', data[2]['e_img']).attr('alt', data[2]['e_descr']);
			curr_element.find('.evening .degrees').html(data[2]['e_temp_1'] + '°');
			curr_element.find('.morning img').attr('src', data[2]['m_img']).attr('alt', data[2]['m_descr']);
			curr_element.find('.morning .degrees').html(data[2]['m_temp_1'] + '°');
			panelContainer.append(curr_element);
			
			var tmp_temp = data[0]['d_temp_1'] + "°…" + data[0]['d_temp_2']+"°";
			var tmp_title = "Мне нравится погода в Юрге! Сегодня "+tmp_temp+", "+data[0]['d_descr'];
			var d = new Date();
			var pid = parseInt("99917"+d.getDate()+''+d.getMonth());
			
			VK.Widgets.Like("vk_like", {type: "button",
										pageTitle: tmp_title, 
										pageDescription: "Погода в Юрге от ЮГС. Новый, современный, легкий способ узнать погоду и поделиться с друзьями!"}
										, pid);
			
			$("div.button.today").addClass('selected');
			$("div.pn.today").slideDown();
			
			var series = new Array();
			var values = new Array();
			$.each(data, function(key, elem){
				series.push(elem['day']);
				values.push({ name: elem['d_descr'], y: parseInt(elem['d_temp_1'].replace('+', '')), marker: { symbol: 'url('+elem['d_img']+')'} });
			});
			
			var chart;
				chart = new Highcharts.Chart({ 
					chart: { renderTo: 'plotImg', 
							 defaultSeriesType: 'spline', 
							 ignoreHiddenSeries: false, 
							 backgroundColor: null, 
							 plotBackgroundColor: null,
							 plotShadow: false,
							 plotBorderWidth: 0
							},
					title: { text: '' },
					xAxis: { categories: series},
					yAxis: {
						title: { text: 'Температура' },
						style: {
							color: '#5c5c97',
							textShadow: '#fff 0 1px 0'
						},
						labels: { formatter: function() { return this.value +'°' } }
					},
					tooltip: {
						formatter: function() {
							return '<b>'+
								 this.x +'</b> '+ this.point.name + ', '+ this.y +'°';
						}
					},
					plotOptions: {
						spline: {
							marker: {
								radius: 4,
								lineColor: '#666666',
								lineWidth: 1
							}
						}
					},
					series: [{
						name: 'Погода',
						marker: { symbol: 'square' },
						data: values
					}]
				});
			
		}, 'json');
		
		
		
		$("div.button").click(function(){
			var classList = $("div.button.selected").attr('class').split(/\s+/);
			var selectedButton = classList[0];
			
			$('div.pn.'+selectedButton).slideUp();
			
			$("div.button").removeClass('selected');
			$(this).addClass('selected');
			
			classList = $(this).attr('class').split(/\s+/);
			var class_id = classList[0];
			
			$('div.pn.'+class_id).slideDown();
			
		});
	});