document.documentElement.className = 'js';

var STV = window.STV || {};

STV.Panels = {
	thumbs        : null,
	panels        : null,
	current       : false,
	init  : function() {
		this.panels  = $('content').select('.detail');
		for (var i = 0; i < this.panels.length; i++) {
			this.panels[i].style.display = 'none';
			this.panels[i].removeClassName('hide');
		}
		if(!$('thumbs')) {
			return;
		}
		this.thumbs  = $('thumbs').getElementsByTagName('img');
		for (var i = 0, len = this.thumbs.length; i < len; i++) {
			this.thumbs[i].onclick = this.toggle_panels.bindAsEventListener(this);
		}
		this.intro   = $('intro');
	},
	toggle_panels : function (evt) {
		var clicked_thumb = Event.element(evt);
		if('current' == clicked_thumb.className) {
			this.show(this.intro);				
			this.hide(this.panels[this.current]);
			this.thumbs[this.current].className = "";	 
			this.current = false;
			return;
		}
		this.hide(this.intro);				
		for (var i = 0; i < this.thumbs.length; i++) {
			if(i !== this.current && this.thumbs[i] == clicked_thumb) {
				this.show(this.panels[i]);
				this.thumbs[i].className = "current";
				if(false !== this.current) {
					this.hide(this.panels[this.current]);
					this.thumbs[this.current].className = "";	
				}; 
				this.current = i;
			};
		};
	},
	show : function(panel) {
		$(panel).appear({duration:.4});
	},
	hide : function(panel) {
		Effect.Fade(panel,{duration:.4});
	}
};

Event.observe(window,'load',function() { STV.Panels.init(); });