var DemoServers = new Class( {
	
	options: {
		url: Meta.get( 'url_root' ) +'/remote/demo_servers'
	},
	
	initialize: function() {
		
		if( !$( 'demoServers' ) ) return;
		
		this.container = $( 'demoServers' );
		this.game = this.container.get( 'title' );
		this.list = this.container.getElement( 'div[class=list]' );
		this.details = this.container.getElement( 'div[class=details]' );
		this.loading = this.list.getElement( 'tr[class=loading]' );
		this.notice = this.list.getElement( 'tr[class=notice]' );
		
		this.loadServers();
		
	},
	
	setupTable: function() {
		
		this.list.getElements( 'table tr[id^=server_]' ).each( function( tr ) {
			
			tr.addEvents( {
				'mouseenter': function() { this.addClass( 'hover' ); },
				'mouseleave': function() { this.removeClass( 'hover' ); },
				'click': this.loadDetails.bind( this, tr )
			} );
			
		}, this );
	
	},
	
	loadServers: function() {
		
		new Request.JSON( {
			url: this.options.url,
			onComplete: this.displayServers.bind( this )
		} ).post( {
			'game': this.game,
			'limit': 25
		} );
		
	},
	
	displayServers: function( r ) {
		
		this.results = r.result;
		
		var html	= '<table cellpadding="0" cellspacing="0">'
					+ '<tr>'
					+ '<th class="name">SERVER NAME</th>'
					+ '<th class="players">PLAYERS</th>'
					+ '</tr>';
		
		if( r.result == null || r.result.length == 0 ) {
			html	+= '<tr class="notice">'
					+ '<td colspan="2">No Demo Servers Could Be Found</td>'
					+ '</tr>';
		} else {
			
			$each( r.result, function( server, i ) {
				
				html	+= '<tr id="server_'+ i +'" title="'+ server.name +'">'
						+ '<td><span>'+ server.name +'</span></td>'
						+ '<td>'+ server.player +'/'+ server.maxplayer +'</td>';
			
			} );
			
			this.details.getElement( '.data' ).adopt( 
				new Element( 'p', { 
					'class': 'small', 
					'text': 'Please Select A Server' 
				} ) 
			);
		
		}
		
		html += '</table>';
		
		this.list.set( 'html', html );
		this.setupTable();
	},
	
	loadDetails: function( server ) {
		server.getSiblings( server ).removeClass( 'selected' );
		server.addClass( 'selected' );
		
		var index = server.get( 'id' ).replace( /server_/i, '' );
		var details = this.results[ index ];
		var data = this.details.getElement( '.data' ).empty();
		
		new Element( 'dl' ).adopt(
			new Element( 'dt', { 'text': 'IP Address:Port' } ),
			new Element( 'dd', { 'text': details.ip +':'+ details.port } ),
			
			new Element( 'dt', { 'text': 'Location' } ),
			new Element( 'dd', { 'text': details.city +','+ details.region } ),
			
			new Element( 'dt', { 'text': 'Current Map' } ),
			new Element( 'dd', { 'text': details.map } )
		).inject( data );
		
		if( details.launchUrl != '' ) {
			new Element( 'p', { 'class': 'connect' } ).adopt(
				new Element( 'a', {
					'href': details.launchUrl,
					'html': '<span>Join This Server</span>'
				} )
			).inject( data );
		}
		
	}
	
} );

window.addEvent( 'domready', function() {
		
	new DemoServers;

} );