var activeTab = 1;
var activeSection = 0;
var activeSubset = 0;

var nrOfPersons = 0;

var paneVisible = false;

var showOldBackstage = true;

/* -------------------- Info Pane Handling -------------------- */

function oldBacktage(showOld) {
    showOldBackstage = showOld;
}

function initInfoPane( nop )
{

	$( "handlung" ).hide();
	$( "ortsinfo" ).hide();
	$( "rolleunddarsteller" ).hide();
	$( "hinterdenkulissen" ).hide();
	
	$( "player_container" ).insert( { after: '<div id="dynamicPane"></div><div id="paneButton"></div>' } );
	
	nrOfPersons = nop;
	
	showOpenPaneButton();

}

function showInfoPane( tab, section, subset )
{

	if( tab != undefined && tab != activeTab ) activeSection = 0;
	if( tab != undefined) activeTab = tab;
	if( section != undefined) activeSection = section;
	if( subset != undefined) activeSubset = subset;

	switch( activeTab )
	{
	
		case 1:
		
			showStory();
		
		break;
		case 2:
		
			showLocation();
		
		break;
		case 3:
		
			if( activeSection == 0 )
			{
				showPersonTable();
			}
			else
			{
				showPersonDetail();
			}
		
		break;
		case 4:
		
			showBackstage()
		
		break;
	
	}
	
	var subPanels = $$( ".zusatzinfo" );
	
	subPanels.each(
		function( s )
		{
			s.setStyle({
				height: '13em'
			});
		}
	);

	setPaneVisibility( true );

}

function hideInfoPane()
{

	setPaneVisibility( false );

}

function setPaneVisibility( visible )
{

	if( visible )
	{
		$( "dynamicPane" ).show();
		showClosePaneButton();
		setWindowSize( 440, 500 );
	}
	else
	{
		$( "dynamicPane" ).hide();
		showOpenPaneButton();
		setWindowSize( 440, 250 );
	}

}

function setWindowSize( width, height )
{

	if( self.innerHeight ) // all except Explorer
	{
		x = self.innerWidth;
		y = self.innerHeight;
		width += window.outerWidth - x;
		height += window.outerHeight - y;
	}
	else
	{
		// TODO!
		width += 10;
		height += 100;
	}
	
	window.resizeTo( width, height );

}

function showPersonTable()
{

	var html = '<div class="zusatzinfo">';	
	html += $( "navi3" ).innerHTML;	
	html += getPersonTableHTML();	
	html += '</div>';

	$( "dynamicPane" ).update( html );

}

function showPersonDetail()
{

	var html = '<div class="zusatzinfo">';	
	html += $( "navi3" ).innerHTML;	
	html += getPersonDetailHTML();
	html += '</div>';

	$( "dynamicPane" ).update( html );

}

function showBackstage()
{
    if(!showOldBackstage) {      
      $( "dynamicPane" ).update( '<div class="zusatzinfo">' + $( "hinterdenkulissen" ).innerHTML + '</div>');
    }
    if(showOldBackstage) {
        var backstageSections = new Array( 'autor', 'regie', 'dramaturgie', 'komposition' );

        if( activeSection == 0 ) activeSection = 1;

        var backstageNavi = '<div id="dynamicBackstageNavi"><ul class="hdkulissen">';
        for( var i=0; i<4; i++ )
        {
            backstageNavi += '<li>';
            if( i+1 != activeSection ) backstageNavi += '<a href="#" onclick="showInfoPane( 4, ' + (i+1) + ' )">';
            backstageNavi += $( backstageSections[i] ).firstDescendant().innerHTML;
            if( i+1 != activeSection ) backstageNavi += '</a>';
            backstageNavi += '</li>';
        }
        backstageNavi += '</ul></div>';

        var backstageHTML = '<div>' + $( "navi4" ).innerHTML + '</div>';
        backstageHTML += backstageNavi;
        backstageHTML += '<div class="teaserbox"><p>' + $( backstageSections[activeSection-1] ).firstDescendant().next().innerHTML + '</p></div>';

        $( "dynamicPane" ).update( '<div class="zusatzinfo">' + backstageHTML + '</div>' );
    }
	
}

function showStory()
{

	$( "dynamicPane" ).update( '<div class="zusatzinfo">' + $( "handlung" ).innerHTML + '</div>' );

}

function showLocation()
{

	$( "dynamicPane" ).update( '<div class="zusatzinfo">' + $( "ortsinfo" ).innerHTML + '</div>' );

}

function openInMain( url )
{

	if( opener == null )
	{
		window.open( url ); return false;
	}
	else
	{
		opener.location.href = url;
	}
	
}

function showOpenPaneButton()
{

	var html = '<br class="clear" /><p class="zusatz right"><a onclick="showInfoPane();">+ Zusatzinfo zuschalten +</a></p>';
	$( "paneButton" ).update( html );

}

function showClosePaneButton()
{

	var html = '<p class="zusatz right"><a onclick="hideInfoPane();">+ Zusatzinfo ausschalten +</a></p>';
	$( "paneButton" ).update( html );

}

/* -------------------- HTML Snippets -------------------- */

function getPersonTableHTML()
{

	var html = '<table cellpadding="0" cellspacing="0"><tr><th class="rechts" id="rolle">rolle</th><th class="links" id="schauspieler">darsteller</th></tr>';
		
	for( var i=1; i <= nrOfPersons; i++ )
	{
		
		html += '<tr><td class="rechts"><h4><a href="#" onclick="showInfoPane( 3, ' + i + ', 1 );">' + $( "rolle"+i+"headline" ).innerHTML + '</a></h4></td><td class="links"><h4><a href="#" onclick="showInfoPane( 3, ' + i + ', 2 );">' + $( "schauspieler"+i+"headline" ).innerHTML + '</a></h4></td></tr>';
		
	}	

	html += '</table>';
	
	return html;
	
}

function getPersonDetailHTML()
{

	var html = '<div class="gesWindow" id="window">';
	
	html += '<div class="bttBack"><a href="#" onclick="showInfoPane( 3, ' + ( activeSection > 1 ? activeSection-1 : nrOfPersons ) + ', ' + activeSubset + ' );"><img src="/static/radiotatort/pics/gen/bttBack.jpg" alt="" /></a></div>';
	
	html += '<div class="winInhalt">';
	
	html += '<div class="winKopf"><span class="masken">';
	
	if( activeSubset == 1 )
	{
		html += '<a href="#" onclick="showInfoPane( 3, ' + activeSection + ', 2 );"><img id="icon_actor" src="/static/radiotatort/pics/gen/maske.jpg" alt="" /></a>';
		html += '</span><span class="rolle">' + $( "rolle"+activeSection+"headline" ).innerHTML + '</span><span class="schauspieler"><a href="#" onclick="showInfoPane( 3, ' + activeSection + ', 2 );">' + $( "schauspieler"+activeSection+"headline" ).innerHTML + '</a></span><span class="close"><a href="#" onclick="showInfoPane( 3, 0 );"><img src="/static/radiotatort/pics/gen/close.jpg" alt="" /></a></span></div>';
	}
	else
	{
		html += '<a href="#" onclick="showInfoPane( 3, ' + activeSection + ', 1 );"><img id="icon_role" src="/static/radiotatort/pics/gen/masken.jpg" alt="" /></a>';
		html += '</span><span class="rolle"><a href="#" onclick="showInfoPane( 3, ' + activeSection + ', 1 );">' + $( "rolle"+activeSection+"headline" ).innerHTML + '</a></span><span class="schauspieler">' + $( "schauspieler"+activeSection+"headline" ).innerHTML + '</span><span class="close"><a href="#" onclick="showInfoPane( 3, 0 );"><img src="/static/radiotatort/pics/gen/close.jpg" alt="" /></a></span></div>';
	}
		
		
	html += '<div id="winBody" class="winBody">';
	
	if( activeSubset == 2 )
		html += '<img src="' + $( "schauspieler"+activeSection+"img" ).readAttribute( "src" ) + '" alt="" />';	
	
	if( activeSubset == 1 )
	{
		html += '<p>' + $( "rolle"+activeSection+"text" ).innerHTML + '</p>';
		//html += '<div class="winFoot"><a href="#" onclick="openInMain(\'' + $( "rolle"+activeSection+"link" ).readAttribute( "href" ) + '\');">' + $( "rolle"+activeSection+"link" ).innerHTML + '</a></div>';
	}
	else
	{
		html += '<p>' + $( "schauspieler"+activeSection+"text" ).innerHTML + '</p>';
		//html += '<div class="winFoot"><a href="#" onclick="openInMain(\'' + $( "schauspieler"+activeSection+"link" ).readAttribute( "href" ) + '\');">' + $( "schauspieler"+activeSection+"link" ).innerHTML + '</a></div>';
	}
	
	html += '</div></div>';
	
	html += '<div class="bttNext"><a href="#" onclick="showInfoPane( 3, ' + ( activeSection < nrOfPersons ? activeSection+1 : 1 ) + ', ' + activeSubset + ' );"><img src="/static/radiotatort/pics/gen/bttNext.jpg" alt="" /></a></div>';
	
	html += '</div>';
	
	return html;

}