#!/usr/local/bin/perl

#slideshow.cgi
#Creates a 'powerpoint-like' slideshow in HTML
#user can define a series of slides and an HTML-like template
#and a presentation will be automatically written that 
#interpolates the outline into the template format

#by Andy Harris, 9/99

#to use this on your own server, the only thing you might have to
#change is the pointer to perl. 

use CGI ':standard';

if (!param){
  #This is the first time here.  Give 'em the opening page
  &showEditor;

} else {
  #we have some data.  Let's parse it out!!

  $source = param('slideSource');
  @lines = split /\n/, param('slideSource');

  # set up global variables
  $numLines = @lines;
  $currentLine = 0;
  $slideNum = 0;
  $outline = "<a name = outline> \n<h1>outline</h1>\n";
  @titles = ("index");
  @slides = ();


  #step through the lines
  while ($currentLine < $numLines){

    #grab the next line
    $line = shift @lines;
    $currentLine++;

    #does this line contain a filebase tag?
    if ($line =~m#</?file_?base>#i){
      #remove the filebase tags
      $line =~ s#</?file_?base>##gi;
      $fileBase = $line;
	chop $fileBase;

    #or a templatefile tag?
    } elsif ($line =~ m#</?template_?file>#i){
      $line =~s#</?template_?file>##gi;
      $templateFile = $line;

      #grab the file if possible
      $fileName = '/home/aharris/public_html/cgi-bin/slideshow/' . $templateFile;
      open TEMPLATE, "$fileName";
      @template = <TEMPLATE>;
      close TEMPLATE

    #how about a topicTitle tag?
    } elsif ($line =~ m#</?topic_?title>#i){
      $line =~s#</?topic_?title>##gi;
      $topicTitle = $line;

    #look for a slide
    } elsif ($line =~ m#<slide>#i){
      &processSlide;

    #look for the template
    } elsif ($line =~ m#<template>#i){
      &processTemplate;

    } # end 'any tags' if
  } # end while

  #print it all out!!
  print header();
  print start_html("$topicTitle");

  ##print out the keyboard - handling piece##

  $keyHandler = '
<script>
//check the browser type
var isNav = false;
var isIE = false;
if (parseInt(navigator.appVersion) >=4){
  if (navigator.appName == "Netscape"){
    isNav = true;
  } else {
    isIE = true;
  } // end nav or ie if

} // end version four plus if

//set up keyboard event trapping
if (isNav){
  document.captureEvents(Event.KEYPRESS);
} // end if

document.onkeypress = checkKeys
currentSlide = 0;

function checkKeys(evt){
  //responds to key presses
  //alert("in checkKeys: " + window.event.keyCode);
  var theKey;
  if (isNav){
    theKey = evt.which;
  } else {
    theKey = window.event.keyCode;
  } // end if

  if (theKey == 105){
    //i, go to index
    location.href = "#slide0";
    currentSlide = 0;
  } // end if

  if (theKey == 111){
    //o, go to outline
    location.href = "#outline";
  } // end if

  if (theKey == 110){
    //n, go to next slide
    currentSlide++;
    location.href =  "#slide" + currentSlide;
  } // end if

  if (theKey == 112){
    //p, go to previous slide
    currentSlide--;
    location.href =  "#slide" + currentSlide;
  } // end if

}  // end checkNums
</script>
';

#end keyboard handler

  print $keyHandler;
  print &makeIndex;
  print "@slides";
  print $outline;
  print end_html();

  #save it!!!
  &saveFile;
} # end if

sub makeIndex{
  #creates an index of the slides as an intro page
  $index = "<a name = slide0> \n";
  $numSlides = @titles;
  
  $index .= "<center><table border = 3> \n";
  for ($i=0; $i <$numSlides; $i++){
    $index .= Tr(td($i), td("<a href = #slide$i>$titles[$i]</a>"));
  } # end for loop
  $index .= Tr(td("<br>"), td("<a href = #outline>outline</a>"));
  $index .= "</table>\n";

  $index .= "<i>created using slideshow.cgi by Andy Harris</i> \n";
  $index .= "</center> \n";
  $index .= "<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n";

  return $index;

} #end makeIndex

sub makeSlide{
  #expects a slide number, a title, and an array of items
  #returns back a string containing the HTML for the current slide

 #grab the arguments
  my ( $slideNum, $title, @items);
  $slideNum = shift;
  $title = shift;
  @items = @_;  

  $slide = "<a name = slide$slideNum> \n";

  foreach $getAline (@template){

    #work on a copy of the line
    $line = $getAline;

    #fix the topic title
    $line =~ s#<topic_?title>#$topicTitle#i;
    $line =~ s#</topic_?title>##i;

    #fix the slide title
    $line =~ s#<slide_?title>#$title#i;
    $line =~ s#</slide_?title>##i;

    #fix the slidenum
    $line =~s#<slide_?num>#$slideNum#gi;

    #fix the previous tag
    #do all this only if there's a <prev> tag here
    if ($line =~ m#<prev>#i){
      #don't show it if it will be zero or less 
      if ($slideNum <= 1){
        $line ="";
      } else {
        $url = "#slide" . ($slideNum-1);
        $line =~ s#<prev>#$url#i;
      } # end 'on first slide' if    
    } # end 'is this a pre tag' if

    #fix the next tag
    $url = "#slide" . ($slideNum+1);
    $line =~ s#<next>#$url#i;

    #fix the top tag
    $url = "#slide0";
    $line =~ s#<top>#$url#i;

    #fix the items tag
    if ($line =~ m#<items>#i){
	$line = ul(li([@items]));
    } # end 'items' if

    $slide .= $line;
    
  } # end foreach

  # add a bunch of spaces at the bottom to seperate things
  $slide .= "<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n";

  return $slide;

} # end makeSlide

sub makeSlideOutline{
  #makes a form of the slide suitable for an outline
  my ($title, @items);
  $title = shift;
  @items = @_;

  $slideOutline = "";  

  $slideOutline .= h3("$title");
  $slideOutline .= ul(li([@items]));

  return $slideOutline;

} #end makeSlideOutline

sub processSlide{
  # look through the stuff between slide and /slide,
  # and put it in some variables for later analysis 

  #ignore this line, get the next one
  $line = shift @lines;
  $currentLine++;

  #increment the slide number
  $slideNum++;  

  #clean up the item array
  @items = ();
  
  #this is the slide title
  $title = $line;
  push @titles, $title;
  
  #go until we see the </slide> tag
  while (!($line =~m#</slide>#i)){

    #get the next line
    $line = shift @lines;
    $currentLine++;
  
    #ignore the </slide> line
    if (!($line =~m#</slide>#i)){
      #add this to the items array        
      push @items, $line;
    } #end 'is it the end of the slide' if
  } # end while loop
  $outline .= &makeSlideOutline ($title, @items);
  push @slides, (&makeSlide ($slideNum, $title, @items));
} # end processSlide

sub processTemplate{
  #examine the stuff between template and /template, and 
  #put it into the template array

  #go until we see the </template> tag
  while (!($line =~ m#</template>#i)) {

    #get the next line
    $line = shift @lines;
    $currentLine++;

    #ignore the </template> line
    if (!($line =~ m#</template>#i)){
      #add this to the template array        
      push @template, $line;
    } #end 'is it the end of the template' if
  } # end while loop
  #print &templatePreview;

} # end processTemplate

sub saveFile{
    $fileBase = $topicTitle;
    #convert spaces to underscores
    $fileBase =~ s|\s|_|g;
    #kill trailing spaces
    $fileBase =~ s|__$||;
    $fileName = "/home/aharris/public_html/cgi-bin/slideshow/" . $fileBase . ".html";

    open (OUTFILE, ">$fileName") or die "did not open file";
    print OUTFILE start_html("$topicTitle");
    print OUTFILE $keyHandler;
    print OUTFILE &makeIndex;
    print OUTFILE "@slides";
    print OUTFILE $outline;
    print OUTFILE end_html();
    close OUTFILE;

    #print the source code
    $fileName = "/home/aharris/public_html/cgi-bin/slideshow/" . $fileBase . ".txt";
    open (SOURCE, ">$fileName");
    print SOURCE $source;
    close SOURCE;

} # end saveFile

sub showEditor{
  #shows the screen that contains the default text, has one big textarea

  print header();
  print "
  <script>
  function blank241(){
    //create a clean screen using the n241 template
    var stuff = '';
    stuff += '<topic_title></topic_title> \\n';
    stuff += '<template_file>n241.tplt</template_file>\\n';
    stuff += '\\n';
    stuff += '<slide> \\n';
    stuff += '\\n';
    stuff += '</slide> \\n';
    stuff += '\\n';
    stuff += '<slide> \\n';
    stuff += '\\n';
    stuff += '</slide> \\n';
    stuff += '\\n';
    stuff += '<slide> \\n';
    stuff += '\\n';
    stuff += '</slide> \\n';
    stuff += '\\n';

    window.document.theForm.slideSource.value = stuff;
  } // end function
</script>
";

  print start_html('slideshow creation');

  print h1("create a slide show");

  print start_form(-name=>'theForm');

  #create the text area with the default slideshow
  print "
<textarea name = slideSource
          rows = 25
          cols =80>
-----Administrative stuff-----
--The next line will be the name of the talk the users will see
----It can be in English
<topic_title>My practice slideshow</topic_title>

-----Template stuff-----
--The next few lines describe the template
----It is used to define how each slide will look.  It is basically HTML
----but with a few 'extra' tags thrown in.
----If you're not sure what's going on here, just skip on down to the
----slides part at the bottom
----If you wish, you can modify this template, and make it as elaborate as 
----you want.  Anything you can do in HTML (images, backgrounds, whatever)
----All your slides will follow this design.

<template>

<table border = 0
       width = 100%
       bgcolor = lightblue>

<tr><td>
     
<div align = right>
<a href = <prev>>previous</a>
<a href = <top>>top</a>
<a href = <next>>next</a>
<br>
</div>
<center>
<h3><TOPIC_TITLE></h3>
<h1><slidenum>. <SLIDE_TITLE></h1>
<table border = 3>
<tr>
  <td bgColor = blue>
  <font color = yellow
        size = +3>
  <ITEMS>
  </font>
  </td>
</tr>
</table>
</center>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</td></tr></table>

</template>


-----Slides area-----
--This is where the real action begins
----slide and /slide go on their own lines.  The first line after slide is the 
----slide's title.  Everything else will be a topic item of the slide

<slide>
slide one
I'm so proud, 
I'm gonna burst.
Of all the slides,
I'm the first
</slide>

<slide>
This is the second slide
Roses are red,
Violets are blue
I'm the slide,
That's number two!
</slide>

<slide>
Slide Three
I was told;
by a little bird;
That I am known;
as slide the third.
</slide>


</textarea>
";

  print "<br> \n";
  print button(-value=>'use the n241 template',
               -onClick=>'blank241()');
  print "   <a href = #help>Instructions</a> \n";
  print "<br><br> \n";
  print submit('build the slideshow');
  print end_form();
  print hr();
  print "<a name = help> \n";
  print h2("Instructions:");

  print "
<h3>overview</h3>
The slidemaker is a very simple program that automates the creation of
presentation slides (like powerpoint).  This program is intended for
people who are interested in using HTML as a slide format (for
portability and ease of use).  It allows you to generate a set of
slides using original extensions of HTML, and lets you set up a
template for how the slides will appear.  You can use any HTML tricks
you want (Ok, frames may give you trouble) and the program will
incorporate them into the slideshow.  The program will generate one
large web page, which you can save locally.  All the links are
internal, so you don't have to mess with a large number of files, as
you did in the previous version.
</p>

<p>
The default slideshow is heavily commented, and you can probably
figure it out just by modifying it.
</p>


<h3>Specifying the topic</h3>
The first thing you will need to do is specify the topic of your
presentation. You will be able to refer to this in all your slides if
you wish.  Just put a value between &lt;topic_title> and
&lt;/topic_title>.  
<b>notes:</b><br>
<ul>
  <li>you can leave out the underscore, if you wish. 
  <li>the ending tag(&lt;/topic_title>) is optional, but a good idea
  <li>be sure that the tag(s) and the topic are on the same line.
</ul>

<h3>Designing the template</h3>
<p>
The next part of the code is the template.  This describes what a
typical slide will look like.  If you are just starting out, you can
skip over the template and go straight to the slide section without
any problems.  The template is there so you can customize your
slideshow in intriguing ways, but you can always just use the default
template.
</p>

<p>
If you wish to modify the template, you will find it easy to do.This
is pretty much standard html.  In this version of slideshow, all the
output is on the same page, so body tags will be ignored.  You can use
images if you wish, or embedded sound, or anything else you want, but
things that you place in the template will go into EVERY slide.  If
something only belongs in one slide, use the slide segment to do that.
You can use variations of the table tricks in the default template to
get some nice background and font effects.
If you are using a browser that supports cascading style sheets, you
can use also CSS to make a background image or color.
</p>

<p>
In addition to any html features that can normally be part of a page,
you can also access a number of 'special' tags inside the template.
These tags will be replaced with values appropriate to each slide.

<h4>The special tags</h4>
<b>&lt;topic_title></b>: The topic of the entire presentation<br>
<b>&lt;slide_title></b>: The title of the current slide<br>
<b>&lt;slide_num></b>: The number of the current slide<br>
<b>&lt;prev></b>: an internal url (using an anchor) to the previous slide <br>
<b>&lt;next></b>: an internal url (using an anchor) to the next slide <br>
<b>&lt;top></b>: an internal url (using an anchor) to the top (index) slide<br>
<b>&lt;items></b>: an unordered list containing the slide items<br>

<h4>General notes on using these tags</h4>
<ul>
  <li>all tags are case-insensitive.  &lt;PREV> is just like &lt;prev>
  <li>underscores can be omitted if you prefer
  <li>none of these tags require closing tags
  <li>No tag is required, but they can all be useful
</ul>

<h4>using the anchors(&lt;next>, &lt;prev>, and &lt;top>)</h4>
<ul>
  <li>These tags will produce <i>anchors</i> you can link to.
  <li>In the default template, I made next, top, and prev links.
  <li>You can change the text, use buttons, or whatever.
  <li>It's best to have the entire anchor on one line (like in the default)
</ul>

<h4>using the &lt;items> tag</h4>
<p>
This tag is unique.  What it does is return back a pre-formatted list
of all the items in the current slide.  It will already be in html
form, as an unordered list.  The items tag should be on a line by
itself.
</p>

<p>
You can surround this tag with font tags
to increase the default font size or change the color, you can place
the font in a table for nicer formatting, and so on.  See the default
template for examples.
</p>

<h3>Writing the slides</h3>
<p>
This is actually the easiest part.  All you do is write down the data
you want to show.  Each item will be on its own line.  Surround each
slide with &lt;slide>&lt;/slide>tags. The first line inside a slide
set will automatically be considered the slide's title.  All the
others will be 'talking points' for that slide.  
</p>

<h4>sneaky tricks</h4>
<p>
You can embed any html you wish into the lines, including image
references, embedded sounds, lists, or whatever.  Each time you press
the carriage return, you will be starting a new <i>logical</i> line,
but you can write lines that include &lt;br> tags or other tags that
cut up a line.  You'll probably have to experiment to get it. 
</p>

<h3>Using the slideshow</h3>
The slideshow that is generated by this program is not permanently
stored anywhere.  If you want to use it, you will need to save it.  On
most browsers, you can use the 'save as' command from the 'file' menu
to save whatever page you are currently on.  Play with the program
until you get the results you want, then save the file as normal
HTML.  You can then modify that file if you wish to fine-tune it, put
it on your own site, or whatever.

<h3>Keyboard commands</h3>
A few keyboard commands have been added to the slideshow, so you can
do presentations without a mouse.  The keyboard command work as you
are presenting the show, and only work with 4.0 and later browsers
(tested in IE4.* and Nav 4.*).   Here are the commands:
<table border = 1>
<tr>
  <th>Keystroke</th>
  <th>comand</th>
</tr>

<tr>
  <td>i</td>
  <td>Index.  Go to index at top of show, reset counter</td>
</tr>

<tr>
  <td>o</td>
  <td>Outline.  Go to outline at bottom of show.  Does NOT reset counter</td>
</tr>

<tr>
  <td>n</td>
  <td>Next page.  If end of show, go to index</td>
</tr>

<tr>
  <td>p</td>
  <td>Previous page</td>
</tr>
</table>



<h3>Credits</h3>
This program was written by Andy Harris.  I retain the copyright, but
feel free to use it if you wish.  You may also copy the source code
and use it on your own system if you have the appropriate access.
Please do not charge for use of this code.  If you enjoy the program,
I'd love to hear from you.  

-<a href = mailto://aharris\@cs.iupui.edu>Andy</a>


";

  print end_html();
} # end showEditor

sub templatePreview{
  #analyze template and show how it will look

  $preview = h1("template preview");
  foreach $getALine (@template){

    #work on a COPY, so we don't actually modify the template
    $line = $getALine;

    #fix the topic title
    $line =~ s#<topic_?title>#Slideshow Title Here#i;
    $line =~ s#</topic_?title>##i;

    #fix the slide title
    $line =~ s#<slide_?title>#Slide Title Here#i;
    $line =~ s#</slide_?title>##i;

    #fix the previous tag
    $line =~ s#<prev>#"javascript:alert('this will show the previous slide')"#i;

    #fix the next tag
    $line =~ s#<next>#"javascript:alert('this will show the next slide')"#i;

    #fix the top tag
    $line =~ s#<top>#"javascript:alert('this will show the contents slide')"#i;

    #fix the items tag
    if ($line =~ m#<items>#i){
	$line = ul(li(["item one", 
                       "item two", 
                       "item three", 
                       "item four", 
                       "item five"]));
    } # end 'items' if


    $preview .= $line;
    
  } # end foreach

  return $preview;   

} # end templatePreview