<!DOCTYPE html>
<html lang="en">
	<head>
		<title>TITLE</title>
		<script src="../d3.v3.min.js"></script>
<style>

.male {
    fill: #00ffff;
    stroke-width: 0;
 }
.female {
    fill: #6600ff;
    stroke-width: 0;
}


body{
font: 100% "Arial", sans-serif;
margin: 20px;
color:#3c0050;
}

#imgLinks
{
position:absolute;
left:10px;
top:25px;
}

#mapTitle
{
position:absolute;
left:260px;
top:-5px;
height:25px;
width:700px;
}

#sourceData
{
position:absolute;
left:260px;
top:45px;
height:20px;
width:700px;
}

#dropHolder
{
position:absolute;
left:260px;
top:90px;
}

#dtext1
{
position:absolute;
left:0px;
top:0px;
width:300px;
}

#dtext2
{
position:absolute;
left:200px;
top:0px;
width:300px;
}

#drop1
{
position:absolute;
left:0px;
top:30px;
}

#drop2
{
position:absolute;
left:200px;
top:30px;
}


#svgHolder
{
position:absolute;
left:80px;
top:170px;
}


</style>
</head>

<body>


<div id="imgLinks"><a href="http://www.nrscotland.gov.uk/" target="_blank"><img src="../NRS_smalllogo.png" border = "0" alt="NRS Home Page"/></a></div>
<h3 id="mapTitle">TITLE</h3>
<div id="sourceData">SOURCE
</div>
<div id="dropHolder">
<div id="dtext1"></div>
<div id="dtext2"></div>
<div id="drop1"></div>
<div id="drop2"></div>
</div>

<div id="svgHolder">
</div>


<script type="text/javascript">
//Things you might want to change are all here!
var numCells=100;
var w=400;
var h=500;
var type1color="#9ebcda";
var type1icon="Aiga_men.png";
var type2color="#8856a7";
var type2icon="Aiga_women.png";



var categories = [];
d3.json("frequency2.json", function(json) {
	initData = json;
  	rowcats = initData.rowCategories;
	rindices=d3.range(rowcats.length);
	colcats = initData.columnCategories;
	cindices=d3.range(colcats.length);
	dataSet= initData.dataSet;
	rowKey=0;
	colKey=0;
	
	// Build the dropdown menus
	d3.select("#dtext1").text(initData.rowType);
	d3.select("#drop1")
   		.append("select")
		.attr("id","rowSelect")
    		.selectAll("option")
   	 	.data(rindices)
   	 	.enter()
   	 	.append("option")
   	 	.text(function(d) {return rowcats[d];});
		

	d3.select('#rowSelect')
    		.on("change", function() {
			rowKey = this.selectedIndex;
			update();
		});

	d3.select("#dtext2").text(initData.columnType);
	d3.select("#drop2")
   		.append("select")
		.attr("id","colSelect")
    		.selectAll("option")
   	 	.data(cindices)
   	 	.enter()
   	 	.append("option")
   	 	.text(function(d) {return colcats[d];});
		

	d3.select('#colSelect')
    		.on("change", function() {
			colKey = this.selectedIndex;
			update();
		});

	function update(){
		svg.selectAll('rect')
			.transition().duration(300).ease("quad")
        		.attr("fill",function(d) { 
         			if(d<=dataSet[rowKey][colKey])
           				{return type1color;}
         			else 
           				{return  type2color;}
        			})

    		svg.selectAll('image')
        		.transition().duration(300).ease("quad")
        		.attr("xlink:href",function(d) { 
         			if(d<=dataSet[rowKey][colKey])
           				{return type1icon;}
         			else 
           				{return type2icon;}
        			})

		}

	//Initial grid setup
	var cw=w/10;
        var ch=h/10;
        var cutoff=dataSet[rowKey][colKey]; // the number of type 1 records to show initially
	console.log(dataSet[rowKey][colKey]);
	var svg = d3.select("#svgHolder")
		.append("svg")
		.attr("width", w)
		.attr("id","svgMain")
		.attr("height", h);


	var hundredset=d3.range(1,101);
        var cells = svg.selectAll("rect")
                 .data(hundredset)
                 .enter()
                 .append("rect");
        
	cells.attr("width",cw)
       		.attr("height", ch)
       		.attr("x", function(d) {return cw*((d-1)%10);})
       		.attr("y",function(d) {return ch*Math.floor((d-1)/10);})
       		.attr("fill",function(d) { 
         		if(d<=cutoff)
           			{return type1color;}
         		else 
           			{return type2color;}
        		});

        var imgs= svg.selectAll("image")
               	.data(hundredset)
               	.enter()
               	.append("image");

        imgs.attr("width",cw-4)
       		.attr("height", ch-4)
       		.attr("x", function(d) {return 2+cw*((d-1)%10);})
       		.attr("y",function(d) {return 2+ch*Math.floor((d-1)/10);})
      		.attr("xlink:href",function(d) { 
        		if(d<=cutoff)
           			{return type1icon;}
         		else 
           			{return type2icon;}
        		});

});


</script>
</body>
</html>