function ThumbMarker(width, height, webcam, point) {
this.width = width;
this.height = height;
this.webcamid = webcam.webcamid;
this.webcamtitle = webcam.title;
this.city = webcam.city;
this.point = point;
this.static = Math.round(Math.random() * 12345653) % 10;
this.firsttimeout = null;
this.timeout = null;
}
ThumbMarker.prototype = new GOverlay();
ThumbMarker.prototype.initialize = function(map) {
this.map = map;
var self = this;
// Icon
this.divIcon = $Div('thumbIcon');
this.divIcon.style.position = 'absolute';
this.divIcon.style.zIndex = GOverlay.getZIndex(this.point.lat());
this.divIcon.setAttribute('title', this.webcamtitle);
var icon = $Div();
icon.style.backgroundImage = 'url(http://static' + this.static + '.webcams.travel/icon/' + this.webcamid + '.png)';
icon.style.width = (this.width) + 'px';
icon.style.height = (this.height) + 'px';
icon.style.cursor = 'pointer';
this.divIcon.appendChild(icon);
// Thumbnail
this.divThumb = $Div('thumbMap_active');
this.divThumb.style.width = '213px';
this.divThumb.style.height = '187px';
this.divThumb.style.position = 'absolute';
this.divThumb.style.display = 'none';
this.divThumb.style.zIndex = GOverlay.getZIndex(-90);
var divInpt = $Div('thumbMap_top');
var inpt = $Element('input');
inpt.setAttribute('type', 'button');
inpt.setAttribute('value', 'X');
inpt.onclick = function(){ self.unselect(); };
inpt.style.position = 'relative';
inpt.style.left = (_hldir == 'ltr') ? '0px' : '-140px';
divInpt.appendChild(inpt);
var img = $Img('http://static' + this.static + '.webcams.travel/thumbnail/' + this.webcamid + '.jpg', null, 128, 96);
var lnk = $Link('/webcam/' + this.webcamid, img, '_blank', 'thumb thumbMap');
lnk.appendChild($Element('br'));
lnk.appendChild($Text(do_dots(this.city, 'thumb')));
lnk.style.position = 'relative';
lnk.style.top = '2px';
lnk.style.left = (_hldir == 'ltr') ? '57px' : '-19px';
this.divThumb.appendChild(divInpt);
this.divThumb.appendChild(lnk);
var pane = this.map.getPane(G_MAP_MARKER_PANE);
pane.appendChild(this.divIcon);
pane.appendChild(this.divThumb);
var self = this;
GEvent.addDomListener(this.divIcon, 'click', function() {
GEvent.trigger(self, 'click', self.point);
});
GEvent.addDomListener(this.divIcon, 'mouseover', function() {
GEvent.trigger(self, 'mouseover', self.point);
_block_transparency = true;
_block_slider_collapse = true;
self.firsttimeout = setTimeout(function() {
GEvent.trigger(self, 'mouseout', self.point);
}, 300);
});
GEvent.addDomListener(this.divIcon, 'mouseout', function() {
_block_transparency = false;
_block_slider_collapse = false;
});
GEvent.addDomListener(this.divThumb, 'mouseover', function() {
if(self.firsttimeout != null) {
clearTimeout(self.firsttimeout);
self.firsttimeout = null;
}
clearTimeout(self.timeout);
self.timeout = null;
});
GEvent.addDomListener(this.divThumb, 'mouseout', function() {
if(self.firsttimeout != null) {
clearTimeout(self.firsttimeout);
self.firsttimeout = null;
}
self.timeout = setTimeout(function() {
GEvent.trigger(self, 'mouseout', self.point);
}, 50);
});
}
ThumbMarker.prototype.transparent = function() {
this.divIcon.style.opacity = '.4';
this.divIcon.style.MozOpacity = '.4';
this.divIcon.style.filter = 'alpha(opacity = 40)';
}
ThumbMarker.prototype.untransparent = function() {
this.divIcon.style.opacity = '1';
this.divIcon.style.MozOpacity = '1';
this.divIcon.style.filter = 'alpha(opacity = 100)';
}
ThumbMarker.prototype.remove = function() {
this.divIcon.parentNode.removeChild(this.divIcon);
}
ThumbMarker.prototype.copy = function() {
return new ThumbMarker(this.width, this.height, this.webcamid);
}
ThumbMarker.prototype.redraw = function(force) {
if(!force)
return;
var p = this.map.fromLatLngToDivPixel(this.point);
// Icon
this.divIcon.style.left = (p.x - 32) + 'px';
this.divIcon.style.top = (p.y - 32) + 'px';
// Thumb
this.divThumb.style.left = (p.x - 32) + 'px';
this.divThumb.style.top = (p.y - 32) + 'px';
}
ThumbMarker.prototype.select = function() {
this.divIcon.style.display = 'none';
this.divThumb.style.display = '';
}
ThumbMarker.prototype.unselect = function() {
this.divIcon.style.display = '';
this.divThumb.style.display = 'none';
}
ThumbMarker.prototype.highlight = function() {
this.select();
}
ThumbMarker.prototype.unhighlight = function() {
this.unselect();
}