var map;
var markers = new Array();
var markers2 = new Array();
var latlng;
var viaje1;

$().ready(function () {
    $(".btnReservar").button();
    $(".btnReservar").click(fnReservar);

    // TOOLTIPS DIVISAS
    $('.divisaTooltip').tooltip();

    // PESTAÑERO CODA-SLIDER
    var panelSeleccionado = 5;
    if ($('.tituloTab1').text() != '') { //viaje1.TituloPestana1 != '') {
        if (panelSeleccionado == 5) { panelSeleccionado = 1; }
    }
    if ($('.tituloTab2').text() != '') { //viaje1.TituloPestana2 != '') {
        if (panelSeleccionado == 5) { panelSeleccionado = 2; }
    }
    if ($('.tituloTab3').text() != '') { //viaje1.TituloPestana3 != '') {
        if (panelSeleccionado == 5) { panelSeleccionado = 3; }
    }
    if ($('.tituloTab4').text() != '') { //viaje1.TituloPestana4 != '') {
        if (panelSeleccionado == 5) { panelSeleccionado = 4; }
    }

    $('#coda-slider-5').codaSlider({
        dynamicArrows: false,
        dynamicTabs: false,
        firstPanelToLoad: panelSeleccionado
    });

    // MAPA
    var styles = [
        {
            stylers: [
                { hue: "#00ffe6" },
                { saturation: -20 }
            ]
        }, {
            featureType: "road",
            elementType: "geometry",
            stylers: [
                { lightness: 100 },
                { visibility: "simplified" }
            ]
        },
        {
            featureType: "water",
            stylers: [{ color: "#5B4947"}]
        },
        {
            featureType: "road",
            elementType: "labels",
            stylers: [{ visibility: "off"}]
        }
    ];

    latlng = new google.maps.LatLng(65, -19);
    var myOptions = {
        backgroundColor: '#5B4947',
        zoom: 5,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        mapTypeControl: false,
        streetViewControl: false,
        zoomControl: false,
        panControl: false,
        scaleControl: false,
        scaleControlOptions: { position: google.maps.ControlPosition.LEFT_BOTTOM }
    };

    map = new google.maps.Map(document.getElementById("divContenedorMapa"), myOptions);
    map.setOptions({ styles: styles });

    // Botón Ampliar Mapa
    var ampliarMapaDiv = BotonAmpliarMapa();
    ampliarMapaDiv.index = 1;
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(ampliarMapaDiv);
    google.maps.event.addDomListener(ampliarMapaDiv, 'click', function () {
        fnMostrarMapaAmpliado()
    });

    $('.thumbnails img').click(fnMostrarImagen);

    codViaje = $('.hdnCodViaje').val();
    fnMostrarViaje(codViaje);
});

function fnMostrarImagen() {
    var newImage = '<img src="/handlers/ObtenerImagen.ashx?id=' + $(this).attr('codimagen') + '" alt="' + $(this).attr('alt') + '" onload="fadeIn(this)" style="display:none" />';
    $('.galeria').append(newImage);
    var comentario = $(this).attr('comment');
    $('.letrero').animate({ height: '1px' }, 500, function () {
        $('#h3letrero').html(comentario);
        if (comentario != '') {
            $('.letrero').animate({ height: '26px' }, 500);
        }
    });
    //$('.galeria img').attr('src', '/handlers/ObtenerImagen.ashx?id=' + $(this).attr('codimagen'));    
    //$('.galeria img').hide();
}
function fadeIn(element) {
    $(element).fadeIn(1000);
}

function fnMostrarMapaAmpliado() {
    //$("#map_canvas2:ui-dialog").dialog("destroy");
    //$("#map_canvas2").dialog("destroy");

    $("#map_canvas2").dialog({
        height: 600,
        width: 800,
        position: ['center', 100],
        modal: true,
        draggable: true,
        resizable: false,
        show: "fade",
        hide: "fade"
    });

    var myOptions2 = {
        zoom: 6,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.HYBRID,
        streetViewControl: false,
        scaleControl: true,
        scaleControlOptions: { position: google.maps.ControlPosition.LEFT_BOTTOM }
    };
    map2 = new google.maps.Map(document.getElementById("map_canvas2"), myOptions2);

    for (var i = 0; i < viaje1.Localizaciones.length; i++) {
        var marker = añadirMarker2(viaje1.Localizaciones[i], i);
        markers2[i] = marker;
    }

    var rendererOptions = {
        suppressMarkers: true
    };
    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
    directionsDisplay.setMap(map2);
    var polyline = new google.maps.Polyline();
    polyline.setMap(map2);
    var origen;
    var destino;
    var puntosIntermedios = new Array();
    var routes = new Array();
    for (i = 0, j = markers.length; i < j; ++i) {
        if (!origen) {
            origen = markers[i].getPosition();
            routes.push(markers[i].getPosition());
        } else if (i == (j - 1)) {
            destino = markers[i].getPosition();
            routes.push(markers[i].getPosition());
        } else {
            var puntoIntermedio = {
                location: markers[i].getPosition()
            }
            puntosIntermedios.push(puntoIntermedio);
            routes.push(markers[i].getPosition());
        }
    }

    if (origen && destino) {
        var destinoReal = destino;
        if (viaje1.EsCircuito) {
            var puntoIntermedio = {
                location: destino
            }
            puntosIntermedios.push(puntoIntermedio);
            destinoReal = origen;
            routes.push(origen);
        }
        var directionsService = new google.maps.DirectionsService();
        var travelMode = google.maps.DirectionsTravelMode.DRIVING;
        switch (viaje1.TravelMode) {
            case 1:
                travelMode = google.maps.DirectionsTravelMode.DRIVING;
                break;
            case 2:
                travelMode = google.maps.DirectionsTravelMode.WALKING;
                break;
            case 3:
                travelMode = google.maps.DirectionsTravelMode.BICYCLING;
                break;
        }
        var request = {
            origin: origen,
            destination: destinoReal,
            waypoints: puntosIntermedios,
            travelMode: travelMode
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setOptions({
                    polylineOptions: { strokeColor: '#3B2927', strokeWeight: 5, strokeOpacity: 0.7 },
                    preserveViewport: true
                });
                directionsDisplay.setDirections(response);
            }
            else {
                polyline = new google.maps.Polyline({
                    path: routes
                            , map: map2
                            , strokeColor: '#0000ff'
                            , strokeWeight: 5
                            , strokeOpacity: 0.6
                            , clickable: false
                });
                var n = -400;
                var s = 400;
                var e = -400;
                var w = 400;
                for (var r = 0; r < routes.length; r++) {
                    if (routes[r].lat() > n) { n = routes[r].lat(); }
                    if (routes[r].lat() < s) { s = routes[r].lat(); }
                    if (routes[r].lng() > e) { e = routes[r].lng(); }
                    if (routes[r].lng() < w) { w = routes[r].lng(); }
                }
                var bounds = new google.maps.LatLngBounds(new google.maps.LatLng(s, w), new google.maps.LatLng(n, e));
                map2.fitBounds(bounds);
            }
        });
    }
    else {
        map2.setCenter(latlng);
    }
}

function BotonAmpliarMapa() {
    var controlDiv = document.createElement('DIV');
    controlDiv.style.padding = '5px';
    var controlUI = document.createElement('DIV');
    controlUI.style.backgroundColor = '#5B4947';
    controlUI.style.borderStyle = 'solid';
    controlUI.style.borderColor = '#666666';
    controlUI.style.borderWidth = '1px';
    controlUI.style.cursor = 'pointer';
    controlUI.style.textAlign = 'center';
    controlUI.style.filter = 'progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135,strength=2)';
    controlUI.style.fontWeight = 'bold';
    controlUI.style.color = '#FFF';
    controlUI.style.boxShadow = '2px 2px 2px 0px rgb(120,120,120)';
    controlUI.title = 'Visión ampliada del mapa';
    controlDiv.appendChild(controlUI);

    // Set CSS for the control interior
    var controlText = document.createElement('DIV');
    controlText.style.fontFamily = 'Arial,sans-serif';
    controlText.style.fontSize = '12px';
    controlText.style.fontWeight = 'bold';
    controlText.style.paddingLeft = '4px';
    controlText.style.paddingRight = '4px';
    controlText.style.paddingTop = '2px';
    controlText.style.paddingBottom = '2px';
    controlText.innerHTML = 'Ampliar';
    controlUI.appendChild(controlText);

    return controlDiv;
}

function fnMostrarViaje(codViaje) {
    $.ajax(
    {
        url: "/FichaViaje.aspx/ObtenerViaje1",
        type: "POST",
        data: "{'codViaje1':'" + codViaje + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            var viajes1 = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
            viaje1 = viajes1[0];
            if (viaje1) {
                //LOCALIZACIONES
                for (var i = 0; i < viaje1.Localizaciones.length; i++) {
                    var marker = añadirMarker(viaje1.Localizaciones[i], i);
                    markers[i] = marker;
                }

                var rendererOptions = {
                    suppressMarkers: true
                };
                var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
                directionsDisplay.setMap(map);
                var polyline = new google.maps.Polyline();
                polyline.setMap(map);
                var origen;
                var destino;
                var puntosIntermedios = new Array();
                var routes = new Array();
                for (i = 0, j = markers.length; i < j; ++i) {
                    if (!origen) {
                        origen = markers[i].getPosition();
                        routes.push(markers[i].getPosition());
                    } else if (i == (j - 1)) {
                        destino = markers[i].getPosition();
                        routes.push(markers[i].getPosition());
                    } else {
                        var puntoIntermedio = {
                            location: markers[i].getPosition()
                        }
                        puntosIntermedios.push(puntoIntermedio);
                        routes.push(markers[i].getPosition());
                    }
                }
                if (origen && destino) {
                    var destinoReal = destino;
                    if (viaje1.EsCircuito) {
                        var puntoIntermedio = {
                            location: destino
                        }
                        puntosIntermedios.push(puntoIntermedio);
                        destinoReal = origen;
                        routes.push(origen);
                    }
                    var directionsService = new google.maps.DirectionsService();
                    var travelMode = google.maps.DirectionsTravelMode.DRIVING;
                    switch (viaje1.TravelMode) {
                        case 1:
                            travelMode = google.maps.DirectionsTravelMode.DRIVING;
                            break;
                        case 2:
                            travelMode = google.maps.DirectionsTravelMode.WALKING;
                            break;
                        case 3:
                            travelMode = google.maps.DirectionsTravelMode.BICYCLING;
                            break;
                    }
                    var request = {
                        origin: origen,
                        destination: destinoReal,
                        waypoints: puntosIntermedios,
                        travelMode: travelMode                        
                    };
                    directionsService.route(request, function (response, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            directionsDisplay.setOptions({ 
                                polylineOptions: { strokeColor: '#3B2927', strokeWeight: 5, strokeOpacity: 0.7 },
                                preserveViewport: true
                            });
                            directionsDisplay.setDirections(response);
                        }
                        else {
                            polyline = new google.maps.Polyline({
                                path: routes
                                , map: map
                                , strokeColor: '#4B3937'
                                , strokeWeight: 5
                                , strokeOpacity: 0.6
                                , clickable: false
                            });
                            var n = -400;
                            var s = 400;
                            var e = -400;
                            var w = 400;
                            debugger;
                            for (var r = 0; r < routes.length; r++) {
                                if (routes[r].lat() > n) { n = routes[r].lat(); }
                                if (routes[r].lat() < s) { s = routes[r].lat(); }
                                if (routes[r].lng() > e) { e = routes[r].lng(); }
                                if (routes[r].lng() < w) { w = routes[r].lng(); }
                            }
                        }
                    });
                }
            }
        },
        error : function() { alert("Error");}

    })
};

function añadirMarker(localizacion, indice) {
    var location = new google.maps.LatLng(localizacion.Latitud, localizacion.Longitud);
    var imagen = '/images/markers/number_' + (indice + 1).toString() + '.png';
    var marker = new google.maps.Marker({
        position: location,
        title: localizacion.Titulo,
        html: '<div><p><b>' + localizacion.Titulo + '</b><br />' + localizacion.Descripcion + '</div>',
        map: map,
        icon: imagen
    });

    google.maps.event.addListener(marker, 'click', function () {
        if (!popup2) {
            popup2 = new google.maps.InfoWindow({});
        }
        popup2.setContent(this.html);
        popup2.open(map, marker);
    })
    return marker;
};

function añadirMarker2(localizacion, indice) {
    var location = new google.maps.LatLng(localizacion.Latitud, localizacion.Longitud);
    var imagen = '/images/markers/number_' + (indice + 1).toString() + '.png';
    var marker = new google.maps.Marker({
        position: location,
        title: localizacion.Titulo,
        html: '<div><p><b>' + localizacion.Titulo + '</b><br />' + localizacion.Descripcion + '</div>',
        map: map2,
        icon: imagen
    });

    google.maps.event.addListener(marker, 'click', function () {
        if (!popup) {
            popup = new google.maps.InfoWindow({});
        }
        popup.setContent(this.html);
        popup.open(map2, marker);
    })

    return marker;
};

function fnEnviarAmigo() {
    //alert('Send');
    // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
    $("#divEnviarAmigo:ui-dialog").dialog("destroy");
    //alert(translate(btnSend));

    var nombreUsuario = $("#txtTuNombre"),
			emailUsuario = $("#txtTuEmail"),
			nombreAmigo = $("#txtAmigoNombre"),
			emailAmigo = $("#txtAmigoEmail"),
            allFields = $([]).add(nombreUsuario).add(emailUsuario).add(nombreAmigo).add(emailAmigo),
			tips = $(".validateTips");

    function updateTips(t) {
        tips
				.text(t)
				.addClass("ui-state-highlight");
        setTimeout(function () {
            tips.removeClass("ui-state-highlight", 1500);
        }, 500);
    }

    function checkLength(o, n, min, max) {
        if (o.val().length > max || o.val().length < min) {
            o.addClass("ui-state-error");
//            updateTips(n + " length must be between " +
//					min + " and " + max + ".");
            return false;
        } else {
            return true;
        }
    }

    function checkRegexp(o, regexp, n) {
        if (!(regexp.test(o.val()))) {
            o.addClass("ui-state-error");
            updateTips(n);
            return false;
        } else {
            return true;
        }
    }

    $(".divEnviarAmigo").dialog({
        autoOpen: true,
        height: 360,
        width: 350,
        modal: true,
        show: "fade",
        hide: "fade",
        buttons: {
            'Send': function () {
                var bValid = true;
                allFields.removeClass("ui-state-error");

                bValid = bValid && checkLength(nombreUsuario, "Your name", 1, 50);
                bValid = bValid && checkLength(emailUsuario, "Your email", 3, 50);
                bValid = bValid && checkLength(nombreAmigo, "Your friend's name", 1, 50);
                bValid = bValid && checkLength(emailAmigo, "Your friend's email", 3, 50);

                bValid = bValid && checkRegexp(emailUsuario, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "Your email is written incorrectly.");
                bValid = bValid && checkRegexp(emailAmigo, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "Your friend's email is written incorrectly.");

                if (bValid) {
                    $.ajax(
                            {
                                url: "/FichaViaje.aspx/RecomendarAmigo",
                                type: "POST",
                                data: "{'codViaje':'" + codViaje + "','nombre':'" + nombreUsuario.val() + "','email':'" + emailUsuario.val() + "','nombreAmigo':'" + nombreAmigo.val() + "','emailAmigo':'" + emailAmigo.val() + "'}",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (response) {
                                    if (response) {
                                        alert('Your recommendation has been successfully submitted');
                                    }
                                    else {
                                        alert('<b>ERROR</b>: a problem ocurred submitting your request');
                                    }
                                },
                                error: function () { alert(arguments[2]); }
                            });
                    $(this).dialog("close");
                }
            },
            'Cancel': function () {
                $(this).dialog("close");
            }
        },
        close: function () {
            allFields.val("").removeClass("ui-state-error");
        }
    });
}

function fnReservar() {
    $(".btnReservar").button("disable");
    $('#txtResultadoReserva').html('');
    $('#imgAjaxLoading').css('display', 'block');
    $('#txtResultadoReserva').html('');
    var nombre = $('.txtNombre').val();
    var email = $('.txtEmail').val();
    var tlf = $('.txtTelefono').val();
    var observaciones = $('.txtObservaciones').val();

    $.ajax(
    {
        url: "/FichaViaje.aspx/PreReservar",
        type: "POST",
        data: "{'codViaje':'" + codViaje + "','nombre':'" + nombre + "','email':'" + email + "','telefono':'" + tlf + "','observaciones':'" + observaciones + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            if (response) {
                $('#txtResultadoReserva').html('Your request has been succesfully submitted');
            }
            else {
                $('#txtResultadoReserva').html('<b>ERROR</b>: a problem ocurred submitting your request');
            }
            $('#imgAjaxLoading').css('display', 'none');
            $(".btnReservar").button("enable");
        },
        error: function () {
            alert(arguments[2]);
            $('#imgAjaxLoading').css('display', 'none');
            $(".btnReservar").button("enable");
        }
    });
}