<!doctype html>
<html lang="en">
    <head>
    <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" title="no title" charset="utf-8" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="js/jquery.validationEngine-en.js" type="text/javascript"></script>
	<script src="js/jquery.validationEngine.js" type="text/javascript"></script>
    
    <link href='http://fonts.googleapis.com/css?family=Carrois+Gothic' rel='stylesheet' type='text/css'>
        <meta charset="utf-8">
        <title>mcanan.uy</title>
        <link rel="stylesheet" href="/css/mcananuy.css">
    </head>
    <body>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-2204023-5', 'mcanan.uy');
  ga('send', 'pageview');
</script>
        <div>
            <header class="top">
                <h1>Marcos Canán</h1>
                <h2 class="bio"></h2>
            </header>
            <ul class="services">
                <li class="service twitter">
                    <a href="http://www.twitter.com/mcanan">@mcanan</a>
                </li>
                
                <li class="service google-plus">
                    <a href="https://plus.google.com/115882924222011458869">google+</a>
                </li>
                
                <li class="service linkedin">
                    <a href="http://uy.linkedin.com/in/mcanan">linkedin</a>
                </li>
                           
                <li class="service instragram">
                    <a href="http://instagram.com/marcoscanan">instagram</a>
                </li>
                                
                <li class="service email">
                    <a href="#" class='show_mail'>contact me</a>
                </li>
                
                
                
            </ul>
            </div>
                 <div id="form-div">
                    <form id='form1'>
                    <p><label for="name">Name </label><input name="name" type="text" id="name" class="validate[required,custom[onlyLetterSp],length[0,100]] text-input"/></p>
                    <p><label for="email">Email </label><input name="email" type="text" id="email" class="validate[required,custom[email]] text-input"/></p>
                    <p><textarea name="text" class="validate[required,length[1,300]] text-input" id="comment"></textarea></p>
                    <p><input value="Send" type="submit" id="Send"/></p>
                    </form>
                </div>



        <script>
            var services = document.getElementsByClassName('service'),
                len = services.length;
                
            while(len--) {
                var me = services[len];
                
                me.addEventListener('mouseover', function(event) {
                    document.body.className = this.className.replace('service ', '');
                }, false);
            }
            
            $(document).ready(function(){
                $("#form-div").hide();
 
                $('.show_mail').click(function(){
                    $("#form-div").slideToggle();
                });
                
			    $("#form1").validationEngine({
				    ajaxFormValidation: true,
					ajaxFormValidationURL: "ajaxSubmit.php",
					ajaxFormValidationMethod: "post",
				    onSuccess :  false,
				    onFailure : function() {},
				    onBeforeAjaxFormValidation: function() {
				        $("#form-div").fadeOut(250, function(){$("#form-div").html("Sending..."); $("#form-div").fadeIn(250);});
                    },
                    onAjaxFormComplete: function(status, form, errors, options) {
                        if(status){
                            $("#form-div").fadeOut(250, function(){$("#form-div").html("<p>Thank you, i will contact you soon!</p>"); $("#form-div").fadeIn(250);});
                        } else {
                            $("#form-div").fadeOut(250, function(){$("#form-div").html("<p>Ups! An error occured try again, please</p>"); $("#form-div").fadeIn(250);});
                        }
                    }
			})
 
		});
        </script>
    </body>
</html>
