var InteractiveSlideshow = Class.create();

InteractiveSlideshow.prototype = {
	initialize: function(target, handlers, text, event) {
		this.target = target;
		this.handlers = $(handlers)
		this.event = event;
		this.text = $(text);
		this.originalTargetContent = $(target).innerHTML;
		this.handlers = handlers;
		this.back = null;
		this.effect = null;
		this.lastHandler = null;
		this.apply();
	},
	apply: function(){
		for (i=0;element=this.handlers[i];i++){
			if(this.event == 'mouseover') {
				element.onmouseover = this.change.bindAsEventListener(this);
				element.onmouseout = this.restore.bindAsEventListener(this);
			} else {
				element.parentNode.removeAttribute('href');
				element.onmousedown = this.change.bindAsEventListener(this);
//				element.onmouseup = this.restore.bindAsEventListener(this);
			}
		}
	},
	restore: function(event){
		var originalTargetContent = this.originalTargetContent;
		this.back = new Effect.Opacity(this.target, {
			to: 0.0,
			from: 1.0,
			delay: 2,
			duration: 0.3,
			afterFinish: function(effect){
				effect.element.innerHTML = originalTargetContent;
				effect.element.style.zIndex = 0;
				new Effect.Appear(effect.element, {duration: 0.6});
			}
		});
	},
	change: function(event){
		if(this.back) this.back.cancel();
		if(this.effect) this.effect.cancel();
		tmb = Event.element(event);
		var tmbSrc = tmb.src;
        var imgSrc = tmbSrc.replace(/scale\/crop\?scale\:geometry=237x73\&crop\:geometry=73x73/, 'scale?geometry=780x240!');
		this.text.innerHTML = tmb.getAttribute('alt');
		var newInnerHTML = '<img src="' + imgSrc + '" />';
		if(tmb != this.lastHandler) {
			this.effect = new Effect.Opacity(this.target, {
				to: 0.0,
				from: 1.0,
				duration: 0.3,
				afterFinish: function(effect){
					effect.element.innerHTML = newInnerHTML;
					effect.element.style.zIndex = 0;
					new Effect.Appear(effect.element, {duration: 0.6});
				}
			});
		}
		this.lastHandler = tmb;
	}
}

var AutoSlideshow = Class.create();

AutoSlideshow.prototype = {
	initialize: function(target) {
		this.target = target;
		this.selector = this.target + ' div';
		this.duration = 5;
		this.transition = 0.3;
		this.apply();
	},
	apply: function(){
		this.elements = document.getElementsBySelector(this.selector);
		if(this.elements.length==1) {
			Element.hide(this.elements[0]);
			new Effect.Appear(this.elements[0], { duration: this.transition*2});;
		}
		else {
			for (i=0;element=this.elements[i];i++){
				Element.hide(element);
				this.effect(element, this.duration*i);
			}
		}
	},
	effect: function(element, d){
		var s = this;
		
		new Effect.Appear(element, { delay: d, duration: this.transition*2});
		new Effect.Fade(element, {delay: this.duration-3*this.transition, duration: this.transition, queue: 'end', afterFinish: function(){s.effect(element, s.duration*(s.elements.length-1));}});
	}
}

nmHover = function() {
	if(document.all && document.getElementById) {
		navRoot = document.getElementById("nav-main");
		for(i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if(node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" nmhover";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" nmhover", "");
				}
			}
		}
	}
}

function init() {
	nmHover();
	if($('interactive-slideshow')) new InteractiveSlideshow('interactive-slideshow', document.getElementsBySelector('.thumbnails img'), document.getElementsBySelector('.current-description'), 'mouseover');
	if($('auto-slideshow')) new AutoSlideshow('#auto-slideshow');
	var slideshows = document.getElementsBySelector('#content .slideshow');
	for (var i=0;i<slideshows.length;i++){
		s = slideshows[i];
		var id = 'slideshow-' + i;
		s.setAttribute('id',id);
		var currentImg = document.getElementsBySelector('#content #' + id + ' .current-img')[0];
		var currentText = document.getElementsBySelector('#content #' + id + ' .current-description')[0];
		var thumbnailsImgs = document.getElementsBySelector('#content #' + id + ' .thumbnails img');
		new InteractiveSlideshow(currentImg, thumbnailsImgs, currentText, 'click');
	}
}

Event.observe(window, 'load', init, false);