<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no" />
  <title>Dímelo</title>
  <link rel="stylesheet" type="text/css" media="screen" href="../style.css"/>

  <link rel="stylesheet" href="../style/buttons.css">
  <link rel="stylesheet" href="../style/confirm.css">
  <link rel="stylesheet" href="../style/headers.css">
  <link rel="stylesheet" href="../style/input_areas.css">

  <link rel="stylesheet" href="../style/icons.css">

  <link rel="stylesheet" href="../transitions.css">
  
  <link rel="stylesheet" href="../util.css">
  <link rel="stylesheet" href="../fonts.css">
  <style>
    #index {
      height: 100%;
    }
    [data-position="right"] {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      transform: translateX(100%);
      -webkit-transform: translateX(100%);
      z-index: 15;
      z-index: 100;
    }
    section[role="region"][data-position="right"] {
      position: absolute;
    }
    [data-position="right"].current {
      animation: rightToCurrent 0.4s forwards;
      -webkit-animation: rightToCurrent 0.4s forwards;
    }
    [data-position="right"].right {
      animation: currentToRight 0.4s forwards;
      -webkit-animation: currentToRight 0.4s forwards;
    }
    [data-position="current"].left {
      animation: currentToLeft 0.4s forwards;
      -webkit-animation: currentToLeft 0.4s forwards;
    }
    [data-position="current"].current {
      animation: leftToCurrent 0.4s forwards;
      -webkit-animation: leftToCurrent 0.4s forwards;
    }
    [data-position="back"] {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
      opacity: 0;

    }
    [data-position="back"].fade-in {
      z-index: 120;
      animation: fadeIn 0.2s forwards;
      -webkit-animation: fadeIn 0.2s forwards;
    }
    [data-position="back"].fade-out {
      animation: fadeOut 0.2s forwards;
      -webkit-animation: fadeOut 0.2s forwards;
    }

    #headers section[role="region"] {
      margin-bottom: 1.5rem;
    }
    #headers section[role="region"]:not(#drawer) {
      display: inline;
    }
    #headers article header:first-child {
      margin-top: 1.5rem;
    }
    #headers section[role="region"] header h2 {
      margin: 0 0 1.5rem 0;
    }

    [data-type=list] li>a:active { 
      background-color: transparent;
    }

    #abc_section, #numbers_section, #spelling_section {
      position: fixed;
      -moz-transform: translateX(100%);
      -moz-transition: -moz-transform 1s;
    }

    #abc_section:target, #numbers_section:target, #spelling_section:target {
      -moz-transform: translateX(0%);
    }

    .primary:target {
      -moz-transform: translateX(0%);
    }
  </style>
</head>
<body>
  <section id="index" data-position="current">
    <picture>
      <img src="../images/fondo_2.png" width="100%" />
    </picture>
    <picture>
      <a href="#abc_section"><img id="abc" src="../images/abc.png" width="20%" /></a>
    </picture>
    <picture>
      <a href="#numbers_section"><img id="numeros" src="../images/123.png" width="20%" /></a>
    </picture>
    <picture>
      <a href="#spelling_section"><img id="deletreo" src="../images/deletreo.png" width="20%" /></a>
    </picture>
    <iframe id="marketing" src="http://www.lionteamsoft.com.mx/Respaldo/banner/images/banner.html" height="40" width="100%" frameborder="0" scrolling="0"></iframe>
  </section>

  <div class="theme-B">
    <section data-position="right" id="abc_section">
      <section role="region">
        <header class="fixed">
          <a href="#primary" class="icon icon-back">back</a>
          <h1>ABC</h1>
        </header>
        <article class="scrollable header">
        <ul class="abc_button">
          <li>
            <span class="button icon icon-dialog">
              <span id="option"></span>
              <select name="region.current" id="selection" onblur="action_1()" required>
                <option value="a.png">A</option>
                <option value="b.png">B</option>
                <option value="c.png">C</option>
                <option value="d.png">D</option>
                <option value="e.png">E</option>
                <option value="f.png">F</option>
                <option value="g.png">G</option>
                <option value="h.png">H</option>
                <option value="i.png">I</option>
                <option value="j.gif">J</option>
                <option value="k.gif">K</option>
                <option value="l.png">L</option>
                <option value="m.png">M</option>
                <option value="n.png">N</option>
                <option value="1.gif">Ñ</option>
                <option value="o.png">O</option>
                <option value="p.png">P</option>
                <option value="q.gif">Q</option>
                <option value="r.png">R</option>
                <option value="s.png">S</option>
                <option value="t.png">T</option>
                <option value="u.png">U</option>
                <option value="v.png">V</option>
                <option value="w.png">W</option>
                <option value="x.gif">X</option>
                <option value="y.png">Y</option>
                <option value="z.gif">Z</option>
              </select>
            </span>
          </li>
        </ul>
        <picture>
          <img src="" id="imagen" width="48%">
        </picture>
        <audio src="" autoplay id="sound"></audio>
        </article>
      </section>
    </section>
  </div>

  <div class="theme-B">
    <section data-position="right" id="numbers_section">
      <section role="region">
        <header class="fixed">
          <a href="#primary" class="icon icon-back">back</a>
          <h1>Números</h1>
        </header>
        <article class="scrollable header">
        <ul class="numbers_button">
          <li>
            <span class="button icon icon-dialog">
              <span id="option_2"></span>
              <select name="region.current" id="selection_2" onblur="action_2()" required>
                <option value="1.png">1</option>
                <option value="2.png">2</option>
                <option value="3.png">3</option>
                <option value="4.png">4</option>
                <option value="5.png">5</option>
                <option value="6.png">6</option>
                <option value="7.png">7</option>
                <option value="8.png">8</option>
                <option value="9.gif">9</option>
                <option value="a.gif">10</option>
              </select>
            </span>
          </li>
        </ul>
        <picture>
          <img src="" id="imagen_2" width="48%">
        </picture>
        <audio src="" autoplay id="sound_2"></audio>
        </article>
      </section>
    </section>
  </div>

  <div class="theme-B">
    <section data-position="right" id="spelling_section">
      <section role="region">
        <header class="fixed">
          <a href="#primary" class="icon icon-back">back</a>
          <h1>Deletreo</h1>
        </header>
        <article class="scrollable header">
        <form role="search" class="bottom" id="spelling_form" onSubmit="value(); return false;">
        <button type="submit">Deletrear</button>
        <p>
          <textarea placeholder="Introduce texto" required id="string"></textarea>
        </p>
      </form>
        <picture>
          <img src="" id="imagen_3" width="35%">
          <img src="" id="imagen_4" width="35%">
        </picture>
        </article>
      </section>
    </section>
  </div>

  <script type="text/javascript" src="../js/jquery-2.0.3.min.js"></script>
  <script type="text/javascript">
    function newWindow() {
      location.href="#primary";
    }

    function action_1() {
      letter = document.getElementById("selection").value;
      var option = letter.substring(0,1);
      document.getElementById('imagen').src = "../images/abc/"+letter;
      document.getElementById('sound').src = "../sound/sound_letters/"+option+".mp3";
    }

    function action_2() {
      number = document.getElementById("selection_2").value;
      var option_2 = number.substring(0,1);
      document.getElementById('imagen_2').src = "../images/numbers/"+number;
      document.getElementById('sound_2').src = "../sound/sound_numbers/"+option_2+".mp3";
    }

    function spell(texto) {
      array_imagen = new Array();
      array_imagenx = new Array();
      for(var i = 0; i < texto.length; i++)
      {
        var caracter = texto.charAt(i);
        if(caracter == 'j' || caracter == 'J' || caracter == 'k' || caracter == 'K' || caracter == 'q' || caracter == 'Q' || caracter == 'x' || caracter == 'X' || caracter == 'z' || caracter == 'Z')
        {
          array_imagen[i] = new Image();
          array_imagen[i].src = "../images/abc/"+caracter+".gif";
          array_imagenx[i] = new Image();
          array_imagenx[i].src = "../images/abc/letras/"+caracter+".png";
        }
        else if(caracter == 'ñ' || caracter == 'Ñ')
        {
          array_imagen[i] = new Image();
          array_imagen[i].src = "../images/abc/1.gif";
          array_imagenx[i] = new Image();
          array_imagenx[i].src = "../images/abc/letras/ene.png";
        }
        else if(caracter == ' ')
        {
          array_imagen[i] = new Image();
          array_imagen[i].src = "../images/abc/9.png";
          array_imagenx[i] = new Image();
          array_imagenx[i].src = "../images/abc/letras/9.png";
        }
        else
        {
          array_imagen[i] = new Image();
          array_imagen[i].src = "../images/abc/"+caracter+".png";
          array_imagenx[i] = new Image();
          array_imagenx[i].src = "../images/abc/letras/"+caracter+".png";
        }
      }
    }

    contador = 0
    
    function value() {
      texto = document.getElementById("string").value;
      var result = texto.toLowerCase(); 
      spell(result+"9");
      document.getElementById('imagen_3').src = array_imagen[contador].src;
      document.getElementById('imagen_4').src = array_imagenx[contador].src;
      contador ++;
      contador = contador % array_imagen.length;
      setTimeout("value()",3000);
    }
  </script>

  <script type="text/javascript">
    $( "#selection" ).change(function(){
      var str = "";
      $(this).find( "option:selected" ).each(function(){
      str = $( this ).text();
    });
      $( "#option" ).text( str );}).change();

    $( "#selection_2" ).change(function(){
      var str = "";
      $(this).find( "option:selected" ).each(function(){
      str = $( this ).text();
    });
      $( "#option_2" ).text( str );}).change();
  </script>
</body>
</html>

