/**
* @author Vitaly
*/
var Map = {
countries: [
//1
{ name: 'Inawashiro Kanko Hotel', top: 138, left: 550, description: 'Inawashiro Kanko Hotel, located near Snow Paradise Inawashiro, offers Overnight Ski Tours from December 2011 through March 2012. Enjoy a day on the slopes and then relax over night at Inawashiro Kanko Hotel.
Find out more!'},
//2
{ name: "Zao Kokusai Hotel", top: 28, left: 315, description: 'Zao Kokusai Hotel, located near Zao Onsen Ski Resort, offers Overnight Ski Tours from December 2011 through March 2012. Enjoy a day on the slopes and then relax over night at Zao Kokusai Hotel.
Find out more!'},
//3
{ name: 'Zao Takamiya Village Hotel', top: 58, left:315, description: 'Zao Takamiya Village Hotel, located near Zao Onsen Ski Resort, offers Overnight Ski Tours from December 2011 through March 2012. Enjoy a day on the slopes and then relax over night at Zao Takamiya Village Hotel.
Find out more!'},
//4
{ name: 'Zao Astraea Hotel', top: 88, left: 315, description: 'Zao Astraea Hotel, located near Zao Onsen Ski Resort, offers Overnight Ski Tours from December 2011 through March 2012. Enjoy a day on the slopes and then relax over night at Zao Astraea Hotel.
Find out more!'},
//5
{ name: 'Naeba Prince Hotel', top: 118, left: 315, description: 'Naeba Prince Hotel, located near Naeba Ski Resort, offers Overnight Ski Tours from December 2011 through March 2012. Enjoy a day on the slopes and then relax over night at Naeba Prince Hotel.
Find out more!'},
//6
{ name: 'Karuizawa Prince Hotel East', top: 243, left: 550, description: 'Karuizawa Prince Hotel East, located near Karuizawa Prince Ski Resort, offers Overnight Ski Tours from December 2011 through March 2012. Enjoy a day on the slopes and then relax over night at Karuizawa Prince Hotel East.
Find out more!'},
//7
{ name: 'Hotel Hakuba', top: 278, left: 550, description: 'Hotel Hakuba, located near Hakuba Goryu & 47 Ski Resort, offers Overnight Ski Tours from December 2011 through March 2012. Enjoy a day on the slopes and then relax over night at Hotel Hakuba.
Find out more!'},
//8
{ name: 'Hotel Stelle Belle', top: 308, left: 550, description: 'Hotel Stelle Belle, located near Hakuba Goryu & 47 Ski Resort, offers Overnight Ski Tours from December 2011 through March 2012. Enjoy a day on the slopes and then relax over night at Hotel Stelle Belle.
Find out more!'},
//9
{ name: 'Hotel Villa MontSaint', top: 164, left: 315, description: 'Hotel Villa MontSaint, located near Dynaland, offers Overnight Ski Tours from December 2011 through March 2012. Enjoy a day on the slopes and then relax over night at Hotel Villa Mont-Saint.
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);
});