/**
 * @author roman
 * to use with mootools
 */
var GuzoTabs = new Class({
	initialize: function(el) {
		this.element = $(el);

		if(!this.element)
			return false;

		this.tabs = this.element.getElementsBySelector('.PanelTab');

		var nav = new Element('div', { 'class': 'TabNav'});
		var navul = new Element('ul', { }).injectInside(nav);
		var first = false;
		this.tabs.each(function(elem){
			var title = elem.getElementsBySelector('h3.TabTitle');
			var inner = new Element('li',{}).injectInside(navul);
			var span = new Element('span').setText(title[0].getText()).injectInside(inner);
			if(first == false)
				first = span;

			title[0].remove();
			var tab = new GuzoTab(inner, elem, this.tabs);
		}.bind(this));

		nav.injectTop(this.element);
		var s = nav.getSize();
		var ip = $('InnerPanel');
		ip.setStyles({
			'height': (ip.getStyle('height').toInt() - s.size.y + 1) + 'px',
			'marginTop': s.size.y + 'px'
		});

		first.fireEvent('click');
	}
});

var GuzoTab = new Class({
	initialize: function(handler, tab, tabs){
		var subtabs = tab.getElementsBySelector('.SubTab');
		var subnav = false;
		if (subtabs.length > 0) {
			subnav = new Element('ul', {
				'class': 'SubTabNav'
			}).injectInside(handler);
			subtabs.each(function(stab){
				var subtitle = stab.getElementsBySelector('h4.TabTitle');
				var subinner = new Element('li', {
					'class': subtitle[0].getText().toLowerCase()
				}).injectInside(subnav);
				var t = new GuzoTab(subinner, stab, subtabs);
				subtitle[0].remove();
			});
		}

		var el = handler;
		if(handler.getFirst())
			el = handler.getFirst();

		el.addEvent('click', function(event){
			tabs.each(function(t){
				t.setStyle('display', 'none');
			});
			tab.setStyle('display', 'block');
			if (subnav) { subnav.getFirst().fireEvent('click'); }
			handler.getParent().getChildren().each(function(elem){
				elem.removeClass('active');
				if(elem == handler){
					elem.addClass('active')
				}
			});
			var sdiv = $('InnerPanel');
			if(sdiv.scrollUpdate) sdiv.scrollUpdate();
		});
	}
});

var ThumbImages = new Class({
	initialize: function(elem){
		this.element = $(elem);

		this.images = this.element.getElementsBySelector('.Image');
		this.thumbs = this.element.getElementsBySelector('.Thumbs img');

		var co = 0;
		var item = false;
		this.thumbs.each(function(el){
			if(!item)
				item = el;
			var tb = new ThumbPair(el, this.thumbs, this.images[co], this.images);
			this.images[co].setStyle('display', 'none');
			co++;
		}.bind(this));

		if(item)
			item.fireEvent('click');
	}
});

var ThumbPair = new Class({
	initialize: function(thumb, thumbs, image, images){
		thumb.addEvent('click', function(event){
			images.each(function(im){
				im.setStyle('display', 'none');
			});

			thumbs.each(function(tm){
				tm.removeClass('active');
			});
			this.addClass('active');
			image.setStyle('display', 'block');
		});
	}
});

window.addEvent('domready', function(){
	var tabs = new GuzoTabs('Panel');
	var timg = new ThumbImages('Panel');
});