var Map = {
countries: [
{ name: 'Snow Paradise Inawashiro', top: 138, left: 550, description: 'Snow Paradise Inawashiro, located near Tokyo in Fukushima, offers Day Ski Tours from December 2011 through March 2012.
Find out more!'},
//2
{ name: "Kawaba Ski Resort", top: 192, left: 550, description: 'Kawaba Ski Resort, located near Tokyo in Gunma, offers Day Ski Tours from December 2011 through March 2012. Enjoy a full day of skiing or snowboarding on 10 slopes!
Find out more!'},
//3
{ name: 'Minakami Norn', top: 233, left: 550, description: 'Minakami Norn, located near Tokyo in Gunma, offers Day Ski Tours from December 2011 through March 2012. Enjoy a full day of skiing or snowboarding on 5 slopes!
Find out more!'},
//4
{ name: 'Takasu Snow Park', top: 104, left: 315, description: 'Takasu Snow Park, located near Osaka and Nagoya in Gifu, offers Day Ski Tours Departing from Osaka and Day Ski Tours Departing from Nagoya from December 2011 through March 2012. Enjoy a full day of skiing or snowboarding on 12 slopes!
Find out more! (From Osaka)
Find out more! (From Nagoya)'},
//5
{ name: 'Dynaland', top: 134, left: 315, description: 'Dynaland, located near Osaka and Nagoya in Gifu, offers Day Ski Tours Departing from Osaka and Day Ski Tours Departing from Nagoya from December 2011 through March 2012. Enjoy a full day of skiing or snowboarding on 19 slopes!
Find out more! (From Osaka)
Find out more! (From Nagoya)'},
//6
{ name: 'Hirugano Kogen Ski Ground', top: 164, left: 315, description: 'Hirugano Kogen Ski Ground, located near Osaka and Nagoya in Gifu, offers Day Ski Tours Departing from Osaka and Day Ski Tours Departing from Nagoya from December 2011 through March 2012. Enjoy a full day of skiing or snowboarding on 7 slopes!
Find out more! (From Osaka)
Find out more! (From Nagoya)'},
//7
{ name: 'Naeba Ski Resort', top: 58, left:315, description: 'Naeba Ski Resort, located near Tokyo in Niigata, offers Day Ski Tours from December 2011 through March 2012. Enjoy a full day of skiing or snowboarding on 22 slopes!
Find out more!'},
//8
{ name: 'Karuizawa Prince Ski ', top: 273, left:550, description: 'Naeba Ski Resort, located near Karuizawa in Nagano, offers Day Ski Tours from December 2011 through March 2012. Enjoy a full day of skiing or snowboarding on 12 slopes!
Find out more!'},
//9
{ name: 'Hakuba Goryu & 47', top: 318, left: 550, description: 'Hakuba Goryu & 47, located in Nagano, offers Day Ski Tours from December 2011 through March 2012. Enjoy a full day of skiing or snowboarding on 24 slopes!
Find out more!'}
],
_current: '',
_templates: {
location: new Template(
'#{country}
#{description}
'),
details: new Template(
'#{country}
')
},
drawMarkers: function() {
console.log(this._current);
this.countries.each(function(n) {
this.createMarker(n);
}.bind(this));
this._current = this.countries[0].name;
this.showDetails();
},
createMarker: function(country) {
console.log(country.top);
var element = Builder.node('div', {id: country.name, className: 'marker', style: 'top: ' + Math.round(country.top - 15/2) + 'px; left: ' + Math.round(country.left - 15/2) + 'px;'});
//, Builder.node('a', { className: 'smlink', href: country.url}, country.name));
$('content').appendChild(element);
},
showDetails: function() {
var country = this.countries.find(function(c){
return c.name == this._current;
}.bind(this));
console.log(country.name);
// remove details element if it exists
if ($('details')) {
$('details').remove();
}
var element = Builder.node('div', {id: 'details', style: 'display:none'}, [Builder.node('h1', country.name.capitalize()), Builder.node('p', {style: 'display: none'})]);
$('content').appendChild(element);
$('details').down('p').update(country.description);
Effect.Appear('details', {
duration: .5,
queue: 'end',
afterFinish: function(o) {
Effect.BlindDown($('details').down('p'), {
duration: .1
});
}
});
}
};
function handleMarkerClick(e) {
var elt = e.element();
if (elt.className != 'marker')
return;
e.stop();
console.log(elt.identify());
Map._current = elt.identify();
Map.showDetails();
}
document.observe('dom:loaded', function() {
Map.drawMarkers();
$('content').observe('click', handleMarkerClick);
});