// -------------------------------------------------------------------
// Image Thumbnail Viewer Script- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Last updated: Jan 22nd, 2007
// -------------------------------------------------------------------

var thumbnailviewer={
enableTitle: false, //Should "title" attribute of link be used as description?
enableAnimation: true, //Enable fading animation?
definefooter: '<div class="footerbar"><img src="../images/reverse.jpg" onClick="PreviousImage()"> &nbsp; <img src="../images/close.jpg" onClick="thumbnailviewer.closeit()"> &nbsp; <img src="../images/forward.jpg" onClick="NextImage()"></div>', //Define HTML for footer interface
defineLoading: '<img src="../images/loading.gif" /> Loading Image...', //Define HTML for "loading" div

/////////////No need to edit beyond here/////////////////////////

scrollbarwidth: 16,
opacitystring: 'filter:progid:DXImageTransform.Microsoft.alpha(opacity=10); -moz-opacity: 0.1; opacity: 0.1',
targetlinks:[], //Array to hold links with rel="thumbnail"

createthumbBox:function(){
//write out HTML for Image Thumbnail Viewer plus loading div
document.write('<div id="thumbBox"><div id="thumbImage"></div>'+this.definefooter+'</div>')
document.write('<div id="thumbLoading">'+this.defineLoading+'</div>')
this.thumbBox=document.getElementById("thumbBox")
this.thumbImage=document.getElementById("thumbImage") //Reference div that holds the shown image
this.thumbLoading=document.getElementById("thumbLoading") //Reference "loading" div that will be shown while image is fetched
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
},


centerDiv:function(divobj){ //Centers a div element on the page
var ie=document.all && !window.opera
var dom=document.getElementById
var scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset
var scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset
var docwidth=(ie)? this.standardbody.clientWidth : window.innerWidth-this.scrollbarwidth
var docheight=(ie)? this.standardbody.clientHeight: window.innerHeight
var docheightcomplete=(this.standardbody.offsetHeight>this.standardbody.scrollHeight)? this.standardbody.offsetHeight : this.standardbody.scrollHeight //Full scroll height of document
var objwidth=divobj.offsetWidth //width of div element
var objheight=divobj.offsetHeight //height of div element
var topposition=(docheight>objheight)? scroll_top+docheight/2-objheight/2+"px" : scroll_top+10+"px" //Vertical position of div element: Either centered, or if element height larger than viewpoint height, 10px from top of viewpoint
divobj.style.left=docwidth/2-objwidth/2+"px" //Center div element horizontally
divobj.style.top=Math.floor(parseInt(topposition))+"px"
divobj.style.visibility="visible"
},

showthumbBox:function(){ //Show ThumbBox div
this.centerDiv(this.thumbBox)
if (this.enableAnimation){ //If fading animation enabled
this.currentopacity=0.1 //Starting opacity value
this.opacitytimer=setInterval("thumbnailviewer.opacityanimation()", 20)
}
},


loadimage:function(link){ //Load image function that gets attached to each link on the page with rel="thumbnail"
if (this.thumbBox.style.visibility=="visible") //if thumbox is visible on the page already
this.closeit() //Hide it first (not doing so causes triggers some positioning bug in Firefox
var imageHTML='<img src="'+link.getAttribute("href")+'" name="VCRImage" style="'+this.opacitystring+'" />' //Construct HTML for shown image
if (this.enableTitle && link.getAttribute("title")) //Use title attr of the link as description?
imageHTML+='<br />'+link.getAttribute("title")
this.centerDiv(this.thumbLoading) //Center and display "loading" div while we set up the image to be shown
this.thumbImage.innerHTML=imageHTML //Populate thumbImage div with shown image's HTML (while still hidden)
this.featureImage=this.thumbImage.getElementsByTagName("img")[0] //Reference shown image itself
this.featureImage.onload=function(){ //When target image has completely loaded
thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div
thumbnailviewer.showthumbBox() //Display "thumbbox" div to the world!
}
if (document.all && !window.createPopup) //Target IE5.0 browsers only. Address IE image cache not firing onload bug: panoramio.com/blog/onload-event/
this.featureImage.src=link.getAttribute("href")
this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div, game over
}
},

setimgopacity:function(value){ //Sets the opacity of "thumbimage" div per the passed in value setting (0 to 1 and in between)
var targetobject=this.featureImage
if (targetobject.filters && targetobject.filters[0]){ //IE syntax
if (typeof targetobject.filters[0].opacity=="number") //IE6
targetobject.filters[0].opacity=value*100
else //IE 5.5
targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
targetobject.style.MozOpacity=value
else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
targetobject.style.opacity=value
else //Non of the above, stop opacity animation
this.stopanimation()
},

opacityanimation:function(){ //Gradually increase opacity function
this.setimgopacity(this.currentopacity)
this.currentopacity+=0.1
if (this.currentopacity>1)
this.stopanimation()
},

stopanimation:function(){
if (typeof this.opacitytimer!="undefined")
clearInterval(this.opacitytimer)
},


closeit:function(){ //Close "thumbbox" div function
this.stopanimation()
this.thumbBox.style.visibility="hidden"
this.thumbImage.innerHTML=""
this.thumbBox.style.left="-2000px"
this.thumbBox.style.top="-2000px"
},

cleanup:function(){ //Clean up routine on page unload
this.thumbLoading=null
if (this.featureImage) this.featureImage.onload=null
this.featureImage=null
this.thumbImage=null
for (var i=0; i<this.targetlinks.length; i++)
this.targetlinks[i].onclick=null
this.thumbBox=null
},

dotask:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
},

init:function(){ //Initialize thumbnail viewer script by scanning page and attaching appropriate function to links with rel="thumbnail"
if (!this.enableAnimation)
this.opacitystring=""
var pagelinks=document.getElementsByTagName("a")
for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
if (pagelinks[i].getAttribute("rel") && pagelinks[i].getAttribute("rel")=="thumbnail"){ //Begin if statement
pagelinks[i].onclick=function(){
thumbnailviewer.stopanimation() //Stop any currently running fade animation on "thumbbox" div before proceeding
thumbnailviewer.loadimage(this) //Load image
return false
}
this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link
} //end if statement
} //END FOR LOOP
//Reposition "thumbbox" div when page is resized
this.dotask(window, function(){if (thumbnailviewer.thumbBox.style.visibility=="visible") thumbnailviewer.centerDiv(thumbnailviewer.thumbBox)}, "resize")


} //END init() function

}

thumbnailviewer.createthumbBox() //Output HTML for the image thumbnail viewer
thumbnailviewer.dotask(window, function(){thumbnailviewer.init()}, "load") //Initialize script on page load
thumbnailviewer.dotask(window, function(){thumbnailviewer.cleanup()}, "unload")

// Cycling through
<!--
// Use the following variable to specify 
// the number of images
var NumberOfImages = 108

var img = new Array(NumberOfImages)

// Use the following variables to specify the image names:
img[0] = "../gallery/office/Instant Bedrooms Office Furniture 001.jpg"
img[1] = "../gallery/office/Instant Bedrooms Office Furniture 002.jpg"
img[2] = "../gallery/office/Instant Bedrooms Office Furniture 003.jpg"
img[3] = "../gallery/office/Instant Bedrooms Office Furniture 004.jpg"
img[4] = "../gallery/office/Instant Bedrooms Office Furniture 005.jpg"
img[5] = "../gallery/office/Instant Bedrooms Office Furniture 006.jpg"
img[6] = "../gallery/office/Instant Bedrooms Office Furniture 007.jpg"
img[7] = "../gallery/office/Instant Bedrooms Office Furniture 008.jpg"
img[8] = "../gallery/office/Instant Bedrooms Office Furniture 009.jpg"
img[9] = "../gallery/office/Instant Bedrooms Office Furniture 010.jpg"
img[10] = "../gallery/office/Instant Bedrooms Office Furniture 011.jpg"
img[11] = "../gallery/office/Instant Bedrooms Office Furniture 012.jpg"
img[12] = "../gallery/office/Instant Bedrooms Office Furniture 013.jpg"
img[13] = "../gallery/office/Instant Bedrooms Office Furniture 014.jpg"
img[14] = "../gallery/office/Instant Bedrooms Office Furniture 015.jpg"
img[15] = "../gallery/office/Instant Bedrooms Office Furniture 016.jpg"
img[16] = "../gallery/office/Instant Bedrooms Office Furniture 017.jpg"
img[17] = "../gallery/office/Instant Bedrooms Office Furniture 018.jpg"
img[18] = "../gallery/office/Instant Bedrooms Office Furniture 019.jpg"
img[19] = "../gallery/office/Instant Bedrooms Office Furniture 020.jpg"
img[20] = "../gallery/office/Instant Bedrooms Office Furniture 021.jpg"
img[21] = "../gallery/office/Instant Bedrooms Office Furniture 022.jpg"
img[22] = "../gallery/office/Instant Bedrooms Office Furniture 023.jpg"
img[23] = "../gallery/office/Instant Bedrooms Office Furniture 024.jpg"
img[24] = "../gallery/office/Instant Bedrooms Office Furniture 025.jpg"
img[25] = "../gallery/office/Instant Bedrooms Office Furniture 026.jpg"
img[26] = "../gallery/office/Instant Bedrooms Office Furniture 027.jpg"
img[27] = "../gallery/office/Instant Bedrooms Office Furniture 028.jpg"
img[28] = "../gallery/office/Instant Bedrooms Office Furniture 029.jpg"
img[29] = "../gallery/office/Instant Bedrooms Office Furniture 030.jpg"
img[30] = "../gallery/office/Instant Bedrooms Office Furniture 031.jpg"
img[31] = "../gallery/office/Instant Bedrooms Office Furniture 032.jpg"
img[32] = "../gallery/office/Instant Bedrooms Office Furniture 033.jpg"
img[33] = "../gallery/office/Instant Bedrooms Office Furniture 034.jpg"
img[34] = "../gallery/office/Instant Bedrooms Office Furniture 035.jpg"
img[35] = "../gallery/office/Instant Bedrooms Office Furniture 036.jpg"
img[36] = "../gallery/office/Instant Bedrooms Office Furniture 037.jpg"
img[37] = "../gallery/office/Instant Bedrooms Office Furniture 038.jpg"
img[38] = "../gallery/office/Instant Bedrooms Office Furniture 039.jpg"
img[39] = "../gallery/office/Instant Bedrooms Office Furniture 040.jpg"
img[40] = "../gallery/office/Instant Bedrooms Office Furniture 041.jpg"
img[41] = "../gallery/office/Instant Bedrooms Office Furniture 042.jpg"
img[42] = "../gallery/office/Instant Bedrooms Office Furniture 043.jpg"
img[43] = "../gallery/office/Instant Bedrooms Office Furniture 044.jpg"
img[44] = "../gallery/office/Instant Bedrooms Office Furniture 045.jpg"
img[45] = "../gallery/office/Instant Bedrooms Office Furniture 046.jpg"
img[46] = "../gallery/office/Instant Bedrooms Office Furniture 047.jpg"
img[47] = "../gallery/office/Instant Bedrooms Office Furniture 048.jpg"
img[48] = "../gallery/office/Instant Bedrooms Office Furniture 049.jpg"
img[49] = "../gallery/office/Instant Bedrooms Office Furniture 050.jpg"
img[50] = "../gallery/office/Instant Bedrooms Office Furniture 051.jpg"
img[51] = "../gallery/office/Instant Bedrooms Office Furniture 052.jpg"
img[52] = "../gallery/office/Instant Bedrooms Office Furniture 053.jpg"
img[53] = "../gallery/office/Instant Bedrooms Office Furniture 054.jpg"
img[54] = "../gallery/office/Instant Bedrooms Office Furniture 055.jpg"
img[55] = "../gallery/office/Instant Bedrooms Office Furniture 056.jpg"
img[56] = "../gallery/office/Instant Bedrooms Office Furniture 057.jpg"
img[57] = "../gallery/office/Instant Bedrooms Office Furniture 058.jpg"
img[58] = "../gallery/office/Instant Bedrooms Office Furniture 059.jpg"
img[59] = "../gallery/office/Instant Bedrooms Office Furniture 060.jpg"
img[60] = "../gallery/office/Instant Bedrooms Office Furniture 061.jpg"
img[61] = "../gallery/office/Instant Bedrooms Office Furniture 062.jpg"
img[62] = "../gallery/office/Instant Bedrooms Office Furniture 063.jpg"
img[63] = "../gallery/office/Instant Bedrooms Office Furniture 064.jpg"
img[64] = "../gallery/office/Instant Bedrooms Office Furniture 065.jpg"
img[65] = "../gallery/office/Instant Bedrooms Office Furniture 066.jpg"
img[66] = "../gallery/office/Instant Bedrooms Office Furniture 067.jpg"
img[67] = "../gallery/office/Instant Bedrooms Office Furniture 068.jpg"
img[68] = "../gallery/office/Instant Bedrooms Office Furniture 069.jpg"
img[69] = "../gallery/office/Instant Bedrooms Office Furniture 070.jpg"
img[70] = "../gallery/office/Instant Bedrooms Office Furniture 071.jpg"
img[71] = "../gallery/office/Instant Bedrooms Office Furniture 072.jpg"
img[72] = "../gallery/office/Instant Bedrooms Office Furniture 073.jpg"
img[73] = "../gallery/office/Instant Bedrooms Office Furniture 074.jpg"
img[74] = "../gallery/office/Instant Bedrooms Office Furniture 075.jpg"
img[75] = "../gallery/office/Instant Bedrooms Office Furniture 076.jpg"
img[76] = "../gallery/office/Instant Bedrooms Office Furniture 077.jpg"
img[77] = "../gallery/office/Instant Bedrooms Office Furniture 078.jpg"
img[78] = "../gallery/office/Instant Bedrooms Office Furniture 079.jpg"
img[79] = "../gallery/office/Instant Bedrooms Office Furniture 080.jpg"
img[80] = "../gallery/office/Instant Bedrooms Office Furniture 081.jpg"
img[81] = "../gallery/office/Instant Bedrooms Office Furniture 082.jpg"
img[82] = "../gallery/office/Instant Bedrooms Office Furniture 083.jpg"
img[83] = "../gallery/office/Instant Bedrooms Office Furniture 084.jpg"
img[84] = "../gallery/office/Instant Bedrooms Office Furniture 085.jpg"
img[85] = "../gallery/office/Instant Bedrooms Office Furniture 086.jpg"
img[86] = "../gallery/office/Instant Bedrooms Office Furniture 087.jpg"
img[87] = "../gallery/office/Instant Bedrooms Office Furniture 088.jpg"
img[88] = "../gallery/office/Instant Bedrooms Office Furniture 089.jpg"
img[89] = "../gallery/office/Instant Bedrooms Office Furniture 090.jpg"
img[90] = "../gallery/office/Instant Bedrooms Office Furniture 091.jpg"
img[91] = "../gallery/office/Instant Bedrooms Office Furniture 092.jpg"
img[92] = "../gallery/office/Instant Bedrooms Office Furniture 093.jpg"
img[93] = "../gallery/office/Instant Bedrooms Office Furniture 094.jpg"
img[94] = "../gallery/office/Instant Bedrooms Office Furniture 095.jpg"
img[95] = "../gallery/office/Instant Bedrooms Office Furniture 096.jpg"
img[96] = "../gallery/office/Instant Bedrooms Office Furniture 097.jpg"
img[97] = "../gallery/office/Instant Bedrooms Office Furniture 098.jpg"
img[98] = "../gallery/office/Instant Bedrooms Office Furniture 099.jpg"
img[99] = "../gallery/office/Instant Bedrooms Office Furniture 100.jpg"
img[100] = "../gallery/office/Instant Bedrooms Office Furniture 101.jpg"
img[101] = "../gallery/office/Instant Bedrooms Office Furniture 102.jpg"
img[102] = "../gallery/office/Instant Bedrooms Office Furniture 103.jpg"
img[103] = "../gallery/office/Instant Bedrooms Office Furniture 104.jpg"
img[104] = "../gallery/office/Instant Bedrooms Office Furniture 105.jpg"
img[105] = "../gallery/office/Instant Bedrooms Office Furniture 106.jpg"
img[106] = "../gallery/office/Instant Bedrooms Office Furniture 107.jpg"
img[107] = "../gallery/office/Instant Bedrooms Office Furniture 108.jpg"

var imgNumber = 0

function NextImage()
{
    imgNumber++
    if (imgNumber == NumberOfImages)
        imgNumber = 0
    document.images["VCRImage"].src = img[imgNumber]
}


function PreviousImage()
{
    imgNumber--
    if (imgNumber < 0)
        imgNumber = NumberOfImages - 1
    document.images["VCRImage"].src = img[imgNumber]
}


//-->