<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
        <title>ESPARK - Sistema de automatizacion de parqueos</title>
		
		<meta name="description" content="Sistema de automatizacion de parqueos" />
		<meta name="keywords" content="Automatizacion, parqueos" />
		<meta name="author" content="Javier Castillo" />
		<meta name="copyright" content="2012 Electronics Shop" />
		
        <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
		<link rel="profile" href="http://gmpg.org/xfn/11" />
    	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

		<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.4.3.min.js"></script>
        <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.scrollTo-1.4.2-min.js"></script>                  
		<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.localscroll-1.2.7-min.js"></script>
        <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/init.js"></script>
		<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.tools.min.js"></script>
		<script type="text/javascript">	
			$(document).ready(function() {
				$(".tooltip_triggers").tooltip({ effect: 'slide'})
					.dynamic({ bottom: { direction: 'down', bounce: true } });
				$("ul.tabs").tabs("div.panes > div", {effect: 'fade', fadeOutSpeed: 400});
				$(".scrollable").scrollable({ vertical: true, mousewheel: true });

				$(".items img").click(function() {
					if ($(this).hasClass("active")) { return; }
				
					var url = $(this).attr("src").replace("_t", "");
				
					var wrap = $("#gallery-pane").fadeTo("medium", 0.5);
				
					var img = new Image();
				
					img.onload = function() {
				
						wrap.fadeTo("fast", 1);
				
						wrap.find("img").attr("src", url);
				
					};
				
					img.src = url;
				
					$(".items img").removeClass("active");
					$(this).addClass("active");
				
				}).filter(":first").click();
			});
        </script>
        <?php wp_head(); ?>
</head>

<body>
<div id="header">
	<h1><a href="#inicio"><img src="<?php bloginfo('template_directory'); ?>/images/espark_logo.png" alt="ESPARK" /></a></h1>
</div><!--header-->

<div id="nav">
	<div class="nav-content">
      <h3>Soluciones</h3>
            <ul class="productos">
            	<li class="first"><a href="#inicio" rel="#inicio" class="active"><img src="<?php bloginfo('template_directory'); ?>/images/thumb_inicio.png" width="200" height="75" alt="soluciones" /><p>Inicio</p></a></li>
                <li><a href="#dispensadora" rel="#dispensadora"><img src="<?php bloginfo('template_directory'); ?>/images/thumb_dispensadora.png" width="200" height="75" alt="soluciones" /><p>Dispensadora</p></a></li>
                <!--<li><a href="#barrera"><img src="images/thumb_soluciones.png" width="200" height="75" alt="soluciones" /><br />Barrera</a></li>-->
                <li><a href="#estacion"><img src="<?php bloginfo('template_directory'); ?>/images/thumb_estacion-pago.png" width="200" height="75" alt="soluciones" /><p>Estación de pago</p></a></li>
                <li><a href="#validadora"><img src="<?php bloginfo('template_directory'); ?>/images/thumb_validadora.png" width="200" height="75" alt="soluciones" /><p>Validadora</p></a></li>
                <li><a href="#sistema-cobro"><img src="<?php bloginfo('template_directory'); ?>/images/thumb_sistema-cobro.png" width="200" height="75" alt="soluciones" /><p>Sistema de cobro</p></a></li>
            </ul>
            <ul class="submenu">
            	<li><a href="#tabla-comparativa">Tabla comparativa</a></li>
            	<li><a href="#galeria">Galería</a></li>
            	<li><a href="#contacto">Contáctenos</a></li>
      		</ul>
            <div class="clear"><!--clear--></div>
	</div>        
</div><!--nav-->