//---------------------nadeesha-----------------------

//var data = [{name : "192.168.1.1", value :10000},{name : "192.168.1.2", value : 15000}];



//for (i = 0; i < 6; i++) {



//var address = 8080 + (Math.random()*10)%5;

//var count2 = 5000 + Math.random() * 25000;

//data.push({name : address, value : count2});

//drowChart();

//drowpie();



   // i++;



	//if (count2 > 25000) {





	//drowAlertChart('www.google.com','admin account','30000 data','5 accounts');



//}





//}



//window.setInterval("refreshDiv()", 1000);

//            function refreshDiv(){

                //counter = counter + 1;

                //document.getElementById("chart").innerHTML;

				//window.location.reload();

//			}

//----------------------------nadeesha end--------------------------------





 var data = [];



function drowChart(){



   // var data = [{name : a, value :10},{name : b, value : 5}];

  // var data = [{name : "192.168.1.1", value :0},{name : "192.168.1.2", value : 0}];





    var index=0;



    while(true)

    {

        console.log("debug");

        if(sessionStorage.key(index)!=null)

        {

            console.log(sessionStorage.key(index)+ sessionStorage.getItem(sessionStorage.key(index)).split(',').length+"session data");

            data.push({name : sessionStorage.key(index), value : sessionStorage.getItem(sessionStorage.key(index)).split(',').length});



            index++;



        }

        else

        {

            break;

        }



    }









    var margin = {top: 20, right: 30, bottom: 30, left: 40},

        width = 960 - margin.left - margin.right,

        height = 500 - margin.top - margin.bottom;



    var x = d3.scale.ordinal()

        .rangeRoundBands([0, width], .1);



    var y = d3.scale.linear()

        .range([height, 0]);



    var xAxis = d3.svg.axis()

        .scale(x)

        .orient("bottom");



    var yAxis = d3.svg.axis()

        .scale(y)

        .orient("left");





    //when new data comes remove existing svg bar chart

    var chart = d3.select("svg").remove();



    //var chart = d3.select(".chart")

    var chart = d3.select("#chart").append('svg')

        .attr("width", width + margin.left + margin.right)

        .attr("height", height + margin.top + margin.bottom)

        .append("g")

        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");





    x.domain(data.map(function(d) { return d.name; }));

    y.domain([0, d3.max(data, function(d) { return d.value; })]);



    chart.append("g")

        .attr("class", "x axis")

        .attr("transform", "translate(0," + height + ")")

        .call(xAxis);



    chart.append("g")

        .attr("class", "y axis")

        .call(yAxis);



    chart.selectAll(".bar")

        .data(data)

        .enter().append("rect")

        .attr("class", "bar")

        .attr("x", function(d) { return x(d.name); })

        .attr("y", function(d) { return y(d.value); })

        .attr("height", function(d) { return height - y(d.value); })

        .attr("width", x.rangeBand())

        .on('mouseover', function(d){



            d3.selectAll('p').remove();



            d3.select(this)

                .style('opacity',.5);



			document.getElementById('info').style.backgroundColor = "lightblue";

			document.getElementById('info').style.border="3px solid gray";

			document.getElementById('info').style.borderRadius="5px";

			document.getElementById('info').style.paddingLeft="20px";

			document.getElementById('info').style.paddingBottom="5px";

			document.getElementById('info').style.paddingTop="5px";

			document.getElementById('info').style.zIndex="10";

			document.getElementById('info').style.position="absolute";

			document.getElementById('info').style.marginTop="20%";

			document.getElementById('info').style.marginLeft="50px";



            var split=sessionStorage.getItem(d.name).split(',');



         for(var x=0;x<sessionStorage.getItem(d.name).split(',').length;x++)

            {

               d3.select("#info")

                    .append('p')

                    .text(split[x]);



            }

			 //nadeesha



			d3.select("#info")

                    .append('p')

                    .text("number of counts : "+count2);



			d3.select(this)

					.style("background-color","lightblue")

					.append("div")

					.style("position", "absolute")

					.style("z-index", "10")

					.style("visibility", "hidden")

					.text("a simple tooltip");





			 //

        })





        .on('mouseout', function(d){



            d3.select(this)

                .style('opacity',1);



//d3.selectAll('p').remove();



		   //d3.select("#alert")





        });



		//.on('click', function(d,i){





			//d3.select(this)

              //  .style('opacity',1);

        //});







};





var alert=0;



function drowAlertChart(webSiteUrl,accessdata,accesscount,avgaccessdata,avgaccesscount){



//nadeesha

document.getElementById('chart').style.opacity="0.3";

document.getElementById('info').style.opacity="0";



alert++;







//



    var margin = {top: 20, right: 40, bottom: 30, left: 70},

        width = 1500 - margin.left - margin.right,

        height = 500 - margin.top - margin.bottom;



    var x = d3.scale.ordinal()

        .rangeRoundBands([0, width], .1);



    var y = d3.scale.linear()

        .range([height, 0]);



    var xAxis = d3.svg.axis()

        .scale(x)

        .orient("bottom");



    var yAxis = d3.svg.axis()

        .scale(y)

        .orient("center");





    //when new data comes remove existing svg bar chart

    var chart = d3.select('svgalert').remove();



    //var chart = d3.select(".chart")



	//nadeesha

	//var s = document.createElement('style');

	//s.type = "text/css";

	//s.styleSheet.cssText = "body { background: red}";

	//document.getElementsById('alert').appendChild(s);

	//



    createAlert(webSiteUrl, accessdata, accesscount,avgaccessdata, avgaccesscount)





function createAlert(webSiteUrl, accessdata, accesscount,avgaccessdata, avgaccesscount){



var chart = d3.select("#alert").append('svgalert');



	//$('#alert').css("background-color", "#F31912");

	document.getElementById('alert').style.backgroundColor = "#F31912";

	document.getElementById('alert').style.border="8px solid gray";

	document.getElementById('alert').style.borderRadius="5px";

	document.getElementById('alert').style.marginTop="70px";

	document.getElementById('alert').style.paddingLeft="80px";

	document.getElementById('alert').style.paddingBottom="40px";

	document.getElementById('alert').style.paddingTop="20px";

	document.getElementById('alert').style.zIndex="10";

	document.getElementById('alert').style.position="absolute";

	document.getElementById('alert').style.marginLeft="250px";

	document.getElementById('alert').style.color="#F6DCDC";

	//document.getElementById('alert').style.

	//chart.innerHTML = "strong { color: blue }";



    //d3.select("#alert")

    chart.append('h2')

    .text("Alert").style.color="blue";

	chart.append('h2').text("");

    chart.append('h4')

    .text("Web Url :" +webSiteUrl);

   //d3.select("#alert")

    chart.append('h4')

    .text("Access Data :   " +accessdata);

   //d3.select("#alert")

    chart.append('h4')

    .text("Access Count :   " +accesscount);

   //d3.select("#alert")

    chart.append('h4')

    .text("Maximum Access Data :   " +avgaccessdata);

   //d3.select("#alert")

    chart.append('h4')

    .text("Maximum Access Count :   " +avgaccesscount);



    chart.append("div").attr("id","btnContainer");







    //var element = document.getElementByID("alert");

    //element.setAttribute("type", "button");

    //element.setAttribute("value", "invert");

    //element.setAttribute("name", "button3");

    //element.setAttribute("onclick", "foo()");

    //chart.appendChild(element);



//if(alert==1)

//{



	var btn1 = document.createElement("BUTTON");

	var btn2 = document.createElement("BUTTON");

	var btn3 = document.createElement("BUTTON");





//var btn1 = document.createElement("BUTTON");        // Create a <button> element

	//btn1.style.marginTop="5px";

	btn1.style.padding="7px";

	btn1.style.marginLeft="0px";

	btn1.style.borderRadius="3px";

	btn1.style.backgroundColor="gray";

	btn1.style.borderColor="black";

	btn1.style.color="black";

	btn1.style.width="100px";

	var t = document.createTextNode("More Details");       // Create a text node

	btn1.appendChild(t);                                // Append the text to <button>

	document.getElementById("btnContainer").appendChild(btn1);



	//chart.append(btn1);



	//var btn2 = document.createElement("BUTTON");        // Create a <button> element

	//btn2.style.marginTop="5px";

	btn2.style.padding="7px";

	btn2.style.marginLeft="30px";

	btn2.style.borderRadius="3px";

	btn2.style.backgroundColor="gray";

	btn2.style.borderColor="black";

	btn2.style.color="black";

	btn2.style.width="100px";

	var t = document.createTextNode("Take Action");       // Create a text node

	btn2.appendChild(t);                                // Append the text to <button>

	document.getElementById("btnContainer").appendChild(btn2);



	//var btn3 = document.createElement("BUTTON");        // Create a <button> element

	//btn3.style.marginTop="5px";

	btn3.style.padding="7px";

	btn3.style.marginLeft="30px";

	btn3.style.borderRadius="3px";

	btn3.style.backgroundColor="gray";

	btn3.style.borderColor="black";

	btn3.style.color="black";

	btn3.style.width="100px";

	var t = document.createTextNode("Cancel");       // Create a text node

	btn3.appendChild(t);                                // Append the text to <button>

	document.getElementById("btnContainer").appendChild(btn3);



	function svgClose(){

	   var chart = d3.select('svgalert').remove();

	}





}





//}



};















function type(d) {

    d.value = +d.value; // coerce to number

    return d;

}









drowChart();







function drowpie(){



		//Width and height

			var w = 300;

			var h = 300;



			var dataset = [ 5, 10, 20, 45, 6, 25 ];



			var outerRadius = w / 2;

			var innerRadius = 0;

			var arc = d3.svg.arc()

							.innerRadius(innerRadius)

							.outerRadius(outerRadius);



			var pie = d3.layout.pie();



			//Easy colors accessible via a 10-step ordinal scale

			var color = d3.scale.category10();



			//Create SVG element //var chart = d3.select("#chart").append('svg')

			var svg = d3.select("#pie2")

						.append("svg")

						.attr("width", w)

						.attr("height", h);



			//Set up groups

			var arcs = svg.selectAll("g.arc")

						  .data(pie(dataset))

						  .enter()

						  .append("g")

						  .attr("class", "arc")

						  .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");



			//Draw arc paths

			arcs.append("path")

			    .attr("fill", function(d, i) {

			    	return color(i);

			    })

			    .attr("d", arc);



			//Labels

			arcs.append("text")

			    .attr("transform", function(d) {

			    	return "translate(" + arc.centroid(d) + ")";

			    })

			    .attr("text-anchor", "middle")

			    .text(function(d) {

			    	return d.value;

			    });





}





drowpie();



//pie chart



































































/*

var margin = {top: 20, right: 30, bottom: 30, left: 40},

    width = 960 - margin.left - margin.right,

    height = 500 - margin.top - margin.bottom;



var x = d3.scale.ordinal()

    .rangeRoundBands([0, width], .1);



var y = d3.scale.linear()

    .range([height, 0]);



var xAxis = d3.svg.axis()

    .scale(x)

    .orient("bottom");



var yAxis = d3.svg.axis()

    .scale(y)

    .orient("left");



var chart = d3.select(".chart")

    .attr("width", width + margin.left + margin.right)

    .attr("height", height + margin.top + margin.bottom)

  .append("g")

    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");





  x.domain(data.map(function(d) { return d.name; }));

  y.domain([0, d3.max(data, function(d) { return d.value; })]);



  chart.append("g")

      .attr("class", "x axis")

      .attr("transform", "translate(0," + height + ")")

      .call(xAxis);



  chart.append("g")

      .attr("class", "y axis")

      .call(yAxis);



  chart.selectAll(".bar")

      .data(data)

    .enter().append("rect")

      .attr("class", "bar")

      .attr("x", function(d) { return x(d.name); })

      .attr("y", function(d) { return y(d.value); })

      .attr("height", function(d) { return height - y(d.value); })

      .attr("width", x.rangeBand());

*/