var Tabs = function( $target, index )
{
	var li, a, i=0, o=this;
	this.$src = $($target.cloneNode(true));
	this.$tgt = $(DOM.create('div'));
	this.$tgt.before( $target );
	if(!index) index = 0;

	DOM.rem( $target );

	this.dts = this.$src.$t('dt');
	this.dds = this.$src.$t('dd');

	// making menu
	this.$menu = this.$tgt.create( 'ul' , { id: 'tabsMenu' });

	this.dts.forEach(
		function( el ) {
			li = o.$menu.create('li');
			li.inside( o.$menu );
			addClass( li, el.className );

			a = DOM.create('a');
			a.style.cursor = 'pointer';
			a.innerHTML = el.innerHTML;
			DOM.inside( a , li );
			a.pastId = el.id;

			a.clickedIndex = i;

			Evt.add( a , 'click', function(evt){ Evt.cancel(evt); o.changeTab(this) });

			i++;
		}
	);

	this.$menu.inside( this.$tgt );
	this.$titles = this.$menu.$t('li');

	// making body
	this.$body = this.$tgt.create('ul', { id: 'tabsBody' });

	i = 0;
	this.$contents = [];
	this.dds.forEach(
		function( el ) {
			li = o.$body.create('li');
			addClass( li, el.className );

			li.innerHTML = '<h3>' + o.dts[i].innerHTML + '</h3>' + el.innerHTML;

			li.inside( o.$body );

			o.$contents[o.$contents.length] = li;

			i++;
		}
	);

	this.$body.inside( this.$tgt );

	this.changeTab( index );
}

Tabs.prototype.changeTab = function( index ) {

	if( typeof index!= 'number' )
		index = index.clickedIndex

	this.$titles.forEach( function( el ){ removeClass(el,'current') } );
	this.$menu.className = this.$titles[index].className;
	addClass( this.$titles[index], 'current' );

	this.$contents.forEach( function( el ){
		el.style.display = 'none';
		el.style.visibility = 'hidden';
	} );
	this.$contents[index].style.display = 'block';
	this.$contents[index].style.visibility = 'visible';

}