// this adds some effects to the album pages.

slideshow_width		= 450;
slideshow_height	= 300;

// slidelist based on one from devthought.com

var SlideList = new Class({
	initialize: function (menu, options){
//		debug = new Element('pre').setStyles({zIndex:'12', position:'absolute', top:'0', left:'0', margin:'2em', width:'100%', border:'1px dotted black', background:'white'}).injectBefore('main');
		
		this.setOptions(this.getOptions(), options);
		
		this.menu = $(menu);
		if ($(menu.getElementById('current')))
		this.current =$(menu.getElementById('current')).getParent();
		
		this.menu.getElements('li').each(function(item){
			item.addEvent('mouseover', function(event){
//				debug.appendText('over id:'+event.target.id+' class:'+event.target.className+' relid:'+event.relatedTarget.id+' relclass:'+event.relatedTarget.className+' itemid:'+item.id+' itemclass:'+item.className+'\n');
				this.moveBg(item);
			}.bindWithEvent(this));
			item.addEvent('mouseout', function(event){
				if (event.target.className != 'floater') {
//					debug.appendText('out of id:'+event.target.id+' class:'+event.target.className+' tag:'+event.target.tagName+' relid:'+event.relatedTarget.id+' relclass:'+event.relatedTarget.className+' reltag:'+event.relatedTarget.tagName+' itemid:'+item.id+' itemclass:'+item.className+'\n');
					this.moveBg(this.current);
				}
			}.bindWithEvent(this));
		}.bind(this));
		
//		this.menu.addEvent('mouseout', function(event){
//			if (event.target.className != 'floater') {
//				debug.appendText('out of id:'+event.target.id+' class:'+event.target.className+' relid:'+event.relatedTarget.id+' relclass:'+event.relatedTarget.className+' menuid:'+menu.id+' menuclass:'+menu.className+'\n');
//				this.moveBg(this.current);
//			}
//		}.bindWithEvent(this));
		
		this.back = new Element('li').addClass('floater').adopt(new Element('div').appendText('{')).injectInside(this.menu).appendText('}');
		this.back.fx = this.back.effects(this.options);
		if (this.current) this.setCurrent(this.current);
	},
	
	setCurrent: function(el, effect){
		this.back.setStyles({left:(el.offsetLeft)+'px', width:(el.offsetWidth)+'px'});
		this.current = el;
	},
	
	getOptions: function(){
		return {
			transition:Fx.Transitions.sineInOut,
			duration:500,
			wait:false,
			onClick: Class.empty
		};
	},
	
	clickItem: function(event, item){
		// nothing happens here
	},
	
	moveBg: function (to){
		if (!this.current) return;
		if (to.className != this.moveBgFrom) {
//			debug.appendText ('from:'+this.moveBgFrom+' to:'+to.className+'\n');
			this.moveBgFrom = to.className;
			this.back.fx.custom({
				left: [this.back.offsetLeft, to.offsetLeft],
				width: [this.back.offsetWidth, to.offsetWidth]
			});
		}
	}
});

SlideList.implement(new Options);

// stuff for the album pages

function thumbOver () {
	this.fx.stop();
	this.fx.options.duration = 300;
	this.fx.custom({'letter-spacing': [20,0], 'opacity': [0,1], 'paddingLeft': [20,0]});
}

function thumbOut () {
	this.fx.stop();
	this.fx.options.duration = 500;
	this.fx.custom({'letter-spacing': [0,2], 'opacity': [1,0], 'paddingLeft': [0,60]});
}

Window.onDomReady(function() {
	if ($(document.body).hasClass('Naughty!')) {
		// inject the secret menu-item!
		current = new Element('span').appendText('naughty!').injectInside(new Element('li').addClass('menunaughty').injectBefore($('navlist').getElement('li.menuillustration')));
		current.id = "current";
	}
	if (!window.ie) new SlideList ($('navlist'), {duration:150, transition:Fx.Transitions.circOut});
	
	if ((document.body.id == 'gallery') && (document.body.hasClass('albumpage'))) {
		metadata = $$('#thumbnails div');
		images = $$('#thumbnails img');

		imagelist = $$('#thumbnails .imagelink');

		for (i=0; i<images.length; i++) {
			images[i].metadata = metadata[i];
			images[i].fx = new Fx.Styles(images[i].metadata,{wait:false});
			images[i].metadata.setStyles({
										'opacity': 0,
										'display': 'inline'
										});
			images[i].addEvent("mouseover",thumbOver);
			images[i].addEvent("mouseout",thumbOut);
		
			imagelist[i].name = $E('h1', metadata[i]).innerHTML;
	//		imagelist[i].info = imagelist[1].title.split(','); // we'll need this later. maybe.
		}
	
		// search box: on entry, if it's "Search" then clear it out.
		searchbox = $E('input', 'search');
		searchbox.addEvent('focus', function(){if (this.value == 'Search') this.value='';});
	
		// build the slideshow...
		// we could generate this server-side but then there'd be a big empty box for non-js browsers!
		if (typeof Slideshow != "undefined") {
		
			slideImages = new Array();
			slideCaptions = new Array();
		
			imagelinks = $$('#thumbnails a');
			for (i=0; i<images.length; i++) {
				slideImages[i] = imagelist[i].href;
				slideCaptions[i] = "<a href='"+imagelinks[i*2].href+"'>"+imagelist[i].name+"</a>";
			}
		
			slideshowWrapper = new Element('div');
			slideshowWrapper.addClass('slideshowWrapper');
			mySlideshow = new Element('div');
			mySlideshow.addClass('slideshow');
			mySlideshow.setHTML('<img src="/images/v2-front-orange.jpg" alt="" width="'+slideshow_width+'" height="'+slideshow_height+'" />');
			mySlideshow.injectInside(slideshowWrapper.injectBefore($('thumbnails')));
			myShow = new Slideshow(mySlideshow, {hu:'', height:slideshow_height, width:slideshow_width, type:'combo', duration:[2000, 6000],thumbnailre:[/(.+\/)(.*)/,'$1_thumbs/75x75-$2'], images:slideImages, captions:slideCaptions, startat:0, initialtext:"One moment, please."});
		}

	//	if (typeof doWarning != 'undefined') doWarning();	// show the pr0n if we're in /Naughty!/
	}
}
);