var descs = [];
var datedata = [];
function zabaview(){	
	
	var tables = document.getElementsByTagName('table');
	var rows = tables[tables.length - 2].getElementsByTagName('tr');
	tables[tables.length - 2].style.display = 'none';
	
	var saldo = [];
	var zeroes = [];
	var ins = [];
	var outs = [];
	var avg = [];
	
	document.body.setAttribute('bgcolor', '#ffffff');
	var spacer = document.createElement('div');
	spacer.setAttribute('style', 'width:10px;height:400px;background-color: #ffffff; float:left;');
	var ph = document.createElement('div');
	ph.setAttribute('id', 'placeholder');
	
	ph.setAttribute('style', 'width:800px;height:400px;background-color: #ffffff; float:left;');
	
	var ch = document.createElement('p');
	ch.setAttribute('id', 'choices');
	ch.setAttribute('style', 'padding-left:10px;float:left');
	
	for (var i = 2; i < rows.length; i++) {
		
		var cols = rows[i].getElementsByTagName('td');
		descs[i-2] = (cols[1].innerHTML);
		datedata[i-2] = (cols[0].innerHTML);
		topop = cols[4].innerHTML;
		topop = parseNumber(topop);
		saldo.push([i-2, topop]);
		
		newin = parseNumber(cols[2].innerHTML);
		if(!isNaN(newin)) ins.push([i-2, newin]);
		
		newout = parseNumber(cols[3].innerHTML);
		if(!isNaN(newout)) outs.push([i-2, -newout]);
		
		zeroes.push([i-2, 0]);
	}
	
	var avgitems = Math.floor(saldo.length / 8);
	var leftitems = avgitems / 2;
	var rightitems = avgitems - leftitems;
	for(var i=leftitems; i < saldo.length - rightitems; i++){
		var sum = +0;
		for(var j = i-leftitems; j < i - leftitems + avgitems && j < saldo.length; j++) {
			sum = sum + saldo[j][1];
		}
		avg.push([Math.floor(i), sum / avgitems]);
	}
	
	var datasets = {
		"saldo": {
			label: "Saldo",
			data: saldo,
			lines: { show: true, fill: true }
		},
		"uplate": {
			label: "Uplate",
			bars: {show: true},
			data: ins
		},
		"isplate": {
			label: "Isplate",
			bars: {show: true},
			data: outs
		},
		"prosjek": {
			label: "Prosjek",
			data: avg
		},
	};
	
	var i = 0;
    $.each(datasets, function(key, val) {
        val.color = i;
        ++i;
    });
	
		
	
	
	document.body.innerHTML='';
	document.body.appendChild(spacer);
	document.body.appendChild(ph);
	document.body.appendChild(ch);
	
	
	
	var options = {    
		selection: { mode: "x" },
		grid: { hoverable: true, clickable: true }
	};
	
	var choiceContainer = $("#choices");
	choiceContainer.append('<input type="button" id="zoomout" name="zoomout" value="Zoom out" onClick="zoomout()"></input>');
    $.each(datasets, function(key, val) {
        choiceContainer.append('<br/><input type="checkbox" name="' + key +
                               '" checked="checked" >' + val.label + '</input>');
    });
    choiceContainer.find("input").click(plotAccordingToChoices);
	
	choiceContainer.append('<br/><br/> Izradio: <a href="http://www.calyx.hr">Calyx d.o.o.</a>');
	
	$("#placeholder").bind("plothover", function (event, pos, item) {
        
		if (item) {
			if (previousPoint != item.datapoint) {
				previousPoint = item.datapoint;
				
				$("#tooltip").remove();
				var x = item.datapoint[0];				
				var y = item.datapoint[1].toFixed(2);	
				if(item.series.label != "Saldo" && item.series.label != "Prosjek"){
					showTooltip(item.pageX, item.pageY,	"" + datedata[x] + " " + descs[x] + " (" + y + ")");
				} else {
					showTooltip(item.pageX, item.pageY,	"" + datedata[x] + " (" + y + ")");
				}
			}
		}
		else {
			$("#tooltip").remove();
			previousPoint = null;            
		}
        
    });
	
	
	
	$("#placeholder").bind("plotselected", function (event, ranges) {        
        options = $.extend(true, {}, options, {
            xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
        });
		plotAccordingToChoices();
		
    });

	$("#zoomout").bind("click", function (event){
		options = $.extend(true, {}, options, {
            xaxis: { min: +0, max: saldo.length}
        });
		plotAccordingToChoices();
		
	});

	function plotAccordingToChoices() {
        var data = [];

        choiceContainer.find("input:checked").each(function () {
            var key = $(this).attr("name");
            if (key && datasets[key])
                data.push(datasets[key]);
        });

        if (data.length > 0)
            $.plot($("#placeholder"), data, options);
    }

	plotAccordingToChoices();
	
}

function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
    }


function parseNumber(num){
	var retval = num;
	retval = +retval.replace('&nbsp;', '').replace('.','').replace(',','.');
	return retval;
}