document.observe('dom:loaded',function(evt){
	var thumbnailHolder = $('thumbnailHolder');
	var images = thumbnailHolder.select('img');
	var hero = $('hero').setStyle('overflow:hidden');
	//change these two strings to whatever you want the tab above the caption to read
	var showInfo = '';
	var hideInfo = '';
	thumbnailHolder.insert('<div class="vscroll" id="topVscroll"></div>');
	var slider = new Element('div',{'class': 'slider', id: 'thumbnailHolderInner'});
	thumbnailHolder.insert(slider);
	thumbnailHolder.insert('<div class="vscroll" id="bottomVscroll"></div>');
	images.each(function(elm){
		slider.insert(elm.addClassName('thumb').remove());
	});
	thumbnailHolder.select('p').invoke('remove');
	hero.insert('<div id="leftHscroll" class="hscroll"></div><div id="heroInner" class="slider"></div><div class="caption"><span class="toggle hiding">' + showInfo + '</span><p></p></div><div id="rightHscroll" class="hscroll"></div><div id="counter"></div>');
	function setDetail(elm){
		var elm = $(elm);
		var folder = elm.readAttribute('alt');
		$$('.thumb.active').invoke('setOpacity',0.5).invoke('removeClassName','active');
		elm.setOpacity(1).addClassName('active');
		new Ajax.Updater('scriptholder',folder + '/versions.js',{
			method:'get',
			evalScripts: true,
			onComplete: function(transport){
				eval(transport.responseText);
				$('heroInner').update();
				images.each(function(image){
					$('heroInner').insert('<div class="version" style="background:url(' + folder + '/' + image + ') no-repeat center center"></div>');
				});
				var info = $$('.caption').first();
				$('counter').update('1/' + images.length).writeAttribute('data-count',images.length);
				info.down('p').update(caption);
				if(parseInt(info.getStyle('bottom')) < 0) info.setStyle('bottom:-' + info.getHeight() + 'px');
				$('leftHscroll').addClassName('disabled-control');
				if(images.length == 1) {
					$('rightHscroll').addClassName('disabled-control');
				}else{
					$('rightHscroll').removeClassName('disabled-control');
				}
				$$('.version').invoke('hide').first().appear({duration:0.3});
			}
		});
	}
	slider.setStyle({position:'absolute',top:'24px',left:0,height:(68 * Math.ceil(slider.select('.thumb').length / 3)).toString() + 'px'});
	$('topVscroll').addClassName('disabled-control');
	if(thumbnailHolder.getHeight() > (slider.getHeight() + 48)) $('bottomVscroll').addClassName('disabled-control');
	setDetail($$('.thumb').invoke('setOpacity',0.5).first().setOpacity(1).addClassName('active'));
	var startingInfo = $$('.caption').first();
	startingInfo.setStyle('bottom:-' + startingInfo.getHeight() + 'px');
	document.observe('mouseover',function(evt){
		var elm;
		if(elm = evt.findElement('.thumb')){
			//this is the fading effect
			//new Effect.Morph(elm,{style:'opacity:1', duration:0.3, afterFinish: function(){elm.setOpacity(1);}});
			elm.setOpacity(1);
		}
	});
	document.observe('mouseout',function(evt){
		var elm;
		if(elm = evt.findElement('.thumb')){
			if(!elm.hasClassName('active')){
				//this is the fading effect
				//new Effect.Morph(elm,{style:'opacity:0.5', duration:0.3, afterFinish: function(){elm.setOpacity(0.5);}});
				elm.setOpacity(0.5);
			}
		}
	});
	document.observe('click',function(evt){
		var elm;
		if(elm = evt.findElement('span.toggle')){
			evt.stop();
			var caption = elm.up('div');//elm.next('p');
			if(!elm.hasClassName('hiding')){
				elm.update(showInfo).addClassName('hiding');
				new Effect.Morph(caption, {style:'bottom:-' + caption.getHeight() + 'px', duration: 0.5});
			}else{
				elm.update(hideInfo).removeClassName('hiding');
				new Effect.Morph(caption, {style:'bottom:0', duration: 0.5});
			}
		}
		if(elm = evt.findElement('.thumb')){
			setDetail(elm);
		}
		if(elm = evt.findElement('.vscroll')){
			if(!elm.hasClassName('disabled-control')){
				var container = elm.up('div');
				var distance = container.getHeight() - 48;
				var max = slider.getHeight();
				var move = (elm.readAttribute('id') == 'topVscroll') ? distance : distance * -1;
				var top = (parseInt(slider.getStyle('top')) + move);
				slider.morph('top: ' + top.toString() + 'px',{duration:0.5});
				if(top < 24){
					$('topVscroll').removeClassName('disabled-control');
				}else{
					$('topVscroll').addClassName('disabled-control');
				}
				//console.log(distance)
				//console.log(top + max)
				if(!(top + max <= distance)){
					$('bottomVscroll').removeClassName('disabled-control');
				}else{
					$('bottomVscroll').addClassName('disabled-control');
				}
			}
		}
		if(elm = evt.findElement('.hscroll')){
			console.log(elm)
			if(!elm.hasClassName('disabled-control')){
				var current = $$('.version').find(function(el){ return el.visible(); });
				if(elm.readAttribute('id') == 'leftHscroll'){
					if(current.previous('div.version')){
						//new cross-fade
						new Effect.Parallel([
							new Effect.Fade(current),
							new Effect.Appear(current.previous('div.version'))
						],{duration:0.5});
/* //commented out the existing fade-then-show
						current.fade({
							duration:0.3,
							afterFinish:function(){
								current.previous('div.version').appear({duration:0.3});
							}
						});
*/
						$('counter').update(current.previousSiblings().length.toString() + '/' + $('counter').readAttribute('data-count'));
						$('rightHscroll').removeClassName('disabled-control');
						$('leftHscroll').removeClassName('disabled-control');
					}
					if(!current.previous('div.version').previous('div.version')) $('leftHscroll').addClassName('disabled-control');
				}else{
					if(current.next('div.version')){
						//new cross-fade
						new Effect.Parallel([
							new Effect.Fade(current),
							new Effect.Appear(current.next('div.version'))
						],{duration:0.5});
/* //commented out the existing fade-then-show
						current.fade({
							duration:0.3,
							afterFinish:function(){
								current.next('div.version').appear({duration:0.3});
							}
						});
*/
						$('counter').update((current.previousSiblings().length + 2).toString() + '/' + $('counter').readAttribute('data-count'));
						$('rightHscroll').removeClassName('disabled-control');
						$('leftHscroll').removeClassName('disabled-control');
					}
					if(!current.next('div.version',1)) $('rightHscroll').addClassName('disabled-control');
				}
			}
		}
	});
});