// Json de descripcion y ubicacion de hoteles
var hotels = [{

        top_icon: '37em',
        left_icon: '39em',
        top_modal: '2em',
        left_modal: '41em',
        title: 'Boutique Hotel',
        img_bg: '../images/hotels/boutique-hotel.png',
        description: 'It is a type of hotel developed in Japan, which features many small bed-sized rooms known as capsules. Capsule hotels provide cheap, basic overnight accommodation for guests who do not require or who cannot afford larger, more expensive rooms offered by more conventional hotels.'
    },
    // 2
    {

        top_icon: '44em',
        left_icon: '48em',
        top_modal: '7em',
        left_modal: '50em',
        title: 'B&B',
        img_bg: '../images/hotels/b&b.png',
        description: 'A bed and breakfast (typically shortened to B&B or BnB) is a small lodging establishment that offers overnight accommodation and breakfast. Bed and breakfasts are often private family homes and typically have between four and eleven rooms, with six being the average. In addition, a B&B usually has the hosts living in the house.'
    },
    // 3
    {

        top_icon: '54em',
        left_icon: '41em',
        top_modal: '17em',
        left_modal: '43em',
        title: 'Resort',
        img_bg: '../images/hotels/resort_beach.png',
        description: 'A place to which people frequently or generally go for relaxation or pleasure, especially one providing rest and recreation facilities for vacationers.'
    },
    // 4
    {

        top_icon: '31em',
        left_icon: '30em',
        top_modal: '25em',
        left_modal: '33em',
        title: 'Castle',
        img_bg: '../images/hotels/castle.png',
        description: 'A castle is a type of fortified structure built during the Middle Ages predominantly by the nobility or royalty and by military orders. Scholars debate the scope of the word castle, but usually consider it to be the private fortified residence of a lord or noble.'
    },
    // 5
    {

        top_icon: '24em',
        left_icon: '28em',
        top_modal: '25em',
        left_modal: '30em',
        title: 'Tree house',
        img_bg: '../images/hotels/tree_house.png',
        description: 'A tree house, tree fort or treeshed is a platform or building constructed around, next to or among the trunk or branches of one or more mature trees while above ground level. Tree houses can be used for recreation, workspace, habitation, a hangout space and observation.'
    },
    // 6
    {

        top_icon: '17em',
        left_icon: '40em',
        top_modal: '19em',
        left_modal: '42em',
        title: 'Hostel',
        img_bg: '../images/hotels/hostel_ori.png',
        description: 'A hostel is a form of low-cost, short-term shared sociable lodging where guests can rent a bed, usually a bunk bed in a dormitory, with shared use of a lounge and sometimes a kitchen. Rooms can be mixed or single-sex and have private or shared bathrooms. Private rooms may also be available, but the property must offer dormitories to be considered a hostel.'
    },
    // 7
    {
        top_icon: '14em',
        left_icon: '21em',
        top_modal: '16em',
        left_modal: '23em',
        title: 'Motel',
        img_bg: '../images/hotels/motel.png',
        description: 'It is a hotel providing travelers with lodging and free parking facilities, typically a roadside hotel having rooms adjacent to an outside parking area or an urban hotel offering parking within the building.'
    },
    // 8
    {
        top_icon: '33em',
        left_icon: '59em',
        top_modal: '0em',
        left_modal: '61em',
        title: 'Business Class Hotel',
        img_bg: '../images/hotels/business-class-hotel.png',
        description: 'Business hotels are hotels located near the business district of the country/region they are in. They focus primarily on businesspersons, not providing too much family rooms. They are sure to provide you with fast internet and silent rooms, if they are good at least. Most of them also offer conference rooms, etc.'
    },
    // 9
    {
        top_icon: '50em',
        left_icon: '70em',
        top_modal: '13em',
        left_modal: '72em',
        title: 'Time Share / Condo Hotel',
        img_bg: '../images/hotels/time_condo-ori.png',
        description: 'A condo hotel, also known as a condotel, hotel condo or a contel, is a building which is legally a condominium but which is operated as a hotel, offering short term rentals, and which maintains a front desk. Condo hotels are typically high-rise buildings developed and operated as luxury hotels, usually in major cities and resorts.'
    },
    // 10
    {
        top_icon: '51em',
        left_icon: '109em',
        top_modal: '13em',
        left_modal: '72em',
        title: 'Glamping',
        img_bg: '../images/hotels/time_condo.png',
        description: 'Is a portmanteau of “glamorous” and “camping”, and describes a style of camping with amenities and, in some cases, resort-style services not usually associated with “traditional” camping. Glamping has become particularly popular with 21st-century tourists seeking the luxuries of hotel accommodation alongside “the escapism and adventure recreation of camping'
    },
    // 11
    {
        top_icon: '25em',
        left_icon: '99em',
        top_modal: '25em',
        left_modal: '61em',
        title: 'Lighthouse',
        img_bg: '../images/hotels/light-house.png',
        description: 'A lighthouse is a tower, building, or another type of structure designed to emit light from a system of lamps and lenses and to serve as a navigational aid for maritime pilots at sea or on inland waterways.'
    },
    // 12
    {
        top_icon: '31em',
        left_icon: '80em',
        top_modal: '0em',
        left_modal: '41em',
        title: 'CouchSurfingx',
        img_bg: '../images/hotels/couch-surfing.png',
        description: 'CouchSurfing is a service that connects members to a global community of travelers. Use CouchSurfing to find a place to stay or share your home and hometown with travelers. Couchsurfers organize regular events in 200,000 cities around the world. There is always something to do and new friends to meet.'
    },
    // 13
    {
        top_icon: '24em',
        left_icon: '61em',
        top_modal: '25em',
        left_modal: '63em',
        title: 'Inn',
        img_bg: '../images/hotels/inn.png',
        description: 'Inns are generally establishments or buildings where travelers can seek lodging, and usually, food and drink. Inns are typically located in the country or along a highway; before the advent of motorized transportation they also provided accommodation for horses.'
    },
    // 14
    {
        top_icon: '23em',
        left_icon: '70em',
        top_modal: '25em',
        left_modal: '72em',
        title: 'Apartment Hotel',
        img_bg: '../images/hotels/apartament-hotel.png',
        description: 'A hotel rents furnished apartments or suites suitable for housekeeping, on a weekly or more permanent basis, and usually supplies all hotel services.'
    },
    // 15
    {
        top_icon: '13em',
        left_icon: '71em',
        top_modal: '15em',
        left_modal: '33em',
        title: 'Cruise',
        img_bg: '../images/hotels/cruise.png',
        description: 'Cruise ships are large passenger ships used mainly for vacationing. Unlike ocean liners, which are used for transport, they typically embark on round-trip voyages to various ports-of-call, where passengers may go on tours known as “shore excursions.”'
    },
];


// esconde modal al darle click en el icono play
function hide_modal() {
    $(".modal-info").animate({
        opacity: 0
    }, 1000, function() {
        $(".modal-info").html();
    });
}



// Funcion que muestra la informacion del hotel al darle click en el icono X
function view_info(hotel) {
    // se oculta el formulario si estadsplegado
    setTimeout(function() {
        $("#crear_hotel").hide();
    }, 500);


    $(".modal-info").animate({
        opacity: 1
    }, 0, function() {
        $('.modal-info').html('<div class="container_modal" style="top:' + hotels[hotel].top_modal + ';left:' + hotels[hotel].left_modal + '"><h1>' + hotels[hotel].title + ' <i class="fas fa-play-circle icon-play-modal" onclick="hide_modal()"></i></h1></br><img src="' + hotels[hotel].img_bg + '" class="img-hotel"> <p class="text-description-modal">' + hotels[hotel].description + '</p></div>');
    });
}

$(document).ready(function() {

    setTimeout(function() {
        $(".pop-up-instructs").animate({
            opacity: 0,
            bottom: "9em",

        }, 2000, function() {
            $(".pop-up-instructs").hide();
        });
    }, 1000);


    // Por cada elemento del array crea un nuevo elemento en la clase bg-maps
    hotels.forEach(function(hotel, index) {
        // crea los hoteles 
        let items = $('.bg-maps').append('<img src="../images/icon-ubicacion.png" class="icon-ubicacion" onclick="view_info(' + index + ')" style="top:' + hotel.top_icon + ';left:' + hotel.left_icon + '">');
    });


    // Crea un nuevo hotel
    $('#crear_hotel').submit(function(event) {
        let top_icon = $('#top_icon').val();
        let left_icon = $('#left_icon').val();
        let top_modal = $('#top_modal').val();
        let left_modal = $('#left_modal').val();
        let title = $('#title').val();
        let description = $('#description').val();
        let indexes = parseInt(hotels.length);
        indexes = indexes;

        hotels.push({ top_icon: top_icon, left_icon: left_icon, top_modal: top_modal, left_modal: left_modal, title: title, img_bg: '../images/hotels/time_condo-ori.png', description: description });

        $('.bg-maps').append('<img src="../images/icon-ubicacion.png" class="icon-ubicacion" onclick="view_info(' + indexes + ')" style="top:' + top_icon + ';left:' + left_icon + '">');
        // se envia el formulario y se cierra
        setTimeout(function() {
            $("#crear_hotel").hide();
        }, 500);

        // Prevenir el envio de formulario
        event.preventDefault();
    });


    $('.button-create').click(function() {
        hide_modal();
        $("#crear_hotel").animate({
            opacity: 1,
            top: "10em",

        }, 500, function() {
            $("#crear_hotel").show();
        });
    });





});