var windowW = window.innerWidth;
var windowH = window.innerHeight;

var sections = [];
var nav = [];
nameCount = 0;
$(document).ready(function() {

    //$("#wrapper").css({'display': 'none'});
    setTimeout( function(){
      $('body').addClass('phaseOne');
    }, 500);
    //Form Creation to build the page//
    function formCreation(){
        $('body').prepend('<div id="formWrap"></div>')
        $('#formWrap').append('<input type="text" name="name" id="value_Input" size="30" maxlength="8" placeholder="Enter a Number">');
        $('#formWrap').append('<input type="button" id="numberButton" value="How Many Sections" onClick="changeForm()">');
        $("#value_Input").bind("keydown", function (event) {
        if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                 // Allow: Ctrl+A
                (event.keyCode == 65 && event.ctrlKey === true) ||

            // Allow: home, end, left, right
                (event.keyCode >= 35 && event.keyCode <= 39)) {
                  // let it happen, don't do anything
                  return;
            } else {
                // Ensure that it is a number and stop the keypress
                if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                    event.preventDefault();
                }
            }
       });

    }
    formCreation();

    //Touch Click VARS//
          var hasTouch = 'ontouchstart' in window;
              END_EV = hasTouch ? 'touchend' : 'click'; //public so no new "var"
              MOVE_EV = hasTouch ? 'touchmove' : 'mousemove'; // read mousemove isnt the same as touchmove

          var START_EV = hasTouch ? 'touchstart' : 'mousedown',
              // but....it's the best solution I have
              CANCEL_EV = hasTouch ? 'touchcancel' : 'touchcancel';
    //Touch Click VARS END//

    //Responsive Nav Button//
      clickCount =0;
      $(document).on(END_EV, '.navCase', function(e){
        if(clickCount <= 0){
          clickCount++
          $('body').addClass('hamburgerNavActive');
        }
        else{
          $('body').removeClass('hamburgerNavActive');
          clickCount = 0;
        }
      });
    //Responsive Nav Button End//

});
//End Doc Ready
function changeForm(){
    $('body').removeClass('phaseOne');
    setTimeout(function(){
        getTheValue();
    },500)
}
function getTheValue(){

        var valueElement = document.getElementById("value_Input");
        var theCount = valueElement.value;
        //$('body').append(theName);
        $('#wrapper').append('<section></section>');
        var e = $('section');
                for (var i = 1; i < theCount; i++) {
                e.clone().insertAfter(e);
                //sectionBuild();

        }
        $('.top-nav').append('<li><a href=""></a></li>');
        var e = $('.top-nav li');
            for (var i = 1; i < theCount; i++) {
                e.clone().insertAfter(e);
        }

        $('#value_Input').remove();
        $('#numberButton').remove();

        $('#formWrap').append('<input type="text" size="30" maxlength="70">');
        var e = $('#formWrap input');
            for (var i = 1; i < theCount; i++) {
                e.clone().insertAfter(e);
        }
        sectionBuild();
}
function sectionBuild(){
        var sectionLength = $('section').length;
        var windowW = window.innerWidth;
        var windowH = window.innerHeight;
        console.log(sectionLength);
        //Size Sections//
        $('section').css({ width : windowW});
        $('section').css({ height : windowH});
        $('#wrapper').css({ height : windowH*sectionLength});

        $("section").each(function(n) {
            $(this).attr('id', 'section'+n);
            $(this).append('<h1>section'+n+'</h1>');
        });

        writeNav();
    }
//Write Nav//
function writeNav(){
        var nav = []
        var sections = []


        $(".top-nav li").each(function(n) {
            $(this).attr("id", 'nav'+n);
        });

        $(".top-nav li a").each(function(i, val){
            $(this).append(nav[i]);
        });
        $('.top-nav li:first-child').addClass('active');
        $(".top-nav").append("<div id='navLine'></div>");

        $(".top-nav").find("li").each(function(){ nav.push(this.id); });
        $("#wrapper").find("section").each(function(){ sections.push(this.id); });


        $(".top-nav li a").each(function(i, val){
            $(this).attr("href", '#'+sections[i]);
        });
        $(".top-nav li a").each(function(i, val){
            $(this).html(sections[i]);
        });

         $("#formWrap input").each(function(n) {
            $(this).attr("id", 'form'+n);
             $(this).attr("placeholder", 'Name Section'+n);
        });

        console.log(nav);
        console.log(sections);

        $('#formWrap').append('<input type="button" id="nameButton" value="Name the Sections" onClick="changeFormTwo()">');

        setTimeout( function(){
          $('body').addClass('phaseTwo');
        }, 500);
}
function changeFormTwo(){
  $('body').removeClass('phaseTwo');
  setName();

}
function setName(){

        var form = []
        $("#formWrap").find("input").each(function(){ form.push(this); });
         console.log(form);

        $(".top-nav li a").each(function(i, val){
            $(this).html(form[i].value);
        });

        setTitle();

}
function setTitle(){
    $('#formWrap input').remove();
    $('#nameButton').remove();
    $('#formWrap').append('<input type="text" size="30" maxlength="70" id="titleInput">');
    $('#formWrap').append('<input type="button" id="titleButton" value="Name the Site" onClick="changeFormThree()">');
    setTimeout( function(){
          $('body').addClass('phaseThree');
        }, 500);

}
function changeFormThree(){
    $('body').removeClass('phaseThree');
    start();

}
function start(){
        var titleValue = document.getElementById("titleInput");
        var title = titleValue.value;
        $('#title').html(title);
		$('#formWrap').remove();

        $('#titleInput').remove();
        $('#titleButton').remove();
		$("#wrapper").css({'display': 'block'});
		preload();
}
//Have a Preeloadr when builiding page//
function preload(){
	$('body').addClass('loading');
	$('body').prepend('<div class="progress-circle-container"><div class="progress-circle-outer"><div class="progress-circle-inner"><span class="number">100</span></div></div></div>')

	setTimeout( function(){
		$('.progress-circle-container').addClass('on');
		var $num = $('.number'),
        times = 0;
    	for(i=0; i<=100; i++) {
        	setTimeout(function() {
            	$num.html(times);
            	times++;
           		if (times === 100) {
               	$('.progress-circle-container').removeClass('on');
              		setTimeout(function(){
               			$('.progress-circle-container').css('display', 'none');
               			init();
               		},1000)
            	}
        	},i*50)
    	};
	}, 500)
}
//Clear Active Nav//
function clearActiveNav(){
    $('.top-nav li').removeClass();
    $('body').removeClass('hamburgerNavActive');
    $('body').attr('id', '')
    clickCount = 0;
};
function init(){
	$('body').removeClass('loading').addClass('loaded');
	//Find Active Nav//
	function findActive(){
	      var activeButton = $('.top-nav').find(' li.active');
	      var $navLine = $("#navLine");$navLine.width(
	        $(".top-nav li.active").width()).css("left", $(".top-nav li.active").position().left).data("origLeft", $navLine.position().left).data("origWidth", $navLine.width());
	        $el = $(activeButton);
	        leftPos = $el.position().left;
	        newWidth = $el.width();
	          $navLine.animate({
	            left: leftPos,
	            width: newWidth
	        },200);
	          //Body ID Switch//
	      	var activeID = activeButton.attr('id');
	      	$('body').attr('id', 'body'+ activeID);

	};
	findActive();
	//Smooth Scrolling//
	$(function() {
	   $('a[href*=#]:not([href=#])').click(function() {
	    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
	      var target = $(this.hash);
	      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
    	        if (target.length) {
    	           $('html,body').animate({
    	               scrollTop: target.offset().top
    	           }, 1000);
    	           clearActiveNav();
    	      	    $(this).parent().addClass('active');
    	      	    findActive();
    	           return false;
    	        }
	       }
	    });
    });
}