var AudioSync={};
AudioSync.storyList=[];

$(document).ready(function(){
    document.getElementById('langGroup').selectedIndex = "0";
});

AudioSync.selectLang = function ()
{
    $('.storyMenu').css('visibility', 'visible');
    $('.loader').css('display', 'flex');
    $('.mainDiv').empty();
    $("#mySearch").val('');
  /*   $.ajax({
        type:'POST',
        url:'/getstories/',
        data:{
            language:$('#langGroup option:selected').val(),
            csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
        },
        success:function(response){
            AudioSync.storyList=JSON.parse(response);
            console.log(); */
            if(AudioSync.storyList.length!=0)
            {
                AudioSync.createMenuDivs();
                $('.serachBox').css('visibility', 'visible');
                $('.loader').hide();
            }
            else{
                $('.loader').hide();
                $('.serachBox').css('visibility', 'hidden');
                showSnackBar('No Stories Found!');
            }                     
       /*  },
        error:function(){
            console.log('Error');
        }
    }); */
}

AudioSync.createMenuDivs = function () {
    var pageDiv, iconDiv, icon, storyName, storyCover, imgCnt = 0;
    $('.mainDiv').empty();
    for (var imgCnt = 0; imgCnt < AudioSync.storyList.length; imgCnt++) {
        pageDiv = document.createElement('div');
        $(pageDiv).prop('id', imgCnt);
        $(pageDiv).prop('class', 'pageClass');
        pageDiv.setAttribute('data-tt', 'tooltip');
        pageDiv.setAttribute('data-placement', 'top');
        $(pageDiv).prop('title', AudioSync.storyList[imgCnt].name);
        $(pageDiv).data('pk', AudioSync.storyList[imgCnt]['id']);
        $(".mainDiv").append(pageDiv);

        storyName = document.createElement('div');
        $(storyName).prop('class', 'storyNames noPadding my-2 col-12');
        $(storyName).data('englishName', AudioSync.storyList[imgCnt].englishName);
        $(storyName).text(AudioSync.storyList[imgCnt].name);
        pageDiv.append(storyName);

        storyCover = document.createElement('img');
        $(storyCover).prop('class', ' col-12 img-responsive');
        $(storyCover).css({ 'max-height': '70%', 'width': '100%' });
        if (AudioSync.storyList[imgCnt].icon == null)
            $(storyCover).prop('src', static_imgurl + 'story_ic.png');
        else
            $(storyCover).prop('src', AudioSync.storyList[imgCnt].icon);
        pageDiv.append(storyCover);

        iconDiv = document.createElement('div');
        $(iconDiv).prop('class', 'iconDiv col-11');
        pageDiv.append(iconDiv);

        for (var p = 0; p < 3; p++) {
            if (p == 0) {
                icon = document.createElement('a');
                $(icon).css('text-decoration', 'none');
                icon.setAttribute('data-tt', 'tooltip');
                icon.setAttribute('data-placement', 'bottom');
                $(icon).prop('class', 'fa fa-eye iconOptn');
                $(icon).prop('title', 'View Story');
                icon.setAttribute('href', '../viewstory/' + AudioSync.storyList[imgCnt]['id']);
            }
            else if (p == 1) {
                icon = document.createElement('span');
                icon.setAttribute('data-tt', 'tooltip');
                icon.setAttribute('data-placement', 'bottom');
                $(icon).prop('class', 'fa fa-edit iconOptn');
                $(icon).prop('title', 'Edit Story');
                icon.setAttribute('data-toggle', 'modal');
                icon.setAttribute('data-target', '#editModal');
                $(icon).data('pk', AudioSync.storyList[imgCnt]['id']);
                $(icon).click(function () {
                    AudioSync.editClicked(this);
                });
            }
            else {
                icon = document.createElement('span');
                icon.setAttribute('data-tt', 'tooltip');
                icon.setAttribute('data-placement', 'bottom');
                $(icon).prop('class', 'fa fa-trash iconOptn deleteIcon');
                $(icon).prop('title', 'Delete This Story');
                icon.setAttribute('data-toggle', 'modal');
                icon.setAttribute('data-target', '#confirmModal');
                $(icon).click(function () {
                    console.log('Clicked.');
                    AudioSync.selectedStory = $(this).parent().parent().prop('id');
                    AudioSync.storyId = $(this).parent().parent().data('pk');
                    confirmModalFun(this);
                })
            }
            iconDiv.append(icon);
        }
        $("[data-tt=tooltip]").tooltip({ trigger: "hover" });
    }
}
    AudioSync.editClicked = function (ele) {
        var tempurl = $('#editspeechmarks').prop('href');
        tempurl = tempurl.split('editspeechmarks')[0];
        tempurl += 'editspeechmarks/' + $(ele).data('pk') + '/';
        console.log(tempurl);
        $('#editspeechmarks').prop('href', tempurl);
    
        tempurl = $('#editpages').prop('href');
        tempurl = tempurl.split('editstorypages')[0];
        tempurl += 'editstorypages/' + $(ele).data('pk') + '/';
        console.log(tempurl);
        $('#editpages').prop('href', tempurl);
    }
    AudioSync.deleteStory = function () {
        $.ajax({
            type: 'POST',
            url: '/deletestory/',
            data: {
                storyid: AudioSync.storyId,
                csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
            },
            success: function (response) {
                console.log(response);
                $('.tooltip').remove();
                $('#' + AudioSync.selectedStory).remove();
                if (response == '404') {
                    location.href = '../error/';
                }
                else
                    showSnackBar(response);
            },
            error: function () {
                console.log('Error');
            }
        });
        console.log('hi');
    }
    function myFunction() {
        var input, filter, a, i, searchCnt = 0;
        $(".noRecord").hide();
        input = document.getElementById("mySearch");
        filter = input.value.toUpperCase();
        for (i = 0; i < $(".mainDiv").children().length; i++) {
            a = $($(".mainDiv").children()[i]).children()[0];
            b = $($($(".mainDiv").children()[i]).children()[0]).data('englishName');
            if (a.innerHTML.toUpperCase().indexOf(filter) > -1 || b.toUpperCase().indexOf(filter) > -1) {
                $($(".mainDiv").children()[i]).show();
         
            } else {
                searchCnt++;
                $($(".mainDiv").children()[i]).hide();
            }
        }
        if (searchCnt == $(".mainDiv").children().length)
            $(".noRecord").show();
    }
