var MenuChart = function () {
    this.chartApi = {};
    this.init();
};

/**
 * Require the api and bootstrap the menu.
 *
 * @return {[type]} [description]
 */
MenuChart.prototype.init = function () {
    require(["/idms/idms/widget/main.js"], function (main) {
        require(
            ['jquery', "ChartWidget/Component/Api/ChartApi"], // what to require
            function ($, chartApi) {
                // on success callback
                
                this.jq = $;

                this.tooltip = $('<div class="chart-tooltip">' +
                                    '<table border="0" cellpadding="0" cellspacing="0">' +
                                        '<tr>' +
                                            '<td colspan="2" id="chart-tooltip-date"></td>' +
                                            '<td id="chart-tooltip-time"></td>' +
                                        '</tr>' +
                                        '<tr>' +
                                            '<th>Kurs</th>' +
                                            '<td colspan="2" id="chart-tooltip-last"></td>' +
                                        '</tr>' +
                                        '<tr>' +
                                            '<th>Volumen</th>' +
                                            '<td colspan="2" id="chart-tooltip-volume"></td>' +
                                        '</tr>' +
                                    '</table>' +
                                '</div>');
                $('body').append(this.tooltip);
                this.chartPosY = 0;
                this.mountainGrey = new Array( false, false, false, false );
                this.dayOfWeek = new Array('Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag');
                this.monthName = new Array('Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember');


                var mainChart = this.jq('#tnt-main-chart [data-tnt-widget]').get(0);
                var smallChart1 = this.jq('#tnt-small-chart1 [data-tnt-widget]').get(0);
                var smallChart2 = this.jq('#tnt-small-chart2 [data-tnt-widget]').get(0);
                var smallChart3 = this.jq('#tnt-small-chart3 [data-tnt-widget]').get(0);

                if (chartApi.registry.length === 0) {
                    chartApi.on('ready', function (args) {
                        switch (args.chart.rootEl) {
                            case mainChart:
                                this.chartApi['#tnt-main-chart'] = chartApi.get(mainChart);
                                this.bindEvents('#tnt-main-chart');
                                break;
                            case smallChart1:
                                this.chartApi['#tnt-small-chart1'] = chartApi.get(smallChart1);
                                this.bindEvents('#tnt-small-chart1');
                                break;
                            case smallChart2:
                                this.chartApi['#tnt-small-chart2'] = chartApi.get(smallChart2);
                                this.bindEvents('#tnt-small-chart2');
                                break;
                            case smallChart3:
                                this.chartApi['#tnt-small-chart3'] = chartApi.get(smallChart3);
                                this.bindEvents('#tnt-small-chart3');
                                break;
                        }
                    }.bind(this));
                } else {
                    this.chartApi = chartApi.get(mainChart);
                    this.bindEvents('#tnt-main-chart');
                    this.chartApi = chartApi.get(smallChart1);
                    this.bindEvents('#tnt-small-chart1');
                    this.chartApi = chartApi.get(smallChart2);
                    this.bindEvents('#tnt-small-chart2');
                    this.chartApi = chartApi.get(smallChart3);
                    this.bindEvents('#tnt-small-chart3');
                }

            }.bind(this),
            function (error) {
                // on error callback
                console.error("Api Failed");
            }.bind(this)
        );
    }.bind(this), function () {
        console.error("Main Failed");
    });
};

/**
 * Register all the menu listeners.
 */
MenuChart.prototype.bindEvents = function (chartContainerID) {
    this.jq(chartContainerID +' .chart-indexes').on('change', this.onIndexChange.bind(this, chartContainerID));
    this.jq(chartContainerID +' .chart-timespan li').on('click', this.onTimeSpanChange.bind(this, chartContainerID));

    if (chartContainerID == '#tnt-main-chart') {
        // Activate vertical cursor
        this.chartApi[chartContainerID].setCursorMode('vertical-line');
        this.jq(chartContainerID +' button').on('click', function() {
            var oStart = new Date();
            var oEnd = new Date();
            oStart.setDate(oStart.getDate() - 1);
            var sFrom = $('#dateFrom').val();
            var sTo = $('#dateTo').val();
            aFrom = sFrom.split('.');
            aTo = sTo.split('.');
            if (aFrom.length==3)
            {
                var oNow = new Date();
                if (aFrom[0]>=1 && aFrom[0]<=31 && aFrom[1]>=1 && aFrom[1]<=12 && aFrom[2]>=1970 && aFrom[2]<=oNow.getFullYear())
                {
                    oStart.setDate(aFrom[0]);
                    oStart.setMonth(aFrom[1]-1);
                    oStart.setYear(aFrom[2]);
                }
            }
            if (aTo.length==3)
            {
                var oNow = new Date();
                if (aTo[0]>=1 && aTo[0]<=31 && aTo[1]>=1 && aTo[1]<=12 && aTo[2]>=1970 && aTo[2]<=oNow.getFullYear())
                {
                    oEnd.setDate(aTo[0]);
                    oEnd.setMonth(aTo[1]-1);
                    oEnd.setYear(aTo[2]);
                }
            }
            var bIntraday = (aFrom.toString()==aTo.toString());
            if ((this.mountainGrey[0]==false && !bIntraday) || (this.mountainGrey[0]==true && bIntraday))
            {
                this.chartApi[chartContainerID].toggle('Mountain');
                this.chartApi[chartContainerID].toggle('Mountain Grey');
                this.chartApi[chartContainerID].toggle('Straight Line Series');
                this.mountainGrey[0] = !this.mountainGrey[0];
            }
            this.chartApi[chartContainerID].setRange(oStart, oEnd);
            return false;
        }.bind(this));
        
        this.chartApi[chartContainerID].chart.on('canvas:hover', this.onCanvasHover.bind(this));
        this.chartApi[chartContainerID].chart.on('canvas:leave', function () {
            this.tooltip.hide();
            /*
            this.priceline.hide();
            */
        }.bind(this));
    }
};

/**
 * Change Notation
 */
MenuChart.prototype.onIndexChange = function (chartContainerID, e) {
    e.preventDefault();
    var notation = e.currentTarget.value;
    this.chartApi[chartContainerID].setIdNotation(notation);
    var url = '/idms/www/marktdaten_analysen.html?AJAX=1&REGION='+$('#IDMS_REGION').val()+'&ID_NOTATION='+notation;
    idmsJSONRequest = $.ajax({
        url: url,
        dataType: 'html',
        success: function (data) {
            $('#idms_ajax_header').html(data);
        }
    });
};

/**
 * Handle hover on canvas
 */
MenuChart.prototype.onCanvasHover = function (e) {
    if (this.chartPosY==0) {
        this.chartPosY = $('#tnt-main-chart canvas').position().top;
    }
    if (e.hasOwnProperty('samples')) {
        var sample = e.samples;
        if (sample.hasOwnProperty('Historical Data')) {
            var data = sample['Historical Data'];
            this.showTooltip(data, e.originalEvent);
        }
    }
};

/**
 * Show the tooltip
 */
MenuChart.prototype.showTooltip = function (data, e) {
    this.tooltip.find('#chart-tooltip-date').text(this.dayOfWeek[data.date.getDay()]+', '+data.date.getDate()+'. '+this.monthName[data.date.getMonth()]);
    this.tooltip.find('#chart-tooltip-time').text(((data.date.getHours()<10)?'0':'')+data.date.getHours()+':'+((data.date.getMinutes()<10)?'0':'')+data.date.getMinutes());
    this.tooltip.find('#chart-tooltip-last').text(this.numberFormat(data.values.LAST,2,',','.'));
    this.tooltip.find('#chart-tooltip-volume').text(this.numberFormat(data.values.TOTAL_VOLUME,0,',','.')+' Stk.');
    this.tooltip.css({top: e.pageY + 20, left: e.pageX + 20}).show();
};

/**
 * Change the time span in context
 *
 */
MenuChart.prototype.onTimeSpanChange = function (chartContainerID, e) {
    e.preventDefault();
    var dataTimeSpan = e.currentTarget.getAttribute('data-timespan');

    var iMountainPos = 0;
    switch (chartContainerID)
    {
        case '#tnt-small-chart1':
            iMountainPos = 1;
            break;
        case '#tnt-small-chart2':
            iMountainPos = 2;
            break;
        case '#tnt-small-chart3':
            iMountainPos = 3;
            break;
    }
    if ((this.mountainGrey[iMountainPos]==false && dataTimeSpan!='1D') || (this.mountainGrey[iMountainPos]==true && dataTimeSpan=='1D'))
    {
        this.chartApi[chartContainerID].toggle('Mountain');
        this.chartApi[chartContainerID].toggle('Mountain Grey');
        this.chartApi[chartContainerID].toggle('Straight Line Series');
        this.mountainGrey[iMountainPos] = !this.mountainGrey[iMountainPos];
    }
    if (dataTimeSpan === 'MAX') {
        var oStart = this.chartApi[chartContainerID].chart.minHistoryDate,
            oEnd = new Date();
        this.chartApi[chartContainerID].setRange(oStart, oEnd);
    } else {
        var timeSpan = dataTimeSpan.match(/[a-zA-Z]+|[0-9]+/g);
        this.chartApi[chartContainerID].setRangeOffset(timeSpan[0], timeSpan[1]);
    }
    if (chartContainerID != '#tnt-main-chart') {
        $(chartContainerID+' .chart-timespan li').removeClass('current');
        $(e.currentTarget).addClass('current');
    }
};

MenuChart.prototype.numberFormat = function( number, decimals, dec_point, thousands_sep ) {
	number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
	var n = !isFinite(+number) ? 0 : +number,
	prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
	sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
	dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
	s = '',
	toFixedFix = function (n, prec)
	{
		var k = Math.pow(10, prec);
		return '' + Math.round(n * k) / k;
	};
	s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
	if (s[0].length > 3)
	{
		s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
	}
	if ((s[1] || '').length < prec)
	{
		s[1] = s[1] || '';
		s[1] += new Array(prec - s[1].length + 1).join('0');
	}
	return s.join(dec);
};

new MenuChart();