<?php

$line_chart_data = (isset($this->line_chart_results) ? json_encode($this->line_chart_results) : "");
?>
<style>
<!--
.hoverTableRowColor {
	background-color: <?=$this->channel_info->light_color?> ;
}

.selectedTableRowColor {
	background-color: <?=$this->channel_info->light_color?> ;
}
-->
</style>
<script type="text/javascript">

	google.load('visualization', '1', {packages: ['piechart','table']});
	//Create and populate the data table.
	var trackData, trackView, storeData, storeView, countryData, countryView;
	var trackPieHover=-1, storePieHover=-1, countyPieHover=-1;
	var trackPieChart, trackBarTable, trackBarTableOptions;
	var storePieChart, storeBarTable, storeBarTableOptions;
	var countryPieChart, countryBarTable, countryBarTableOptions, pieChartOptions;
	var selectColor = "<?=$this->channel_info->select_color?>";
	var trackTimeOut, storeTimeOut, countryTimeOut;
	var pieColors = [
	<?php
	$tmp = "";
	foreach($this->channel_info->pie_colors as $color) {
		$tmp .= ',\''.$color.'\'';
	}
	echo trim($tmp, ",");
	?>
	];

	var trackPieColors, storePieColors, countryPieColors;

	function colorRepeater(source, length){
	    var dest = [];
	    while (dest.length < length) {
	      dest.push(source[dest.length % source.length]);
	    }
	    return dest;
	}
	function drawVisualization() {
	<?php if($this->showTrackBreakdown) { ?>
	    trackData = new google.visualization.DataTable();
		trackData.addColumn('string', '<?=$this->translate->_('analytics_Tracks')?>');
		trackData.addColumn('number', '<div class="float-right"><?=$this->translate->_('Units Sold')?></div>');
		trackData.addColumn('<?=($this->showVolume)?'string':'number'?>', '<div class="float-right">#</div>');
		trackData.addColumn('number', '<div class="float-right">%</div>');
		trackData.addColumn('string','');
		trackData.addColumn('number', 'id');
		trackData.addRows(<?=sizeof($this->sales_by_track)?>);
		<?php
		foreach($this->sales_by_track as $i => $track_info){
			echo "trackData.setValue({$i}, 0, '".$this->escapejs($track_info['track_name'])."');\n";
			echo "trackData.setValue({$i}, 1, {$track_info['total']});\n";
			echo "trackData.setValue({$i}, 2, ".($this->showVolume?"'{$track_info['track_no']}'":"{$track_info['track_no']}").");\n";
			echo "trackData.setValue({$i}, 3, {$track_info['percentage']});\n";
		}
		?>
		var rowInds = trackData.getSortedRows([{column: 1, desc: true}]);
		for (var i = 0; i < rowInds.length; i++) {
			trackData.setValue(rowInds[i],5,i);
		}
		trackData.sort([{column: 1, desc: true}]);
		trackPieColors = colorRepeater(pieColors, trackData.getNumberOfRows());
	<?php }?>
		storeData = new google.visualization.DataTable();
		storeData.addColumn('string', '<?=$this->translate->_('Store')?>');
		storeData.addColumn('number', '<div class="float-right"><?=$this->translate->_('Units Sold')?></div>');
		storeData.addColumn('number', '<div class="float-right">%</div>');
		storeData.addColumn('string','');
		storeData.addColumn('number', 'id');
		storeData.addRows(<?=sizeof($this->sales_by_store)?>);
		<?php
			foreach($this->sales_by_store as $i => $data){
				echo "storeData.setValue({$i}, 0, '".$this->escapejs($data['dms_master_name'])."');\n";
				echo "storeData.setValue({$i}, 1, {$data['total']});\n";
				echo "storeData.setValue({$i}, 2, {$data['percentage']});\n";
			}
		?>
		var rowInds = storeData.getSortedRows([{column: 1, desc: true}]);
		for (var i = 0; i < rowInds.length; i++) {
			storeData.setValue(rowInds[i],4,i);
		}
		storeData.sort([{column: 1, desc: true}]);
		storePieColors = colorRepeater(pieColors, storeData.getNumberOfRows());
		countryData = new google.visualization.DataTable();
		countryData.addColumn('string', '<?=$this->translate->_('Country')?>');
		countryData.addColumn('number', '<div class="float-right"><?=$this->translate->_('Units Sold')?></div>');
		countryData.addColumn('number', '<div class="float-right">%</div>');
		countryData.addColumn('string','');
		countryData.addColumn('number', 'id');
		countryData.addRows(<?=sizeof($this->sales_by_country)?>);
		<?php
			foreach($this->sales_by_country as $i => $data){
				echo "countryData.setValue({$i}, 0, '".$this->escapejs($data['country_name'])."');\n";
				echo "countryData.setValue({$i}, 1, {$data['total']});\n";
				echo "countryData.setValue({$i}, 2, {$data['percentage']});\n";
			}
		?>
		var rowInds = countryData.getSortedRows([{column: 1, desc: true}]);
		for (var i = 0; i < rowInds.length; i++) {
			countryData.setValue(rowInds[i],4,i);
		}
		countryData.sort([{column: 1, desc: true}]);
		countryPieColors = colorRepeater(pieColors, countryData.getNumberOfRows());
		// Create and draw the visualization.

		pieChartOptions = {pieJoinAngle: 0,enableTooltip:false, legend: 'none'
			,  colors:pieColors};

		<?php if($this->showTrackBreakdown) {?>
		trackPieChart = new google.visualization.PieChart(document.getElementById('trackPieChartDiv'));
		pieChartOptions.colors = trackPieColors;
		trackPieChart.draw(trackData, pieChartOptions );
		google.visualization.events.addListener(trackPieChart, 'onmouseover', trackPieMouseOver);
		google.visualization.events.addListener(trackPieChart, 'onmouseout', trackPieMouseOut);
		<?php }?>

		storePieChart = new google.visualization.PieChart(document.getElementById('storePieChartDiv'));
		pieChartOptions.colors = storePieColors;
		storePieChart.draw(storeData, pieChartOptions );
		google.visualization.events.addListener(storePieChart, 'onmouseover', storePieMouseOver);
		google.visualization.events.addListener(storePieChart, 'onmouseout', storePieMouseOut);

		countryPieChart = new google.visualization.PieChart(document.getElementById('countryPieChartDiv'));
		pieChartOptions.colors = countryPieColors;
		countryPieChart.draw(countryData, pieChartOptions );
		google.visualization.events.addListener(countryPieChart, 'onmouseover', countryPieMouseOver);
		google.visualization.events.addListener(countryPieChart, 'onmouseout', countryPieMouseOut);

		var formatter = new google.visualization.PatternFormat(
			"<div style='width: 100%; height: 100%;' onmouseout='storePieMouseOut();'  onmouseover='storeHover({2})'>\
			<div class='chartBarBack' style='width:100px; float:left'>\
				<div class='chartBarFront' style='background-color:<?=$this->channel_info->graph_color?>;height:5px; width:{1}%; float:left'>&nbsp;</div>\
			</div>\
				</div>");
		formatter.format(storeData, [1,2,4],3);
		var perecentageFormatter = new google.visualization.NumberFormat({suffix: "%"});
		perecentageFormatter.format(storeData,2);

		var hoverStoreFormatter =  new google.visualization.PatternFormat(
			"<div style='width: 100%; height: 100%;' onmouseout='storePieMouseOut();' onmouseover='storeHover({1})'>{0}</div>");
		hoverStoreFormatter.format(storeData,[0,4],0);
		hoverStoreFormatter.format(storeData,[1,4],1);
		hoverStoreFormatter.format(storeData,[2,4],2);

		var formatter = new google.visualization.TablePatternFormat(
			"<div style='width: 100%; height: 100%;' onmouseout='countryPieMouseOut();'  onmouseover='countryHover({2})'>\
				<div class='chartBarBack' style='width:100px; float:left'>\
				<div class='chartBarFront' style='background-color:<?=$this->channel_info->graph_color?>;height:5px; width:{1}%; float:left'>&nbsp;</div>\
			</div>\
			</div>");
		formatter.format(countryData, [1,2,4],3);
		perecentageFormatter.format(countryData,2);

		var hovercountryFormatter =  new google.visualization.PatternFormat(
			"<div style='width: 100%; height: 100%;' onmouseout='countryPieMouseOut();' onmouseover='countryHover({1})'>{0}</div>");
		hovercountryFormatter.format(countryData,[0,4],0);
		hovercountryFormatter.format(countryData,[1,4],1);
		hovercountryFormatter.format(countryData,[2,4],2);

		storeView = new google.visualization.DataView(storeData);
		storeView.setColumns([0,1,3,2]);
		countryView = new google.visualization.DataView(countryData);
		countryView.setColumns([0,1,3,2]);

		trackBarTableOptions = {allowHtml: true, startPage:0, showRowNumber: false , legend: 'none', page:'enable', pageSize:10, pagingButtonsConfiguration:'auto'
			, cssClassNames:{headerRow: 'barChartHeaderRow', hoverTableRow: 'hoverTableRow hoverTableRowColor', tableCell:'tableCell', headerCell:'headerCell', selectedTableRow:'selectedTableRow  selectedTableRowColor'}};
		storeBarTableOptions = $.extend(true, {}, trackBarTableOptions);
		countryBarTableOptions = $.extend(true, {}, trackBarTableOptions);

		<?php if($this->showTrackBreakdown) {?>
		var formatter = new google.visualization.PatternFormat(
			"<div style='width: 100%; height: 100%;'  onmouseover='trackHover({2})'>\
				<div class='chartBarBack' style='width:100px; float:left' onmouseout='trackPieMouseOut();' onmouseover='trackHover({2})'>\
				<div class='chartBarFront' style='background-color:<?=$this->channel_info->graph_color?>;height:5px; width:{1}%; float:left'>&nbsp;</div>\
			</div></div>");
		formatter.format(trackData, [1,3,5],4);
		perecentageFormatter.format(trackData,3);

		var hovertrackFormatter =  new google.visualization.PatternFormat(
			"<div style='width: 100%; height: 100%;' onmouseout='trackPieMouseOut();' onmouseover='trackHover({1})'>{0}</div>");
		hovertrackFormatter.format(trackData,[0,5],0);
		hovertrackFormatter.format(trackData,[1,5],1);
		hovertrackFormatter.format(trackData,[2,5],2);
		hovertrackFormatter.format(trackData,[3,5],3);


		trackBarTable = new google.visualization.Table(document.getElementById('trackBarChart'));
		trackView = new google.visualization.DataView(trackData);
		trackView.setColumns([2,0,1,4,3]);
		trackBarTable.draw(trackView, trackBarTableOptions);
		//google.visualization.events.addListener(trackBarTable, 'select', trackRowSelect);
		<?php }?>

		storeBarTable = new google.visualization.Table(document.getElementById('storeBarChart'));
		storeBarTable.draw(storeView, storeBarTableOptions);
		//google.visualization.events.addListener(storeBarTable, 'select', storeRowSelect);

		countryBarTable = new google.visualization.Table(document.getElementById('countryBarChart'));
		countryBarTable.draw(countryView, countryBarTableOptions);
		//google.visualization.events.addListener(countryBarTable, 'select', countryRowSelect);
	}

	function trackPieMouseOver(args){
		clearTimeout(trackTimeOut);
		if(args.row != trackPieHover){
			trackPieHover = args.row;
		pieMouseOver(trackPieChart, trackPieColors, trackBarTable, trackBarTableOptions, trackData, trackView, args);
	}
	}

	function trackPieMouseOut(args){
	    trackPieHover = -1;
	    clearTimeout(trackTimeOut);
	    trackTimeOut = setTimeout("pieMouseOut(trackPieChart, trackPieColors, trackBarTable, trackBarTableOptions, trackData, trackView);",100);
	}

	function trackHover(row){
	    clearTimeout(trackTimeOut);
		tableHover(trackPieChart, trackPieColors, trackBarTable, trackData, row);
	}

	function storePieMouseOver(args){
	    clearTimeout(storeTimeOut);
	    if(args.row != storePieHover){
			storePieHover = args.row;
		pieMouseOver(storePieChart, storePieColors, storeBarTable, storeBarTableOptions, storeData, storeView, args);
	}
	}

	function storePieMouseOut(args){
	    storePieHover = -1;
	    clearTimeout(storeTimeOut);
	    storeTimeOut = setTimeout("pieMouseOut(storePieChart, storePieColors, storeBarTable, storeBarTableOptions, storeData, storeView);",100);
	}

	function storeHover(row){
	    clearTimeout(storeTimeOut);
		tableHover(storePieChart, storePieColors, storeBarTable, storeData, row);
	}

	function countryPieMouseOver(args){
	    clearTimeout(countryTimeOut);
	    if(args.row != countryPieHover){
			countryPieHover = args.row;
		pieMouseOver(countryPieChart, countryPieColors, countryBarTable, countryBarTableOptions, countryData, countryView, args);
	}
	}

	function countryPieMouseOut(args){
	    countryPieHover = -1;
		clearTimeout(countryTimeOut);
	    countryTimeOut = setTimeout("pieMouseOut(countryPieChart, countryPieColors, countryBarTable, countryBarTableOptions, countryData, countryView);",100);
	}

	function countryRowSelect(){
		rowSelect(countryPieChart, countryBarTable);
	}

	function countryHover(row){
	    clearTimeout(countryTimeOut);
		tableHover(countryPieChart, countryPieColors, countryBarTable, countryData, row);
	}

	function pieMouseOver(pieChart, pieColors, barTable, tableOptions, data, view, args){
		startPage = Math.floor(args.row/tableOptions.pageSize);
		tableOptions.startPage = startPage;
		barTable.draw(view, tableOptions);
		barTable.setSelection([{row:args.row}]);
			var newColors = pieColors.slice(0);
			newColors[args.row] = selectColor;
			pieChartOptions.colors = newColors;
			pieChart.draw(data, pieChartOptions);
		}

	function pieMouseOut(pieChart, pieColors, barTable, tableOptions, data, view){
		barTable.setSelection();
		pieChartOptions.colors = pieColors;
		pieChart.draw(data, pieChartOptions);
	}

	function tableHover(pieChart, pieColors, barTable, data, row){
	    var newColors = pieColors.slice(0);
		newColors[row] = selectColor;
		pieChartOptions.colors = newColors;
		pieChart.draw(data, pieChartOptions);
		barTable.setSelection([{row:row}]);
	}

	google.setOnLoadCallback(drawVisualization);
</script>

<div id="loading_image" style="display: none;">
<div class="modalLoading"><b><?=$this->translate->_("LOADING...")?></b><br />
<img src="/images/loading.gif" /></div>
</div>

<div id="content">
	<div id="bread"><a href=""><?=$this->translate->_("home")?></a> &gt;
	<a href="/analytics/releaseanalytics"><?=strtolower($this->translate->_("release analytics"))?></a>
	&gt; <a href="/analytics/releaseoverview?upc=<?=$this->upc?>"><?=$this->translate->_("sales overview")?></a>
	&gt; <span class="active"><?=$this->translate->_($this->channel_info->full_name)?></span></div>
	<h1 class="float-left"><?=$this->translate->_("release analytics")?>: <span
		class="subheading"><?=$this->translate->_($this->channel_info->full_name)?></span></h1>

	<?php if(count($this->available_stores) && in_array(1,array_keys($this->available_stores))){?>
	<div class="analyticsBackBtn" id="heat_map_link_container"><a
		id="heat_map_link" class="salesMapLink" href="<?=$this->heatmap_link?>"><img
		src="/images/analytics/map.png" /><?=$this->translate->_("iTunes Sales Map")?></a>
	</div>
	<?php }?>
	<div class="clear"></div>

	<!-- Start Header -->
	<?php
	//Render filter header
	echo $this->releaseanalyticsfilters();
	?>
	<!-- End Header -->

	<div class="analyticsContainer">

		<div class="analyticsTopHelp float-left">
		<?php //if(!$this->noinfo){ ?>
		<div class="graphDetailsHelp"><img
			src="/images/icons/graphoverview.png" class="graphImage" /> <a
			href="<?="/analytics/releaseoverview?".$_SERVER["QUERY_STRING"]?>"><?=$this->translate->_("Back to overview")?></a></div>
		<?php //}?>
		</div>
		<?php echo $this->releaseanalyticspresetbar()?>
		<div class="clear"></div>					
		<div>
			<div class="channelInfo ">
			<div class="channelTotal">
			<p><?=$this->translate->_($this->channel_info->title)?></p>
			<p id="channel<?=str_replace(" ", "", $this->channel_info->css_name)?>Count"
				class="channelNumber channel<?=$this->channel_info->css_name?>">0</p>
			</div>
			</div>
			<div id="placeholderX" class="channelGraph"></div>
		</div>
		<div class="clear"></div>

	<?php
	if($this->noinfo){ ?>
		<div id="noInfo"><?=$this->translate->_("no sales")?></div>
	<?php
	}else{
		?>

		<?php if($this->showTrackBreakdown) {?>
		<div class="channelCharts">
		<h3 class="channel<?=$this->channel_info->css_name?>"><?=$this->translate->_("Track Breakdown")?></h3>
		<div id="trackBarChart" class="barChartDiv"></div>
		<div id="trackPieChartDiv" class="pieChartDiv"></div>
		<div class="clear"></div>
		</div>
		<?php }?>
	
	
		<div class="channelCharts">
		<h3 class="channel<?=$this->channel_info->css_name?>"><?=$this->translate->_("Store Breakdown")?></h3>
		<div id="storePieChartDiv" class="pieChartDiv"></div>
		<div id="storeBarChart" class="barChartDiv"></div>
		<div class="clear"></div>
		</div>
	
	
		<div class="channelCharts">
		<h3 class="channel<?=$this->channel_info->css_name?>"><?=$this->translate->_("Country Breakdown")?></h3>
		<div id="countryPieChartDiv" class="pieChartDiv"></div>
		<div id="countryBarChart" class="barChartDiv"></div>
		<div class="clear"></div>
		</div>
	
	
		<div id="tool_tip" class="graphTooltip"></div>
	
		<div class="analyticsDisclaimer smalltext">
		<p><a  href="/analytics/salesfeedinfo" class="salesMapLink"><img src="/images/icons/getinfo.png"/><?=$this->translate->_("more about our sales feeds")?></a></p>
		<p><span class="subtextlink"><strong><?=$this->translate->_("Please Note")?></strong></span><?=$this->translate->_("Analytics disclaimer")?></p>
		</div>
<?php
}
?>
	</div>
<script language="javascript" type="text/javascript">
genereateNewLineChart("channel<?=$this->channel_info->css_name?>Count", "placeholderX", "<?=$this->channel_info->graph_color?>", <?=$line_chart_data?>);
</script>

<div id="modal_overlay" class="modal-background">
<div id="modal_container"></div>
</div>
</div>
