var centerLatitude = -34.629;
var centerLongitude = -58.458;
var startZoom = 7;
var map;

function submitBtn() {
    document.getElementById('btnSend').click();
}

function setOffsetValueOnObject(objName) {
    window.document.all[objName].value = getLocalOffset();
}

function getLocalOffset() {
    var myDate = new Date();
    var offset = -1 * (myDate.getTimezoneOffset() / 60);
    return offset;
}

function addMarker(latitude, longitude, description) 
{
    var marker = new GMarker(new GLatLng(latitude, longitude));
    GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(description); } );
    map.addOverlay(marker);
}

function addLocationMarker(location) {
    //the icon;
    //    alert(location.imgurl);
    var icon = new GIcon();
    icon.image = location.imgurl;
    icon.iconSize = new GSize(12, 20);
    icon.iconAnchor = new GPoint(12, 20);
    icon.infoWindowAnchor = new GPoint(12, 4);
    //alert(icon.image);  
    var marker = new GMarker(new GLatLng(location.latitude, location.longitude), icon);
    GEvent.addListener(marker, 'click',
            function() {
                var strBasicHtml = '<fieldset style="width:150px; font-family:Verdana; font-size:7pt; text-align:left;">'
                    + '  <legend>Datos</legend>'
                    + '  <label for="name">Equipo:</label>'
                    + '  <input type="text" id="name" style="width:95%;font-size:7pt; text-align:right;" readonly="readonly" value="' + location.equipmentName + '"/>'
                    + '  <label for="timestamp">Timestamp:</label>'
                    + '  <input type="text" id="timestamp" style="width:95%;font-size:7pt; text-align:right;" readonly="readonly" value="' + location.timestamp + '"/>'
                    + '  <label for="latitude">Latitud:</label>'
                    + '  <input type="text" id="latitude" style="width:95%; font-size:7pt; text-align:right;" readonly="readonly" value="' + location.tlatitude + '"/>'
                    + '  <label for="longitude">Longitud:</label>'
                    + '  <input type="text" id="longitude" style="width:95%; font-size:7pt; text-align:right;" readonly="readonly" value="' + location.tlongitude + '"/>'
                    + '  <label for="altitude">Altitud:</label>'
                    + '  <input type="text" id="altitude" style="width:95%; font-size:7pt; text-align:right;" readonly="readonly" value="' + location.altitude + '"/>'
                    + '  <label for="speed">Velocidad:</label>'
                    + '  <input type="text" id="speed" style="width:95%; font-size:7pt; text-align:right;" readonly="readonly" value="' + location.speed + '"/>'
//                    + '  <label for="heading">Rumbo:</label>'
//                    + '  <input type="text" id="heading" style="width:95%; font-size:7pt; text-align:right;" readonly="readonly" value="' + location.heading + '"/>'
                    + '  <label for="event">Evento:</label>'
                    + '  <input type="text" id="event" style="width:95%; font-size:7pt; text-align:right;" readonly="readonly" value="' + location.event + '"/>'
                //                    + '  <label for="obs1">Obs1:</label>'
                //                    + '  <input type="text" id="obs1" style="width:95%; font-size:7pt; text-align:right;" readonly="readonly" value="' + location.obs1 + '"/>'
                //                //+'  <label for="link">Ver:</label>'
                //+'  <a href="' + location.link + '" id="alink" target="_MainArea">ver pantalla de detalle</a>'
                    + '</fieldset>';
                var InternalText = getVesselDetail(location.equipmentid);
//                var strMoreInfoHtml = '<fieldset style="width:150px; font-family:Verdana; font-size:7pt; text-align:left;">'
//                    + '<input type="text" id="hola" value="hola"></input>' + '</fieldset>';
                var infoTabs = [
                    new GInfoWindowTab("Basic", strBasicHtml),
                    new GInfoWindowTab("Info", InternalText)
                ];
                //marker.openInfoWindowHtml(strHtml);
                marker.openInfoWindowTabsHtml(infoTabs, { selectedTab: 0, maxWidth: 150 });
            }
            );
    map.addOverlay(marker);
}

function init() {
    var i = 0;
    var name = "";
    if (GBrowserIsCompatible()) {
        var location = new GLatLng(centerLatitude, centerLongitude);
        //get the map
        map = new GMap2(document.getElementById("map"));
        if (map == null)
            alert('el mapa no se ha cargado efectivamente');
        //add default if nothing else could be shown
        //        alert(markers.length);
        if (!(markers.length > 0))
            addMarker(centerLatitude, centerLongitude, "Centro");
        else {
            for (id = 0; id < markers.length; id++) {
                addLocationMarker(markers[id]); //, markers[id].longitude, markers[id].name);
            }
            if (ccenter.centerlat != null)            
                location = new GLatLng(ccenter.centerlat, ccenter.centerlong);            
            else
                location = new GLatLng(markers[0].latitude, markers[0].longitude);
//            alert(location.toString());
            if (polylines.length > 0) {
                for (i = 0; i < polylines.length; i++) {
                    map.addOverlay(polylines[i]);
                }
            }
        }
        //add the zoom control
        map.addControl(new GLargeMapControl());
        //add the type control
        map.addControl(new GMapTypeControl());
        //add the scale control
        map.addControl(new GScaleControl());
        //set the type
        map.setMapType(G_HYBRID_MAP);
        //set center
        map.setCenter(location, startZoom);
        //set time offset of client
        setOffsetValueOnObject("txtTimeOffset");
    }
}

function getVesselDetail(equipmentid) {
    var strMoreInfoHtml = "";
    var infoVessel;
    var found = true;
    switch (equipmentid) {
        case '2380046':
            infoVessel = ['17', '1260549618_1.jpg', 'SAGRES - PORTUGAL', 'Lisboa', '90.80', '12.02', '5.5', 'Acero', '1949', '1935', '218'];
            break;
        case '2370075':
            infoVessel = ['10', '1260545703_1.jpg', 'CUAUHTÉMOC -MÉXICO', 'Acapulco', '90.5', '12', '5.4', 'Acero', '1800', '2368', '226'];
            break;
        case '2380219':
            infoVessel = ['9', '1259794663_1.jpg', 'CISNE BRANCO -BRASIL', 'Rio de Janeiro', '76', '10.5', '4.8', 'Acero', '1038', '2195', '60'];
            break;
        case '2380241':
            infoVessel = ['16', '1260549354_1.jpg', 'LIBERTAD - ARGENTINA', 'Buenos Aires', '103.7', '14', '6.7', 'Acero', '3765', '2683', '314'];
            break;
        case '2380238':
            infoVessel = ['11', '1260546836_1.jpg', 'ESMERALDA - CHILE', 'Valparaiso', '113', '13.11', '6.9', 'Acero', '3610', '2870', '314'];
            break;
        case '2361382':
            infoVessel = ['13', '1260547977_1.jpg', 'GLORIA - COLOMBIA', 'Cartagena de Indias', '76', '10.06', '4.87', 'Acero', '1300', '1400', '155'];
            break;
        case '2361381':
            infoVessel = ['18', '1260550219_1.jpg', 'SIMÓN BOLIVAR- VENEZUELA', 'La Guaira', '82.4', '10.6', '4.4', 'Acero', '1240', '1900', '188'];
            break;
        case '2380156':
            infoVessel = ['8', '1259793741_1.jpg', 'CAPITAN MIRANDA - URUGUAY', 'Montevideo', '61', '8', '4.2', 'Acero', '780', '850', '92'];
            break;
        case '2380149':
            infoVessel = ['14', '1260548883_1.jpg', 'GUAYAS - ECUADOR', 'Guayaquil', '78.4', '10.7', '4.5', 'Acero', '1217', '1611', '187'];
            break;
        case '2380224':
            infoVessel = ['12', '1260547702_1.jpg', 'EUROPA - HOLANDA', 'La Haya', '56', '7.45', '3.9', 'Acero', '575', '900', '62'];
            break;
        default:
            strMoreInfoHtml = '<table width="100%" border="0" cellspacing="0" cellpadding="0" style="width:150px; font-family:Verdana; font-size:7pt; text-align:left;">'
            + '<tr><td>NO HAY INFORMACION DISPONIBLE</td></tr></table>';
            found = false;
            break;
    }
    if (found)    
    strMoreInfoHtml = '<table width="100%" border="0" cellspacing="0" cellpadding="0" style="width:150px; font-family:Verdana; font-size:7pt; text-align:left;">'
         + '<tr> '
         + ' <td>'
         + '   <a href="http://www.velasudamerica2010.com/veleros_detalle.php?id_velero=' + infoVessel[0] + '" target="_new">'
         + '     <img src="http://www.velasudamerica2010.com/fotos/' + infoVessel[1] + '" border="0" alt="click para ver los detalles" />'
         + '   </a>'
         + ' </td>'
         + '</tr>'
         + '<tr> '
         + ' <td>' + infoVessel[2] + '</td>'
         + '</tr>'
         + '<tr> '
         + ' <td>Puerto: ' + infoVessel[3] + '</td>'
         + '</tr>'
         + '<tr> '
         + '<td> '
         + '<ul>'
         + '<li>Eslora: ' + infoVessel[4] + ' m '
         + '<li>Manga: ' + infoVessel[5] + ' m '
         + '<li>Calado: ' + infoVessel[6] + ' m'
         + '<li>Casco: ' + infoVessel[7] + ' '
         + '<li>Desplazamiento: ' + infoVessel[8] + ' t '
         + '<li>Sup. Vélica: ' + infoVessel[9] + ' m2 '
         + '<li>Tripulación Total: ' + infoVessel[10] + ''
         + '</ul>'
         + '</td>'
         + '</tr>'
         + '</table>';
    return strMoreInfoHtml;
}

window.onload = init;
window.onunload = GUnload;