/* Copyright Decode Studios All Rights Reserved 2007 */ //Stores the Clients Window Height/Width var cHeight; var cWidth; //Stores the Height/Width of the image var pHeight = 0; var pWidth = 0; //the scroll for the X var scrollPos; //Settings for the Controls var imageCont; //Settings for the BlackOut var greySec; //Settings for the Image on Page var iHolder; //Settings for the Desc of Image var detailText; //nextBut var nextBut; //backBut var backBut; //play pause toggle var ppBut; //Arrya to store Image's and Text var imageArray = new Array(); var textArray = new Array(); //Function to set the Globla Variables function globalVar() { //next button Properties nextBut = document.getElementById('nextImg'); //back button Properties backBut = document.getElementById('backImg'); //PP button Properties ppBut = document.getElementById('playPause'); //Settings for the Controls imageCont = document.getElementById('imageControls'); //Settings for the BlackOut greySec = document.getElementById('greyOut'); //Settings for the Image on Page iHolder = document.getElementById('imagePreview'); //Settings for the Desc of Image detailText = document.getElementById('imageText'); } //Function to get the Height/width of the window function windowSize() { //setting the big variables if (self.innerHeight) { // all except Explorer cWidth = self.innerWidth; cHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode cWidth = document.documentElement.clientWidth; cHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers cWidth = document.body.clientWidth; cHeight = document.body.clientHeight; } if (self.pageYOffset) { scrollPos = self.pageYOffset; } else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict scrollPos = document.documentElement.scrollTop; } else if (document.body) {// all other Explorers scrollPos = document.body.scrollTop; } } // int to store the current image on Disp var cImage = 0; //Bool to say if the slideshow should be playing or paused , 0 Off 1 On var playing = 0; function playShow(imageNum,masterPlay) { //Inherit Globals globalVar(); //masterPlay Options //0 Second Time SHow //1 start of slideShow //playing options //1 playing //0 stop show //if it is the first time around if(masterPlay != 0) { //set the playing to play playing = 1; //set the PP but to play ppBut.src="img/play.gif"; //start the slide show slideShow(imageNum); } else { //If t is the second time around if(playing != 0) { //add it has NOT been told to stop slideShow(imageNum); } } } function slideShow(imageNum) { //Run the Variables Function globalVar(); windowSize(); //create the loading image iHolder.src = "img/loader.gif"; iHolder.width = "200"; iHolder.height = "100"; //Fade OUT controls Element.setOpacity(imageCont, 0.0 ); //Setting the Position iHolder.style.top = (((cHeight/2)-(iHolder.height/2)) +"px"); iHolder.style.left = (((cWidth/2)-(iHolder.width/2)) + "px"); //set the recieved image to the Current Playing cImage = imageNum; //Create New Virtual Image var largeThumb = new Image(); //create the NoCache fo IE var today=new Date(); var noImageCache=today.getSeconds(); //set the Image to the Box largeThumb.src = ("imgstore/large_thumb/" + imageArray[cImage] + "?" + noImageCache.valueOf()); //Set the Text for the Desc Of image detailText.innerHTML = textArray[cImage]; //use PreLoaders //next image var nextImage = new Image(); //prev image var prevImage = new Image(); nextImage.src = ("imgstore/large_thumb/" + imageArray[cImage+1]+ "?" + noImageCache.valueOf()); prevImage.src = ("imgstore/large_thumb/" + imageArray[cImage-1]+ "?" + noImageCache.valueOf()); //add 1 to the current object to load next image cImage++; //set width and height to whole page greySec.style.height = (document.body.clientHeight + "px"); greySec.style.width = (document.body.clientWidth + "px"); //Reposition The Real Image iHolder.style.top = (((((cHeight/2)-(iHolder.height/2))-20)+scrollPos) + "px"); iHolder.style.left = (((cWidth/2)-(iHolder.width/2)) + "px"); //Show BlackOut if(greySec.style.display != "block") { greySec.style.display = "block"; Element.setOpacity(greySec, 0.0 ); new Effect.Opacity(greySec, {duration:0.5, from:0.0, to:.6}); //Show the Image Window iHolder.style.display = "block"; //Display the Conrols imageCont.style.display = "block"; //disp the pp but ppBut.style.display = "inline"; //disp next but nextBut.style.display = "inline"; //disp back but backBut.style.display = "inline"; } //Function that runs once the Virtual image has Loaded largeThumb.onload = function() { //Sets the variables set about to the Height/Width of the Virtual Image pHeight = largeThumb.height; pWidth = largeThumb.width; //Resising Functions For the Image var tcHeight = (cHeight-50); if((pHeight > tcHeight) || (pWidth > pWidth)) { //Temp Width/Height var tHeight = 0; var tWidth = 0; //While the Height OR Width of the Virtual Image is bigger then the Clients Window while((pHeight > tcHeight) || (pWidth > pWidth)) { tHeight = (pHeight * .95); tWidth = (pWidth * .95); pHeight = tHeight; pWidth = tWidth; } } //Set the Virtual Image Height/Width to the Resised Height/Width largeThumb.height = pHeight; largeThumb.width = pWidth; //Reposition The Controls to Below the Image imageCont.style.top = (((((cHeight/2)+(pHeight/2))-15)+scrollPos) + "px"); imageCont.style.left = (((cWidth/2)-(pWidth/2))+"px"); //Reposition The Close Button to be Aligned on the Right document.getElementById('closeText').style.left = ((pWidth-140)+"px"); //Reposition The Real Image iHolder.style.top = (((((cHeight/2)-(pHeight/2))-20)+scrollPos) + "px"); iHolder.style.left = (((cWidth/2)-(pWidth/2)) + "px"); //fade picture Element.setOpacity(iHolder, 0.0 ); new Effect.Opacity(iHolder, {duration:.5, from:0.0, to:1.0}); //Write the Virtual Image to the Real Image iHolder.src = largeThumb.src; //Set the Real Image Height/Width to the same as the Virtual Image iHolder.height = largeThumb.height; iHolder.width = largeThumb.width; //Fade Controls in Element.setOpacity(imageCont, 0.0 ); new Effect.Opacity(imageCont, {duration:.75, from:0.0, to:1.0}); //do this for IE couse its DUmm largeThumb.onload = function(){} //run the timer imageTime(); } } //function to do the next function imageTime() { //get the selected item var myindex = document.getElementById("playTime").selectedIndex; //get the value var SelValue = document.getElementById("playTime").options[myindex].value; // if the Current image is shorter then the array and it is playing if((cImage < imageArray.length)&&(playing != 0)) { setTimeout('playShow(cImage,0)',(SelValue + "000")); } } function nImage() { if(playing != 0) { if(cImage-1) { playShow(cImage,0); } else { playShow((imageArray.length-1),0); } } else { cImage--; cImage--; if(cImage >-1) { slideShow(cImage); } else { slideShow(imageArray.length-1); } } } function ppImage() { if(ppBut.src.indexOf('play.gif')>-1) { //stop the slideshow playing = 0; ppBut.src = "img/pause.gif"; } else { //play the slideShow playing =1; playShow(cImage,0); ppBut.src = "img/play.gif"; } } //Function To Close the image function closeImage() { //stop the slideshow playing = 0; //hide slideshow controls ppBut.src="img/pause.gif"; ppBut.style.display = "none"; nextBut.style.display = "none"; backBut.style.display = "none" //Virtual Image for Loader var loadingImage = new Image(); //Setting the virtual images Source loadingImage.src = "img/loader.gif"; //Writing the Virtual Image to the page iHolder.src = loadingImage.src; //Setting the Height and Width iHolder.height = "100"; iHolder.width = "200"; //Set the text to loading... detailText.innerHTML = "Loading..."; //Set the position of the Control section imageCont.style.top = ((((cHeight/2)+(iHolder.height/2))+5) + "px"); imageCont.style.left = (((cWidth/2)-(iHolder.width/2))+"px"); //setting the position of CloseText document.getElementById('closeText').style.left = ((iHolder.width-70)+"px"); //Setting the Position iHolder.style.top = (((cHeight/2)-(iHolder.height/2)) +"px"); iHolder.style.left = (((cWidth/2)-(iHolder.width/2)) + "px"); //Hide the Real Image, Controls and the BlackOUT iHolder.style.display = "none"; imageCont.style.display="none"; greySec.style.display = "none"; }