////////////////////////////////////////////////////////////////////////////////////////////////
//
// rpViewer - Popup JavaScript Image Viewer
//
// made by:
//   Russ Prince 01-11-2004
//
// Feel free to use as you see fit.
//
////////////////////////////////////////////////////////////////////////////////////////////////

rpViewer is a free JavaScript image viewer for people that have lots of pictures on
websites but don't want the hassle of over complicated web pages to view them.  This
package can be used on your current image web pages with very little changes to the
original html code.  If you're tired of having to hit the back button after clicking
on every image then this script is perfect for you.

- Russ Prince  (01-11-2004)


Installation
============

Step 1:
  Unzip rpViewer.zip into the root of your website

Step 2:
  Test installation by opening http://yourwebsiteaddress/rpViewer/rpViewer_test.html
  If it opens correctly then you have properly installed rpViewer


Usage:
======

rpViewer is fairly easy to use.  It just requires a little extra code for each link to an image.
Basically it needs an id for the image, and a small bit of code to open the window.  Here are a
few steps that should work easily in most editors that will allow you to make the changes fairly
quickly.

Step 1:
  Open up your htm file for editing.  Make sure you can view the code.  Notepad works well.
  Search for:
    href=
    
  If the href= that is found is a link to an image, then replace it with:
    id='rpPic' onclick='return rpView(this)' href=

  Example:
    <a href="SomeImage.jpg" ... >
    becomes...
    <a id='rpPic' onclick='return rpView(this)' href="SomeImage.jpg" ... >

  Repeat this step until you have altered all image links.  It may seem odd that every link has
  the same id, but the rpViewer code takes care of that when the page is loaded.

Step 2:
  Place this single line at very end (bottom) of your html code:

<script language=javascript src="/rpViewer/rpViewer.js"></script>

Step 2 (Optional Customizations):

  There are a few variables you can change to alter the behavior of rpViewer.  Add the code below to the bottom
  of your html file (below the include line shown above) to change any of these options.  The values shown here
  are the default values:
  
<script>  
  viewerWidth     = 640;    // Defines the width of the viewer picture area.
  viewerHeight    = 640;    // Defines the height of the viewer picture area.
  panoramicScroll = true;   // Defines if the viewer should view panoramic images with a scrollbar. If set to false
                            // then all images will be resized to fit inside the viewer regardless of how wide or tall.
  panoramicRatio  = 1.8;    // Defines what size ratio constitues a panoramic image.  For example setting this to 2 is
                            // saying that one side must be twice as big as the other side. The ratio for a standard
                            // sized image is usually 1.33 (or 4 by 3)  If the ratio of the image you are viewing is
                            // greater than or equal to this ratio then a scrollbar will appear to help you view the image.
</script>

Step 3:
  That's it.  Enjoy!
  
  
How it works
============

The magic here is in the ability for JavaScript to communicate information from
window to window.  The code that does all of the actual work is in the 'rpViewer.js'
file which gets included in all of the pages you have image links on.  There really
isn't too much that it needs to do other than just keep track of the total number of
images, and a counter that indicates what the current image being viewed is.  It uses
the id tags that you added to each link to determine how many, and the names of each
image.  (getElementById is an incredibly useful function.) 

The 'rpViewer_pic.htm' file has a bunch of functions that basically call the
functions in the 'rpViewer.js' file to shuffle the counter around, and to get the
image names.

The 'viewer_buttons.htm' just has a few buttons on it that call a few of the functions
in the 'rpViewer_pic.htm' file.

Both the 'rpViewer_pic.htm' and 'viewer_buttons.htm' files include the 'viewer_keys.js'
code for the keyboard shortcuts to all of the functions in the 'rpViewer_pic.htm' file.

-
Russ Prince