function Picture(file, width, height, category, description)
{
  this.file = file;
  this.width = width;
  this.height = height;
  this.category = category;
  this.description = description;
}


function PictureScroller(scroller_id, picturearray, displayedwidth, displayedheight, startms, ms, ppm)
{
  this.id = scroller_id;
  this.interval = 0;
  this.startmilliseconds = startms;
  this.milliseconds = ms;
  this.pixelspermove = ppm;
  this.displayedwidth = displayedwidth;
  this.displayedheight = displayedheight;
  this.pictures = picturearray;
  this.totalwidth = 0;
  this.paused = true;
  this.picturesloaded = 0;
  this.readytostart = false;
}


PictureScroller.prototype.draw = function()
{
  var s = '\
    <div id="'+this.id+'.slider" style="width:'+this.displayedwidth+'px;height:'+this.displayedheight+'px;padding:2px;border:1px solid black;overflow:hidden;background-color:#c9cbd6;z-index:0;">\
      <table id="'+this.id+'.slidertable" style="z-index:1;">\
        <tr>\
  ';
  
  for (var a = 0; a < (this.pictures.length+1); a++) {
    s += '<td id="'+this.id+'.pic' + a + '" style="display:none;">\
          </td>\
    ';
  }
      
  s += '\
          <td id="'+this.id+'.loading" style="font-style:italic;vertical-align:top;display:none;">Loading images...</td>\
        </tr>\
      </table>\
    </div>\
    <div id="'+this.id+'.movebar" style="width:'+this.displayedwidth+'px;margin: 0px;padding: 2px;height:8px;border-bottom:1px solid #000000;border-left:1px solid #000000;border-right:1px solid #000000;background-color: #c9cbd6;z-index:0;">\
      <div id="'+this.id+'.scrollerbox" style="position:relative;width:8px;height:8px;margin: 0px;background-color: #000000;left:0px;z-index:1;"><!-- --></div>\
    </div>\
    <div id="'+this.id+'.databar" style="display:none;width:'+this.displayedwidth+'px;margin: 0px;padding: 2px;height:18px;border-bottom:1px solid #000000;background-color: #c9cbd6;z-index:0;">\
    </div>\
  ';
  
  document.getElementById(this.id).innerHTML = s;
 
  document.getElementById(this.id + '.scrollerbox').onclick = function(e)
  {
    // pauses or unpauses if scrollerbox is clicked
    var currentscroller = eval(getScrollerNameFromSubField(e.target.id));
    if (currentscroller.paused == true) {
      currentscroller.unpause();
    } else {
      currentscroller.pause();
    }
  }

  document.getElementById(this.id+".movebar").onclick = function(e)
  {
    try {
      var currentscroller = eval(getScrollerNameFromSubField(this.id));
      document.getElementById(getScrollerNameFromSubField(this.id)+'.databar').innerHTML += getScrollerNameFromSubField(this.id) + ":";
      e = e || window.event;
      var mousePos = mouseCoords(e).x;
      var outsidex = getElementAbsolutePos(this).x;
      var mouserelativex = mousePos - outsidex;

      
      document.getElementById(getScrollerNameFromSubField(this.id)+'.databar').innerHTML += "MRX=" + mouserelativex + ":";
      var newspot = parseInt((mouserelativex*(currentscroller.totalwidth - (currentscroller.displayedwidth)))/(currentscroller.displayedwidth));
      if (newspot < 0) newspot = 0;
      if (newspot > currentscroller.totalwidth) newspot = currentscroller.totalwidth - 8;
      // document.getElementById(currentscroller.id + ".movebarnumber").innerHTML = mouserelativex + "/" + newspot + "/" + currentscroller.id;
      document.getElementById(currentscroller.id+".slider").scrollLeft = newspot;
      currentscroller.moveScrollerBox(newspot);

    } catch(f) {
    }
  }
 
 
  this.addPhotoRecursive(0);
}


PictureScroller.prototype.addPhotoRecursive = function(picnum)
{
  var newpic = new Image();
  newpic.src = this.pictures[picnum].file;

  var adjustedwidth = parseInt((this.pictures[picnum].width * this.displayedheight) / this.pictures[picnum].height);
  this.totalwidth += adjustedwidth + 4;
  if ((this.totalwidth > (this.displayedwidth * (this.pixelspermove + 2))) && (this.readytostart == false)) {
    this.readytostart = true;
    document.getElementById(this.id+'.databar').innerHTML += "RTS:";
    this.startScroll();    
  }

  var newpiccode = '<td><a href="photoshow.html?photo=' + this.pictures[picnum].file + '"><img src="' + newpic.src + '" onload="' + this.id + '.displayPic(' + picnum + ');';
  if (this.pictures.length > (picnum+1)) {
    newpiccode += this.id + '.addPhotoRecursive(' + (picnum+1) + ');';
  } else {
    document.getElementById(this.id+'.loading').style.display = "none";
    document.getElementById(this.id+'.databar').innerHTML = "";
  
  }
  newpiccode += '" style="width:'+ adjustedwidth +'px;height:' + this.displayedheight + 'px;"></a></td><!--NPH-->';
 
  document.getElementById(this.id+'.pic' + picnum).innerHTML = newpiccode;
  document.getElementById(this.id+'.databar').innerHTML += picnum + ":";
}


PictureScroller.prototype.displayPic = function(picnum)
{
  document.getElementById(this.id+'.pic' + picnum).style.display = "table-cell";  
  // alert(this.id+'.pic' + picnum);
}


PictureScroller.prototype.startScroll = function()
{
  clearInterval(this.interval);
  document.getElementById(this.id + ".slider").scrollLeft = 0;
  this.moveScrollerBox(0);
  this.interval = setTimeout(this.id+".startScrollStage2();", this.startmilliseconds);
}


PictureScroller.prototype.startScrollStage2 = function()
{
  clearInterval(this.interval);
  this.unpause();
  this.interval = setInterval(this.id+".scrollPictureBar();", this.milliseconds);
}


PictureScroller.prototype.scrollPictureBar = function()
{
  if (this.paused == false) {
    var oldspot = document.getElementById(this.id+".slider").scrollLeft;
    document.getElementById(this.id+".slider").scrollLeft += this.pixelspermove;
    var newspot = document.getElementById(this.id+".slider").scrollLeft;
    if (oldspot == newspot) {
      clearInterval(this.interval);
      setTimeout(this.id + ".startScroll();", this.startmilliseconds);
    } else {
      this.moveScrollerBox(document.getElementById(this.id+".slider").scrollLeft);
    }
  }
}


PictureScroller.prototype.moveScrollerBox = function(newspot)
{
  var boxx = parseInt((newspot*(this.displayedwidth-8))/(this.totalwidth-this.displayedwidth - 8));
  document.getElementById(this.id + ".scrollerbox").style.left = boxx;
}



function getScrollerNameFromSubField(subfield)
{
  var scrollername = subfield.replace(/\..*/, "");
  return scrollername;
}


PictureScroller.prototype.pause = function()
{
  this.paused = true;
}


PictureScroller.prototype.unpause = function()
{
  this.paused = false;
}


/****************************************************************************/
function mouseCoords(e){
  if(e.pageX || e.pageY){
    return {x:e.pageX, y:e.pageY};
  }
  return {
    x:e.clientX + document.body.scrollLeft - document.body.clientLeft,
    y:e.clientY + document.body.scrollTop  - document.body.clientTop
  };
}


function __getIEVersion() {
    var rv = -1; // Return value assumes failure.
    if (navigator.appName == 'Microsoft Internet Explorer') {
        var ua = navigator.userAgent;
        var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
        if (re.exec(ua) != null)
            rv = parseFloat(RegExp.$1);
    }
    return rv;
}

function __getOperaVersion() {
    var rv = 0; // Default value
    if (window.opera) {
        var sver = window.opera.version();
        rv = parseFloat(sver);
    }
    return rv;
}

var __userAgent = navigator.userAgent;
var __isIE =  navigator.appVersion.match(/MSIE/) != null;
var __IEVersion = __getIEVersion();
var __isIENew = __isIE && __IEVersion >= 8;
var __isIEOld = __isIE && !__isIENew;

var __isFireFox = __userAgent.match(/firefox/i) != null;
var __isFireFoxOld = __isFireFox && ((__userAgent.match(/firefox\/2./i) != null) || (__userAgent.match(/firefox\/1./i) != null));
var __isFireFoxNew = __isFireFox && !__isFireFoxOld;

var __isWebKit =  navigator.appVersion.match(/WebKit/) != null;
var __isChrome =  navigator.appVersion.match(/Chrome/) != null;
var __isOpera =  window.opera != null;
var __operaVersion = __getOperaVersion();
var __isOperaOld = __isOpera && (__operaVersion < 10);

function __parseBorderWidth(width) {
    var res = 0;
    if (typeof(width) == "string" && width != null && width != "" ) {
        var p = width.indexOf("px");
        if (p >= 0) {
            res = parseInt(width.substring(0, p));
        }
        else {
            //do not know how to calculate other values (such as 0.5em or 0.1cm) correctly now
            //so just set the width to 1 pixel
            res = 1;
        }
    }
    return res;
}


//returns border width for some element
function __getBorderWidth(element) {
    var res = new Object();
    res.left = 0; res.top = 0; res.right = 0; res.bottom = 0;
    if (window.getComputedStyle) {
        //for Firefox
        var elStyle = window.getComputedStyle(element, null);
        res.left = parseInt(elStyle.borderLeftWidth.slice(0, -2));
        res.top = parseInt(elStyle.borderTopWidth.slice(0, -2));
        res.right = parseInt(elStyle.borderRightWidth.slice(0, -2));
        res.bottom = parseInt(elStyle.borderBottomWidth.slice(0, -2));
    }
    else {
        //for other browsers
        res.left = __parseBorderWidth(element.style.borderLeftWidth);
        res.top = __parseBorderWidth(element.style.borderTopWidth);
        res.right = __parseBorderWidth(element.style.borderRightWidth);
        res.bottom = __parseBorderWidth(element.style.borderBottomWidth);
    }

    return res;
}


//returns the absolute position of some element within document
function getElementAbsolutePos(elemID) {
    var element;
    if (typeof(elemID) == "string") {
        element = document.getElementById(elemID);
    }
    else {
        element = elemID;
    }

    var res = new Object();
    res.x = 0; res.y = 0;
    if (element !== null) {
        res.x = element.offsetLeft;

        var offsetParent = element.offsetParent;
        var offsetParentTagName = offsetParent != null ? offsetParent.tagName.toLowerCase() : "";

        if (__isIENew  && offsetParentTagName == 'td') {
            res.y = element.scrollTop;
        }
        else {
            res.y = element.offsetTop;
        }

        var parentNode = element.parentNode;
        var borderWidth = null;

        while (offsetParent != null) {
            res.x += offsetParent.offsetLeft;
            res.y += offsetParent.offsetTop;

            var parentTagName = offsetParent.tagName.toLowerCase();

            if ((__isIEOld && parentTagName != "table") || (__isFireFoxNew && parentTagName == "td")  || __isChrome) {
                borderWidth = __getBorderWidth(offsetParent);
                res.x += borderWidth.left;
                res.y += borderWidth.top;
            }

            if (offsetParent != document.body && offsetParent != document.documentElement) {
                res.x -= offsetParent.scrollLeft;
                res.y -= offsetParent.scrollTop;
            }


            //next lines are necessary to fix the problem with offsetParent
            if (!__isIE && !__isOperaOld || __isIENew) {
                while (offsetParent != parentNode && parentNode !== null) {
                    res.x -= parentNode.scrollLeft;
                    res.y -= parentNode.scrollTop;
                    if (__isFireFoxOld || __isWebKit) {
                        borderWidth = __getBorderWidth(parentNode);
                        res.x += borderWidth.left;
                        res.y += borderWidth.top;
                    }
                    parentNode = parentNode.parentNode;
                }
            }

            parentNode = offsetParent.parentNode;
            offsetParent = offsetParent.offsetParent;
        }
    }
    return res;
}





var pictures = new Array();
pictures[ 0] = new Picture("rooms/1King.jpg", 750, 562, "Rooms", "Room with 1 King Bed");
pictures[ 1] = new Picture("rooms/1Queen.jpg", 750, 562, "Rooms", "Room with 1 Queen Bed");
pictures[ 2] = new Picture("rooms/1QueenVictorian.jpg", 750, 562, "Rooms", "Victorian (1 Queen Bed) Room");
pictures[ 3] = new Picture("rooms/2Full.jpg", 750, 562, "Rooms", "Room with 2 Full Beds");
pictures[ 4] = new Picture("rooms/2Queen.jpg", 750, 562, "Rooms", "Room with 2 Queen Beds");
pictures[ 5] = new Picture("rooms/2QueenGarden.jpg", 750, 562, "Rooms", "Garden (2 Queen Beds) Room");
pictures[ 6] = new Picture("rooms/DeluxeKing.jpg", 750, 562, "Rooms", "Deluxe King Room");
pictures[ 7] = new Picture("rooms/DeluxeQueen.jpg", 750, 562, "Rooms", "Deluxe Queen Room");
pictures[ 8] = new Picture("rooms/KingDeluxePoolside.jpg", 750, 562, "Rooms", "King Deluxe Poolside Room");
pictures[ 9] = new Picture("rooms/Kitchen.jpg", 750, 562, "Rooms", "Guest Kitchen");

pictures[10] = new Picture("pictures/scenery/CavendishRoad.jpg", 750, 562, "Scenery", "Cavendish Road");
pictures[11] = new Picture("pictures/scenery/ClearwaterRiver.jpg", 750, 562, "Scenery", "Clearwater River");
pictures[12] = new Picture("pictures/scenery/Country.jpg", 750, 421, "Scenery", "Beautiful Country");
pictures[13] = new Picture("pictures/scenery/CountryRail.jpg", 750, 422, "Scenery", "Country Rail");
pictures[14] = new Picture("pictures/scenery/Creek.jpg", 750, 562, "Scenery", "Local Creek");
pictures[15] = new Picture("pictures/scenery/EarlyMorning.jpg", 750, 562, "Scenery", "Early Morning");
pictures[16] = new Picture("pictures/scenery/GrandadBridge~1.jpg", 750, 562, "Scenery", "Grandad Bridge");
pictures[17] = new Picture("pictures/scenery/GrandadBridge~2.jpg", 750, 562, "Scenery", "Grandad Bridge");
pictures[18] = new Picture("pictures/scenery/GrangemontRoad.jpg", 750, 562, "Scenery", "Grangemont Road");
pictures[19] = new Picture("pictures/scenery/Highway11.jpg", 750, 562, "Scenery", "Highway 11");
pictures[20] = new Picture("pictures/scenery/IdahoMountains~1.jpg", 750, 562, "Scenery", "Mountains");
pictures[21] = new Picture("pictures/scenery/MountainScene~2.jpg", 750, 562, "Scenery", "Mountains");
pictures[22] = new Picture("pictures/scenery/Mill.jpg", 750, 562, "Scenery", "Lumber Mill & Logging Truck");
pictures[23] = new Picture("pictures/scenery/MountainScene~1.jpg", 750, 562, "Scenery", "Mountains");
pictures[24] = new Picture("pictures/scenery/IdahoMountains~2.jpg", 480, 640, "Scenery", "Mountains");
pictures[25] = new Picture("pictures/scenery/RailroadTrestle~2.jpg", 750, 562, "Scenery", "Railroad Trestle");

pictures[26] = new Picture("pictures/motel/FrontOffice.jpg", 750, 562, "Motel", "Front Office");
pictures[27] = new Picture("pictures/motel/KonkolvilleMotel.jpg", 750, 562, "Motel", "Motel with Joseph & Sherry");
pictures[28] = new Picture("pictures/motel/PoolAndHotTub~1.jpg", 750, 562, "Motel", "Pool & Hot Tub");
pictures[29] = new Picture("pictures/motel/PoolAndHotTub~2.jpg", 750, 562, "Motel", "Pool & Hot Tub");
pictures[30] = new Picture("pictures/motel/Courtyard.jpg", 750, 562, "Motel", "Courtyard");
pictures[31] = new Picture("pictures/motel/Courtyard2.jpg", 750, 562, "Motel", "Courtyard");
pictures[32] = new Picture("pictures/motel/CourtyardFromSecondFloor.jpg", 750, 562, "Motel", "View of Courtyard from Second Floor");
pictures[33] = new Picture("pictures/motel/CourtyardFromFountain.jpg", 480, 360, "Motel", "Courtyard From Fountain");
pictures[34] = new Picture("pictures/motel/CourtyardFromParkingLot.jpg", 480, 360, "Motel", "Courtyard From Parking Lot");
pictures[35] = new Picture("pictures/motel/CourtyardLawnFromNW_2ndFloor.jpg", 480, 360, "Motel", "Courtyard Lawn From NorthWest on 2nd Floor");
pictures[36] = new Picture("pictures/motel/CourtyardLawnFromNW_GroundFloor1.jpg", 480, 360, "Motel", "Courtyard Lawn From NorthWest");
pictures[37] = new Picture("pictures/motel/CourtyardLawnFromNW_GroundFloor2.jpg", 480, 360, "Motel", "Courtyard Lawn From NorthWest");
pictures[38] = new Picture("pictures/motel/CourtyardLawnFromNW_GroundFloor3.jpg", 480, 360, "Motel", "Courtyard Lawn From NorthWest");
pictures[39] = new Picture("pictures/motel/DiningOutdoors.jpg", 480, 360, "Motel", "Dining Outdoors");
pictures[40] = new Picture("pictures/motel/DiningOutdoorsFromNW.jpg", 480, 360, "Motel", "Dining Outdoors From NorthWest");
pictures[41] = new Picture("pictures/motel/FrontFlowers.jpg", 480, 360, "Motel", "Flowers");
pictures[42] = new Picture("pictures/motel/FrontFlowers2.jpg", 480, 360, "Motel", "Flowers");
pictures[43] = new Picture("pictures/motel/FrontFlowers3.jpg", 480, 360, "Motel", "Flowers");
pictures[44] = new Picture("pictures/motel/Gazebo1.jpg", 480, 360, "Motel", "The &#39;Grill Your Own Steak Dinner&#39; Gazebo");
pictures[45] = new Picture("pictures/motel/GazeboAndCourtyard.jpg", 480, 360, "Motel", "The &#39;Grill Your Own Steak Dinner&#39; Gazebo and Outdoor Dining Area");

pictures[46] = new Picture("pictures/dworshak/DentAcres.jpg", 750, 562, "Dworshak Reservoir", "Dent Acres");
pictures[47] = new Picture("pictures/dworshak/DworshakDam.jpg", 750, 562, "Dworshak Reservoir", "Dworshak Dam");
pictures[48] = new Picture("pictures/dworshak/DworshakReservoir~1.jpg", 750, 562, "Dworshak Reservoir", "Dworshak Reservoir");
pictures[49] = new Picture("pictures/dworshak/DworshakReservoir~2.jpg", 750, 562, "Dworshak Reservoir", "Dworshak Reservoir");
pictures[50] = new Picture("pictures/dworshak/DworshakReservoir~3.jpg", 750, 562, "Dworshak Reservoir", "Dworshak Reservoir");
pictures[51] = new Picture("pictures/dworshak/DworshakReservoir~4.jpg", 750, 562, "Dworshak Reservoir", "Dworshak Reservoir");
pictures[52] = new Picture("pictures/dworshak/DworshakReservoir~5.jpg", 750, 562, "Dworshak Reservoir", "Dworshak Reservoir");
pictures[53] = new Picture("pictures/dworshak/IdahoMountains~3.jpg", 750, 562, "Dworshak Reservoir", "Dworshak Reservoir");
pictures[54] = new Picture("pictures/dworshak/DentBridge.jpg", 562, 750, "Dworshak Reservoir", "Dent Acres");

pictures[55] = new Picture("pictures/fishing/SteelheadFishing1.jpg", 750, 499, "Fishing", "Steelhead Fishing");
pictures[56] = new Picture("pictures/fishing/SteelheadFishing2.jpg", 750, 499, "Fishing", "Steelhead Fishing");
pictures[57] = new Picture("pictures/fishing/Tim,Tim,and Tom May 31,2010 Salmon.jpg", 750, 562, "Fishing", "Tim,Tim,& Tom May 31,2010");
pictures[58] = new Picture("pictures/fishing/AlisonAndMichelle.jpg", 480, 360, "Fishing", "Alison & Michelle");
pictures[59] = new Picture("pictures/fishing/BigFish.jpg", 480, 360, "Fishing", "Big Fish");
pictures[60] = new Picture("pictures/fishing/HalfordFamily.jpg", 480, 360, "Fishing", "Halford Family");
pictures[61] = new Picture("pictures/fishing/ClearwaterPuzzle1.jpg", 512, 384, "Fishing", "The Clearwater Puzzle");
pictures[62] = new Picture("pictures/fishing/MorningSpeyCastingScottSerrano2.jpg", 864, 648, "Fishing", "Bill Serrano, Morning Spey Casting");
pictures[63] = new Picture("pictures/fishing/NiceFishBillSerrano1.jpg", 512, 384, "Fishing", "Bill's Clearwater River Catch");
pictures[64] = new Picture("pictures/fishing/EarlyMorningBillSerrano1.jpg", 480, 640, "Fishing", "Bill Serrano, Early Morning Fishing");
pictures[64] = new Picture("pictures/fishing/SteveAndSenitaWatkins.jpg", 540, 960, "Fishing", "Steve And Senita Watkins");

pictures[65] = new Picture("pictures/visitors/OSS_1.jpg", 480, 360, "Visitors To The Motel", "Classic Car");
pictures[66] = new Picture("pictures/visitors/OSS_2.jpg", 480, 360, "Visitors To The Motel", "Classic Car");
pictures[67] = new Picture("pictures/visitors/OSS_3.jpg", 480, 360, "Visitors To The Motel", "Classic Car");
pictures[68] = new Picture("pictures/visitors/OSS_4.jpg", 480, 360, "Visitors To The Motel", "Classic Car");
pictures[69] = new Picture("pictures/visitors/ModelA_1.jpg", 480, 360, "Visitors To The Motel", "Model A");
pictures[70] = new Picture("pictures/visitors/ModelA_2.jpg", 480, 360, "Visitors To The Motel", "Model A");
pictures[71] = new Picture("pictures/visitors/bikes1.jpg", 480, 360, "Visitors To The Motel", "Motorcyles");
pictures[72] = new Picture("pictures/visitors/bikes2.jpg", 480, 360, "Visitors To The Motel", "Motorcyles");

pictures[73] = new Picture("pictures/wildlife/hummingbird2010.jpg", 480, 360, "Wildlife", "Hummingbird");
pictures[74] = new Picture("pictures/wildlife/Deer1.jpg", 480, 360, "Wildlife", "Deer");
pictures[75] = new Picture("pictures/wildlife/Deer2.jpg", 480, 360, "Wildlife", "Deer");
pictures[76] = new Picture("pictures/wildlife/Deer3.jpg", 480, 360, "Wildlife", "Deer");
pictures[77] = new Picture("pictures/wildlife/Turkey.jpg", 480, 360, "Wildlife", "Turkeys");
pictures[78] = new Picture("pictures/wildlife/Turkey2.jpg", 480, 360, "Wildlife", "Turkeys");
pictures[79] = new Picture("pictures/wildlife/Turkey3.jpg", 480, 360, "Wildlife", "Turkeys");