<script type="text/javascript">
 
var $ = jQuery.noConflict();
console.log('jQuery loaded successfully');

$(document).ready( function() {
            $('[id$=opportunityTable]').dataTable( {
                "bJQueryUI": true
            } );
        });

//var $ = jQuery.noConflict();
console.log('{!dataString}');
var tooltipMap = $.parseJSON('{!mapJSON}');
console.log('tooltipMap');

$(function () {

   $('#from').datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        onClose: function(selectedDate){
            $('#to').datepicker("option", "minDate", selectedDate);
        }
   });
   
    $('#to').datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        onClose: function(selectedDate){
            $('#from').datepicker("option", "maxDate", selectedDate);
        }
   });
   console.log('Datepicker configuration loaded successfully');
   
    /*setting Default jQuery Dates*/
   $('#from').datepicker('setDate', '0');
   $('#to').datepicker('setDate', '+90d');
   console.log('Datepicker default dates loaded successfully');


   /*jQuery to handle filter Click*/
   $("#filterButton").click(function(){
        passDateValues($('#from').val(), $('#to').val());
        console.log('Filter Button click event got fired');
        console.log('Parameters Passed: ' + 'From: ' + $('#from').val() + '  To: ' + $('#to').val());
   }); 

    $('[id$=filterHelpTextID]').tooltip();
    console.log('Tooltip loaded successfully');

    //heatMap();

 $('#container').highcharts({

    chart: {
        type: 'heatmap',
        marginTop: 100,
        marginBottom: 25,
        plotBorderWidth: 1
    },


    title: {
        text: ' '

    },
    
     exporting: {
        sourceWidth: 2000,
        sourceHeight: 700,
    },

    xAxis: [{
            categories: {!fieldLabels},
            gridLineWidth: 1,
            gridZIndex: 4,
            opposite: true,
            
            labels:{
                autoRotation: false
            }
        }],

    yAxis: {
            gridLineWidth: 1,
            gridZIndex: 4,
            categories: {!OpportunityNames},   
             title: {
            text: 'Opportunity'
            },

            
        },
    
    plotOptions: {
        series: {
            colorByPoint: true,
            colors: ['#FFFFFF','#9BC2E6', '#FFE699', '#A9D08E', '#AEAAAA', '#CC66FF'],    
             states:{
                hover:{
                    enabled:false
                }
            }        
        }
           
    },     
            
    legend: {
          enabled: false,
    },

    series: [{
        name: 'Heat Map Values',
        borderWidth: 1,
        data: {!dataString},
    }],
    
     
     credits:{
        enabled: false
    }


});
 });
 
</script>

<script type="text/javascript">
    var $ = jQuery.noConflict();
    console.log('jQuery loaded successfully');

    $(document).ready(function()
    {
        $('[id$=opportunityTable]').dataTable(
        {
            "bJQueryUI": true
        });
    });

    //var $ = jQuery.noConflict();
    console.log('{!dataString}');
    var tooltipMap = $.parseJSON('{!mapJSON}');
    console.log('tooltipMap');

    $(function()
    {

        $('#from').datepicker(
        {
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 1,
            onClose: function(selectedDate)
            {
                $('#to').datepicker("option", "minDate", selectedDate);
            }
        }); 

        $('#to').datepicker(
        {
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 1,
            onClose: function(selectedDate)
            {
                $('#from').datepicker("option", "maxDate", selectedDate);
            }
        });
        console.log('Datepicker configuration loaded successfully'); 

        /*setting Default jQuery Dates*/
        $('#from').datepicker('setDate', '0');
        $('#to').datepicker('setDate', '+90d');
        console.log('Datepicker default dates loaded successfully');


        /*jQuery to handle filter Click*/
        $("#filterButton").click(function()
        {
            passDateValues($('#from').val(), $('#to').val());
            console.log('Filter Button click event got fired');
            console.log('Parameters Passed: ' + 'From: ' + $('#from').val() + '  To: ' + $('#to').val());
        });

        $('[id$=filterHelpTextID]').tooltip();
        console.log('Tooltip loaded successfully');

        //heatMap();

        $('#container').highcharts(
        {

            chart:
            {
                type: 'heatmap',
                marginTop: 100,
                marginBottom: 25,
                plotBorderWidth: 1
            },


            title:
            {
                text: ' '

            }, 

            exporting:
            {
                sourceWidth: 2000,
                sourceHeight: 700,
            },

            xAxis: [
            {
                categories:
                {!fieldLabels
                },
                gridLineWidth: 1,
                gridZIndex: 4,
                opposite: true, 

                labels:
                {
                    autoRotation: false
                }
            }],

            yAxis:
            {
                gridLineWidth: 1,
                gridZIndex: 4,
                categories:
                {!OpportunityNames
                }, 
                title:
                {
                    text: 'Opportunity'
                }, 


            },

            plotOptions:
            {
                series:
                {
                    colorByPoint: true,
                    colors: ['#FFFFFF', '#9BC2E6', '#FFE699', '#A9D08E', '#AEAAAA', '#CC66FF'], 
                    states:
                    {
                        hover:
                        {
                            enabled: false
                        }
                    }
                } 

            },

            legend:
            {
                enabled: false,
            },

            series: [
            {
                name: 'Heat Map Values',
                borderWidth: 1,
                data:
                {!dataString
                },
            }], 


            credits:
            {
                enabled: false
            }


        });
    });
</script>