$("#toggleMenu").click(function(){

    $("#mainpage").addClass("has-menu");

  });

$("#menuOverlay, #mi").click(function(){

    $("#mainpage").removeClass("has-menu");

  });

$('body').on("click", 'a#mi', function(mi) {

                    

                        

  jQuery("body").append(jQuery("<div><dt/><dd/></div>").attr("id", "progress"));

  jQuery("#progress").width(100+ "%");

  jQuery("#progress").width("101%").delay(800).fadeOut(400, function() {

   jQuery(this).remove();

  });

  

  

		mi.preventDefault();

		url = $(this).attr('href');

		MiLoad(url, false);

	});

        

	var state = {name: location.href, page: document.title};

	window.history.pushState(state, document.title, location.href);



	$(window).on("popstate", function(){

		if(history.state){

		  MiLoad(history.state.name, true);

		}

	});

	

	function MiLoad(link,pop){

		    $("#mainpage").removeClass("has-menu");

		$.get(link,"", function(data_html){

			var title = data_html.split('<title>')[1].split('</title>')[0];

			var body = data_html.split('<main>')[1].split('</main>')[0];

			$("title").text(title);

			$("main").html(body);    

                        

			        if(pop != true){

					  var state = {name: link, page: title};

					  window.history.pushState(state, title, link);		

					}

			 $('html,body').animate({scrollTop:0},200);

		});

	}

    

  jQuery("body").append(jQuery("<div><dt/><dd/></div>").attr("id", "progress"));

  jQuery("#progress").width(100+ "%");

  jQuery("#progress").width("101%").delay(800).fadeOut(400, function() {

   jQuery(this).remove();

  });

  function mdload(id){

  $(id).submit(function(event) {

        jQuery("body").append(jQuery("<div><dt/><dd/></div>").attr("id", "progress"));

        jQuery("#progress").width(100+ "%");

        jQuery("#progress").width("101%").delay(800).fadeOut(400, function() {

        jQuery(this).remove();

         });

        var link = $(this).attr('action');

        $.ajax({

            method: $(this).attr('method'),

            url: $(this).attr('action'),

            data: $(this).serialize(),

        }).done(function(data_html) {

            var title = data_html.split('<title>')[1].split('</title>')[0];

			var body = data_html.split('<main>')[1].split('</main>')[0];

			$("title").text(title);

			$("main").html(body);  

			var state = {name: link, page: title};

			window.history.pushState(state, title, link);



        });

        event.preventDefault();

   });

   

   

		    

	}

    mdload('form:not([id])'); // Nếu dùng cái này thì mọi form không có id nó đều load

    mdload('#mdload'); // Nếu dùng cái tương tự cái này thì form phải có id là mdload nó mới chạy