Code: Select all
<html>
<head>
<title>Your Weather</title>
<!-- Location Chooser component -->
<script type="text/javascript" src="http://js.yowindow.com/js/yolc.js"></script>
<!-- YoWindow widget component -->
<script type="text/javascript" src="http://js.yowindow.com/js/yowidget.js"></script>
<script language="JavaScript">
//To track if commands can be sent to YoWidget
window.isYoWidgetReady = false;
function onLoad() {
installLocationChooser();
installYoWidget();
}
function installLocationChooser() {
var place = document.getElementById('location_chooser_place');
//Create YoLocationChooser and keep it as a variable of HTML window
this.locationChooser = new YoLocationChooser(place);
//Subscribe to onLocationChange event
this.locationChooser.onLocationChange = onLocationChange;
/**
lc.open(); - let the user to choose the location, starting on country-level
lc.open("#auto"); - detect location by IP and open it
lc.open("United Kingdom/London"); - open London
*/
this.locationChooser.open("#auto");
}
/**
Event of YoLocationChooser
It is called every time the location changes.
When location was deselected - node is null
node format
node = {
@id, // GeoNames id
@name, // Name from the Geonames data-base
@p // Population
}
Here we reflect selected location in the widget.
*/
function onLocationChange(node) {
//Do not do anything if location was deselected (node is null).
if (!node) {
return;
}
var locationId = node['@id'];
//You can call yowidget methods only after it gets ready to intercept commands
var yowidget = document.getElementById('yowidget');
if (!window.isYoWidgetReady) {
return;
}
//Select location in YoWindow widget
yowidget.setLocationId(locationId);
}
/**
Creates YoWindow widget and adds it to the place-holder "yowidget_place"
*/
function installYoWidget() {
/**
flashvars parameters
See http://yowindow.com/widget_parameters.php
I have put some examples in the code, uncomment to see them in effect
*/
var flashvars = {
location_id: "auto"
// landscape: "seaside",
// background: "#FFFFFF",
// lang: "de",
// unit_system: "metric",
// time_format: "24"
};
/**
Flash parameters
*/
var params = {
quality: "high",
bgcolor: "#FFFFFF",
allowscriptaccess: "always",
allowfullscreen: "true",
wmode: "opaque"
};
var attributes = {
//Optionally control the color of the copyright text
// copyright_color: "#0000FF",
// copyright_link_color: "#FF0000",
//id and name of YoWindow widget in HTML DOM
id: "yowidget",
name: "yowidget"
};
YoWidget.embed(
"yowidget_place", //place-holder id
700, //width
394, //height
flashvars,
params,
attributes
);
}
//This function is called by YoWidget SWF when it is ready for commands
function yowidget_onReady() {
window.isYoWidgetReady = true;
var yowidget = document.getElementById('yowidget');
//Display location selected in Chooser if any
var node = this.locationChooser.selectedLocation;
if (node) {
var locationId = node['@id'];
yowidget.setLocationId(locationId);
}
}
</script>
</head>
<body onLoad="onLoad();">
<div>
<span id="location_chooser_place" style="display:inline-block; width:250px; vertical-align:top;">
</span>
<span id="yowidget_place" style="display:inline-block;">
</span>
</div>
</body>
</html>