function dd(v) {
    console.log(v);
}



var dev = false;

if (currentLocation.hostname === "testcms.hioa.no") {
    dev = true;

    /*$(".sub_title_fakta h1").click(function(e){
       e.preventDefault;
       if(confirm("Hard refresh sida?")){
           
           $.ajax({
            url: window.location.href,
            headers: {
                "Pragma": "no-cache",
                "Expires": -1,
                "Cache-Control": "no-cache"
            }
        }).done(function () {
            window.location.reload(true);
            //window.location = window.location;
        });
        
        //console.log(window.location.href);
           
           return;
       }else{
           
       }
    });*/
}

//console.log("development : " + dev);

var currentLocation = window.location;
var urlPathnameRouter = "ungdata"; //test CMS URL for files
var urlPrefix = "/ungdata";
if (
    (currentLocation.hostname === "prod.cms.hioa.no") ||
    (currentLocation.hostname === "ungdata.no") ||
    (currentLocation.hostname === "www.ungdata.no")
) {
    //console.log("We are in production! Change urlPathnameRouter("+urlPathnameRouter+") to hioaungdata");
    urlPathnameRouter = "hioaungdata"; //PROD CMS URL for files
}

if (currentLocation.hostname === "ungdata.no") {
    urlPrefix = "";
}

var d3_kommune_viewer = {};

d3_kommune_viewer.init = function() {
    $.ajaxSetup({
        async: false
    });
    $.getJSON('https://dataviz.sites.hioa.no/ws/index.php/api/getDocByID/57ab1519a7490bc14f52dfb6', function(data) {
        d3_kommune_viewer.indicatorsToShow = data.indicators;
    });
    d3_kommune_viewer.aTextures = [];
    d3_kommune_viewer.newestTextures = [];
    d3_kommune_viewer.kommuneID = "";
    d3_kommune_viewer.createSvg();
}

d3_kommune_viewer.initTextures = function(theSvg) {
    d3_kommune_viewer.aTextures = [];

    var t = textures.lines()
        .background("#006fba")
        .stroke("#ffffff")
        .lighter();
    theSvg.call(t);
    d3_kommune_viewer.aTextures[0] = t;

    t = textures.lines()
        .background("#006fba")
        .size(9)
        .stroke("#ffffff")
        .strokeWidth(3);
    theSvg.call(t);
    d3_kommune_viewer.aTextures[1] = t;

    t = textures.lines()
        .background("#006fba")
        .size(5)
        .stroke("#ffffff")
        .strokeWidth(1);
    theSvg.call(t);
    d3_kommune_viewer.aTextures[2] = t;

    t = textures.lines()
        .size(8)
        .strokeWidth(2);

    theSvg.call(t);
    d3_kommune_viewer.aTextures[3] = t;

    t = textures.lines()
        .size(9)
        .strokeWidth(3);

    theSvg.call(t);
    d3_kommune_viewer.aTextures[4] = t;

    t = textures.circles()
        .size(9)
        .strokeWidth(3);

    theSvg.call(t);
    d3_kommune_viewer.aTextures[5] = t;

    theSvg.call(t);
    d3_kommune_viewer.aTextures[6] = t;
    theSvg.call(t);
    d3_kommune_viewer.aTextures[7] = t;


    /* ikke mønster, NOVA*/
    var ddt = textures.lines()
        .size(1)
        .strokeWidth(0) /* actually fill with color :D */
        .background("#006fba");
    theSvg.call(ddt);
    d3_kommune_viewer.newestTextures[0] = ddt;

    /* skrå striper */
    var ddt = textures.lines()
        .background("#e8a300")
        .stroke("#ffffff")
        .strokeWidth(1);
    theSvg.call(ddt);
    d3_kommune_viewer.newestTextures[1] = ddt;

    /* vertikale striper */
    var ddt = textures.lines()
        .orientation("vertical")
        .background("#ada59e")
        .stroke("#ffffff")
        .strokeWidth(1);
    theSvg.call(ddt);
    d3_kommune_viewer.newestTextures[2] = ddt;

    return true;
};

d3_kommune_viewer.createSvg = function() {
    d3_viewer.displayBoxes = d3.selectAll("#displayD3KommuneInfo");
    d3_viewer.displayBoxes.each(function() {
        d3_kommune_viewer.kommuneID = d3.select(this).attr("data-kommune-id");
        var theSvg = d3.select(this).append("svg");
        var ret = d3_kommune_viewer.initTextures(theSvg);

        d3_kommune_viewer.display_histogram_groups_horizontal(theSvg);
    });

}

d3_kommune_viewer.display_histogram_groups_horizontal = function(theSvg) {
    d3.csv("/bundles/" + urlPathnameRouter + "/dataviz/files/ungdata_land_20160622.csv", function(json_national) {
        d3.csv("/bundles/" + urlPathnameRouter + "/dataviz/files/ungdata_fylker_20160622.csv", function(json_fylke) {
            d3.csv("/bundles/" + urlPathnameRouter + "/dataviz/files/ungdata_20160622.csv", function(json_komune) {
                var bFoundKommune = false;

                for (var komune_item in json_komune) {

                    if (json_komune[komune_item].kommuneID === d3_kommune_viewer.kommuneID) {
                        d3_kommune_viewer.theKommune = json_komune[komune_item];
                        break;
                    }
                }


                for (var fylke_item in json_fylke) {


                    if (json_fylke[fylke_item].Fylke === d3_kommune_viewer.theKommune.Fylke) {

                        d3_kommune_viewer.theFylke = json_fylke[fylke_item];
                        break;
                    }
                }
                national = json_national[0];



                theLabels = d3_kommune_viewer.indicatorsToShow;
                var labelKommune = d3_kommune_viewer.theKommune['Navn'];
                if (d3_kommune_viewer.theKommune["Siste år"] != "") {
                    labelKommune =  labelKommune + " (" + d3_kommune_viewer.theKommune["Siste år"] + ")"
                }

                var labelFylke = d3_kommune_viewer.theFylke['Navn'];
                if (d3_kommune_viewer.theFylke["Siste år"] != "") {
                    labelFylke =  labelFylke + " (" + d3_kommune_viewer.theFylke["Siste år"] + ")"
                }
                var labelNational = 'Hele landet';
                if (national["Siste år"] != "") {
                    labelNational =  labelNational + " (" + national["Siste år"] + ")"
                }
                var data = {
                    labels: theLabels,
                    series: [{
                        label: labelKommune,
                        values: []
                    }, {
                        //label: d3_kommune_viewer.theFylke['Navn'] + ' Fylke',
                        label: labelFylke ,
                        values: []
                    }, {
                        label: labelNational,
                        values: [

                        ]
                    }, ]
                };


                var data_mobile = [];

                /**
                 * d3_kommune_viewer.theKommune[theLabels[0]["label"]]
                 , d3_kommune_viewer.theKommune[theLabels[1]["label"]]
                 , d3_kommune_viewer.theKommune[theLabels[2]["label"]]
                 , d3_kommune_viewer.theKommune[theLabels[3]["label"]]
                 , d3_kommune_viewer.theKommune[theLabels[4]["label"]]
                 , d3_kommune_viewer.theKommune[theLabels[5]["label"]]
                 , d3_kommune_viewer.theKommune[theLabels[6]["label"]]
                 , d3_kommune_viewer.theKommune[theLabels[7]["label"]]
                 , d3_kommune_viewer.theKommune[theLabels[8]["label"]]
                 , d3_kommune_viewer.theKommune[theLabels[9]["label"]]
                 , d3_kommune_viewer.theKommune[theLabels[10]["label"]]
                 */

                for (var i = 0; i < d3_kommune_viewer.indicatorsToShow.length; i++) {
                    data.series[0].values.push(d3_kommune_viewer.theKommune[theLabels[i]["label"]]);
                    data.series[1].values.push(d3_kommune_viewer.theFylke[theLabels[i]["label"]]);
                    data.series[2].values.push(national[theLabels[i]["label"]]);



                    var obj = {
                        indic: d3_kommune_viewer.indicatorsToShow[i],
                        data: [d3_kommune_viewer.theKommune[theLabels[i]["label"]], d3_kommune_viewer.theFylke[theLabels[i]["label"]], national[theLabels[i]["label"]]],
                        labels: [d3_kommune_viewer.theKommune['Navn'], d3_kommune_viewer.theFylke['Navn'], 'Hele landet']
                    };

                    data_mobile.push(obj);

                }

                var chartWidth = 670,
                    barHeight = 25,
                    gapBetweenBars = 4,
                    groupHeight = barHeight * data.series.length,
                    gapBetweenGroups = 25,
                    spaceForLabels = 200,
                    spaceForLegend = 150;

                // Zip the series data together (first values, second values, etc.)

                var zippedData = [];
                for (var i = 0; i < data.labels.length; i++) {
                    for (var j = 0; j < data.series.length; j++) {

                            zippedData.push(data.series[j].values[i]);

                    }
                }

                var chartHeight = barHeight * zippedData.length + (gapBetweenGroups + gapBetweenBars) * data.labels.length + 80;

                var x = d3.scale.linear()
                    .domain([0, 100])
                    .range([0, chartWidth]);

                var xAxis = d3.svg.axis()
                    /*.innerTickSize(-chartHeight)*/
                    .outerTickSize(0)
                    .tickPadding(1)
                    .scale(x);

                var y = d3.scale.linear()
                    .range([chartHeight + gapBetweenGroups, 0]);

                var yAxis = d3.svg.axis()
                    .scale(y)
                    .tickFormat('')
                    .tickSize(0)
                    .orient("left");

                // Specify the chart area and dimensions
                var chart = theSvg
                    /*.attr("width", spaceForLabels + chartWidth + spaceForLegend)
                    .attr("height", chartHeight)*/
                    .attr("width", "100%")
                    .attr("height", "100%")
                    .attr('xmlns:dc', 'http://purl.org/dc/elements/1.1/')
                    .attr('xmlns:rdf', 'http://www.w3.org/1999/02/22-rdf-syntax-ns#')
                    .attr('xmlns:svg', 'http://www.w3.org/2000/svg')
                    .attr('xmlns', 'http://www.w3.org/2000/svg')
                    .attr('version', '1,1')
                    .attr('class', 'D3Municipality-graph')
                    .attr('viewBox', "-5 -45 1020 1280")
                    .attr('preserveAspectRatio', 'xMinYMax');


                // Create bars


                var bar = chart.selectAll("g")
                    .data(zippedData)
                    .enter().append("g")
                    .attr("transform", function(d, i) {
                        return "translate(" + spaceForLabels + "," + (i * barHeight + gapBetweenGroups * (0.5 + Math.floor(i / data.series.length))) + gapBetweenBars + ")";
                    });

                //Create AXIS
                var xAxisGroup = theSvg.append("g")
                    .attr("class", "x axis")
                    .attr("id", "theXAxis")
                    .attr("transform", "translate(" + spaceForLabels + "," + (chartHeight - 120) + ")")
                    .call(xAxis);

                theSvg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + spaceForLabels + ", " + -gapBetweenGroups / 1.5 + ")")
                    .call(yAxis);

                    // Create rectangles of the correct width
                    bar.append("rect")
                        .attr("fill", function(d, i) {
                            var t = d3_kommune_viewer.newestTextures[i % data.series.length];
                            return t.url();
                        })
                        .attr("class", "bar")
                        .attr("width", function(d) {

                            if (isNaN(x(d)) || x(d) === ",") {

                                return 0;

                            } else {

                                return x(d);
                            }

                        })
                        .attr("height", barHeight - gapBetweenBars);


                // Add text label in bar

                    bar.append("text")
                        .attr("x", function(d) {

                            if (isNaN(x(d)) || x(d) === ",") {

                                return 1;

                            } else {
                                return x(d) + 1;
                            }

                        })
                        .attr("y", (barHeight / 2) - (gapBetweenBars / 2) + 2)
                        .attr("dy", ".35em")
                        .text(function(d) {
                            //console.log(d)
                            if (isNaN(d) || d === ",") {
                                return "Ingen data tilgjengelig.";
                            } else {
                                return Math.round(d);
                            }


                        });



                // Draw labels
                bar.append("text")
                    .attr("class", "label")
                    .attr("width", spaceForLegend)
                    .attr("text-anchor", "end")
                    .attr("x", function(d) {
                        return -15;
                    })
                    .attr("y", groupHeight / 2)
                    .attr("dy", ".35em")
                    .text(function(d, i) {
                        if (i % data.series.length === 0) {
                            var urlSufix = "?kommune=" + d3_kommune_viewer.theKommune['Navn'];
                            return data.labels[Math.floor(i / data.series.length)]["label"];
                        } else {
                            return "";
                        }
                    })
                    .append("title")
                    .text(function(d, i) {
                        //console.log(d);
                        if (i % data.series.length === 0)
                            return data.labels[Math.floor(i / data.series.length)]["tooltip"];
                        else
                            return ""
                    });
                // Draw legend
                var legendRectSize = 18,
                    legendSpacing = 4;


                /*var theDiv = d3.select(theSvg.node().parentNode).append("div");
                 theDiv.attr("class","legend-holder").;*/

                /* TODO add border! */

                var legend = chart
                    .append("g")
                    /*.attr("border",1)
                    .style("stroke", "black")*/
                    /*.attr("width",300)
                    .attr("height", 100)*/
                    .attr("transform", "translate(-100,0)")
                    .attr("class", "legend-holder")
                    .append("g")
                    .selectAll('.legend')
                    .data(data.series)
                    .enter()
                    .append('g')
                    .attr('transform', function(d, i) {
                        var height = legendRectSize + legendSpacing;
                        var offset = -gapBetweenGroups / 2;
                        var horz = spaceForLabels + chartWidth + 40 - legendRectSize;
                        var vert = i * height - offset;
                        //return 'translate(' + horz + ',' + vert + ')';
                        return 'translate(680,' + (vert) + ')';
                    });

                legend.append('rect')
                    .attr('width', legendRectSize)
                    .attr('height', legendRectSize)
                    .style('fill', function(d, i) {
                        var t = d3_kommune_viewer.newestTextures[i];
                        return t.url();
                    });
                /*.style('stroke', function (d, i) {
                    return "#000000";
                });*/

                legend.append('text')
                    .attr('class', 'legend')
                    .attr('x', legendRectSize + legendSpacing)
                    .attr('y', legendRectSize - legendSpacing)
                    .text(function(d) {

                        //console.log("return d.label: " +  d.label);
                        //console.log("return d.label.length: " +  d.label.length);

                        return d.label;
                    });



                /*

                mobile charts

                -

                splitted by definitions

                */

                $("<div class='D3Municipality-graphs-mobile'></div>").insertAfter(".D3Municipality-graph");

                /*var theSvg2 = d3.select(".D3Municipality-graphs-mobile")
                 .attr("width", "100%")
                 .attr("height", "100%")
                 .attr("class", "D3Municipality-graph-mobile")
                 .attr("style", "display:none")
                 .attr('viewBox',"-5 -30 350 350");  */

                var data_mobile_len = data_mobile.length;

                var mobileHolder = $(".D3Municipality-graphs-mobile");
                mobileHolder.append('<div class="D3Muni-mobile-legend"><h3>Grafforklaring:</h3><svg class="D3Muni-mobile-legend-svg"></svg></div>');
                mobileHolder.hide();


                //common legend
                var commonMobileLegend = d3.select(".D3Muni-mobile-legend-svg")
                    .attr("width", "100%")
                    .attr("height", "100%")
                    .attr("class", "D3Muni-mobile-legend-svg")
                    .attr('viewBox', "0 5 300 80");

                var legend = commonMobileLegend
                    .append("g")
                    /*.attr("border",1)
                    .style("stroke", "black")*/
                    /*.attr("width",300)
                    .attr("height", 100)*/
                    .attr("transform", "translate(0,0)")
                    .attr("class", "legend-holder")
                    .append("g")
                    .selectAll('.legend')
                    .data(data.series)
                    .enter()
                    .append('g')
                    .attr('transform', function(d, i) {
                        var height = legendRectSize + legendSpacing;
                        var offset = -12;
                        var horz = spaceForLabels + chartWidth + 40 - legendRectSize;
                        var vert = i * height - offset;
                        //return 'translate(' + horz + ',' + vert + ')';
                        return 'translate(0,' + (vert) + ')';
                    });

                legend.append('rect')
                    .attr('width', legendRectSize)
                    .attr('height', legendRectSize)
                    .style('fill', function(d, i) {
                        var t = d3_kommune_viewer.newestTextures[i];
                        return t.url();
                    });
                /*.style('stroke', function (d, i) {
                    return "#000000";
                });*/

                legend.append('text')
                    .attr('class', 'legend')
                    .attr('x', legendRectSize + legendSpacing)
                    .attr('y', legendRectSize - legendSpacing)
                    .text(function(d) {

                        //console.log("return d.label: " +  d.label);
                        //console.log("return d.label.length: " +  d.label.length);

                        return d.label;
                    });




                /* Loop and create seperate graphs */
                for (var zz = 0; zz < data_mobile_len; zz++) {
                    mobileHolder.append('<div class="D3Muni-mobile-part" id="D3Muni-holder-' + zz + '"></div>');

                    $('#D3Muni-holder-' + zz).append('<h3>' + data_mobile[zz].indic.label + '</h3>');
                    $('#D3Muni-holder-' + zz).append('<p>' + data_mobile[zz].indic.tooltip + '</p>');

                    $('#D3Muni-holder-' + zz).append('<svg class="D3Muni-mobile-part" id="D3Muni-' + zz + '"></svg>');

                    var chartWidth = 300,
                        barHeight = 30,
                        gapBetweenBars = 10,
                        groupHeight = barHeight * data_mobile[zz].data.length,
                        gapBetweenGroups = 25,
                        spaceForLabels = 0,
                        spaceForLegend = 150;

                    var chartHeight = barHeight * data_mobile[zz].data.length + (gapBetweenGroups + gapBetweenBars) * data_mobile[zz].labels.length + 80;

                    var x = d3.scale.linear()
                        .domain([0, 100])
                        .range([0, chartWidth]);

                    /*var xAxis = d3.svg.axis()
                        
                        .outerTickSize(0)
                        .tickPadding(1)
                        .scale(x);*/

                    var y = d3.scale.linear()
                        .range([chartHeight + gapBetweenGroups, 0]);

                    var yAxis = d3.svg.axis()
                        .scale(y)
                        .tickFormat('')
                        .tickSize(0)
                        .orient("left");


                    var theSvg2 = d3.select("#D3Muni-" + zz)
                        .attr("width", "100%")
                        .attr("height", "100%")
                        .attr("class", "D3Muni-mobile-part-svg")
                        .attr('viewBox', "0 5 300 100");

                    //console.log("data_mobile[zz]: ", data_mobile[zz] );

                    /* create bars */
                    var bar = theSvg2.selectAll("g")
                        .data(data_mobile[zz].data)
                        .enter().append("g")
                        .attr("transform", function(d, i) {
                            return "translate(" + spaceForLabels + "," + (i * barHeight + gapBetweenGroups * (0.5 + Math.floor(i / data_mobile[zz].data.length))) + gapBetweenBars + ")";
                        });

                    // Create rectangles of the correct width

                        bar.append("rect")
                            .attr("fill", function(d, i) {
                                var t = d3_kommune_viewer.newestTextures[i % data_mobile[zz].data.length];
                                return t.url();
                            })
                            .attr("class", "bar")
                            .attr("width", function(d) {

                                /*console.log(d);*/

                                if (isNaN(x(d)) || x(d) === ",") {

                                    return 0;

                                } else {
                                    /*console.log(x(d));
                                    console.log(typeof x(d));*/
                                    return x(d);
                                }

                            })
                            .attr("height", barHeight - gapBetweenBars);

                    // Add text label in bar


                        bar.append("text")
                            .attr("x", function(d) {

                                if (isNaN(x(d)) || x(d) === ",") {

                                    return 1;

                                } else {
                                    return x(d) + 1;
                                }



                            })
                            .attr("y", (barHeight / 2) - (gapBetweenBars / 2) + 2)
                            .attr("dy", ".35em")
                            .text(function(d) {
                                /*console.log(d)*/
                                if (isNaN(d) || d === ",") {
                                    return "Ingen data tilgjengelig.";
                                } else {
                                    return Math.round(d);
                                }


                            });




                }



            });
        });
    });
}

d3_kommune_viewer.init();
//dd(d3_viewer);