var menu_svg_width = 60,
          menu_svg_height = 60,
          toggle_switch = true,
          initial_color = '#fff',
          close_color = '#f2721d',
         sidebar_duration = 600,
         sidebar_extended_width = 250,
         sidebar_closed_width = 60;

    var menu_svg = d3.select('#sidebar_div')
                                    .append('svg')
                                        .attr({
                                            width: menu_svg_width,
                                            height: menu_svg_height,
                                            id: 'menu_svg',
                                            cursor: 'pointer'
                                        })
                                    .on('click', function(){
                                        var transition_duration = 300,
                                              scale_factor = .1;


                                        if (toggle_switch == true) {
                                                d3.selectAll('#top_bar, #bottom_bar')
                                                        .transition()
                                                            .duration(transition_duration)
                                                            .attr('width', menu_bar_height)
                                                            .attr('x', (menu_svg_width/ 2) - ((menu_bar_width * scale_factor) / 2))
                                                            .attr('fill', close_color)
                                                        .transition()
                                                            .duration(transition_duration)
                                                            .attr('height', menu_bar_width)
                                                            .attr('y', (menu_svg_height / 2 - (menu_bar_width / 2)));


                                                d3.select('#middle_bar')
                                                        .transition()
                                                            .duration(transition_duration)
                                                            .attr('fill', close_color);

                                                d3.select(this)
                                                        .transition()
                                                            .duration(transition_duration)
                                                            .attr('transform', 'rotate(-45)')
                                                            .style('-webkit-transform',"rotate(-45 deg);")
                                                            .style('-moz-transform',"rotate(-45 deg);");

                                                d3.select('#sidebar_div')
                                                     .transition()
                                                     .duration(sidebar_duration)
                                                     .style('width', sidebar_extended_width + 'px')
                                                      .transition()
                                                     .duration(300)
                                                     .ease('cubicInOut')
                                                     .style('height', '100vh');

                                             d3.select('#sidebar_link_div')
                                                    .transition()
                                                    .duration(600)
                                                    .delay(800)
                                                    .style('opacity', 1)




                                               toggle_switch = false}

                                        else {
                                            d3.selectAll('#top_bar, #bottom_bar')
                                                        .transition()
                                                            .duration(transition_duration)
                                                            .attr('height', menu_bar_height)
                                                            .attr('y', function (d, i) {
                                                                if (i == 0) {
                                                                return 1 * (menu_svg_height / 4) - (menu_bar_height / 2) + top_bottom_padding}
                                                                else {
                                                                    return 3 * (menu_svg_height / 4)  - (menu_bar_height / 2)  - top_bottom_padding}
                                                                })
                                                            .attr('fill', initial_color)
                                                        .transition()
                                                            .duration(transition_duration)
                                                            .attr('width', menu_bar_width)
                                                            .attr('x', (menu_svg_width - menu_bar_width) / 2);

                                            d3.select('#middle_bar')
                                                        .transition()
                                                            .duration(transition_duration)
                                                            .attr('fill', initial_color);


                                            d3.select(this)
                                                        .transition()
                                                        .duration(transition_duration)
                                                        .attr('transform', 'rotate(0)')
                                                        .style('-webkit-transform',"rotate(0 deg);")
                                                        .style('-moz-transform',"rotate(0 deg);");

                                             d3.select('#sidebar_div')
                                                     .transition()
                                                     .duration(300)
                                                     .style('height', '60px')
                                                     .transition()
                                                     .duration(sidebar_duration)
                                                     .style('width', sidebar_closed_width + 'px');


                                             d3.select('#sidebar_link_div')
                                                    .transition()
                                                    .duration(100)
                                                    .style('opacity', 0)

                                            toggle_switch = true

                                        }


                                                });

    var top_bottom_padding = 5,
          menu_bar_ids = [{id: 'top_bar', padding: top_bottom_padding},{id:  'middle_bar', padding: 0}, {id: 'bottom_bar', padding: -top_bottom_padding}],
          menu_bar_padding = 28,
          menu_bar_width = menu_svg_width  - menu_bar_padding,
          menu_bar_height = 2;

    var menu_bar_rects = menu_svg.selectAll('rect')
                                                .data(d3.entries(menu_bar_ids))
                                                .enter()
                                                .append('rect')
                                                .attr({
                                                    x: (menu_svg_width - menu_bar_width) / 2,
                                                    y: function (d, i) {return (i + 1) * (menu_svg_height / 4) + d.value.padding - (menu_bar_height / 2) },
                                                    width: menu_bar_width,
                                                    height: menu_bar_height,
                                                    fill: initial_color,
                                                    id: function(d) {return d.value.id}
                                                });