// JScript File
var map;

var RomeSpot = new Array();

function load() {
  if (GBrowserIsCompatible()) {
    // Init map
    map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(41.898891, 12.482925), 14,G_SATELLITE_MAP);
    map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());

    // Fill location array
    RomeSpot[0] = new spot("colosseo",41.890316,12.492371,"Colosseo","1ycODdZkRpQ");
    RomeSpot[1] = new spot("bocca",41.888242, 12.481510,"Bocca della verità","G8Uoezs6Nm0");
    RomeSpot[2] = new spot("navona",41.898763, 12.472916,"Piazza Navona","h5BWiODK9Vs");
    RomeSpot[3] = new spot("spagna",41.905878, 12.482336,"Piazza di Spagna","fP42P5eGbxM");
    RomeSpot[4] = new spot("angelo",41.903202, 12.466690,"Castel Sant'Angelo","5p90RnULXQ8");
    RomeSpot[5] = new spot("pietro",41.902661, 12.457471,"Piazza San Pietro","ASMHGjsi8Ao");
    RomeSpot[6] = new spot("trevi",41.900956, 12.483313,"Fontana di Trevi","Oob-vJoLBrI");
    RomeSpot[7] = new spot("campidoglio",41.893295, 12.483019,"Campidoglio","8pdRvWKxdRg");
    RomeSpot[8] = new spot("pantheon",41.899406, 12.476768,"Pantheon","JfyO1w96lUo");
    RomeSpot[9] = new spot("pincio",41.911098, 12.477911,"Pincio","zij71QI_PSo");

    // Create icon
    var icon = new GIcon();
    icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
    icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
    icon.iconSize = new GSize(12, 20);
    icon.shadowSize = new GSize(22, 20);
    icon.iconAnchor = new GPoint(6, 20);
    icon.infoWindowAnchor = new GPoint(5, 1);

    // Display marker
    var bar = '';
    var i,html;
    for(i=0;i < 10;i++)
    {
        html = "<b>" + RomeSpot[i].comment + "</b>";
        //if(RomeSpot[i].video != "")
        //    html = html + '<br /><br /><small><a href="javascript:ShowVideo(\'' + RomeSpot[i].video + '\');">Show Video</small>';
    
        var video = PrepareYouTubeEmbed(RomeSpot[i].video,220,0);
        RomeSpot[i].marker = createMarker(RomeSpot[i].lat,RomeSpot[i].lng,html,icon,RomeSpot[i].name,video)
        map.addOverlay(RomeSpot[i].marker);
        bar += '<div><a href="javascript:Show(' + i + ')">' + RomeSpot[i].comment + '</a></div>';
    }
    
    document.getElementById("bottom_bar").innerHTML = bar;
  }
}

function Show(idx) {
    GEvent.trigger(RomeSpot[idx].marker, "click");    
}

function spot(name,lat,lng,comment,video) {
    this.name=name;
    this.lat=lat;
    this.lng=lng;
    this.comment=comment;
    this.video = video;
    this.marker='';
}

function createMarker(lat,lng,comment,icon,code,video) {
  var point = new GLatLng(lat,lng);
  var marker = new GMarker(point,icon);
  GEvent.addListener(marker, "click", function() {
        //marker.openInfoWindowHtml('<div class="infow"><div><img alt="" src="top10_rome_attractions/img/' + code + '.jpg" /></div><div>' + comment +'</div></div>');
        marker.openInfoWindowHtml('<div class="infow"><div>' + video + '</div><div>' + comment + '</div></div>');
  });
  return marker;
}

function ShowVideo(list) {
    var out = "";
    var v = list.split(" ");

    var i;
    for(i=0;i < v.length;i++) {
        out += PrepareYouTubeEmbed(v[i],220,0);
    }  
    document.getElementById("videos").innerHTML = out;
}

var yte = '<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/softgens"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/softgens" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>'
function PrepareYouTubeEmbed(addr,h,w) {
    var yt = yte;
    if(h != 0 || w != 0) {
        if(h == 0)
            h = Math.floor(350*w/425);
        else
            w = Math.floor (425*h/350); 

        yt = yt.replace(/425/g,w);
        yt = yt.replace(/350/g,h);
    }
    return yt.replace(/softgens/g,addr);
}