var Slideshow = Class.create( {
	childs:null,
	count:0,
	active:null,
	activeIndex:0,
	switching:false,
	id:null,
	selector:null,

	initialize: function( htmlObj )
	{
		this.id = 'ss_' + Math.random().toString().replace( '.', '' );
		htmlObj.obj = this;
		htmlObj.id = this.id;
		this.childs = htmlObj.getElementsByTagName( 'li' );
		this.count = this.childs.length;
		
		var index = 0, 
			li = '';
			
		for ( var i=0; i < this.count; i++ )
		{
			//.switchTo(' + i + ').bind( $(\'' + htmlObj.id + '\').obj
			li += '<li><a href="javascript:$(\'' + htmlObj.id + '\').obj.switchTo(' + i + ')">' + (i + 1) + '</a></li>';
		}

		htmlObj.insert( '<ul class="selector" id="sel' + htmlObj.id + '">' + li + '</ul>' );
		this.selector = $( 'sel' + this.id ).getElementsByTagName( 'a' );
		this.selector[ 0 ].className = 'active';
		
		window.setInterval( function(){ this.switchTo( this.activeIndex + 1 < this.count ? this.activeIndex + 1 : 0 ) }.bind( this ), 5000 );
	},
	
	switchTo: function( index )
	{
		if ( this.switching )
			return;
			
		this.switching = true;

		if ( this.active )
		{
			new Effect.Fade( this.active, {duration:0.5} );
			this.selector[ this.activeIndex ].className = '';
		}
		
		this.active = this.childs[ index ];
		this.activeIndex = index;
		new Effect.Appear( this.active, {duration:0.5, afterFinish: function(){ this.switching = false; }.bind(this) } );
		this.selector[ index ].className = 'active';
	}
} );

var Application = {
	init: function()
	{
		var popups = $$( 'a.extLinkPopup' ),
			slideshow = $$( 'div.slideshow' );

		popups.each( function( item )
		{
			item.onclick = function() { window.open( item.href, '_blank' ); return false;}
		} );
		
		slideshow.each( function( item ) { new Slideshow( item ); } );
	}
};

Application.init();