/*
	TODO changing the shown graph in IE 7 doesn't work, the browser crashes
*/


/*
	the code is used to work with the traffic graph from Alexa
	we have 2 set of tabs (one for ranges, and one for measures); the user can choose any combination of tabs from these 2 sets, and we will show him the
	coresponding graph; graph are loaded on the fly, when the user ask a certain graph

	for each posible graph coming there is a div, which will contain when the graph has to be shown a javascript, as described at http://www.alexa.com/site/site_stats/signup

	a global var (pitchWebsite) defined in the view show_alexa_analytics is used
*/


// one set of tabs
var alexaRanges   = new Array( '7d', '1m', '3m', '6m', '1y', '3y', '5y', 'max' );
// another set of tabs
var alexaMeasures = new Array( 'r', 'n', 'p' ); // 'r' Reach, 'n' Rank, 'p' Page Views

// which are at every moment the selected tabs (default tabs are '6m'-range and 'r'/reach-measure)
var alexaCurrentRange   = alexaRanges[   3 ];
var alexaCurrentMeasure = alexaMeasures[ 1 ];

// what graphs has already been shown; if the user wants to see one of these again, we just make visible its container (div)
var alreadyShownAlexaGraphs = new Array( alexaRanges.length * alexaMeasures.length );

// create all the divs (containers) for all the posible graphs; in these divs we will include -on the fly, when the user asks for a certain graph- the javascript from alexa, to generate the graph
function createDivsForAlexa( )
{
	_parentNode = document.getElementById( 'graphsContainer' );
	for( var j = 0; j < alexaMeasures.length; j++ )
	{
		for( var i = 0; i < alexaRanges.length; i++ )
		{
			var myDiv = document.createElement( 'div' );
			myDiv.id = alexaMeasures[ j ] + alexaRanges[ i ];
			_parentNode.appendChild( myDiv );
		}
	}
}

function isElementVisible( idElement )
{
	return document.getElementById( idElement ).style.display.toString( ).toLowerCase( ) != 'none'
}

// user clicked on a measure tab (Reach, Rank, Page Views); we will inject the required javascript to generate the required graph
function alexaMeasureTab( measure )
{
	if( isElementVisible( measure + alexaCurrentRange ) )
	{
		return;
	}
	alexaCurrentMeasure = measure;
	updateAlexaGraphic( );
}

// user clicked on a range tab ('7d', '1m', '3m', '6m', '1y', '3y', '5y', 'max'); we will inject the required javascript to generate the required graph
function alexaRangeTab( range )
{
	if( isElementVisible( alexaCurrentMeasure + range ) )
	{
		return;
	}
	alexaCurrentRange = range;
	updateAlexaGraphic( );
}

function arrayContains( arr, el )
{
	for( var i = 0; i < arr.length; i++ )
	{
		if( arr[ i ] == el )
		{
			return true;
		}
	}
	return false;
}

// update the screen, modifying if necessary:
// - the shown graphic acording to present selected by user pair of tabs (range+measure)
// - the graphic legend
// - the aspect of tabs (selected and not-selected tabs look different)
function updateAlexaGraphic( )
{
	for( var j = 0; j < alexaMeasures.length; j++ )
	{
		for( var i = 0; i < alexaRanges.length; i++ )
		{
			document.getElementById( alexaMeasures[ j ] + alexaRanges[ i ] ).style.display = 'none';
		}
		document.getElementById( 'legend_' + alexaMeasures[ j ] ).style.display = 'none';
		document.getElementById( 'alexaM' + alexaMeasures[ j ] ).parentNode.className = '';
	}
	for( var i = 0; i < alexaRanges.length; i++ )
	{
		document.getElementById( 'alexaR' + alexaRanges[ i ] ).parentNode.className = '';
	}
	if( arrayContains( alreadyShownAlexaGraphs, alexaCurrentMeasure + alexaCurrentRange ) == false )
	{
		alreadyShownAlexaGraphs.push( alexaCurrentMeasure + alexaCurrentRange );
		var myScript = document.createElement( 'script' );

		myScript.text = "var sites      = [ pitchWebsite ];\n" +
	"var opts =\n" +
	"{\n" +
		"width:      380,  // width in pixels (max 400)\n" +
		"height:     300,  // height in pixels (max 300)\n" +
		"type:       '" + alexaCurrentMeasure + "',  // 'r' Reach, 'n' Rank, 'p' Page Views\n" +
		"range:      '" + alexaCurrentRange + "', // '7d', '1m', '3m', '6m', '1y', '3y', '5y', 'max'\n" +
		"bgcolor:    'ffffff' // hex value without '#' char (usually 'e6f3fc')\n" +
	"};\n" +
	"// END USER-EDITABLE VARIABLES\n" +
	"AGraphManager.add( new AGraph( sites, opts ) );\n";
  
   
		document.getElementById( alexaCurrentMeasure + alexaCurrentRange ).appendChild(myScript);
	}
	document.getElementById( alexaCurrentMeasure + alexaCurrentRange ).style.display = 'block';
	document.getElementById( 'legend_' + alexaCurrentMeasure    ).style.display = 'block';

	document.getElementById( 'alexaR' + alexaCurrentRange   ).parentNode.className = 'selectedTab';
	document.getElementById( 'alexaM' + alexaCurrentMeasure ).parentNode.className = 'selectedTab';
}