$(document).ready(function () {
    setImages();
   
    $('.searchImg').keypress(function (e) {
        if (e.keyCode === 13) {
            search_api()
        }
    });
});


function setImages()
{
    // $('body').css('background-image', 'url(images/background.png)')
    $('#titleImg').prop('src','images/pictionaryImg.png')
}
function homeScreen()
{
    $('body').css('background-image', 'url(images/landingpage.png');
    $('.imageGrid,#total_count,.uploadImg').hide();
    $('.searchDiv').css('display', 'flex');
    $("input[name='search']").val('')
    $('.container').css({ 'height': '50vh', 'margin-top': 'unset' });
}
function createCols()
{
    for (var i = 0; i < 5; i++) {
        var column
        column = document.createElement('div');
        $(column).prop('id', 'column'+i);
        $(column).prop('class', 'column col-2 noPadding');
        $('.imageGrid').append(column)
    }
}
function createImgDivs(cnt,colNo)
{
    /* var outerDiv, image;
    outerDiv = document.createElement('div')
    $(outerDiv).prop('class', 'outerDiv p-2 mb-3 rounded')
    $(outerDiv).click(function(){openImage(imageData[cnt].filepath)})
    $('#column'+colNo).append(outerDiv)
    
   if(imageData[cnt].filepath.includes('images/'))
    {
        $(outerDiv).append('<i class="row fa fa-picture-o float-right" aria-hidden="true"></i>')
        image = document.createElement('img');
        $(image).prop('src',imageData[cnt].filepath)
        $(image).prop('class','img-responsive col-lg-12 col-md-12 col-xs-12 col-sm-12')
        $(image).css('width','100%')
        $(outerDiv).append(image)
    }
    else
    {
        $(outerDiv).append('<i class="row fa fa-video-camera float-right" aria-hidden="true"></i>')
        $(outerDiv).append('<video width="100%" controls> <source src='+imageData[cnt].filepath+' type="video/mp4"></video>')
    }
 */
    var outerDiv, image,div;
    outerDiv = document.createElement('div');
    $(outerDiv).prop('class', 'outerDiv p-2 mb-3 rounded');
    $(outerDiv).append('<i class="row fa fa-picture-o float-right" aria-hidden="true"></i>')
    $('#column'+colNo).append(outerDiv)
    var anchor = document.createElement('a');
    // anchor.href = search_link+imageData[cnt].id;
    anchor.target = "_blank";

    div = document.createElement('div');
    $(div).prop('class', 'h-75');
    $(anchor).append(div)
    
    image = document.createElement('img');
    // $(image).prop('src',imageData[cnt].url);
    $(image).prop('src',imageData[cnt].filepath);
    $(image).prop('class','img-responsive')
    $(image).css('width','100%')
    $(div).append(image);
    $(outerDiv).append(anchor);
}
function openImage(src)
{
    window.open('imgInfo.html',src)
}
function search_api(){
    imgName = $('input[name = search]').val();
   /*  $.ajax({
        type:'GET',
        url:search_link,
        data:{
            keyword: imgName,
            csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
        },
        success:function(response){
            console.log(response);
            imageData = JSON.parse(response); */
            showResult();
       /*  },
        error:function(){
            alert('Error');
        }
    }); */
}
function showResult()
{
    $('.noRecord,h1').hide();
    $('.container').css({ 'height': 'auto', 'margin-top': '2vh' });
    $('body').css('background-image', 'url(images/plainbackground.png');
    imgName = $('input[name = search]').val();
    $('#total_count').children('span').text(imageData.length);
    $('.imageGrid').empty()
    $('#total_count,.uploadImg').show();
    $('.imageGrid').css('display','flex');
    createCols()
    var colNo=0
    for (var i = 0; i < imageData.length; i++) {
        if (imageData[i].keyword.includes(imgName)) {
            createImgDivs(i,colNo)
            colNo++
            if (colNo >= 5)
            colNo=0
        }
    }  
    if ($('.column').children().length == 0)
    {
         $('.imageGrid').hide()
         $('.noRecord').show()
    }
       
}