/* Graph with one label and one bar */
function buildGraph(arStudents, arScores, chartWidth, maxWidth, headers) {
        imRed = new Image();
        imYellow = new Image();
	var total = 0;
	var percent = 0;
        imRed.src = "img/red.gif";
        imYellow.src = "img/blue.jpg";
        strImage = "";    // used for alternating colors
        strToWrite = "";  // We'll dynamically build a table to hold
        // our chart, then write it to the screen when ready
        // now find the maximum value to chart
        for(i = 0; i < arScores.length; i++) {
		if(parseInt(arScores[i]) > parseInt(maxWidth)) maxWidth = parseInt(arScores[i]);
		total += parseInt(arScores[i]);	
        }
        // start building the output string
        strToWrite += "<table bgcolor='#cccccc' cellspacing=0>";
	strToWrite += "<tr>\n";
	for(i = 0; i < headers.length; i++) {
		head_width=0;
		var re = /^Countries.*/;
		if (!headers[i].match(re) == 0) {
			head_width = 160;
		}
		re = /^Browsers.*/;
		if (!headers[i].match(re)  == 0) {
			head_width = 150;
		}
		if (headers[i] == "Devices") {
			head_width = 140;
		}
		if (headers[i] == "%") {
			head_width = 50;
		}
		re = /^Visits.*/;
		if (!headers[i].match(re) == 0) {
			head_width = 400;
		}
        	strToWrite += "<td width='" + head_width + "'>" + headers[i] + "</td>";
	}
	strToWrite += "<td width=80px align=right>%</td>\n";
	strToWrite += "</tr>\n";
        for(i = 0; i < arScores.length; i++) {
		percent = ((parseInt(arScores[i]) * 100) / total)
                if(i % 2 == 0)
                        strImage = imRed.src;
                else
                        strImage = imYellow.src;
                strToWrite += "<tr><td align=right>" + arStudents[i] + "</td>";
                strToWrite += "<td width='" + (parseInt(chartWidth) + 100) + "'>";
		strToWrite += "<img src='" + strImage + "' width=";
		strToWrite += parseInt((arScores[i] / maxWidth) * chartWidth);
		strToWrite += " height=10 hspace=2>" + arScores[i] + "</td>";
		strToWrite += "<td width=100 align=right>&nbsp;" + percent.toFixed(2) + " % </td></tr>";
        }
        strToWrite += "</table>";
        return strToWrite;
}

/* Graph with one label and multiple bars */
function buildCountryBarsGraph(arLabels, arScores, chartWidth, maxWidth, headers, descs, solopaises, visitasdepaises) {
        imRed = "img/red.gif";
	imOrange = "img/orange.jpg";
        imBlue = "img/blue.jpg";
        imGreen = "img/green.jpg";
	imAM = "img/azulmarino.jpg";
	imCE = "img/celeste.jpg";
	imVF = "img/verdefluo.jpg";

        strImage = "";    // used for alternating colors
        strToWrite = "";  // We'll dynamically build a table to hold
        // our chart, then write it to the screen when ready
        // now find the maximum value to chart
        for(i = 0; i < visitasdepaises.length; i++) {
        	for(j = 0; j < visitasdepaises[i].length; j++) {
		if(parseInt(visitasdepaises[i][j]) > parseInt(maxWidth))
			maxWidth = parseInt(visitasdepaises[i][j]);
		}
	}
        // start building the output string
	// Graph the header
        strToWrite += "<table bgcolor='#cccccc' cellspacing=0 style='margin: 0px;'>\n";
	strToWrite += "<tr><td colspan=2>";
	for(i = 0; i < descs.length; i++) {
               	if(i == 1) strImage = imGreen;
               	if(i == 2) strImage = imBlue;
               	if(i == 0) strImage = imVF;
		name2 = i.toString() + "check";
		name1 = i.toString() + "div";
		strToWrite += "<input type='checkbox' checked id='" + name2 + "'";
		strToWrite += " onClick='modifyVisibility(\"" + name1 + "\", \"" + name2 + "\");'>\n";
		strToWrite += "<img src='" + strImage + "' width=20 height=10>&nbsp;" + descs[i] + "&nbsp;|&nbsp;";
	}
	strToWrite += "</td></tr><tr></table>\n";

	strToWrite += "<div class='msg_list'>\n<table cellspacing=0 style='margin: 0px;'>\n<tr>";
	for(i = 0; i < headers.length; i++) {
		head_width = 0;
		if (headers[i] == "Countries") {
			head_width = 180;
		}
		if (headers[i] == "Date") {
			head_width = 100;
		}
		if (headers[i] == "Week") {
			head_width = 160;
		}
		if (headers[i] == "Month") {
			head_width = 100;
		}
		if (headers[i] == "Browsers") {
			head_width = 160;
		}
        	strToWrite += "<td width='" + head_width + "'>" + headers[i] + "</td>";
	}
	strToWrite += "</tr>\n";
	for(i = 0; i < solopaises.length; i++) {
		strToWrite += "<tr class='msg_head'><td align=right>" + solopaises[i] + "</td>";
		strToWrite += "<td width='" + (parseInt(chartWidth) + 100) + "'>";
		for(j = 0; j < arScores.length; j++) {
               		if(j == 1) strImage = imGreen;
                	if(j == 2) strImage = imBlue;
			if(j == 0) strImage = imVF;
			name1 = j.toString() + "div";
			strToWrite += "<div style=\"vertical-align: middle; ";
			strToWrite += "font-size: 10px;\" id='" + name1 + "'>";
			strToWrite += "<img id='" + name1 + "' src='" + strImage + "'";
			strToWrite += " width=" + parseInt((arScores[j][i] / maxWidth) * chartWidth);
			strToWrite += " height=10 style='margin: 0px 0px 0px 0px; border: 1px solid;'>";
			strToWrite += arScores[j][i] + "</div>\n";
		}
		strToWrite += "</td></tr>\n";
		strToWrite += "<tr><td colspan=2><div class='msg_body'>orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div></td></tr>";
        }
        strToWrite += "</table>\n</div>\n";
        return strToWrite;
}

/* Graph with one label and multiple bars */
function buildBarsGraph(arLabels, arScores, chartWidth, maxWidth, headers, descs) {
        imRed = "img/red.gif";
	imOR = "img/orange.jpg";
        imBlue = "img/blue.jpg";
        imGreen = "img/green.jpg";
	imAM = "img/azulmarino.jpg";
	imCE = "img/celeste.jpg";
	imVF = "img/verdefluo.jpg";

        strImage = "";    // used for alternating colors
        strToWrite = "";  // We'll dynamically build a table to hold
        // our chart, then write it to the screen when ready
        // now find the maximum value to chart
        for(i = 0; i < arScores.length; i++) {
        	for(j = 0; j < arScores[i].length; j++) {
		if(parseInt(arScores[i][j]) > parseInt(maxWidth)) maxWidth = parseInt(arScores[i][j]);
		}
	}
        // start building the output string
        //strToWrite += "<table bgcolor='#cccccc' width=" + (chartWidth + 140) + ">";
        strToWrite += "<table bgcolor='#cccccc' cellspacing=0 style='margin: 0px;'>\n";
	strToWrite += "<tr><td colspan=2>";
	for(i = 0; i < descs.length; i++) {
               	if(i == 1) strImage = imGreen;
               	if(i == 2) strImage = imBlue;
		if(i == 3) strImage = imOR;
               	if(i == 0) strImage = imVF;
		name2 = i.toString() + "check";
		name1 = i.toString() + "div";
		strToWrite += "<input type='checkbox' checked id='" + name2 + "'";
		strToWrite += " onClick='modifyVisibility(\"" + name1 + "\", \"" + name2 + "\");'>\n";
		strToWrite += "<img src='" + strImage + "' width=20 height=10>&nbsp;" + descs[i] + "&nbsp;|&nbsp;";
	}
	strToWrite += "</td></tr><tr></table>\n";

	strToWrite += "<table bgcolor='#cccccc' cellspacing=0 style='margin: 0px;'>\n<tr>";
	for(i = 0; i < headers.length; i++) {
		head_width = 0;
		if (headers[i] == "Countries") {
			head_width = 180;
		}
		if (headers[i] == "Date") {
			head_width = 100;
		}
		if (headers[i] == "Week") {
			head_width = 160;
		}
		if (headers[i] == "Month") {
			head_width = 100;
		}
		if (headers[i] == "Browsers") {
			head_width = 160;
		}
        	strToWrite += "<td width='" + head_width + "'>" + headers[i] + "</td>";
	}
	strToWrite += "</tr>\n";
	for(i = 0; i < arLabels.length; i++) {
		strToWrite += "<tr><td align=right>" + arLabels[i] + "</td>";
		strToWrite += "<td width='" + (parseInt(chartWidth) + 100) + "'>";
		for(j = 0; j < arScores.length; j++) {
			if(j == 0) strImage = imVF;
               		if(j == 1) strImage = imGreen;
                	if(j == 2) strImage = imBlue;
                	if(j == 3) strImage = imOR;
			name1 = j.toString() + "div";
			strToWrite += "<div style=\"vertical-align: middle; font-size: 10px;\" id='" + name1 + "'>";
			strToWrite += "<img id='" + name1 + "' src='" + strImage + "'";
			strToWrite += " width=" + parseInt((arScores[j][i] / maxWidth) * chartWidth);
			strToWrite += " height=10 style='margin: 0px 0px 0px 0px; border: 1px solid;'>";
			strToWrite += arScores[j][i] + "</div>\n";
		}
		strToWrite += "</td></tr>";
        }
        strToWrite += "</table>";
        return strToWrite;
}

function modifyVisibility(divname, checkname) {
	var divobjs = document.getElementsByTagName("div");
	var imgobjs = document.getElementsByTagName("img");
	var checkobj = document.getElementById(checkname);
	if (checkobj.checked) {
		for (var i=0; i<divobjs.length;i++) {
			if (divobjs[i].id == divname) divobjs[i].style.visibility = 'visible';
			if (divobjs[i].id == divname) divobjs[i].style.height = '14px';
			if (divobjs[i].id == divname) divobjs[i].style.fontSize = '11px';
		}
		for (var i=0; i<imgobjs.length;i++) {
			if (imgobjs[i].id == divname) imgobjs[i].style.visibility = 'visible';
			if (imgobjs[i].id == divname) imgobjs[i].style.height = '10px';
		}
	} else {
		for (var i=0; i<divobjs.length;i++) {
			if (divobjs[i].id == divname) {
				divobjs[i].style.fontSize = '0px';
			}
			if (divobjs[i].id == divname) divobjs[i].style.height = '0px';
			if (divobjs[i].id == divname) divobjs[i].style.visibility = 'hidden';

		}
		for (var i=0; i<imgobjs.length;i++) {
			if (imgobjs[i].id == divname) imgobjs[i].style.height = '0px';
			if (imgobjs[i].id == divname) imgobjs[i].style.visibility = 'hidden';
		}
	}
}

/* Graph with one label and one bar */
function buildRefererTable(arStudents, arScores, chartWidth, maxWidth, headers) {
	var total = 0;
	var percent = 0;
        strImage = "";    // used for alternating colors
        strToWrite = "";  // We'll dynamically build a table to hold
        // our chart, then write it to the screen when ready
        // now find the maximum value to chart
        for(i = 0; i < arScores.length; i++) {
		total += parseInt(arScores[i]);	
        }
        // start building the output string
        strToWrite += "<table bgcolor='#cccccc' cellspacing=0>";
	strToWrite += "<tr>\n";
	for(i = 0; i < headers.length; i++) {
		head_width=0;
		var re = /^Referer.*/;
                if (!headers[i].match(re) == 0) {
                        head_width = 600;
                }
		re = /^%.*/;
		if (!headers[i].match(re) == 0) {
			head_width = 80;
		}
		re = /^Visits.*/;
		if (!headers[i].match(re) == 0) {
			head_width = 70;
		}
        	strToWrite += "<td width='" + head_width + "'>" + headers[i] + "</td>";
	}
	strToWrite += "</tr>\n";
        for(i = 0; i < arScores.length; i++) {
		percent = ((parseInt(arScores[i]) * 100) / total)
                strToWrite += "<tr><td align=left>" + arStudents[i] + "</td>";
                strToWrite += "<td>" + arScores[i] + "</td>\n";
		strToWrite += "<td align=right>&nbsp;" + percent.toFixed(2) + " % </td></tr>";
        }
        strToWrite += "</table>";
        return strToWrite;
}

function PageSwitcher(actionit, Portfolios, pageNr, pageSize, fecha1, fecha2, menuoption) {
	var url = "http://www.magnacounter.com/PrepareReport.php?actionit=" + actionit + "&" + Portfolios + "&page=" + pageNr + "&pagesize=" + pageSize + "&fecha1=" + fecha1 + "&fecha2=" + fecha2 + "&menu=" + menuoption;
	window.location=url;
}