(function ($) {

    $.widget("custom.combobox", {
        lang: {
            no_matches: "Value did not match any item",
            show_all: "Show All Items"
        },
        _create: function () {
            this.wrapper = $("<span>")
              .addClass("custom-combobox")
              .insertAfter(this.element);
            this.element.hide();
            this._createAutocomplete();
            this._createShowAllButton();
        },

        _createAutocomplete: function () {
            var selected = this.element.children(":selected"),
              value = selected.val() ? selected.text() : "";
            this.input = $("<input>")
              .appendTo(this.wrapper)
              .val(value)
              .attr("title", "")
              .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
              .autocomplete({
                  delay: 0,
                  minLength: 0,
                  source: $.proxy(this, "_source")
              })
              .tooltip({
                  tooltipClass: "ui-state-highlight"
              });

            this._on(this.input, {
                autocompleteselect: function (event, ui) {
                    ui.item.option.selected = true;
                    this._trigger("select", event, {
                        item: ui.item.option
                    });
                },
                autocompletechange: "_removeIfInvalid"
            });
        },
        _createShowAllButton: function () {
            var input = this.input,
              wasOpen = false;
            $("<a>")
              .attr("tabIndex", -1)
              .attr("title", this.lang.show_all)
              .tooltip()
              .appendTo(this.wrapper)
              .button({
                  icons: {
                      primary: "ui-icon-triangle-1-s"
                  },
                  text: false
              })
              .removeClass("ui-corner-all")
              .addClass("custom-combobox-toggle ui-corner-right")
              .mousedown(function () {
                  wasOpen = input.autocomplete("widget").is(":visible");
              })
              .click(function () {
                  input.focus();
                  // Close if already visible
                  if (wasOpen) {
                      return;
                  }
                  // Pass empty string as value to search for, displaying all results
                  input.autocomplete("search", "");
              });
        },
        _source: function (request, response) {
            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
            response(this.element.children("option").map(function () {
                var text = $(this).text();
                if (this.value && (!request.term || matcher.test(text)))
                    return {
                        label: text,
                        value: text,
                        option: this
                    };
            }));
        },
        _removeIfInvalid: function (event, ui) {
            // Selected an item, nothing to do
            if (ui.item) {
                return;
            }
            // Search for a match (case-insensitive)
            var value = this.input.val(),
              valueLowerCase = value.toLowerCase(),
              valid = false;
            this.element.children("option").each(function () {
                if ($(this).text().toLowerCase() === valueLowerCase) {
                    this.selected = valid = true;
                    return false;
                }
            });
            // Found a match, nothing to do
            if (valid) {
                return;
            }
            // Remove invalid value
            this.input
              .val("")
              .attr("title", this.lang.no_matches)
              .tooltip("open");
            this.element.val("");
            this._delay(function () {
                this.input.tooltip("close").attr("title", "");
            }, 2500);
            //this.input.autocomplete("instance").term = "";
            this.input.data().uiAutocomplete.term = null;
        },
        _destroy: function () {
            this.wrapper.remove();
            this.element.show();
        }
    });
})(jQuery);

var cbr = cbr || {};
cbr.modules = cbr.modules || {};
cbr.modules.region = 
{
        TimeGraph_Draw : function(graphAreaElement, model) {

            var margin = { top: 20, right: 20, bottom: 30, left: 50 },
                width = 960 - margin.left - margin.right,
                height = 500 - margin.top - margin.bottom;

            var x = d3.time.scale()
                .range([0, width]);

            var y = d3.scale.linear()
                .range([height, 0]);

            model.dPeriodFrom = new Date(Date.parse(model.PeriodFrom));
            model.dPeriodTo = new Date(Date.parse(model.PeriodTo));

            var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom")
                .ticks((model.dPeriodTo.getFullYear() - model.dPeriodFrom.getFullYear()) > 1 ? d3.time.year : d3.time.month)
                .tickFormat(d3.time.format("%m.%Y"));

            var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left");

            var svg = d3.select(graphAreaElement).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 + ")");
            
            
            var allDataPoints = [];
            var unitsText;
            model.Lines.forEach(function (l) {

                var data = l.Points;
                data.forEach(function (p) {
                    p.Date = Date.parse(p.Date);
                    p.Value = Number(p.Value);
                });
                allDataPoints = allDataPoints.concat(data);
                unitsText = unitsText || l.Units;
            });

            x.domain([model.dPeriodFrom, model.dPeriodTo])
                .nice(d3.time.month);
            y.domain(d3.extent(allDataPoints, function (d) { return d.Value; }));

            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);

            svg.append("g")
                .attr("class", "y axis")
                .call(yAxis)
              .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text(unitsText);

            var line = d3.svg.line()
                .x(function (d) { return x(d.Date); })
                .y(function (d) { return y(d.Value); });

            model.Lines.forEach(function (lineData) {
                svg.append("path")
                    .datum(lineData.Points)
                    .attr("class", "line " + lineData.CssClass)
                    .attr("d", line);
            });
        }
};