google.load("visualization", "1", {packages:["corechart"]});

var bgChartColor;
if ($.browser.msie && $.browser.version < 9 ) {
	bgChartColor = "#d1d1e4";
} else {
	bgChartColor = "transparent";
}
function drawChart1() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Benefit');
	data.addColumn('number', 'Hours per Day');
	data.addRows([
	  ['Want to reduce in-house IT costs',    115],
	  ['Want more scalable infrastructure resources without up front costs',      210],
	  ['Provides more cost flexibility than traditional hosted service',  262],
	  ['Want to reduce infrastructure costs', 346],
	  ['Company Execs Encourage IT to explore Cloud',    31],
	  ['Other',    84]
	]);
	var options = {
	  width: 150, height: 140,
	  backgroundColor: bgChartColor,
	  is3D: true,
	  legend: {position: 'none'},
	  tooltip: {textStyle: {color: '#FF0000'}, showColorCode: true, trigger: 'hover'},
	  chartArea:{left:00,top:0,width:"100%",height:"100%"}
	};

	var chart1 = new google.visualization.PieChart(document.getElementById('chart1_div'));
    chart1.draw(data, options);
}
 
function drawChart1Zoom() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Benefit');
	data.addColumn('number', 'Hours per Day');
	data.addRows([
	        	  ['Want to reduce in-house IT costs',    115],
	        	  ['Want more scalable infrastructure resources without up front costs',      210],
	        	  ['Provides more cost flexibility than traditional hosted service',  262],
	        	  ['Want to reduce infrastructure costs', 346],
	        	  ['Company Execs Encourage IT to explore Cloud',    31],
	        	  ['Other',    84]
	        	]);
	
	var options = {
	  width: 300, height: 230,
	  backgroundColor: bgChartColor,
	  is3D: true,
	  legend: {position: 'none'},
	  tooltip: {textStyle: {color: '#FF0000'}, showColorCode: true, trigger: 'hover'},
	  chartArea:{left:0,top:0,width:"100%",height:"100%"}
	};

	var chart1 = new google.visualization.PieChart(document.getElementById('chart1_div'));
    chart1.draw(data, options);
}

function drawChart2() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Benefits');
    data.addColumn('number', 'Reduction');
    data.addRows([
      ['Cost Savings', 79.35],
	  ['Scalable', 68.39],
	  ['Opex not CapEx', 54.84],
	  ['Agility', 47.74],
	  ['Reliability Improvements', 40.65],
	  ['Always Available', 39.35],
	  ['Complexity Reduction', 38.71],
	  ['Newer Technology', 36.13]
	]);

	var options = {
	  width: 150, height: 140,
	  hAxis: {title: 'Percentage of Reduction', titleTextStyle: {color: 'red'}},
	  legend: {position: 'none'},
	  tooltip: {textStyle: {color: '#FF0000'}, showColorCode: true, trigger: 'hover'},
	  backgroundColor: bgChartColor,
	  is3D: true,
	  chartArea:{left:20,top:10,width:"75%",height:"75%"},
	  animation:{duration:3000,easing:'out'}
	};
	
	var chart2 = new google.visualization.BarChart(document.getElementById('chart2_div'));
    chart2.draw(data, options);
}


function drawChart2Zoom() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Benefits');
    data.addColumn('number', 'Percentage');
    data.addRows([
      ['Cost Savings', 79.35],
	  ['Scalable', 68.39],
	  ['Opex not CapEx', 54.84],
	  ['Agility', 47.74],
	  ['Reliability Improvements', 40.65],
	  ['Always Available', 39.35],
	  ['Complexity Reduction', 38.71],
	  ['Newer Technology', 36.13]
	]);

	var options = {
	  width: 300, height: 230,
	  hAxis: {title: 'Percentage', titleTextStyle: {color: 'red'}},
	  legend: {position: 'none'},
	  tooltip: {textStyle: {color: '#FF0000'}, showColorCode: true, trigger: 'hover'},
	  backgroundColor: bgChartColor,
	  is3D: true,
	  chartArea:{left:150,top:10,width:150,height:"75%"},
	  animation:{duration:3000,easing:'out'}
	};
	
	var chart2 = new google.visualization.BarChart(document.getElementById('chart2_div'));
    chart2.draw(data, options);
}


function drawChart3() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
	data.addColumn('number', 'ROI');
	data.addRows([
	  ['1yr', 58],
	  ['2yr', 163],
	  ['3yr',  209],
	  ['4yr', 304],
	  ['5yr', 433]
	]);

	var options = {
		width: 150, height: 140,
	    chartArea:{left:25,top:10,width:"75%",height:"75%"},
	    backgroundColor: bgChartColor,
	    legend: {position: 'none'},
	    tooltip: {textStyle: {color: '#FF0000'}, showColorCode: true, trigger: 'hover'}
	};

	var chart3 = new google.visualization.AreaChart(document.getElementById('chart3_div'));
    chart3.draw(data, options);
}

function drawChart3Zoom() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
	data.addColumn('number', 'ROI');
	data.addRows([
	  ['1yr', 58],
	  ['2yr', 163],
	  ['3yr',  209],
	  ['4yr', 304],
	  ['5yr', 433]
	]);

	//if ($.browser.msie && ieVersion < 9 ) {

	var options = {
		width: 300, height: 230,
	    chartArea:{left:40,top:10,width:"75%",height:"75%"},
	    backgroundColor: bgChartColor,
	    legend: {position: 'none'},
	    tooltip: {textStyle: {color: '#FF0000'}, showColorCode: true, trigger: 'hover'},
		pointSize:10
	};

	var chart3 = new google.visualization.AreaChart(document.getElementById('chart3_div'));
    chart3.draw(data, options);
}


if($(window).width() < 800) {
    // view.js handles this
} else {
	google.setOnLoadCallback(drawChart1);
	google.setOnLoadCallback(drawChart2);
	google.setOnLoadCallback(drawChart3);
}