var theme = 'dark';

(function() {
    'use strict';

    //set the active pill and section on first load
    var section = (document.location.hash) ? document.location.hash.slice(1) : 'signature_lookup';

    if (section.indexOf("bugzilla") != -1) {
      $('#trunk').load('charts/bugzilla/' + section + '.htm', function() {
        $('pre code').each(function(i, block) {
            hljs.highlightBlock(block);
        });
      });
    } else {
      if (section.indexOf("bz_signatures") != -1) {
        $('#trunk').load('charts/bz_signatures.htm', function() {
          $('pre code').each(function(i, block) {
            hljs.highlightBlock(block);
          });
        });
      } else {
        $('#trunk').load('charts/' + section + '.htm', function() {
          $('pre code').each(function(i, block) {
            hljs.highlightBlock(block);
          });
        });
      }
    }

    $('.menu a#goto-' + section).addClass('active');

    //handle mouse clicks and so on
    assignEventListeners();

    function assignEventListeners() {
        $('button.load').on('click', function(event) {
            var metric = document.getElementById('select_metric').selectedOptions[0].value;
            if (metric.indexOf('bugzilla') != -1) {
                metric = 'bugzilla/' + metric;
            }
            var chart = 'charts/' + metric + '.htm';
            $('#trunk').load(chart, function() {
                $('pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            });
        })
        
        $('a.pill').on('click', function(event) {
            event.preventDefault();
            $('a.pill').removeClass('active');
            $(this).addClass('active');

            var section = $(this).attr('id').slice(5);
            if (section.indexOf("bugzilla") != -1) {
              $('#trunk').load('charts/bugzilla/' + section + '.htm', function() {
                $('pre code').each(function(i, block) {
                  hljs.highlightBlock(block);
                });
              });
            } else {
              $('#trunk').load('charts/' + section + '.htm', function() {
                $('pre code').each(function(i, block) {
                  hljs.highlightBlock(block);
                });
              });
            }

            document.location.hash = section;

            return false;
        })

        $('#dark-css').on('click', function () {
            theme = 'dark';

            $('.missing')
                .css('background-image', 'url(images/missing-data-dark.png)');

            $('.wip')
                .css('background-color', '#3b3b3b');

            $('.trunk-section')
                .css('border-top-color', '#5e5e5e');

            $('.mg-missing-background')
                .css('stroke', '#ccc');

            $('.head ul li a.pill').removeClass('active');
            $(this).toggleClass('active');
            $('#dark').attr({href : 'css/metricsgraphics-demo-dark.css'});
            $('#dark-code').attr({href : 'css/railscasts.css'});
            $('#accessible').attr({href : ''});

            return false;
        });

        $('#light-css').on('click', function () {
            theme = 'light';

            $('.missing')
                .css('background-image', 'url(images/missing-data.png)');

            $('.wip')
                .css('background-color', '#f1f1f1');

            $('.trunk-section')
                .css('border-top-color', '#ccc');

            $('.mg-missing-background')
                .css('stroke', 'blue');

            $('.head ul li a.pill').removeClass('active');
            $(this).toggleClass('active');
            $('#dark').attr({href : ''});
            $('#dark-code').attr({href : ''});
            $('#accessible').attr({href : ''});

            return false;
        });
        
       

        $('#accessible-css').on('click', function () {
            $('.head ul li a.pill').removeClass('active');
            $(this).toggleClass('active');
            $('#accessible').attr({href : 'css/metricsgraphics-demo-accessible.css'});

            return false;
        });
    }

    // replace all SVG images with inline SVG
    // http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg
    // -image-using-css-jquery-svg-image-replacement
    $('img.svg').each(function() {
        var $img = jQuery(this);
        var imgID = $img.attr('id');
        var imgClass = $img.attr('class');
        var imgURL = $img.attr('src');

        $.get(imgURL, function(data) {
            // Get the SVG tag, ignore the rest
            var $svg = jQuery(data).find('svg');

            // Add replaced image's ID to the new SVG
            if (typeof imgID !== 'undefined') {
                $svg = $svg.attr('id', imgID);
            }
            // Add replaced image's classes to the new SVG
            if (typeof imgClass !== 'undefined') {
                $svg = $svg.attr('class', imgClass + ' replaced-svg');
            }

            // Remove any invalid XML tags as per http://validator.w3.org
            $svg = $svg.removeAttr('xmlns:a');

            // Replace image with new SVG
            $img.replaceWith($svg);

        }, 'xml');
    });
})();