var Form = {};
var Utils = {};
Utils.Path = '';
Form.nextPageCnt = 0;
Form.photoFlag=false;
var index;
$(document).ready(function () {
    document.getElementById("backgroundDiv").style.backgroundImage = "url(" + Utils.Path + "images/pratham.png)";
    Form.setImages();
    Form.createYear();
    Form.createProfession_ProgramDivs(profession,Form.professionArr);
    Form.createProfession_ProgramDivs(program,Form.programList);
    Form.createSliderNumber();
    $("#section1").show();
    Form.setMessages();
}, 300);
Form.setImages = function () {
    $("#logoImg").prop("src", Utils.Path + "images/sloganPratham.png");
    $("#userPhto").prop("src", Utils.Path + "images/dummy-image.jpg");
    $("#messageDiv").text(Form.messageData[0].Message);
}
Form.createYear=function()
{
    var year=1994,option;
    for(var i=0;year <= new Date().getFullYear();i++)
    {
        option=document.createElement('option');
        option.setAttribute('value',year);
        //option.setAttribute('data-flip',true);
        $(option).text(year);
        $("#toYear").append(option);
        $(option).clone().appendTo($("#fromYear"));         //in jquery
        //var cln = option.cloneNode(true);                           //IN JS
        //$("#fromYear").clone().append(cln);
        year++;
    }
}
Form.createProfession_ProgramDivs=function(parentDiv,arr)
{
    for(var i=0;i < arr.length;i++)
    {
        option=document.createElement('option');
        option.setAttribute('value',arr[i]);
        $(option).text(arr[i]);
        parentDiv.append(option);
    }
}


Form.onCountrySelection=function()
{
    var country;
    //country=$("#country").val();
    for(var i=0;i<Form.stateDistList.length;i++)
    {
        option=document.createElement('option');
        option.setAttribute('value',Form.stateDistList[i].name);
        $(option).text(Form.stateDistList[i].name);
        $("#State").append(option);
    }
}

Form.onStateSelection=function(element)
{
    $("#District").empty();
    var state=$(element).val();
    for(var i=0;i<Form.stateDistList.length;i++)
    {
        if(Form.stateDistList[i].name==state)
        {
            index=i;
            for(var j=0;j<Form.stateDistList[i].list.length;j++)
            {
                option=document.createElement('option');
                option.setAttribute('value',Form.stateDistList[i].list[j].name);
                $(option).text(Form.stateDistList[i].list[j].name);
                $("#District").append(option);
            }
            break;
        }    
    }
    
}
Form.onDistrictSelection=function(element)
{
    var district=$(element).val();
    $("#Block").empty();
    for(var i=0;i<Form.stateDistList[index].list.length;i++)
    {
        if(Form.stateDistList[index].list[i].name==district)
        {
            for(var j=0;j<Form.stateDistList[index].list[i].list.length;j++)
            {
                option=document.createElement('option');
                option.setAttribute('value',Form.stateDistList[index].list[i].list[j].name);
                $(option).text(Form.stateDistList[index].list[i].list[j].name);
                $("#Block").append(option);
            }
            break;
        }    
    }
}

Form.createSliderNumber = function () {
    var selectList;
    for (var i = 1; i <= Form.sliderMessage.length; i++) {
        selectList = document.createElement('li');
        selectList.setAttribute("id", "select" + i);
        selectList.setAttribute("class", "noPadding col-sm-4 col-lg-3 col-md-3 col-xs-4");
        selectList.setAttribute("onclick", "Form.sliderOnclick(this);");
        if (i == 1)
            $(selectList).addClass("active");
        $(selectList).data("value", i);
        $(selectList).text(Form.sliderMessage[i - 1]);
        sliderBar.append(selectList);
    }
}
Form.sliderOnclick = function (element) {
    //Form.showNextPage();
    $("section").hide();
    $("#sliderBar").children().removeClass("active");
    $("#section" + $(element).data("value")).show();
    $("#select" + $(element).data("value")).addClass("active");
    Form.nextPageCnt = $(element).data("value") - 1;
}
Form.showNextPage = function (element) {
    var locationCnt=0,nameFlag=false;
    $("#errorMessage").text('');
    $("#errorMessage").hide();
    $('input').removeClass("wrongField");
    var regex = /^[a-zA-Z]{5,50}$/;
    var userName=$("input[name=userName]");
    var locationArr=[$("input[name=Country]"),$("input[name=State]"),$("input[name=District]"),$("input[name=Block]")]
    if(userName.val()=="" || userName.val()==" ")
    {
        nameFlag=false;
        $("#errorMessage").show();
        $("#errorMessage").text("Name Field cannot be left empty");
        $("input[name=userName]").addClass("wrongField");
    }
    else if(regex.test(userName.val())==false)
    {
        nameFlag=false;
        $("#errorMessage").text('Name must be in alphabets only (first & last name,No Space,Name length between 5-50).');
        $("#errorMessage").show();
        $("input[name=userName]").addClass("wrongField");
    } 
    else
    {
        nameFlag=true;
        $('input').removeClass("wrongField");
        for(var i=0;i<locationArr.length;i++)
        {
            if(locationArr[i].val()=="")
            {
                locationCnt=0;
                $(locationArr[i].selector).addClass("wrongField");
                
            }
            else
            {
                locationCnt++;
                $(locationArr[i].selector).removeClass("wrongField");
            }
        }
    }
    if(nameFlag==true && locationCnt!=4)
    {
        $("#errorMessage").show();
        $("#errorMessage").text('Please fillout location');
    }
   else if(nameFlag==true && locationCnt==4)
    {
        $("section").hide();
         $("#sliderBar").children().removeClass("active");
        if ($(element).hasClass("nextBtn"))
            Form.nextPageCnt++;
        else if (Form.nextPageCnt > 0 && $(element).hasClass("prevBtn"))
            Form.nextPageCnt--;
        if (Form.nextPageCnt < $(".container").find('section').length) {
            $("#section" + (Form.nextPageCnt + 1)).show();
            $("#select" + (Form.nextPageCnt + 1)).addClass("active");
        } 
    }
}
Form.setMessages = function () {
    var row, column, imgCnt = 0;
    for (var i = 0; i < Form.messageData.length / 2; i++) {
        row = document.createElement("div");
        row.setAttribute("class", "noPadding col-xs-12 col-sm-12 col-lg-12 col-md-12");
        $(row).css({"margin-top":"8px"})
        for (var j = 0; j < 2; j++) {
            column = document.createElement("div");
            column.setAttribute("id", "message"+imgCnt);
            column.setAttribute("class", "messages noPadding text-center col-xs-5 col-sm-5 col-lg-5 col-md-5 col-sm-offset-1  col-xs-offset-1 col-lg-offset-1 col-md-offset-1");
            column.setAttribute("onclick", "Form.showMessage(this)");
            $(column).text(Form.messageData[imgCnt].Message);
            row.append(column);
            imgCnt++;
        }
        $("#messageList").append(row);
    }
}
Form.showMessage=function(element)
{
$("#messageDiv").text($(element).text());
$("#messageDiv").css("background-color",$(element).css("background-color"));
}
Form.uploadPhoto=function()
{
    $('input[type="file"]').val(null);
    document.querySelector('input[type="file"]').addEventListener('change', function() {
        if (this.files && this.files[0]) {
            Form.photoFlag=true;
            $("#userPhto").prop("src",URL.createObjectURL(this.files[0])); // set src to file url
            $(".closed ").show();
        }
    });
}
Form.removePhoto=function()
{
    $(".closed ").hide();
    Form.photoFlag=false;
    $("#userPhto").prop("src", Utils.Path + "images/dummy-image.jpg");
}
Form.showCamera=function()
{
    $("#cameraDiv").toggle();
    var video = document.getElementById('video');
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {     // Get access to the camera!
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        video.srcObject = stream;
        video.play();
    });
}
var canvas = document.createElement('canvas');              // Elements for taking the snapshot
var context = canvas.getContext('2d');
var userPhto = document.getElementById('userPhto');
document.getElementById("capture").addEventListener("click", function() {   // Trigger photo take
canvas.width=video.videoWidth;
canvas.height=video.videoHeight;
    context.drawImage(video, 0, 0);
    Form.photoFlag=true;
	userPhto.src = canvas.toDataURL();
});
}
Form.closeCamera=function()
{
    $("#cameraDiv").hide();
}
Form.submitForm=function()
{
    var emailPattern=/^[A-Za-z]\w+([0-9\.-]?\w+)*@\w+([\.-]?\w+)*(\.\b(?:com|org|int|edu|gov|mil|in|net)\b)+$/
    var email=$("input[name=email]").val();
    if(Form.photoFlag)
    {
        if(email!="")
        {
            if(!emailPattern.test(email))
                alert("please enter valid email");
			 else
				alert("valid email");
        }
        else
        alert("Done");
    }
    else
    alert("please select Photo");
}