var story={
     "storyTitle": "The Monkey in You",
     "storyImage": "images/the_monkey_in_you_slide_8.png",
     "story":"Monkey see, Monkey do.I'm a monkey, Just like you!Swinging high, Swinging low, I'm always moving, On the go.Hungry, hungry All the time.Food is always on my mind.Making mischief on a tree.Takes its toll, As you can see!Monkey see, Monkey do.I'm a monkey, Just like you!Swinging high, Swinging low, I'm always moving, On the go.Hungry, hungry All the time.Food is always on my mind.Making mischief on a tree.Takes its toll, As you can see!"
 }


function DisplayDiv(){
 
 var iDiv = document.createElement('div');
 iDiv.id = 'block';
 iDiv.className = 'row nopadding';
 for( var i=0;i<2;i++){
      var ele=document.createElement('div')
      ele.id = 'Child'+i;
      ele.className = 'col-xs-5 col-sm-5 col-md-5 col-lg-5 nopadding';
      ele.style="margin-left:20px;"
      iDiv.appendChild(ele);

 }
 document.getElementById("mainDiv").appendChild(iDiv);
 createCard()


}
 function createCard(){
     document.getElementById('Child0').innerHTML="";
     for( var i=0;i<2;i++){
          //document.getElementById('Child0').
         var ele=document.createElement('div')
         ele.id = 'Child0thDiv_'+i;
         ele.className = 'card col-xs-5 col-sm-5 col-md-5 col-lg-5 nopadding';
          var img=document.createElement('img');
          img.src=story["storyImage"];
          img.style="height:45%; width:100%; padding-bottom:10px";
         //ele.style="height:40rem;border:2px solid;margin:3px;
         ele.appendChild(img);
          var subele=document.createElement('div');
          subele.ClassName="card-body";
          var heading=document.createElement('h4');
          heading.innerText=story["storyTitle"];
          var summery=document.createElement('p')
          summery.className="summery";
          var txt=story["story"].split(".");
          var summerytxt=txt[0]+"."+txt[1]+"."+txt[2]+"."+txt[3]+"."+".........."
          summery.innerText=summerytxt;
           
          var aTag = document.createElement('a');
          aTag.id=story["storyTitle"];
          
          //aTag.setAttribute('href',"javascript:showStory(this.id)");
          //aTag.onclick=showStory(this.id);
          aTag.setAttribute("onclick","showStory(this.id)");
          //aTag.addEventListener ("onclick", showStory(heading.innerText), false);
          aTag.innerText = "Read Story";
          aTag.style="padding:10px;"
           
           subele.appendChild(heading);
           subele.appendChild(summery);
           ele.appendChild(img);
           ele.appendChild(subele);
           subele.appendChild(aTag);
         document.getElementById('Child0').appendChild(ele);
     
     
     }
 }



function showStory(txt){
 var fullStory=document.getElementById('Child1')
 fullStory.innerHTML = "";
 //fullStory.innerHTML=txt;
 var ele=document.createElement('div')
 ele.className ="story";
 ele.innerText=story["story"];
 fullStory.appendChild(ele);

}