$(document).ready(function () {
    var elemento = "";
    var primeravez = false




    $('#hexagonos div,nav div,#tituloSuite').click(function (e) {
        
      
        
        var elementResponsive = $(this).attr('id');
        var viewportWidth  = document.documentElement.clientWidth;
        if(viewportWidth > 1000){

        e.preventDefault();
        //alert("elemento: "+elemento);
        var centinela = false;

        if (elemento === "") {
            primeravez = true;
            console.log('primera ves');
            elemento = $(this).attr('id');

        } else {
            var elementoActual = $(this).attr('id');
            console.log('Elemento: ' + elemento);
            console.log('Elemento actual: ' + elementoActual);

            if (elemento === elementoActual) {
                centinela = true;
                console.log('Es el mismo elemento');
                //alert('Es el mismo');
            } else {
                centinela = false;
                //alert('no es el mismo');
                elemento = $(this).attr('id');
            }
        }

        //SI ES EL MISMO
        if (centinela) {


            //SI NO ES EL MISMO
        } else {


            if (primeravez) {
                setTimeout(function(){
                    var audio = new Audio('/js/zoom.mp3');
                    audio.play();
                },200)

                console.log('no es el mismo y es primera vez');
                if ($('#muevelo').css('display') == 'none') {
                    //alert('es none');
                    $('#muevelo').show();
                    $('#muevelo').css('right', 'unset').animate({

                        left: '1rem'
                    }, 300);

                    $('#tituloSuite').animate({
                        right: '6rem',
                        width: '200px',
                        height: '100px',
                        top: 0

                    }, 300, 'linear').css('left', 'unset');



                } else {
                    //alert('no es none');

                    $('#muevelo').animate({
                        top: '-100%'
                    }, 100).animate({
                        opacity: 0
                    }, 10).animate({

                        right: '-100%',
                        top: '5rem'
                    }, 10).fadeOut().animate({
                        opacity: 1,
                        left: '100%'
                    }, 10);

                    $('#tituloSuite').animate({
                        left: '1rem',
                        top: '7rem'

                    }, 700).css('right', 'unset');

                }
                primeravez = false;
            } else {
                setTimeout(function(){
                    var audio = new Audio('/js/zoom.mp3');
                    audio.play();
                },600)
                console.log('no es la primera vez y es distinto');


                $('#muevelo').animate({
                    top: '-100%'
                }, 300).animate({
                    opacity: 0
                }, 10).animate({

                    right: '-100%',
                    top: '5rem'
                }, 10).animate({
                    opacity: 1,
                    left: '100%'
                }, 10);
                $('#muevelo').show();
                $('#muevelo').css('right', 'unset').animate({

                    left: '1rem'
                }, 300);


















            }

        }

        SwitcheaElemento(elemento);
    }else{
        e.preventDefault();
        $('#hexagonos').fadeOut();
        $('#muevelo').fadeOut(100);
        $('#muevelo').fadeIn('fast');
        SwitcheaElemento(elementResponsive);
        $('#backbutton').fadeIn();
    }

    

    });

    $('#backbutton').click(function(){
        $('#hexagonos').fadeIn();
        $('#muevelo').fadeOut(100);
        $('#backbutton').fadeOut();
    });

    function SwitcheaElemento(id) {

        console.log('id : ' + id);
        setTimeout(function(){

        
        switch (id) {
            case 'hex1':
                console.log('entra');
                $('#muevelo').load('../pages/data.html #data');
                break;
            case 'hex2':
                $('#muevelo').load('../pages/data.html #loyal');

                break;
            case 'hex3':
                $('#muevelo').load('../pages/data.html #collect');

                break;
            case 'hex4':
                $('#muevelo').load('../pages/data.html #doctor');

                break;
            case 'hex5':
                $('#muevelo').load('pages/data.html #events');

                break;
            case 'hex6':
                $('#muevelo').load('pages/data.html #apps');
                break;
            case 'hex7':
                $('#muevelo').load('pages/data.html #sensor');
                break;
            case 'hex8':
                $('#muevelo').load('pages/data.html #maps');
                break;
            case 'hex9':
                $('#muevelo').load('pages/data.html #wagon');
                break;
            case 'hex10':
                $('#muevelo').load('pages/data.html #landing');
                break;
                v
            case 'hex11':
                $('#muevelo').load('pages/data.html #target');
                break;
            case 'hex12':
                $('#muevelo').load('pages/data.html #dron');
                break;
            case 'hex13':
                $('#muevelo').load('pages/data.html #ecom');
                break;
            case 'hex14':
                $('#muevelo').load('pages/data.html #stats');
                break;
            case 'hex15':
                $('#muevelo').load('pages/data.html #graph');
                break;
            case 'hex16':
                $('#muevelo').load('pages/data.html #media');
                break;
            case 'somos':
                $('#muevelo').load('pages/data.html #somos');
                break;
            case 'contacto':
                $('#muevelo').load('pages/data.html #contacto');
                break;
                case 'tituloSuite':
                $('#muevelo').load('pages/data.html #tituloSuites');
                break;
            default:
                break;
        }
    },100);

    }







});