Kuo Lab Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Image gallery ======
A set of ''perl'' scripts for generating image gallery and html codes. I wrote these to manage [[http://thekuofamily.org/|my family web site]].

===== Photos =====
NOTE: requires ''ImageMagick''.

<code perl>
#!/usr/bin/perl -w
my $script_name = 'family_photo.12.pl';

# Chih-Horng Kuo <chkuo@lifedev.org>
# to generate html code for family website photo pages
# v12 2009/09/25
#   change the layout of individual photo page
# v11 2009/09/16
#   bug fix (files with the same name in the same month)
#   style change
#   update google analytics code
# v10 2008/02/19
#   add google analytics account in footer
# v9 2007/07/05
#   add display dir
# v8 2007/03/27
#   dir structure = YYYY/MM/DD
# v7 2007/03/26
#   individual html page layout
# v6 2007/03/20
#   individual html page for each photo
# v5 2007/03/16
#   xhtml 1.0, separate index from file
# v4 2006/11/21
#   use Getopt, add year dir
# v3 2005/12/08
#   change photofiles dir
# v2 2005/12/07
#   remove Nedstat Basic code
# v1 2005/11/28
#   to generate thumbnail and html code for family web photos

use strict;
use warnings;

use Image::Magick;

# set default values
my $original_dir = '/Users/chkuo/Sites/family/original/';
my $thmub_dir    = '/Users/chkuo/Sites/family/thumbnail/';
my $display_dir  = '/Users/chkuo/Sites/family/display/';
my $index_dir    = '/Users/chkuo/Sites/family/photos/';
my $debug        = 1;
my $num_col      = 6;
my $filename_ext = '.JPG';
my $thumb_prefix = 'T_';
my $disp_prefix  = 'D_';

# get input
my ( $year, $month );
$_ = shift;
if ( $_ =~ m/(\d{4})(\d{2})/ ) {
    ( $year, $month ) = ( $1, $2 );
}
else {
    print "perl $script_name YYYYMM\n";
    print "original_dir = $original_dir\n";
    print "thmub_dir = $thmub_dir\n";
    print "display_dir = $display_dir\n";
    print "index_dir = $index_dir\n";
    die;
}

my $in_dir  = $original_dir . $year . '/' . $month . '/';
my $out_dir = $index_dir . $year . '/';
system "mkdir -p $out_dir" unless -e $out_dir;
$thmub_dir = $thmub_dir . $year . '/' . $month . '/';
system "mkdir -p $thmub_dir" unless -e $thmub_dir;
$display_dir = $display_dir . $year . '/' . $month . '/';
system "mkdir -p $display_dir" unless -e $display_dir;
my $out_file = $out_dir . $month . '.html';
open OUT, ">$out_file" or die "Can't open output file $out_file\n";

my $count_file = 0;
my %file_id_hash;    # key = count_file, value = filename without extension
my %day_hash;        # key = count_file, value = day
my %index_HoA;       # key = day, value = array of count_file

opendir( DIR, $in_dir ) or die "can't open $in_dir: $!";
while ( defined( my $day = readdir(DIR) ) ) {
    if ( $day =~ m/^(\d{2})$/ ) {
        my $day_dir = $in_dir . $day . '/';
        opendir( DDIR, $day_dir ) or die "can't open $day_dir: $!";
        while ( defined( my $file = readdir(DDIR) ) ) {
            if ( $file =~ m/(.*)$filename_ext$/i ) {
                $count_file++;
                $file_id_hash{$count_file} = $1;
                $day_hash{$count_file}     = $day;
                push @{ $index_HoA{$day} }, $count_file;
            }
        }
        closedir(DDIR);
    }
}
closedir(DIR);

# check the presence of thumbnail files
my %thumb_HoH;    # key1 = day, key2 = file_id, value = 1 (if exists)
opendir( DIR, $thmub_dir ) or die "can't open $thmub_dir: $!";
while ( defined( my $day = readdir(DIR) ) ) {
    if ( $day =~ m/^(\d{2})$/ ) {
        my $thumb_day_dir = $thmub_dir . $day . '/';
        opendir( DDIR, $thumb_day_dir ) or die "can't open $thumb_day_dir: $!";
        while ( defined( my $file = readdir(DDIR) ) ) {
            if ( $file =~ m/^$thumb_prefix(.+)$filename_ext$/i ) {
                $thumb_HoH{$day}{$1} = 1;
            }
        }
        closedir(DDIR);
    }
}
closedir(DIR);

# check the presence of display files
my %disp_HoH;    # key1 = day, key2 = file_id, value = 1 (if exists)
opendir( DIR, $display_dir ) or die "can't open $display_dir: $!";
while ( defined( my $day = readdir(DIR) ) ) {
    if ( $day =~ m/^(\d{2})$/ ) {
        my $disp_day_dir = $display_dir . $day . '/';
        opendir( DDIR, $disp_day_dir ) or die "can't open $disp_day_dir: $!";
        while ( defined( my $file = readdir(DDIR) ) ) {
            if ( $file =~ m/^$disp_prefix(.+)$filename_ext$/i ) {
                $disp_HoH{$day}{$1} = 1;
            }
        }
        closedir(DDIR);
    }
}
closedir(DIR);

&print_header;

my $file_order = 0;
my %file_order_hash;    # key = index, value = file_order
my %order_to_index;     # key = file_order, value = index
my @sorted_indices;     # list of indices, sorted by day and file_id
foreach my $day ( sort keys %index_HoA ) {
    my $day_dir     = $in_dir . $day . '/';
    my $thm_out_dir = $thmub_dir . $day . '/';
    system "mkdir -p $thm_out_dir" unless -e $thm_out_dir;
    my $disp_out_dir = $display_dir . $day . '/';
    system "mkdir -p $disp_out_dir" unless -e $disp_out_dir;
    foreach my $index ( sort { $file_id_hash{$a} cmp $file_id_hash{$b} }
        @{ $index_HoA{$day} } )
    {
        $file_order++;
        $file_order_hash{$index}     = $file_order;
        $order_to_index{$file_order} = $index;
        push @sorted_indices, $index;

        my $file_id = $file_id_hash{$index};
        if ( $thumb_HoH{$day}{$file_id} ) {
            print "exists thumbnail file for $file_id\n" if ($debug);
        }
        else {
            my $in  = $day_dir . $file_id . $filename_ext;
            my $out = $thm_out_dir . $thumb_prefix . $file_id . $filename_ext;
            print "$in => $out\n" if ($debug);
            my $image = new Image::Magick;
            $image->Read("$in");
            $image->Scale( geometry => "120x120" );
            $image->Write("$out");
        }

        if ( $disp_HoH{$day}{$file_id} ) {
            print "exists display file for $file_id\n" if ($debug);
        }
        else {
            my $in  = $day_dir . $file_id . $filename_ext;
            my $out = $disp_out_dir . $disp_prefix . $file_id . $filename_ext;
            print "$in => $out\n" if ($debug);
            my $image = new Image::Magick;
            $image->Read("$in");
            $image->Scale( geometry => "600x600" );
            $image->Write("$out");
        }

        if ( ( $file_order % $num_col ) == 1 ) {
            print OUT "\t\t<tr>\n";
        }

        print OUT "\t\t\t", '<td class="photo_thm"><a href="',
          $month, '/', $day, '/', $file_id, '.html',
          '"><img class="photo_thm" src="../../thumbnail/',
          $year, '/', $month, '/', $day, '/',
          "$thumb_prefix$file_id$filename_ext",
          '" alt="" /></a><br /><span class="filename">',
          $file_order, '/', $count_file, '<br />',
          $file_id, '</span></td>', "\n";

        if ( ( $file_order % $num_col ) == 0 ) {
            print OUT "\t\t<\/tr>\n";
        }
    }
}
if ( ( $file_order % $num_col ) != 0 ) {
    print OUT "\t\t</tr>\n";
}

&print_footer;
close OUT;

# html for each photo
foreach my $index (@sorted_indices) {
    my $day     = $day_hash{$index};
    my $out_dir = $index_dir . $year . '/' . $month . '/' . $day . '/';
    system "mkdir -p $out_dir" unless -e $out_dir;

    my $file_id = $file_id_hash{$index};
    my $out_file =
      $index_dir . $year . '/' . $month . '/' . $day . '/' . $file_id . '.html';
    open OUT, ">$out_file" or die "Can't open output file $out_file\n";
    &print_ind($index);

    close OUT;
}

sub print_header {
    print OUT '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"', "\n";
    print OUT '"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',     "\n";
    print OUT
      '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">',
      "\n";
    print OUT "\t", '<head>', "\n";
    print OUT "\t\t",
      '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />',
      "\n";
    print OUT "\t\t",
      '<link rel="stylesheet" type="text/css" href="../../css/main.css" />',
      "\n";
    print OUT "\t\t", '<title>The Kuo Family: Photos: ', $year, '/', $month,
      '</title>', "\n";
    print OUT "\t", '</head>', "\n";

    print OUT "\t",   '<body>',                     "\n";
    print OUT "\t\t", '<!-- Start of Top Menu -->', "\n";
    print OUT "\t\t", '<div class="top_menu">',     "\n";
    print OUT "\t\t\t",
      '<a class="top_menu" href="../../index.html">[The Kuo Family] Home:</a>',
      "\n";
    print OUT "\t\t\t",
      '<a class="top_menu" href="../../photos.html">Photos:</a>', "\n";
    print OUT "\t\t\t", '<a class="top_menu" href="', $month, '.html">', $year,
      '/', $month, '</a>', "\n";
    print OUT "\t\t", '</div>', "\n";
    print OUT "\t\t", '<!-- End of Top Menu -->', "\n";

    print OUT "\t\t", '<hr />', "\n";

    print OUT "\t\t", '<h2>', $year, '/', $month, '</h2>', "\n";
    print OUT "\t\t", '<table class="photos_index">', "\n";

}

sub print_footer {
    print OUT "\t\t", '</table>', "\n";
    print OUT "\t\t", '<hr />',   "\n";
    &print_license;
    &print_google_analytics;
    print OUT "\t", '</body>', "\n";
    print OUT '</html>', "\n";
}


sub print_ind {
    my $index = shift @_;
    print OUT '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"', "\n";
    print OUT '"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',     "\n";
    print OUT
      '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">',
      "\n";
    print OUT "\t", '<head>', "\n";
    print OUT "\t\t",
      '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />',
      "\n";
    print OUT "\t\t", '<link rel="stylesheet" ',
      'type="text/css" href="../../../../css/main.css" />', "\n";

    print OUT "\t\t", '<title>The Kuo Family: Photos: ',
      $year, '/', $month, '/', $day_hash{$index}, ' ', $file_id_hash{$index}, 
      '</title>', "\n";
    print OUT "\t",   '</head>',                    "\n";
    print OUT "\t",   '<body>',                     "\n";
    
    print OUT "\t\t", '<!-- Start of Top Menu -->', "\n";

    print OUT "\t\t", '<div class="top_menu">', "\n";
    print OUT "\t\t\t",
      '<a class="top_menu" href="../../../../index.html">[The Kuo Family] Home:</a>',
      "\n";
    print OUT "\t\t\t",
      '<a class="top_menu" href="../../../../photos.html">Photos:</a>', "\n";
    print OUT "\t\t\t", '<a class="top_menu" href="../../', 
      $month, '.html">', $year, '/', $month, '</a>', "\n";
    print OUT "\t\t", '</div>', "\n";
    print OUT "\t\t", '<!-- End of Top Menu -->', "\n";
    
    print OUT "\t\t", '<hr />', "\n";
    
    print OUT "\t\t", '<table>', "\n";
    print OUT "\t\t", '<tr>', "\n";
    print OUT "\t\t\t",
      '<td class="center" height="640" width="800"><a href="../../../../original/',
      $year, '/', $month, '/', $day_hash{$index}, '/', $file_id_hash{$index},
      $filename_ext, '"><img class="photo_disp" src="../../../../display/',
      $year, '/', $month, '/', $day_hash{$index}, '/',
      $disp_prefix, $file_id_hash{$index}, $filename_ext,
      '" alt="" /></a></td>', "\n";
    print OUT "\t\t\t", '<td class="center" height="640" width="200">', "\n";
    print OUT "\t\t\t\t", '<table>', "\n";
    my $file_order = $file_order_hash{$index};
    my $j;
    $j = ( $file_order - 2 );
    &print_j($j);
    $j = ( $file_order - 1 );
    &print_j($j);
    print OUT "\t\t\t\t\t", '<tr>', "\n";
    print OUT "\t\t\t\t\t\t", '<td class="center"><span class="filename">',
      $file_order, '/', $count_file, '</span></td>', "\n";
    print OUT "\t\t\t\t\t", '</tr>', "\n";
    $j = ( $file_order + 1 );
    &print_j($j);
    $j = ( $file_order + 2 );
    &print_j($j);
    print OUT "\t\t\t\t", '</table>', "\n";
    print OUT "\t\t\t", '</td>', "\n";
    print OUT "\t\t", '</tr>', "\n";
    print OUT "\t\t", '</table>', "\n";
    print OUT "\t\t", '<hr />',   "\n";
    &print_license;
    &print_google_analytics;
    print OUT "\t", '</body>', "\n";
    print OUT '</html>', "\n";
}

sub print_j {
    my $j = shift @_;
    if ( $j >= 1 && $j <= $count_file ) {
        my $index   = $order_to_index{$j};
        my $day     = $day_hash{$index};
        my $file_id = $file_id_hash{$index};
        print OUT "\t\t\t\t\t", '<tr>', "\n";
        print OUT "\t\t\t\t\t\t", '<td class="photo_thm"><a href="../',
          $day, '/', $file_id,
          '.html"><img class="photo_thm_menu" src="../../../../thumbnail/',
          $year, '/', $month, '/', $day, '/',
          $thumb_prefix, $file_id, $filename_ext,
          '" alt="" /></a></td>', "\n";
        print OUT "\t\t\t\t\t", '</tr>', "\n";

    }
    else {
        print OUT "\t\t\t\t\t", '<tr>', "\n";
        print OUT "\t\t\t\t\t\t", '<td class="photo_thm">&nbsp;</td>', "\n";
        print OUT "\t\t\t\t\t", '</tr>', "\n";
    }
}

sub print_license {
    print OUT "\t\t", '<div class="footer">',                "\n";
    print OUT "\t\t", '<!-- Start of License Statement -->', "\n";
    print OUT "\t\t", 'Except where otherwise noted, ',
      'content on this site is licensed under a ',
      '<a class="footer" rel="license" ',
      'href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">',
      'Creative Commons Attribution-Noncommercial-Share Alike 3.0 ',
      'United States License</a>.', "\n";
    print OUT "\t\t", '<!-- End of License Statement -->', "\n";
    print OUT "\t\t", '</div>', "\n";
}

sub print_google_analytics {
    print OUT "\t\t", '<!-- Start of Google Analytics Code -->', "\n";
    print OUT "\t\t", '<script type="text/javascript">',         "\n";
    print OUT "\t\t\t",
      'var gaJsHost = (("https:" == document.location.protocol) ',
      '? "https://ssl." : "http://www.");', "\n";
    print OUT "\t\t\t",
      'document.write(unescape("%3Cscript src=\'" ',
      '+ gaJsHost + "google-analytics.com/ga.js\' ',
      'type=\'text/javascript\'%3E%3C/script%3E"));', "\n";
    print OUT "\t\t",   '</script>',                       "\n";
    print OUT "\t\t",   '<script type="text/javascript">', "\n";
    print OUT "\t\t\t", 'try {',                           "\n";
    print OUT "\t\t\t\t",
      'var pageTracker = _gat._getTracker("UA-2138404-2");', "\n";
    print OUT "\t\t\t\t", 'pageTracker._trackPageview();',         "\n";
    print OUT "\t\t\t",   '} catch(err) {}',                       "\n";
    print OUT "\t\t",     '</script>',                             "\n";
    print OUT "\t\t",     '<!-- End of Google Analytics Code -->', "\n";
}

exit(0);
</code>

===== Movies =====
NOTE: requires ''FFmpeg''.

<code perl>
#!/usr/bin/perl -w

my $script_name = 'family_movie.10.pl';

# Chih-Horng Kuo <chkuo@lifedev.org>
# to generate html code for family website movie pages
# v10 2009/09/25
#   use ffmpeg to convert video files into .FLV format
#   generate individual page for each video
#   copy .THM to FLV dir
# v9 2009/09/16
#   bug fix (files with the same name in the same month)
#   style change
#   update google analytics code
# v8 2008/02/19
#   add google analytics account in footer
# v7 2007/03/27
#   dir structure = YYYY/MM/DD
# v6 2007/03/16
#   xhtml 1.0, separate index from file
# v5 2006/11/21
#   use Getopt, add year dir
# v4 2005/12/30
#   accept .avi, .mov, .mpg
# v3 2005/12/08
#   change moviefiles dir
# v2 2005/12/07
#   remove Nedstat Basic code
# v1 2005/11/29

use strict;
use warnings;

my $original_dir   = '/Users/chkuo/Sites/family/original/';
my $index_dir      = '/Users/chkuo/Sites/family/movies/';
my $flash_dir      = '/Users/chkuo/Sites/family/flash/';
my $ffmepg_exe     = '/usr/local/bin/ffmpeg';
my $ffmepg_out_arg = "-b 600k -r 24 -s 640x480 -ab 96k -ar 44100";
my $flash_file_ext = 'FLV';
my $debug          = 1;
my $num_col        = 5;
my ( $year, $month );

$_ = shift;
if ( $_ =~ m/(\d{4})(\d{2})/ ) {
    ( $year, $month ) = ( $1, $2 );
}
else {
    print "perl $script_name YYYYMM\n";
    print "original_dir = $original_dir\n";
    print "index_dir = $index_dir\n";
    die;
}

my $in_dir  = $original_dir . $year . '/' . $month . '/';
my $out_dir = $index_dir . $year . '/';
system "mkdir -p $out_dir" unless -e $out_dir;
$flash_dir = $flash_dir . $year . '/' . $month . '/';

# open output index file
my $index_file = $out_dir . $month . '.html';
open OUT, ">$index_file" or die "Can't open output file $index_file\n";

my $count_file = 0;
my %file_id_hash;    # key = count_file, value = filename without extension
my %day_hash;        # key = count_file, value = day
my %index_HoA;       # key = day, value = array of count_file
my %ext_hash;        # key = count_file, value = file_ext
my %thumb_HoH;       # key1 = day, key2 = file_id, value = 1 if .THM exists
opendir( DIR, $in_dir ) or die "can't open $in_dir: $!";
while ( defined( my $day = readdir(DIR) ) ) {
    if ( $day =~ m/^(\d{2})$/ ) {
        my $day_dir = $in_dir . $day . '/';
        opendir( DDIR, $day_dir ) or die "can't open $day_dir: $!";
        while ( defined( my $in_file = readdir(DDIR) ) ) {
            if ( $in_file =~ /^(.+)\.(AVI|MPG|MOV)$/i ) {
                $count_file++;
                $file_id_hash{$count_file} = $1;
                $ext_hash{$count_file}     = $2;
                $day_hash{$count_file}     = $day;
                push @{ $index_HoA{$day} }, $count_file;
                print "movie_file: $in_file\n" if ($debug);
            }
            elsif ( $in_file =~ /^(.+)\.(THM)$/i ) {
                $thumb_HoH{$day}{$1} = 1;
                print "thm_file: $in_file\n" if ($debug);
            }
            else {
                # do nothing
            }
        }
        closedir(DDIR);
    }
}
closedir(DIR);

&print_header;

my $file_order = 0;
my %file_order_hash;    # key = index, value = file_order
my %order_to_index;     # key = file_order, value = index
my @sorted_indices;     # list of indices, sorted by day and file_id
foreach my $day ( sort keys %index_HoA ) {
    my $flash_out_dir = $flash_dir . $day . '/';
    system "mkdir -p $flash_out_dir" unless -e $flash_out_dir;

    foreach my $index ( sort @{ $index_HoA{$day} } ) {
        $file_order++;
        $file_order_hash{$index}     = $file_order;
        $order_to_index{$file_order} = $index;
        push @sorted_indices, $index;
        my $file_id = $file_id_hash{$index};
        
        # video conversion using ffmpeg
        my $flash_out_file = $flash_out_dir . $file_id . '.' . $flash_file_ext;
        if ( -e $flash_out_file ) {
            # .FLV file exists
            print "$flash_out_file exists\n";
        }
        else {
            my $original_file = $in_dir . $day . '/' . $file_id . '.' . $ext_hash{$index};
            my $ffmpeg_cmd = "$ffmepg_exe -i $original_file $ffmepg_out_arg $flash_out_file";
            print "$ffmpeg_cmd\n";
            system "$ffmpeg_cmd";
        }
        
        # copy .THM file
        my $out_thm_file = $flash_out_dir . $file_id . '.THM';
        if ( -e $out_thm_file ) {
            # .THM file exists
            print "$out_thm_file exists\n";
        }
        else {
            my $in_thm_file  = $in_dir . $day . '/' . $file_id . '.THM';
            system "cp -p $in_thm_file $out_thm_file";
        }
        
        # print index html
        if ( ( $file_order % $num_col ) == 1 ) {
            print OUT "\t\t<tr>\n";
        }

        print OUT "\t\t\t", '<td class="center"><a href="',
          $month, '/', $day, '/', $file_id, '.html', '">';
        if ( exists $thumb_HoH{$day}{$file_id} ) {
            print OUT '<img class="movie_thm" src="../../flash/',
              $year, '/', $month, '/', $day, '/', $file_id, '.THM',
              '" alt="" /></a><br />';
        }
        else {
            warn "$year/$month/$day/$file_id.THM not found!\n";
        }

        print OUT '<span class="filename">',
          $file_order, '/', $count_file, '<br />',
          $file_id, '.', $ext_hash{$index}, '</span></td>', "\n";

        if ( ( $file_order % $num_col ) == 0 ) {
            print OUT "\t\t<\/tr>\n";
        }
    }
}
if ( ( $file_order % $num_col ) != 0 ) {
    print OUT "\t\t<\/tr>\n";
}

&print_footer;
close OUT;

# print html page for individual video file
foreach my $day ( sort keys %index_HoA ) {
    my $indiv_out_dir = $out_dir . $month . '/' . $day . '/';
    system "mkdir -p $indiv_out_dir" unless -e $indiv_out_dir;

    foreach my $index ( sort @{ $index_HoA{$day} } ) {
        my $indiv_file = $indiv_out_dir . $file_id_hash{$index} . '.html';
        open OUT, ">$indiv_file" or die "Can't open output file $indiv_file\n";
        &print_ind($index);        
        close OUT;
    }
}

# functions
sub print_header {
    print OUT '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"', "\n";
    print OUT '"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',     "\n";
    print OUT
      '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">',
      "\n";
    print OUT "\t", '<head>', "\n";
    print OUT "\t\t",
      '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />',
      "\n";
    print OUT "\t\t",
      '<link rel="stylesheet" type="text/css" href="../../css/main.css" />',
      "\n";
    print OUT "\t\t", '<title>The Kuo Family: Movies: ', 
      $year, '/', $month, '</title>', "\n";
    print OUT "\t",   '</head>',                    "\n";

    print OUT "\t",   '<body>',                     "\n";
    print OUT "\t\t", '<!-- Start of Top Menu -->', "\n";
    print OUT "\t\t", '<div class="top_menu">', "\n";
    print OUT "\t\t\t",
      '<a class="top_menu" href="../../index.html">[The Kuo Family] Home:</a>',
      "\n";
    print OUT "\t\t\t",
      '<a class="top_menu" href="../../movies.html">Movies:</a>', "\n";
    print OUT "\t\t\t", '<a class="top_menu" href="', $month, '.html">', 
      $year, '/', $month, '</a>', "\n";
    print OUT "\t\t", '</div>', "\n";
    print OUT "\t\t", '<!-- End of Top Menu -->', "\n";

    print OUT "\t\t", '<hr />', "\n";

    print OUT "\t\t", '<h2>', $year, '/', $month, '</h2>', "\n";
    print OUT "\t\t", '<table>', "\n";

}

sub print_footer {
    print OUT "\t\t", '</table>', "\n";
    print OUT "\t\t", '<hr />',   "\n";
    &print_license;
    &print_google_analytics;
    print OUT "\t", '</body>', "\n";
    print OUT '</html>', "\n";
}

sub print_ind {
    my $index = shift @_;
    print OUT '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"', "\n";
    print OUT '"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',     "\n";
    print OUT
      '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">',
      "\n";
    print OUT "\t", '<head>', "\n";
    print OUT "\t\t",
      '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />',
      "\n";
    print OUT "\t\t", '<link rel="stylesheet" ',
      'type="text/css" href="../../../../css/main.css" />', "\n";

    print OUT "\t\t", '<title>The Kuo Family: Movies: ',
      $year, '/', $month, '/', $day_hash{$index}, ' ', $file_id_hash{$index}, 
      '</title>', "\n";
    print OUT "\t",   '</head>',                    "\n";
    print OUT "\t",   '<body>',                     "\n";
    print OUT "\t\t", '<!-- Start of Top Menu -->', "\n";

    print OUT "\t\t", '<div class="top_menu">', "\n";
    print OUT "\t\t\t",
      '<a class="top_menu" href="../../../../index.html">[The Kuo Family] Home:</a>',
      "\n";
    print OUT "\t\t\t",
      '<a class="top_menu" href="../../../../movies.html">Movies:</a>', "\n";
    print OUT "\t\t\t", '<a class="top_menu" href="../../', 
      $month, '.html">', $year, '/', $month, '</a>', "\n";
    print OUT "\t\t", '</div>', "\n";
    print OUT "\t\t", '<!-- End of Top Menu -->', "\n";

    print OUT "\t\t", '<hr />', "\n";
    
    print OUT "\t\t", '<table>', "\n";
    print OUT "\t\t", '<tr>', "\n";
    print OUT "\t\t\t", '<td class="center" height="640" width="800">', "\n";
    print OUT "\t\t\t\t", 
      "<script type='text/javascript' src='../../../../mediaplayer/swfobject.js'>\n";
    print OUT "\t\t\t\t", "</script>\n";
    print OUT "\t\t\t\t", "<div id='mediaspace'></div>\n";
    print OUT "\t\t\t\t", "<script type='text/javascript'>\n";
    print OUT "\t\t\t\t\t", "var so = new SWFObject('", 
      "../../../../mediaplayer/player.swf','mpl','640','480','9');\n";
    print OUT "\t\t\t\t\t", "so.addParam('allowfullscreen','true');\n";
    print OUT "\t\t\t\t\t", "so.addParam('allowscriptaccess','always');\n";
    print OUT "\t\t\t\t\t", "so.addParam('wmode','opaque');\n";
    print OUT "\t\t\t\t\t", "so.addVariable('image','../flash/", 
      $year, '/', $month, '/', $day_hash{$index}, '/', $file_id_hash{$index},
      '.THM', "')\n";
    print OUT "\t\t\t\t\t", "so.addVariable('file','../flash/", 
      $year, '/', $month, '/', $day_hash{$index}, '/', $file_id_hash{$index},
      '.', $flash_file_ext, "')\n";
    print OUT "\t\t\t\t\t", "so.addVariable('autostart','true');\n";
    print OUT "\t\t\t\t\t", "so.write('mediaspace');\n";
    print OUT "\t\t\t\t", "</script>\n";
    print OUT "\t\t\t", '</td>', "\n";
    
    print OUT "\t\t\t", '<td class="center" height="640" width="200">', "\n";
    print OUT "\t\t\t\t", '<table>', "\n";
    my $file_order = $file_order_hash{$index};
    my $j;
    $j = ( $file_order - 2 );
    &print_j($j);
    $j = ( $file_order - 1 );
    &print_j($j);
    print OUT "\t\t\t\t\t", '<tr>', "\n";
    print OUT "\t\t\t\t\t\t", '<td class="center"><span class="filename">',
      $file_order, '/', $count_file, '</span></td>', "\n";
    print OUT "\t\t\t\t\t", '</tr>', "\n";
    $j = ( $file_order + 1 );
    &print_j($j);
    $j = ( $file_order + 2 );
    &print_j($j);
    print OUT "\t\t\t\t", '</table>', "\n";
    print OUT "\t\t\t", '</td>', "\n";
    
    print OUT "\t\t", '</tr>', "\n";
    print OUT "\t\t", '</table>', "\n";
    print OUT "\t\t", '<hr />',   "\n";
    &print_license;
    &print_google_analytics;
    print OUT "\t", '</body>', "\n";
    print OUT '</html>', "\n";
}

sub print_j {
    my $j = shift @_;
    if ( $j >= 1 && $j <= $count_file ) {
        my $index   = $order_to_index{$j};
        my $day     = $day_hash{$index};
        my $file_id = $file_id_hash{$index};
        print OUT "\t\t\t\t\t", '<tr>', "\n";
        print OUT "\t\t\t\t\t\t", '<td class="movie_thm"><a href="../',
          $day, '/', $file_id,
          '.html"><img class="movie_thm_menu" src="../../../../flash/',
          $year, '/', $month, '/', $day, '/',
          $file_id, '.THM', '" alt="" /></a></td>', "\n";
        print OUT "\t\t\t\t\t", '</tr>', "\n";
    }
    else {
        print OUT "\t\t\t\t\t", '<tr>', "\n";
        print OUT "\t\t\t\t\t\t", '<td class="movie_thm">&nbsp;</td>', "\n";
        print OUT "\t\t\t\t\t", '</tr>', "\n";
    }
}

sub print_license {
    print OUT "\t\t", '<div class="footer">',                "\n";
    print OUT "\t\t", '<!-- Start of License Statement -->', "\n";
    print OUT "\t\t", 'Except where otherwise noted, ',
      'content on this site is licensed under a ',
      '<a class="footer" rel="license" ',
      'href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">',
      'Creative Commons Attribution-Noncommercial-Share Alike 3.0 ',
      'United States License</a>.', "\n";
    print OUT "\t\t", '<!-- End of License Statement -->', "\n";
    print OUT "\t\t", '</div>', "\n";
}

sub print_google_analytics {
    print OUT "\t\t", '<!-- Start of Google Analytics Code -->', "\n";
    print OUT "\t\t", '<script type="text/javascript">',         "\n";
    print OUT "\t\t\t",
      'var gaJsHost = (("https:" == document.location.protocol) ',
      '? "https://ssl." : "http://www.");', "\n";
    print OUT "\t\t\t",
      'document.write(unescape("%3Cscript src=\'" ',
      '+ gaJsHost + "google-analytics.com/ga.js\' ',
      'type=\'text/javascript\'%3E%3C/script%3E"));', "\n";
    print OUT "\t\t",   '</script>',                       "\n";
    print OUT "\t\t",   '<script type="text/javascript">', "\n";
    print OUT "\t\t\t", 'try {',                           "\n";
    print OUT "\t\t\t\t",
      'var pageTracker = _gat._getTracker("UA-2138404-2");', "\n";
    print OUT "\t\t\t\t", 'pageTracker._trackPageview();',         "\n";
    print OUT "\t\t\t",   '} catch(err) {}',                       "\n";
    print OUT "\t\t",     '</script>',                             "\n";
    print OUT "\t\t",     '<!-- End of Google Analytics Code -->', "\n";
}

exit(0);
</code>