<div id="weather" class="page out" data-title="天气插件">
	<div id="weather-header"></div>
	<div id="weather-a"></div>
    <div id="weather-b"></div>
</div>
<script>
require(["NavHeader", "Weather", "Button"], function(NavHeader, Weather, Button) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";

	if(!hasClsPicker) {
		new NavHeader({
			el: "weather-header",
			option: {
				title:"天气插件", 
				smallTitle:"weather"
			}
		}).render();
	}

	var weather = new Weather({
		el: "weather-a",
		option: {
			city : "上海"
		}
	});
	weather.render().then(function() {
		if (!hasClsPicker) return;

		_u.vetically("#weather-a");

		clsPicker.golalSetting({
			container: ".wev-comp-Weather",
			type: "Weather"
		});

		new clsPicker({
			selector: ".wev-weather-curr",
			text: ".wev-weather-curr",
			lineYSkew: 50,
			skew: [20, -2]
		});
		new clsPicker({
			selector: ".wev-weather-curr img",
			text: " ",
			lineYSkew: 20,
			skew: ["", -1.5]
		});

		new clsPicker({
			selector: ".wev-weather-curr span:nth-child(1)",
			text: " ",
			lineYSkew: 50,
			skew: ["", -0.7]
		});
		new clsPicker({
			selector: ".wev-weather-curr span:nth-child(2)",
			text: " ",
			lineYSkew: 20,
			skew: [1.8, -0.55],
			position: "top right"
		});
		
		setTimeout(function() {
			new clsPicker({
				selector: ".wev-weather-next",
				text: ".wev-weather-next",
				lineYSkew: 80,
			});
			new clsPicker({
				selector: ".wev-weather-next:first-child img",
				text: " ",
				lineYSkew: 50,
			});
			new clsPicker({
				selector: ".wev-weather-next:first-child span",
				text: " ",
				lineYSkew: 20,
			});
		}, 200);
	});
	
	if(!hasClsPicker) {
		new Button({
			el:"weather-b",
			option:{
				layout : "relative",
				items : [
					{
						text : "上海",
						click : function(){
							var weather = require("Weather");
							new weather().loadData("上海");
						}
					},
					{
						text : "北京",
						click : function(){
							var weather = require("Weather");
							new weather().loadData("beijing");
						}
					},
					{
						text : "杭州",
						click : function(){
							Mobile_NS.initWeather("weather-a", "杭州");
						}
					}
				]
			},
			badge : []
		}).render();
	}
});
</script>