The last part of the .ready() function is defining what happens when the buttons from the popupcalendar div are clicked on.  As shown below each button is placed in a different div.  Once the button is clicked on, the .click() function runs.  For the #csv, #ics2 and #ics divs, they then construct a data URI that holds the csv or ics file.  This is done by the downloadDataURI() function.  Inside of this the file names are designated, first by team name and second by making it either a .csv or .ics file.  Then the next part is telling the browser to download that data and give it that file name.  I won’t be going into more depth on the downloadDataURI  function at this time, as I don’t understand it fully myself.  Robey helped me a fair portion with that.  

$j(document).ready(function(){

...

   $j('#csv').click(function(){

     downloadDataURI({

       filename: schedule[0].teamname + ".csv",

       data: 'data:text/calendar;base64,' + btoa(csv)

     });

   });

   $j('#ics2').click(function(){

     downloadDataURI({

       filename: schedule[0].teamname + ".ics",

       data: 'data:text/calendar;base64,' + btoa(csv)

     });

   });      

   $j('#ics').click(function(){

     downloadDataURI({

       filename: schedule[0].teamname + ".ics",

       data: 'data:text/calendar;base64,' + btoa(ics)

     });

   });

   $j('#close').click(function(){

     $j('#popupcalendar').css({'display':'none'});

     return false;

   });

 }        

 });

});


The last .click() function is the small ‘X’ in the lower right corner.  It uses jQuery to change the css of the popupcalendar from display ‘block’ to display ‘none’.  This will close the window and make it no longer display.    Now that the functions running the processes, and the needed interactive aspect are complete, the last part is to input this into the extension framework.

Up Next Time: Creating an extension within Chrome, the final steps