<?php get_header(); ?>

<div id="gallery">
	<div class="bg_line"></div>	
</div>

<div id="gallery-pane">
    <img src="<?php bloginfo('template_directory'); ?>/images/blank.gif" width="500" height="375" />
</div>                                                      
 
  <div id="section-container">
        <div class="section">
        	<!--<img src="images/bg_parallax.png" id="section-parallax" width="683" height="810" />-->
            <div id="inicio">
            	<div class="bg_inicio">
          		<div class="container_12">
              			<div class="inicio_introduccion grid_4">
                        <h2>Sistema de Automatización de parqueos</h2>
                        <p>Esta máquina ha sido diseñada para suplir los requerimientos tanto de pequeños estacionamientos como estacionamientos de alto tránsito vehicular, donde se requiere alto rendimiento.</p>
                    </div>
                    <div class="clear"><!--clear--></div>
                </div>
				  <a class="tooltip_triggers dispensadora-trigger" href="#dispensadora">Download now</a>
                    <div class="tooltip" style="position: absolute; left: 550px; opacity: 0; top: 200px; display:none; ">
                        <div class="tooltip_content">
                            <h3>Dispensadora ESPARK</h3>
                            <p>La dispensadora de código de barras ESPark es un dispositivo de control de ingreso para estacionamientos el cual emite tickets para control del tiempo de permanencia dentro del estacionamiento.</p>
                        </div>
                        <div class="tooltip_image">    
                      		<img src="<?php bloginfo('template_directory'); ?>/images/tooltip_dispensadora.png" alt="dispensadora" />
                        </div>
                        <div class="clear"><!--clear--></div>    
                    </div>    
                    <!--<a class="tooltip_triggers barrera-trigger" href="#barrera">Barrera</a>
                    <div class="tooltip" style="position: absolute; left: 550px; opacity: 0; top: 200px; display:none; ">
                    </div>-->
                    <a class="tooltip_triggers estacion-trigger" href="#estacion">Download now</a>
                    <div class="tooltip" style="position: absolute; left: 550px; opacity: 0; top: 200px; display:none; ">
                        <div class="tooltip_content">
                            <h3>Estación de pago ESPARK</h3>
                            <p>El gabinete cuenta con la posibilidad de crecer y contar con dispensadores de billetes para cambio y otras aplicaciones que se desee dar al equipo.</p>
                        </div>
                        <div class="tooltip_image">    
                      		<img src="<?php bloginfo('template_directory'); ?>/images/tooltip_estacion-pago.png" alt="estacion de pago" />
                        </div>
                        <div class="clear"><!--clear--></div>                            
                    </div>
                    <a class="tooltip_triggers validadora-trigger" href="#validadora">Download now</a>
                    <div class="tooltip" style="position: absolute; left: 550px; opacity: 0; top: 200px; display:none; ">
                        <div class="tooltip_content">
                            <h3>Validadora ESPARK</h3>
                            <p>Ha sido diseñada para suplir los requerimientos tanto de pequeños estacionamientos como estacionamientos de alto tránsito vehicular, donde se requieren equipos de alto rendimiento.</p>
                        </div>
                        <div class="tooltip_image">    
                      		<img src="<?php bloginfo('template_directory'); ?>/images/tooltip_validadora.png" alt="validadora" />
                        </div>
                        <div class="clear"><!--clear--></div>                          
                    </div>
                    <a class="tooltip_triggers cobro-trigger" href="#sistema-cobro">Download now</a>
                    <div class="tooltip" style="position: absolute; left: 550px; opacity: 0; top: 200px; display:none; ">
                        <div class="tooltip_content">
                            <h3>Sistema de cobro atendido</h3>
                            <p>Ha sido diseñada para suplir los requerimientos tanto de pequeños estacionamientos como estacionamientos de alto tránsito vehicular, donde se requieren equipos de alto rendimiento.</p>
                        </div>
                        <div class="tooltip_image">    
                      		<img src="<?php bloginfo('template_directory'); ?>/images/tooltip_sistema-cobro.png" alt="sistema de cobro atendido" />
                        </div>
                        <div class="clear"><!--clear--></div>                         
                    </div>                                        
                </div>
            </div>    
        </div><!--inicio-->
        
        <div class="section bg_white">
        	<div class="bg_dispensadora">
	  			<div class="container_12" id="dispensadora">
				<?php $the_query = new WP_Query( 'pagename=dispensadora' ); ?>
                    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                    <div class="title grid_4">
                        <h2><?php the_title(); ?></h2>
                    </div>
                    <?php the_content() ?>
                    <?php endwhile; ?>
                <?php wp_reset_postdata(); ?>
                    <div class="clear"><!--clear--></div>       
                </div>
        	</div>
		</div><!--dispensadora-->
    
        <div class="section bg_white">
        	<div class="bg_estacion">            
          		<div class="container_12" id="estacion">
                <?php $the_query = new WP_Query( 'pagename=estacion-de-pago' ); ?>
                    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                    <div class="title grid_4">
                        <h2><?php the_title(); ?></h2>
                    </div>
                    <?php the_content() ?>
                    <?php endwhile; ?>
                <?php wp_reset_postdata(); ?>
                	<div class="clear"><!--clear--></div>
            	</div>
        	</div>
			<div class="clear"><!--clear--></div>
		</div><!--estacion-->    
    
    	<div class="section bg_white">
        	<div class="bg_validadora">            
            	<div class="container_12" id="validadora">
                <?php $the_query = new WP_Query( 'pagename=validadora' ); ?>
                    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                    <div class="title grid_4">
                        <h2><?php the_title(); ?></h2>
                    </div>
                    <?php the_content() ?>
                    <?php endwhile; ?>
                <?php wp_reset_postdata(); ?>
            </div>
        </div><!--validadora-->
        
    	<div class="section bg_white">
        	<div class="bg_sistema-cobro">            
            	<div class="container_12" id="sistema-cobro">
                    <?php $the_query = new WP_Query( 'pagename=sistema-de-cobro-atendido' ); ?>
                    	<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                    <div class="title grid_5">
                        <h2>Sistema de <br />cobro atendido</h2>
                    </div>
                    <?php the_content() ?>
                    	<?php endwhile; ?>
                	<?php wp_reset_postdata(); ?>
                </div>
            </div>
		</div><!--sistema-cobro-->

    	<div class="section bg_white">
        	<div class="bg_tabla">            
              <div class="container_12" id="tabla-comparativa">
              	<?php $the_query = new WP_Query( 'pagename=tabla-comparativa' ); ?>
                <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
              	<div class="title grid_4">
                	<h2><?php the_title(); ?></h2>
              	</div>
                <div class="clear"><!--clear--></div>
                <div class="grid_12 mt_6">
                    <div class="aspectos">ASPECTOS: <img src="<?php bloginfo('template_directory'); ?>/images/icon_positivos.png" width="12" height="12" alt="green" /> POSITIVOS <img src="<?php bloginfo('template_directory'); ?>/images/icon_negativo.png" width="12" height="12" alt="red" /> NEGATIVOS</div>
                    <?php the_content() ?>
                    <?php endwhile; ?>
                	<?php wp_reset_postdata(); ?>
            		</div>
                    <div class="clear"><!--clear--></div>
              	</div>
        	</div>
			<div class="clear"><!--clear--></div>
		</div><!--tabla-comparativa--> 

    <div class="section">       
        <div class="container_12" id="galeria">
            <div class="title grid_3">
                <h2>Galería</h2>
            </div>
            <div class="clear"><!--clear--></div>
            <a class="prev scrollable-link">&laquo; Atras</a>
            <div class="scrollable" id="scrollable">
                <div class="items">
                    <div>
                        <img src="<?php bloginfo('template_directory'); ?>/images/espark_funcionamiento_imagen_1.jpg" />
                        <img src="<?php bloginfo('template_directory'); ?>/images/espark_funcionamiento_imagen_2.jpg" />
                        <img src="<?php bloginfo('template_directory'); ?>/images/espark_funcionamiento_imagen_3.jpg" />
                    </div>
                    <div>
                        <img src="<?php bloginfo('template_directory'); ?>/images/espark_funcionamiento_imagen_4.jpg" />
                        <img src="<?php bloginfo('template_directory'); ?>/images/espark_funcionamiento_imagen_5.jpg" />
                        <img src="<?php bloginfo('template_directory'); ?>/images/espark_funcionamiento_imagen_6.jpg" />
                    </div>
                    <div>
                        <img src="<?php bloginfo('template_directory'); ?>/images/espark_funcionamiento_imagen_9.jpg" />
                        <img src="<?php bloginfo('template_directory'); ?>/images/espark_funcionamiento_imagen_10.jpg" />
                        <img src="<?php bloginfo('template_directory'); ?>/images/bg_gallery_1.gif" />
                    </div>
                    <div>
                        <img src="<?php bloginfo('template_directory'); ?>/images/bg_gallery_2.gif" />
                        <img src="<?php bloginfo('template_directory'); ?>/images/bg_gallery_dispensadora.jpg" />
                        <img src="<?php bloginfo('template_directory'); ?>/images/bg_gallery_estacion-cobro.jpg" />
                    </div>
                </div><!--items-->
            </div><!--scrollable-->
            <a class="next scrollable-link">Más imagenes &raquo;</a>
        </div>
    </div><!--galería-->
    
    <div class="section bg_white">
        <div class="bg_contacto">            
          <div class="container_12" id="contacto">
            <div class="title grid_4">
                <h2>Contáctenos</h2>
            </div>
            <div class="grid_7 prefix_1"><p class="entradilla">¿Posee dudas o comentarios? o le gustaría conocer más sobre nuestra solución en automatización de parqueos, no dude en contactarnos. Pronto resolveremos sus inquietudes.</p></div>
            <div class="clear"><!--clear--></div>
            <div class="grid_10 prefix_2 mt_4">
                <ul class="tabs">
                    <li><a href="#">Guatemala</a></li>
                    <li><a href="#">Honduras</a></li>
                    <li><a href="#">EE.UU.</a></li>
                </ul>
                <div class="panes">
                    <div class="pane">
                            <?php $the_query = new WP_Query( 'pagename=contacto-gua' ); ?>
								<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
									<?php the_content() ?>
								<?php endwhile; ?>
							<?php wp_reset_postdata(); ?>
                        <div class="clear"><!--clear--></div>
                    </div><!--pane-->
                    <div class="pane">
                     		<?php $the_query = new WP_Query( 'pagename=contacto-hn' ); ?>
								<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
									<?php the_content() ?>
								<?php endwhile; ?>
							<?php wp_reset_postdata(); ?>
                        <div class="clear"><!--clear--></div>
                    </div><!--pane-->
                    <div class="pane">
                     		<?php $the_query = new WP_Query( 'pagename=contacto-eeuu' ); ?>
								<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
									<?php the_content() ?>
								<?php endwhile; ?>
							<?php wp_reset_postdata(); ?>
                        <div class="clear"><!--clear--></div>
                    </div><!--pane-->                                        
                </div><!--panes-->       
                </div>
                <div class="clear"><!--clear--></div>                        
            </div>
        </div>                   
    </div><!--contacto-->      
        
</div><!--section-container-->

<?php get_footer(); ?>