displayImages={};
var sliderVar=0;
displayImages.createImageGrid=function()
{
    var PartitionDiv,photoDiv,ImageDiv,Img,subDiv,msgDiv,msgImg,nameDiv,associationDiv,cnt=0;
    for(var i=0;i<4;i++)
    {
        PartitionDiv = document.createElement("div");
        PartitionDiv.setAttribute("id", "PartitionDiv" + i);
        PartitionDiv.setAttribute("class","column");
        document.getElementById("grid").appendChild(PartitionDiv);

        for(var j=0;j<7;j++)
        {
            photoDiv = document.createElement("div");
            photoDiv.setAttribute("class", "photoClass noPadding col-xs-12 col-sm-12 col-md-12 col-lg-12");
            photoDiv.setAttribute("onclick", "displayImages.showPhoto(this)");
            $(photoDiv).data("value",cnt);
            PartitionDiv.appendChild(photoDiv);

            ImageDiv = document.createElement("div");
            ImageDiv.setAttribute("class", "col-xs-12 imgDiv col-sm-12 col-md-12 col-lg-12");
            photoDiv.appendChild(ImageDiv);

            Img = document.createElement('img');
            Img.setAttribute("class", "img-responsive imgClass noPadding col-xs-12 col-sm-12 col-md-12 col-lg-12");
            Img.setAttribute("src","img/"+displayImages.data[cnt].Photo );
            ImageDiv.appendChild(Img);

            subDiv = document.createElement("div");
            subDiv.setAttribute("class", "subDiv col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding");
            photoDiv.appendChild(subDiv);

            msgDiv = document.createElement("div");
            msgDiv.setAttribute("class", "col-xs-12 col-sm-12 col-md-12 col-lg-12");
            subDiv.appendChild(msgDiv);

            msgImg = document.createElement('img');
            msgImg.setAttribute("class", "img-responsive msgClass noPadding col-xs-12 col-sm-12 col-md-12 col-lg-12");
            msgImg.setAttribute("src","img/"+displayImages.data[cnt].MessageImage);
            msgDiv.appendChild(msgImg);

            nameDiv = document.createElement("div");
            nameDiv.setAttribute("class", "nameClass col-xs-12 col-sm-12 col-md-12 col-lg-12");
            $(nameDiv).text(displayImages.data[cnt].Name);
            subDiv.appendChild(nameDiv);
            
            associationDiv = document.createElement("div");
            associationDiv.setAttribute("class", "nameClass col-xs-12 col-sm-12 col-md-12 col-lg-12");
            $(associationDiv).text(displayImages.data[cnt].Association);
            subDiv.appendChild(associationDiv);
            cnt++;
        }
    }
}
displayImages.showPhoto=function(element)
{
    $("#modalPage").show();
    displayImages.plusSlides($(element).data("value"));
}
displayImages.closeModal=function()
{
    sliderVar=0;
    $("#modalPage").hide();
}
displayImages.plusSlides=function(n) {
    $(".next,.prev").show();
    sliderVar += n;
    if(sliderVar>=27)
    $(".next").hide();
    else if(sliderVar<=0)
    $(".prev").hide();
    $("#viewPhotoImg").prop("src","img/"+displayImages.data[sliderVar].Photo);
}