////////////////////////////////////////////////////////////////////////////////////////////////
//
// rpViewer - Popup JavaScript Image Viewer
//
// made by:
//   Russ Prince     01-11-2004
//   Latest Changes: 07-09-2009
//
// 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 nearly no 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 now super extremely simple to use.  It just requires you to add one line of code at the
bottom of your html page.  rpViewer automatically looks for any links to images and will pop them up
in a popup window to make browsing them easier.

To use just simply follow these directions:
  Open up your htm file for editing.  Make sure you can view the code.  Notepad works well.
  Place this single line at very end (bottom) of your html code:

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


Optional Customizations:
========================

  There are a few variables you can change to alter the images that rpViewer finds and how it looks.
  Add the any or all following code ABOVE the line in step 1 so that when rpViewer initializes it
  uses these settings.  The values listed here are the default values used.

<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 the ratio specified then a scrollbar will appear to
                            // help you view the image.
                            
  extensions       = "jpg,jpeg,gif"; // List of image extensions you want rpViewer to view
  includeFilter    = "";             // Only include links that contain this text
  excludeFilter    = "";             // Exclude any link that contain this text
  excludeIDs       = "rpIgnore";     // List of link id's to ignore
  borderSize       = 0;              // Puts a frame around the image links
  borderColor      = ""              // Color of frame
  borderColorLight = ""              // Hilight frame color
  borderColorDark  = ""              // Dark frame color
</script>

  
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.

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