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

// Updated to become the Video viewer by Ben Raithby on Oct 30th, 2007

// declare a global variable to track the name of the pic that is last clicked
var varCurrentImage = 0;
var varMaxImage = 1;

var videoviewer={
enableTitle: false, //Should "title" attribute of link be used as description?
enableAnimation: false, //Enable fading animation?
defineVidfooter: '<div class="vidFooterbar"><img src="/images/close_icon.jpg" onClick="videoviewer.StopVideo()" class="menuControl" alt="Close video window"></div>', //Define HTML for footer interface
defineVideoLoading: '<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="thumbnailVid"

createthumbBoxVid:function(){
//write out HTML for Image thumbnailVid Viewer plus loading div
document.write('<div id="thumbBoxVid"><div id="thumbVid"></div>'+this.defineVidfooter+'</div>')
document.write('<div id="thumbVidLoading">'+this.defineVideoLoading+'</div>')
this.thumbBoxVid=document.getElementById("thumbBoxVid")
this.thumbVid=document.getElementById("thumbVid") //Reference div that holds the shown image
this.thumbVidLoading=document.getElementById("thumbVidLoading") //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"
},

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

loadVid:function(link){ //Load image function that gets attached to each link on the page with rel="thumbnailVid"
if (this.thumbBoxVid.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
varCurrentImage = link.getAttribute("src")
//alert("varCurrentImage="+varCurrentImage) //Debug function to ensure varCurrentImage is updating correctly

var videoHTML='<object id="'+link.getAttribute("id")+'" enablejavascript="true" classid="'+link.getAttribute("classid")+'" height='+link.getAttribute("height01")+'" width="'+link.getAttribute("width01")+'" codebase="'+link.getAttribute("codebase")+'"> <param name="'+link.getAttribute("param_name01")+'" value="'+link.getAttribute("param_value01")+'" /> <param name="'+link.getAttribute("param_name02")+'" value="'+link.getAttribute("param_value02")+'" /><embed name="'+link.getAttribute("id")+'" height="'+link.getAttribute("height01")+'" width="'+link.getAttribute("width01")+'" type="'+link.getAttribute("type")+'" pluginspage="'+link.getAttribute("pluginspage")+'" src="'+link.getAttribute("src")+'" autoplay="'+link.getAttribute("autoplay")+'" EnableJavaSript="true""></embed> </object>' //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.thumbVidLoading) //Center and display "loading" div while we set up the image to be shown
this.thumbVid.innerHTML=videoHTML //Populate thumbVid div with shown image's HTML (while still hidden)
this.featureVid=this.thumbVid.getElementsByTagName("object")[0] //Reference shown image itself
//this.featureVid.onload=function(){ //When target image has completely loaded
videoviewer.thumbVidLoading.style.visibility="hidden" //Hide "loading" div
videoviewer.showthumbBoxVid() //Display "thumbBoxVid" 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.featureVid.src=link.getAttribute("src")
this.featureVid.src=link.getAttribute("src")
this.featureVid.onerror=function(){ //If an error has occurred while loading the image to show
videoviewer.thumbVidLoading.style.visibility="hidden" //Hide "loading" div, game over
}
},


setimgopacity:function(value){ //Sets the opacity of "thumbVid" div per the passed in value setting (0 to 1 and in between)
var targetobject=this.featureVid
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)
},

StopVideo:function(){
	document.movie1.Stop()
	videoviewer.closeit()
},

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

cleanup:function(){ //Clean up routine on page unload
this.thumbVidLoading=null
if (this.featureVid) this.featureVid.onload=null
this.featureVid=null
this.thumbVid=null
for (var i=0; i<this.targetlinks.length; i++)
this.targetlinks[i].onclick=null
this.thumbBoxVid=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 thumbnailVid viewer script by scanning page and attaching appropriate function to links with rel="thumbnailVid"
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")=="thumbnailVid"){ //Begin if statement
pagelinks[i].onclick=function(){
videoviewer.stopanimation() //Stop any currently running fade animation on "thumbBoxVid" div before proceeding
videoviewer.loadVid(this) //Load image
//Gets the maximum number of images in the gallery from a hidden form item
//var varMaxImageHiddenTextBox = document.getElementById("maxImageNumber")
//alert("varMaxImageHiddenTextBox.getAttribute('value') = "+varMaxImageHiddenTextBox.getAttribute("value")) //Debug to check taht teh code is getting the value of "value"
//varMaxImage = varMaxHiddenTextBox.getAttribute("value")
//alert("varMaxImage ="+varMaxImage) //Debug to ensure that varMaxImage is getting the correct value
return false
}
this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link
} //end if statement
} //END FOR LOOP
//Reposition "thumbBoxVid" div when page is resized
this.dotask(window, function(){if (videoviewer.thumbBoxVid.style.visibility=="visible") videoviewer.centerDiv(videoviewer.thumbBoxVid)}, "resize")


} //END init() function

}

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