$(function() {

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

    });

    var enablemouse = false;
    var widthg = {{widthgraph}};
    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 = 50; //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';
		}
    }
    // form-group refers to form fields defined in pages (?)
    function funcPortfoliorendite(){
        document.getElementsByClassName('form-group required')[index1].style.display = 'block';

        var val = 0;
        //document.getElementById('re').innerHTML = val  + '%';
        document.getElementById("re").style.color = 'black';


// this is portfolio graph
         var chart1= new Highcharts.Chart({
            chart: {  //not to be changed lightly
                renderTo: 'contr3',
                type: 'column',
                width: 300,
                marginLeft: 70,
                marginRight:1,
                marginf: 55
            },
            title: {
                text: '' //'Return simulation for Assets 1 & 2'
            },

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

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

				startOnTick: true
            },
            yAxis: {

                title: {
                    text: 'Return'
                },
				labels: {
                    enabled:true,
                    formatter: function(){
                        console.log(this.value)
                        return this.value + '%';
                    }
                },
                min: minYAxis,
                max: maxYAxis,
                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: [Math.round(val * 100)],
                pointWidth: xAxisInterv,
                zIndex: 100
            }]
        });
        document.getElementById('id_InvestmentAsset21').value = parseFloat({{ origin }});
        document.getElementById('InvestmentAsset1').innerHTML= "Investment into Asset 1: <br>".concat((10000 - parseFloat({{ origin }})).toString(10), " £");

        var tempPercent= parseFloat({{ origin }})/10000;
        var rend = Math.round(((1-tempPercent) * chartData[0][0] + tempPercent * chartData[0][1])*100);
        chart1.series[0].data[0].update(rend);
        document.getElementById('re').innerHTML = rend   + '%';
        if(rend < 0){
            document.getElementById("re").style.color = 'red';
        }else {
            document.getElementById("re").style.color = 'green';
        }
        var n = 'InvestmentAsset2'.concat((index1 + 1).toString(10));
        $(':input').bind('input',function(){
            var weightTemp = parseFloat(String($(':input[name='.concat(n,']')).val()));
            document.getElementById('InvestmentAsset1').innerHTML= "Investment into Asset 1: <br>".concat((10000 - weightTemp).toString(10), " £");
            var v = '';
            var weight = weightTemp/10000;
            if (!isNaN(weightTemp) && weightTemp <= 10000 && weightTemp >= 0){
                v = Math.round(((1-weight) * chartData[index1][0] + weight * chartData[index1][1])*100);
                chart1.series[0].data[0].update(v);
                document.getElementById('re').innerHTML = v   + '%';
                if(v < 0){
                    document.getElementById("re").style.color = 'red';
                }else {
                    document.getElementById("re").style.color = 'green';
                }
            }else{
                //document.getElementById('re').innerHTML = 'X%';
                //document.getElementById("re").style.color = 'black';
            }
	        if (weightTemp > 10000 || weightTemp < 0){
                //setTimeout(function(){
                    window.alert("Please enter a number between 0 and 10000!");
                //}, 250);
            }

        });

        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(){
            if(index1 == chartData.length/2 - 2){
                window.alert("You are now viewing return simulation 50. Please make your final investment decision.");
            }
            if(index1 == 25 -1){
                window.alert("Note: Up to your final investment decision after return simulation 50, you are left with 25 return simulations. During these simulations you can still adjust your investment decision.");
            }
            var n = 'InvestmentAsset2'.concat((index1 + 1).toString(10));
            var amount = parseFloat(String($(':input[name='.concat(n,']')).val()));
            document.getElementById('InvestmentAsset1').innerHTML= "Investment into Asset 1: <br>".concat((10000 - amount).toString(10), " £");

            if ((isNaN(amount) || amount > 10000 || amount < 0) && index1 <= chartData.length/2 - 1){
                window.alert("Please select a number between 0 and 10000!");
            }else{
                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){
                    var tempid = 'id_InvestmentAsset2'.concat((index1 + 1).toString(10));
                    console.log(tempid);
                    if(index1 <= chartData.length/2 - 1){
                        var temp = document.getElementById(tempid).value;
                    }
                    index1++;
                    var n = 'InvestmentAsset2'.concat((index1 + 1).toString(10));
                    $(':input').bind('input',function(){
                        var weightTemp = parseFloat(String($(':input[name='.concat(n,']')).val()));
                        document.getElementById('InvestmentAsset1').innerHTML= "Investment into Asset 1: <br>".concat((10000 - weightTemp).toString(10), " £");
                        var v = '';
                        var weight = weightTemp/10000;
                        if (!isNaN(weightTemp) && weightTemp <= 10000 && weightTemp >= 0){
                            v = Math.round(((1-weight) * chartData[index1][0] + weight * chartData[index1][1])*100);
                            chart1.series[0].data[0].update(v);
                            document.getElementById('re').innerHTML = v   + '%';
                            if(v < 0){
                                document.getElementById("re").style.color = 'red';
                            }else {
                                document.getElementById("re").style.color = 'green';
                            }
                        }else{
                            //document.getElementById('re').innerHTML = 'X%';
                            //document.getElementById("re").style.color = 'black';
                        }
                        if (weightTemp > 10000 || weightTemp < 0){
                            //setTimeout(function(){
                                window.alert("Please select a number between 0 and 10000!");
                            //}, 250);
                        }

                    });
                    document.getElementsByTagName('h2')[0].innerHTML = 'Simulation of Returns: ' + (index1 + 1) + ' of 100'
                    document.title = 'Simulation of Returns: ' + (index1 + 1) + ' of 100'
                    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);
                }

                // with fillform
                if(index1 <= chartData.length/2 - 1){
                        document.getElementsByClassName('form-group required')[index1-1].style.display = 'none';
                        document.getElementsByClassName('form-group required')[index1].style.display = 'block';

                        document.getElementById('id_InvestmentAsset2'.concat((index1 + 1).toString(10))).value = temp;
                        var tempPercent= temp/10000;
                        var rend = Math.round(((1-tempPercent) * chartData[index1][0] + tempPercent * chartData[index1][1])*100);
                        chart1.series[0].data[0].update(rend);
                        console.log("chart1.series[0].data[0].update(rend);");
                        console.log(rend);
                        console.log(index1);
                        document.getElementById('re').innerHTML = rend + '%';
                        if(rend < 0){
                            document.getElementById("re").style.color = 'red';
                        }else {
                            document.getElementById("re").style.color = 'green';
                        }
                }
                if(index1 == chartData.length/2 - 1){
                    document.getElementById('at50').style.display = 'block';
                }
                if(index1 == chartData.length/2){
                    document.getElementsByClassName('form-group required')[index1-1].style.display = 'none';
                }
                if(index1 > chartData.length/2 - 1){ //
                    document.getElementById('after50').style.display = 'block';
                    document.getElementById('at50').style.display = 'none';
                    document.getElementById('InvestmentAsset1').style.display = 'none';
                    document.getElementById('preQue').style.display = 'none';
                    document.getElementById('preQue1').style.display = 'none';

                    temp = document.getElementById('id_InvestmentAsset250').value;
                    var tempPercent = temp/10000;
                    document.getElementById('after50').innerHTML =  "You have made the following investment decision: <br> <br> Investment into Asset 1: <br>".concat( (10000-temp).toString(10), " £ <br> <br> Investment into Asset 2: <br>", temp.toString(10), " £ <br> <br> As a reminder: The remaining return simulations up to return simulation 100 provide you with the opportunity to learn about the return distributions after you have made an investment decision, so that you can develop an understanding of your selected portfolio.");
                    var rend = Math.round(((1-tempPercent) * chartData[index1][0] + tempPercent * chartData[index1][1])*100);
                    chart1.series[0].data[0].update(rend);
                    console.log("chart1.series[0].data[0].update(rend);");
                    console.log(rend);
                    console.log(index1);
                    document.getElementById('re').innerHTML = rend + '%';
                    if(rend < 0){
                        document.getElementById("re").style.color = 'red';
                    }else {
                        document.getElementById("re").style.color = 'green';
                    }
                }

                /*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 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: '' //'Return simulation 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
                },{
                    color: '#0048ff',
                    width: widthg,
                    value: 8,
                    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();
        var chartDataLength = chartData.length;
        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(){
            if(index1 == 25 - 1){
                window.alert("Note: Up to your final investment decision after return simulation 50, you are left with 25 return simulations.");
            }
            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 < chartDataLength - 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 < chartDataLength - 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;

    }