$(function() {

        /*Represent decimal point as comma*/
        Highcharts.setOptions({
            lang: {
                decimalPoint: ','
            },
        });

    });

    var enablemouse = false;
    var chartData = {{ array }};  // the array of data to be displayed on chart
    var minYAxis = -40; //define the minimum y-axis value on charts
    var maxYAxis = 40; //define the maximum y-axis value on line charts
    var xAxisInterv = 50;
	console.log(minYAxis);
    console.log(maxYAxis);
    console.log(chartData);
    var index1 = 0;

    (function (H) {
        H.wrap(H.Tooltip.prototype, 'hide', function (defaultCallback) {
            if (!enablemouse) {
                //Do Nothing (Do Not Hide)
            } else { // Call the default Hide Callback
                defaultCallback.apply(this);
            }
        });
    }(Highcharts));

	/*Description*/
    function func0() {
		document.getElementById('b').style.display ='none';
        document.getElementById('b1').style.display = 'block';
        document.getElementById("longtable").style.display='block';
        var i;
        for (i = 0; i < chartData[0].length; i++) {
            var chart = numGraphicalSampling(chartData[0][i][0], chartData[0][i][1], 'A' + (i + 1))
            document.getElementById('td'+(i+1)).innerHTML = chartData[1][i];
        }
    };


    //generate graphical, numerical chart
    function numGraphicalSampling(val1, val2, containerID){
        var chart = genGraphCharts(val1, val2, containerID);
        document.getElementById('v').style.visibility = 'visible';
		document.getElementById('re'+containerID+ '1').innerHTML = Math.round(val1 * 100)  + '%'
            console.log('re'+containerID+ '2')
		document.getElementById('re'+containerID+ '2').innerHTML = Math.round(val2 * 100)  + '%'
		if(val1 < 0){
			document.getElementById('re'+containerID+ '1').style.color = 'red';
		}else {
			document.getElementById('re'+containerID+ '1').style.color = 'green';
		}
	   if(val2 < 0){
			document.getElementById('re'+containerID+ '2').style.color = 'red';
		}else {
			document.getElementById('re'+containerID+ '2').style.color = 'green';
		}
    }

    function genGraphCharts(val1, val2, containerID, argPWidth=xAxisInterv, argMinY=minYAxis, argMaxY=maxYAxis){
       console.log('genGraphCharts');

            console.log(val1);
            console.log(val2);
            console.log(containerID);

         var gChart= new Highcharts.Chart({
            chart: {  //not to be changed lightly
                renderTo: 'contr' + containerID,
                type: 'column',
                width: 519 * 0.8,
                marginLeft: 70,
                marginRight:1,
                marginf: 55
            },
            title: {
                text: '' //'Simulation of Returns for Assets 1 & 2'
            },

            xAxis: {
			    title: {
                    text: 'Asset'
                },

                labels: {
                    enabled:true,
                    formatter: function(){
                        if(this.value != 0 && this.value != 3){
                            console.log(this.value)
                            return this.value;
                        }
                    }
                },
                gridLineWidth: 1,
                //startOnTick: true,
                tickInterval: 1,
                min: 0,
                max: 3,
				endOnTick: true,

				startOnTick: true
            },
            yAxis: {
                title: {
                    text: 'Return'
                },
				labels: {
                    enabled:true,
                    formatter: function(){
                        console.log(this.value)
                        return this.value + '%';
                    }
                },
                min: argMinY,
                max: argMaxY,
                tickInterval: 10,
                plotLines: [{
                    color: 'black',
                    width: 2,
                    value: 0,
                    zIndex: 2
                }]
            },
            plotOptions: {
                series: {
                    borderColor: 'black',
                    animation: false  //disable all the animations
                },
				column: {
					events: {
						legendItemClick: function () {
							return false;
						}
					},
					dataLabels: {
						enabled: false
					}
				}
            },
            credits: {
                enabled: false
            },
            tooltip: {
                enabled: false
            },
			legend: {
				enabled: false,
			    squareSymbol: false,
				symbolHeight: 0,
				symbolWidth: 0,
				layout: 'vertical',
				align: 'center',
				verticalAlign: 'top',
				x: 0,
				y: 20,
				floating: true,
				backgroundColor: 'white',
				shadow: false
			},
            exporting: {
                enabled: false
            },
            series: [{
				name: '',
			    color: 'green',
				negativeColor: 'red',
                enableMouseTracking: false,
                pointPlacement: 'on',
                clip: false,
                data: [[1,Math.round(val1 * 100)], [2,Math.round(val2 * 100)]],
                pointWidth: argPWidth,
                zIndex: 100
            }]
        });
        return gChart;
    }

    //graphical sampling
    function graphicalSampling(argPWidth=xAxisInterv, argMinY=minYAxis, argMaxY=maxYAxis) {
        var finArray1 = [];
        finArray1.push([1, chartData[0]]);
		finArray1.push([2, chartData[1]]);
        /*Define the static bar chart*/
        var chart = genGraphCharts(chartData[index1][0], chartData[index1][1], '2');
        return chart;
    }


    function func1() {
        var chart = graphicalSampling();
        document.getElementById('v').style.visibility = 'visible';
		document.getElementById('re1').innerHTML = Math.round(chartData[index1][0] * 100)  + '%'
		document.getElementById('re2').innerHTML = Math.round(chartData[index1][1] * 100)  + '%'

		if(chartData[index1][0] < 0){
			document.getElementById("re1").style.color = 'red';
		}else {
			document.getElementById("re1").style.color = 'green';
		}
	   if(chartData[index1][1] < 0){
			document.getElementById("re2").style.color = 'red';
		}else {
			document.getElementById("re2").style.color = 'green';
		}
        /*Define what should happen after the button is clicked*/
        $('#b').click(function(){
            console.log(chartData.length);
            chart = blankGrahical();
            document.getElementById('v').style.visibility = 'hidden';
			document.getElementById('l').style.visibility = 'hidden';
            var buttonB =  document.getElementById('b');
            buttonB.style.visibility = 'hidden';             //disable the button
            // mejor mechanism of the sim-chart
            if(index1 < chartData.length - 1){
                index1++;
                document.getElementsByTagName('h2')[0].innerHTML = 'Simulation of Returns: ' + (index1 + 1) + ' of 50'
                document.title = 'Simulation of Returns: ' + (index1 + 1) + ' of 50'
                setTimeout(function(){
            		chart = graphicalSampling();
                    document.getElementById('v').style.visibility = 'visible';
					document.getElementById('l').style.visibility = 'visible';
                    document.getElementById('re1').innerHTML = Math.round(chartData[index1][0] * 100)  + '%'
                    document.getElementById('re2').innerHTML = Math.round(chartData[index1][1] * 100)  + '%'
                    if(chartData[index1][0] < 0){
                        document.getElementById("re1").style.color = 'red';
                    }else {
                        document.getElementById("re1").style.color = 'green';
                    }
                   if(chartData[index1][1] < 0){
                        document.getElementById("re2").style.color = 'red';
                    }else {
                        document.getElementById("re2").style.color = 'green';
                    }
                }, 250);
            }

            /*re-enable the button if there are still data to be shown; make the button disappear if otherwise*/
            if(index1 < chartData.length - 1){
                setTimeout(function(){ buttonB.style.visibility = 'visible';}, 500);
            }else{
                buttonB.style.display="none";
                setTimeout(function(){document.getElementById('b1').style.display = 'block';}, 500);

            }
        })
    };

       function blankGrahical(){
        var chart = new Highcharts.Chart({
        chart: {  //not to be changed lightly
                renderTo: 'contr2',
                type: 'column',
                width: 519,
                marginLeft: 70,
                marginRight:1,
                marginBottom: 55
            },
            title: {
				text: ''
			},

            credits: {
                enabled: false
            },

			legend: {
				enabled: false
			},
			exporting: {
                enabled: false
            }
        });

        return chart;

    }