$(function () {
    var visible = getCookie('HCseriesVisible');
    console.log(visible);

    function saveSeriesState(cvalue) {
        var d = new Date();
        d.setTime(d.getTime() + (365*24*60*60*1000)); // 1 year coockie
        var expires = "expires="+d.toUTCString();
        document.cookie = "HCseriesVisible=" + cvalue + "; " + expires;
    }

    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';'),
            len = ca.length;
        for(var i=0; i<len; i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1);
            if (c.indexOf(name) == 0) {
                var ret = c.substring(name.length,c.length);
                ret = ret.split('X');
                $.each(ret, function(i,v) {
                    ret[i] = (v === 'f') ? false : true;
                });
                return ret;
            }
        }
        return [true,true,true,true];
    }

    $('#container').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
            series: {
                events: {
                    legendItemClick: function () {
                        var visibility = '',
                            seriesIndex = this._i;
                        $.each(this.chart.series, function(i,v) {
                            if(i == seriesIndex) {
                                visibility += v.visible ? 'fX' : 'tX';
                            } else {
                                visibility += v.visible ? 'tX' : 'fX';
                            }
                        });
                        saveSeriesState(visibility);
                    }
                }
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 194.1, 95.6, 54.4],
            visible: visible[0]
        },{
            data: [106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
            visible: visible[1]
        },{
            data: [176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            visible: visible[2]
        },{
            data: [129.9, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            visible: visible[3]
        }]
    });
});