// visualserver thumbnail-drawer 0.4
//
/* 
Changes 0.4
	
	Support for portfolio introductions
	
	IE8 support


Changes 0.3
	
	A breathing triangle gif now appears above the thumbnail drawer when closed.
	
	The hover nav system has been replaced with triangles on either side of the image counter
	
	Added slideshow option

*/
//
/*
    Table of Contents
    -----------------
    
    thumbDrawer Class Declaration
    configuration
    
    - initialize()
    - getCords()
    - scrollThumbs()
    - stopScrolling()
    - toggleDrawer()
    - styleContents()
	- setZones()
    - evalZones()
    - initViewer()
    - changeImage()
    - showImage()

*/
//
thumbDrawer = Class.create({ 
	
	// configurable bits:
	hideDelay: 1.0, // how long the drawer stays open after scrolling out
	fadeTime: 0.5, // speed of fade effects
	transitionEffects: true, // enables / disables transition effects
	drawerOpen: true, // if set to true, the drawer is shown briefly at first, then closed
	maxVelocity: 20, // maximum scroll speed for thumbnail drawer
	acceleration: 5000, // time it takes for the scrolling to reach full speed after the drawer is opened (in milliseconds)
	closedOpacity: 0.4, // opacity of the thumbnail drawer when closed
	openOpacity: 0.95, // opacity of the thumbnail drawer when open
	transitionTextOn: 'transition effects: <em>on</em>',
	transitionTextOff: 'transition effects: <em>off</em>',
	moreInfo: 'more info',
	lessInfo: 'less info',
	navType: 'text',
	midPadding: 0,
	slideTime: 3000, // slideshow delay in milliseconds
	// do not change:
	slideshow: false,
	moving: false,
	imageArray: [],
	currentImage: 0,
	captionCloser: '<div style="width:100%;text-align:right;"><span id="closeOverlay" style="cursor:pointer;text-transform:uppercase;font-size:10px;">[hide]</span></div>',

	//
	// initialize()
	// sets the initial variables and observer events
	//
	initialize: function(vs_maxVelocity){
		th = this;
        ids = 'pop trigger container breatherContainer loading imageCounter hiddentrigger scroller sivNavContainer navLeft navRight navLeftA navRightA captionUnderlay captionOverlay transitionToggle captionToggle slideshowToggle slideshowSpeed slideshowNum slideshowText menuName';
        $w(ids).each(function(id){ th[id] = $(id); });
/*
        if(this.readCookie('effects')) {
        	this.transitionEffects = false;
        	this.transitionToggle.update(this.transitionTextOff);
        }
        else this.transitionToggle.update(this.transitionTextOn);
*/		
		this.isIE8 = ($('IE8detected')) ? true : false;
		this.isSafari = ($('SafariDetected')) ? true : false;
		this.isIE = (Prototype.Browser.IE) ? true : false;
		if(this.isIE){
	 		this.openOpacity = 1; 
	 		this.closedOpacity = 1; 
			$$('.rounded')[0].setStyle({ backgroundImage: 'url(templates/10/images/ieLoadBG.gif)', backgroundColor: 'transparent' });
		}
        this.fadeIn = (!this.transitionEffects) ? 0 : this.fadeTime;
		this.maxVelocity = (vs_maxVelocity*2);
		this.styleContents();
		this.initViewer();
		this.popZoneOpen = this.pop.getHeight();
		this.popZoneClosed = this.trigger.getHeight();
		this.popZone = (this.drawerOpen) ? this.popZoneOpen : this.popZoneClosed;
		startOpacity = (this.drawerOpen) ? 0.95 : 0.2;
		startHeight = (this.drawerOpen) ? this.popZoneOpen+'px' : '1px';
		this.container.setOpacity(startOpacity);
		this.pop.setStyle({ 'height': startHeight });
		this.breatherContainer.setOpacity(.0001).setStyle({ zIndex: '2' });
		if(this.drawerOpen)this.toggleDrawer();
		this.setZones();
		
		var cookievalue = this.readCookie('slideTime');
		if(cookievalue) this.slideTime = cookievalue*1000;
		this.slideshowNum.update(this.slideTime/1000);
		
   		// IE hack (no longer used - cool)
/*
        if(Prototype.Browser.IE){
  	 	// IE interprets the CSS for the fixed position thumbnail drawer poorly, this re-centers it.
        	this.container.setStyle({ marginLeft: '-40%' });
        }
*/

		// slideshow timing slider
		new Control.Slider('delayHandle', 'delayTrack', {
			range: $R(1, 20),
			values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
			sliderValue: this.slideTime/1000, // won't work if set to 0 due to a bug(?) in script.aculo.us
			onChange: (function(v){ 
				this.slideTime = v*1000;
				this.toggleSlideshow();
				this.toggleSlideshow();
				this.createCookie('slideTime',v,100); 
			}).bind(this),
			onSlide: (function(v){
				this.slideshowNum.update(v);
			}).bind(this)
/* 			onChange: function(v){ $('debug3').innerHTML = 'changed: ' + v } */
		});

		
        this.currentHash = this.readHash();
		if (this.currentHash) this.changeImage(this.currentHash);
		else this.changeImage(0);
/*
        this.initialImage = $$('#sivImage div span')[0].innerHTML;
        if (this.currentHash) this.changeImage(this.currentHash);
        else { 
        	if (this.initialImage && this.initialImage > 0) this.changeImage(this.initialImage);
        	else { this.initialImage = 0; this.changeImage(this.initialImage); }
        }
*/
		Event.observe(document, 'mousemove', (function(e){ this.getCords(e); }).bindAsEventListener(this));
		Event.observe(document.onresize ? document : window, "resize", (function(){ this.setZones(); }).bindAsEventListener(this));
		this.transitionToggle.observe('click', (function(){ 
			this.toggleEffects();
		}).bind(this));
		this.captionToggle.observe('click', (function(){
			if(this.slideShow) this.toggleSlideshow();
			var action = (this.captionOverlay.visible()) ? 'hide' : 'show';
			this.overlayCaption(action);
		}).bind(this));
		this.slideshowToggle.observe('click', (function(){ 
			this.toggleSlideshow();
		}).bind(this));
		this.slideshowText.observe('click', (function(){ 
			this.toggleSlideshow();
		}).bind(this));

/*
		this.slideshowSpeedInput.observe('change', (function(){
			var speed = this.slideshowSpeedInput.value * 1000;
			speed = (speed < 500) ? 500 : speed;
			this.slideTime = speed;
			if(this.slideShow){
				this.toggleSlideshow();
				this.toggleSlideshow();
			}
		}).bind(this));
*/
		this.hashWatch = setInterval((function(){ 
			this.currentHash = this.readHash();
			if(this.currentHash != this.currentImage) this.changeImage(this.currentHash);
		}).bind(this),1000);
	},
	//
	// debugger()
	// fired on mouseMove, use to update information in debugging window
	//
	runDebugger: function(output){
		$('debug').update(output);
	},
	//
	// readHash()
	// reads the location # and returns the according number
	//
	readHash: function(){
		var theHash = parseInt(window.location.hash.replace('#',''));
		if(theHash >= 0 && theHash <= this.imageArray.length-1) return theHash;
		else return false;
	},
	//
	// updateHash()
	// updates the # in the location bar to the current image number
	//
	updateHash: function(){
		this.currentURL = window.location.href.split('#');
		window.location = this.currentURL[0]+'#'+this.currentImage;
	},
	//
	// getCords(event)
	// runs on mousemove, detects where the mouse is and fires events as necessary
	//
	getCords: function(e){
//		this.runDebugger();
		this.mouseX = Event.pointerX(e);
		this.mouseY = Event.pointerY(e);
//		this.runDebugger(document.viewport.getHeight());
		if(this.mouseY > this.screenHeight-this.popZone){
			if(!this.drawerOpen && !this.moving){
				this.toggleDrawer();
			}
			this.triggerZone = this.evalZones();
			switch(this.triggerZone){
				case "left": 
					if (!this.scrolling && this.canScroll()) {
					this.scrolling = true;
					this.scrollThumbs();
					}
					break;
				case "right":
					if (!this.scrolling && (this.canScroll())) {
					this.scrolling = true;
					this.scrollThumbs();
					}
					break;
				case "mid":
					this.scrolling = false;
					break;
			}
		}
		else{
			if(this.drawerOpen && !this.moving){
				this.toggleDrawer();
			}
		}
	},
	//
	// accelerate()
	// called when the drawer opens, slowly ramps up the max speed of the scroller so that it doesn't open already going 2908473987 mph.
	//
	accelerate: function(){
		this.maxVelocityTarget = this.maxVelocity;
		this.maxVelocity = 0;
		this.stopInt();
		this.accelerator = setInterval((function(){
			this.maxVelocity++;
			if (this.maxVelocity == this.maxVelocityTarget){
				this.stopInt();
			}
		}).bind(this), parseInt(this.acceleration/24));
	},
	//
	// stopInt()
	// clears the acceleration interval so it doesn't just keep ramping up the scroll-speed.  Intervals can't be cleared internally.
	//
	stopInt: function(){
		if(this.accelerator!=''){
			clearInterval(this.accelerator);
		}
	},
	//
	// scrollThumbs()
	// scrolls the thumbnail drawer to the right
	//
	scrollThumbs: function() {
		this.velocity = this.maxVelocity/((this.rightEdge-this.midScreen)/(this.mouseX-this.midScreen));
		new Effect.Move(this.scroller, { 
			x: -parseInt(this.velocity),
			y: 0,
			mode: 'relative',
			duration: .01,
			fps: 20,
			delay: 0,
			transition: Effect.Transitions.linear,
			afterFinish: (function(){
				if (this.scrolling && this.canScroll()) this.scrollThumbs();
				else this.scrolling = false;
			}).bind(this)
		});
	},
	//
	// canScroll()
	// checks to make sure the thumbs haven't hit their ends, returns true or false
	//
	canScroll: function(){
		switch(this.triggerZone){
				case "left": 
					if (parseInt(this.scroller.style.left) <= 0) return true;
					else return false;
					break;
				case "right":
					if (parseInt(this.scroller.style.left) > (this.widthDifference-(this.widthDifference*2))) return true;
					else return false;
					break;
				case "mid":
					return false;
					break;
		}
//		if (parseInt(this.scroller.style.left) > (this.widthDifference-(this.widthDifference*2)) && parseInt(this.scroller.style.left) <= 0) return true;
	},
	//
	// stopScrolling()
	// stops the thumbnails from scrolling
	//
	stopScrolling: function(){
		queue = Effect.Queues.get('scrollScope');
		queue.each(function(effect) { effect.cancel(); });
		this.scrolling = false;
	},
	//
	// toggleDrawer()
	// opens the drawer if closed, closes it if open
	//
	toggleDrawer: function(){
		if(!this.moving){
			targetSize = (this.drawerOpen) ? 0 : (this.popZoneOpen*100);
			if(this.drawerOpen){
				var opacityStart = this.openOpacity;
				var opacityFinish = this.closedOpacity;
				this.scrolling = false;
			}
			else {
				var opacityStart = this.closedOpacity;
				var opacityFinish = this.openOpacity;
				/*
				new Effect.Parallel([
					new Effect.Opacity(this.breather, {
							sync: true,
							from: 1.0,
							to: 0
						}),
					new Effect.Move(this.breather, {
							sync: true,
							y: -30
						})], {
							queue: 'end',
							duration: 1
						}
				);
				*/
				this.breatherContainer.setOpacity(.0001).setStyle({ zIndex: '2' });
				this.accelerate();
			}
			if(targetSize > 0){
				this.pop.setStyle({ 'height': '1px' });
				delayer = 0.1;
			}
			else delayer = this.hideDelay;
			new Effect.Parallel([
				new	Effect.Scale (this.pop, targetSize, {
						sync: true,
						scaleX: false,
						scaleContent: false
					}),
				new	Effect.Opacity(this.trigger, {
						sync: true,
						from: opacityStart,
						to: opacityFinish
					}),
				new	Effect.Opacity(this.pop, {
						sync: true,
						from: opacityStart,
						to: opacityFinish
					})], {
				queue: 'end',
				delay: delayer,
				duration: .4,
				beforeStart: (function(){
					this.moving = true;
					this.drawerOpen = (this.drawerOpen) ? false : true;
					this.popZone = (this.drawerOpen) ? this.popZoneOpen : this.popZoneClosed; 
				}).bind(this),
				afterUpdate: (function(){ 
					this.setZones();
				}).bind(this),
				afterFinish: (function(){ 
					if(!this.drawerOpen) {
						this.pop.setStyle({ 'height': '1px' });
						this.breatherContainer.setStyle({ zIndex: '998' }).appear({ afterFinish: (function(){ 
								this.moving = false;
							}).bind(this)
						});
					}
					else this.moving = false;
				}).bind(this)				
			});
		}
	},
	//
	// styleContents()
	// sets the width of the drawer and initializes the element variables
	//
	styleContents: function(){    
        this.scrollables = $$('#scroller span');
        this.scrollerWidth = 96*this.scrollables.length;
//        alert(this.scrollerWidth);
        if(this.scrollerWidth < this.pop.getWidth()){
			this.scroller.setStyle({ width: 'auto', textAlign: 'center', left: '0' });
		}
		else this.scroller.setStyle({ width: this.scrollerWidth+'px', textAlign: 'left' });        
		this.pop.setStyle({ overflow: 'hidden' });
        this.widthDifference = this.scrollerWidth-this.pop.getWidth();
	},
	//
	// setZones()
	// fires on initialize and resize, sets the variables for getCords() events
	//
	setZones: function(){
		this.viewerSpace.setStyle({ height: this.mainImageA.getHeight()+'px' });
		this.midScreen = document.viewport.getWidth()*.5;
		this.leftEdge = 0;
		this.rightEdge = document.viewport.getWidth();
		this.screenHeight = document.viewport.getHeight();
		if(this.transitionEffects) this.viewerHeight = (this.screenHeight-$('menuContainer').getHeight())-this.pop.getHeight();
		else this.viewerHeight = (this.screenHeight-$('menuContainer').getHeight())-this.popZoneOpen;
		var viewerSpaceOffset = (this.viewerHeight*.03);
		this.controllerHeight = this.pop.getHeight();
		$('debug').update(this.controllerHeight);
//		$('contentContainer').setStyle({ marginTop: viewerSpaceOffset+'px' });
		this.sizeImage();
		this.centerImage();
		this.styleContents();
		this.updateNav();
		this.overlayCaption.defer.bind(this,'update');
//		this.runDebugger("viewerspace height: "+this.viewerSpace.getHeight()+" viewerHieght: "+this.viewerHeight+"<br />screenHeight: "+this.screenHeight);
	},
	//
	// evalZones()
	// returns left, right or mid depending on the mouse position
	//
	evalZones: function(){
		if (this.mouseX < this.midScreen-(this.midPadding*.5) && this.mouseX >= this.leftEdge) return('left')
		if (this.mouseX > this.midScreen+(this.midPadding*.5) && this.mouseX < this.rightEdge) return('right');
		else return('mid');
	},
	//
	// initViewer()
	// initializes the image viewer, loader, etc.
	//
	initViewer: function(){
		this.viewerSpace = $('sivDisplay');
		this.mainImageIMG = $$('#sivImage  img')[0];
		this.mainImageA = $('sivImage');
		this.imageArray = $$('#scroller span img');
		this.detailBin = $$('#detailBin span');
		this.imageBin = $$('#imageBin span');
		this.textBin = ($('textBin')) ? $('textBin') : false;
		
		if(this.textBin){
			$('portfolio_introduction').observe('click', (function(event){ 
				this.changeImage('next');
			}).bind(this)).observe('mouseover',
			(function(){ this.navRightA.removeClassName('off').addClassName('on'); }).bind(this)).observe('mouseout',
			(function(){ this.navRightA.removeClassName('on').addClassName('off'); }).bind(this));;
		}
		
		this.updatedImages = new Array(this.imageBin.length);
		for (ix=0;ix<this.updatedImages.length;ix++){
			this.updatedImages[ix] = false;
		}
		
		var i = 0;
		this.imageArray.each((function(e){ 
			e.writeAttribute({ rel: i, className: 'thumb_img' });
			i++;
		}).bind(this));
//		this.loading = $('loading');
//		this.viewerSpace.observe('click', (function(){
//			this.changeImage('next');
//		}).bind(this));
		this.scroller.observe('click', (function(e){
			var activeItem = e.findElement(".thumb_img");
			if (activeItem && (activeItem.readAttribute('rel') != this.currentImage)){
				if(this.slideShow)this.toggleSlideshow();
				this.changeImage(activeItem.readAttribute('rel'));
			}
		}).bind(this));
		this.navOpacity = (this.navType == 'text') ? 1 : .15;
		this.navOffset = (this.navType == 'text') ? -2 : 125;
		this.navLeft.setOpacity(this.navOpacity).observe('click',(function(){ if(this.slideShow)this.toggleSlideshow(); else this.changeImage('prev'); }).bind(this)).observe('mouseover',
			(function(){ this.navLeftA.removeClassName('off').addClassName('on'); }).bind(this)).observe('mouseout',
			(function(){ this.navLeftA.removeClassName('on').addClassName('off'); }).bind(this));
		this.navRight.setOpacity(this.navOpacity).observe('click',(function(){ if(this.slideShow)this.toggleSlideshow(); else this.changeImage('next'); }).bind(this)).observe('mouseover',
			(function(){ this.navRightA.removeClassName('off').addClassName('on'); }).bind(this)).observe('mouseout',
			(function(){ this.navRightA.removeClassName('on').addClassName('off'); }).bind(this));
		this.navLeftA.observe('click',(function(){ if(this.slideShow)this.toggleSlideshow(); else this.changeImage('prev'); }).bind(this));
		this.navRightA.observe('click',(function(){ if(this.slideShow)this.toggleSlideshow(); else this.changeImage('next'); }).bind(this));
	},
	//
	// changeImage(direction)
	// move to the next or previous image depending on the passed variable
	//
	changeImage: function(direction){
		if (direction == 'next'){
			if(this.currentImage < this.imageArray.length-1){
				this.currentImage++;
			}
			else this.currentImage = 0;
		}
		else if(direction == 'prev'){
			if(this.currentImage != 0){
				this.currentImage--;
			}
			else this.currentImage = this.imageArray.length-1;
		}
		else {
			this.currentImage = direction;
		}
		this.setZones();
        this.updateHash();
		this.navLeft.hide();
		this.navRight.hide();
		this.viewerSpace.hide();
		this.overlayCaption('hide');

		if(this.textBin) $('portfolio_introduction').hide();
		if(this.textBin && this.currentImage == 0){
			$('portfolio_introduction').update(this.textBin.innerHTML).appear({ duration: this.fadeIn });
			this.imageCounter.update('1 / '+this.imageArray.length);
		}
		else {		
			var imgPreloader = new Image();
	        
	        // once image is preloaded, resize image container
	
	        imgPreloader.onload = (function(){
	            this.mainImageIMG.src = imgPreloader.src;
	            this.showImage(imgPreloader.height, imgPreloader.width);
	        }).bind(this);
	        if(this.imageArray[this.currentImage]) imgPreloader.src = this.imageArray[this.currentImage].src.replace('thumb','extralarge');
	        
	        if(!imgPreloader.complete) { this.loading.show(); this.imageCounter.update('-- / '+this.imageArray.length); }
		}		
	},
	//
	// preloadNeighbors()
	// preloads the previous and next images
	//
	preloadNeighbors: function(){
		var imgPreloaderPrev, imgPreloaderNext, prevImageSrc, nextImageSrc;
		imgPreloaderPrev = new Image();
		imgPreloaderNext = new Image();
		prevImageSrc = (this.currentImage > 0) ? this.currentImage-1 : this.imageArray.length-1;
		nextImageSrc = (this.currentImage < this.imageArray.length-1) ? this.currentImage+1 : 0;
		imgPreloaderPrev.src = this.imageArray[prevImageSrc].src.replace('thumb','extralarge');
		if(this.imageArray[nextImageSrc]) imgPreloaderNext.src = this.imageArray[nextImageSrc].src.replace('thumb','extralarge');
	},
	//
	// centerImage()
	// centers the image
	//
	centerImage: function(){
		this.viewerSpace.setStyle({ width: this.mainImageIMG.getWidth()+'px' });
		this.loading.setStyle({ marginTop: (this.viewerHeight*.5)-(this.loading.getHeight())+'px' });
	},
	//
	// sizeImage()
	// sizes the image up to it's maximum height
	//
	sizeImage: function(){
/* 		var variant = this.menuName.getHeight(); */
		var variant = (this.isIE && !this.isIE8) ? 220 : 190;
//		var mainImageOffset = (this.viewerHeight*.8)-22;
		var mainImageOffset = ((this.screenHeight-this.controllerHeight)-variant)-(this.menuName.getHeight()*.5);
		if(mainImageOffset <= this.maxHeight && mainImageOffset >= 100){ 
			this.mainImageIMG.writeAttribute({height: mainImageOffset});
			this.viewerSpace.setStyle({ marginTop: 20+(this.menuName.getHeight()*.5)+'px' });	
		}
		else if(mainImageOffset >= this.maxHeight){ 
			this.mainImageIMG.writeAttribute({ height: this.maxHeight });
			(this.isSafari) 
				? this.mainImageA.setStyle({ marginTop: (((mainImageOffset-this.maxHeight)*.5)+5)+'px' })
				: this.viewerSpace.setStyle({ marginTop: (((mainImageOffset-this.maxHeight)*.5)+30)+'px' });
		}
		else this.mainImageIMG.writeAttribute({ height: '100'});
		if(this.captionOverlay.visible()) this.overlayCaption('update');
		if(this.textBin) $('portfolio_introduction').setStyle({ maxHeight: (((document.viewport.getHeight()-$('menuContainer').getHeight())-this.controllerHeight)-200)+'px' });
	},
	//
	// showImage()
	// displays the image
	//
	showImage: function(nheight, nwidth){
		this.maxWidth = nwidth;
		this.maxHeight = nheight;
		this.sizeImage();
		this.AjaxImage(this.currentImage);
		var eval = this.detailBin[this.currentImage].innerHTML.replace(/[^@]*%%%/, ' ');
		if(eval.length == 11 || eval.length == 9) this.captionToggle.hide();
		else this.captionToggle.show();
		this.captionUnderlay.update(this.detailBin[this.currentImage].innerHTML.replace(/%%%[^@]*/,' '));
		this.loading.hide();
		this.viewerSpace.show().setOpacity(0.0001);
		this.centerImage();
		this.viewerSpace.appear({ duration: this.fadeIn, 
			afterFinish: (function(){ 
				this.updateNav();
				this.navLeft.show();
				this.navRight.show();
			}).bind(this) 
		});
		this.imageCounter.update((parseInt(this.currentImage)+1)+' / '+this.imageArray.length);
		this.preloadNeighbors();
	},
	//
	// updateNav()
	// sets the navigation zones above the image
	//
	updateNav: function(){
		this.sivNavContainer.clonePosition(this.mainImageIMG);
//		this.navLeft.clonePosition(this.mainImageIMG, { offsetLeft: -this.navOffset }).setStyle({ width: ((this.navLeft.getWidth()*.5)+this.navOffset)+'px' }).show();
//		this.navRight.clonePosition(this.mainImageIMG, { offsetLeft: (this.navLeft.getWidth()-this.navOffset) }).setStyle({ width: (this.navLeft.getWidth())+'px'}).show();
	},
	//
	// overlayCaption(action)
	// takes either "show", "hide" or "update" as variables
	// overlays the caption information in a translucent block above the image
	//
	overlayCaption: function(action){
		switch(action){
			case "show":
				this.overlayCaption('update');
				this.captionOverlay.appear({ 
					duration: this.fadeIn, 
					from: .0001, 
					to: 0.8,
					afterFinish: (function(){
						this.captionToggle.update(this.lessInfo);
					}).bind(this)
				});
				break;
			case "hide":
				this.captionOverlay.hide();
				this.captionToggle.update(this.moreInfo);
				break;
			case "update":
				var newWidth = (this.mainImageA.getWidth()-80);
				this.captionOverlay.update(this.captionCloser+this.detailBin[this.currentImage].innerHTML.replace('%%%',' ')).clonePosition(this.mainImageA).setStyle({ height: 'auto', width: newWidth+'px' });
				$('closeOverlay').observe('click',(function(){ this.overlayCaption('hide'); }).bind(this));
				break;
		}
	},
	//
	// toggleSlideshow()
	// plays / pauses the slideshow.  Unfortunately, the name of the object instance must be hardcoded into the interval.
	//
	toggleSlideshow: function(){
		if(this.slideShow){
			this.slideshowToggle.update('play');
			this.slideshowSpeed.hide();
			this.slideshowText.show();
			this.slideShow = false;
			clearInterval(this.slideController);
		}
		else {
			this.slideshowToggle.update('stop');
/* 			this.slideshowSpeedInput.value = this.slideTime / 1000; */
			this.slideshowSpeed.show();
			this.slideshowText.hide();
			this.slideShow = true;
			this.slideController = setInterval("VStbdrawer.changeImage('next')", this.slideTime);
		}
	},
	//
	// toggleEffects()
	// checks to see if a cookie has been set, deletes if so, creates if not
	//
	toggleEffects: function(){
		if(this.readCookie('effects')) {
			this.eraseCookie('effects');
			this.transitionEffects = true;
			this.fadeIn = this.fadeTime;
			this.transitionToggle.update(this.transitionTextOn);
		}
		else {
			this.createCookie('effects','off',100);
			this.transitionEffects = false;
			this.fadeIn = 0;
			this.transitionToggle.update(this.transitionTextOff);
		}
	},
	//
	// updateStats()
	// AJAX call to update statistics for this image
	//
	AjaxImage: function(img){
	    if(!this.updatedImages[img]){
			new Ajax.Request('templates/10/includes/ajx_get_image.cfm',{ 
				method: 'get',
				parameters: { 
					i: this.imageBin[img].innerHTML
				}
			});
			this.updatedImages[img] = true;
		}
	},
	//
	// createCookie()
	// sets a cookie, using the format createCookie('cookiename','value',100);
	//
	createCookie: function(name,value,days) {
		if (days) {
			var date = new Date();
			date.setTime(date.getTime()+(days*24*60*60*1000));
			var expires = "; expires="+date.toGMTString();
		}
		else var expires = "";
		document.cookie = name+"="+value+expires+"; path=/";
	},
	//
	// readCookie()
	// returns the value of a cookie, or null if cookie is not set
	//
	readCookie: function(name) {
		var nameEQ = name + "=";
		var ca = document.cookie.split(';');
		for(var i=0;i < ca.length;i++) {
			var c = ca[i];
			while (c.charAt(0)==' ') c = c.substring(1,c.length);
			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
		}
		return null;
	},
	//
	// eraseCookie()
	// erases cookie
	//
	eraseCookie: function(name) {
		this.createCookie(name,"",-1);
	}

});