define([], function() {

    'use strict';

    var canvas, ctx, moon, IMAGE_SIZE, HALF_SIZE, updateTimeout;
    var toggleGridBtn, toggleHemisphereBtn, showGrid, showSouth;


    function init() {
        initPrefs();
        initEventListeners();
        initCanvas();
        updateSizes();
        updateView();
    }


    function initPrefs() {
        toggleGridBtn = document.querySelector('#toggle-grid-button');
        toggleHemisphereBtn = document.querySelector('#toggle-hemisphere-button');

        showGrid = window.localStorage.getItem('showGrid');
        if (showGrid === 'true') {
            showGrid = true;
            toggleGridBtn.classList.add('active');
        } else {
            showGrid = false;
            window.localStorage.setItem('showGrid', false);
        }

        showSouth = window.localStorage.getItem('showSouth');
        if (showSouth === 'true') {
            showSouth = true;
            toggleHemisphereBtn.classList.add('active');
        } else {
            showSouth = false;
            window.localStorage.setItem('showSouth', false);
        }
    }


    function initCanvas() {
        canvas = document.querySelector('canvas');
        ctx = canvas.getContext('2d');
        moon = document.querySelector('img#moon');
    }


    function updateSizes() {
        var navbarOffset = document.querySelector('#main-toolbar').clientHeight;
        document.querySelector('#panel-container').style.height = (window.innerHeight - navbarOffset) + 'px';

        var canvasPanelHeight = document.querySelector('#panel-right').clientHeight;
        var canvasPanelWidth = document.querySelector('#panel-right').clientWidth;
        var paddingPercent = 0.05;

        IMAGE_SIZE = (1 - paddingPercent) * Math.min(canvasPanelWidth, canvasPanelHeight);
        HALF_SIZE = 0.5 * IMAGE_SIZE;

        canvas.width = IMAGE_SIZE;
        canvas.height = IMAGE_SIZE;

        canvas.style.top = 0.5 * (canvasPanelHeight - canvas.height) + 'px';
        canvas.style.left = 0.5 * (canvasPanelWidth - canvas.width) + 'px';
    }


    function updateView() {
        ctx.drawImage(moon, 0, 0, IMAGE_SIZE, IMAGE_SIZE);
        if (showSouth) {
            ctx.save();
            ctx.rotate(Math.PI);
            ctx.drawImage(canvas, -IMAGE_SIZE, -IMAGE_SIZE);
            ctx.restore();
        }
        updateTimeout = setTimeout(updateView, 1000);
    }


    function initEventListeners() {
        window.addEventListener('resize', function() {
            updateSizes();
            updateView();
        });

        toggleGridBtn.addEventListener('click', toggleGrid);
        toggleHemisphereBtn.addEventListener('click', toggleHemisphere);
        // document.querySelector('#save-image-button').addEventListener('click', saveImage);
    }


    function toggleGrid() {
        showGrid = !showGrid;
        if (showGrid) {
            toggleGridBtn.classList.add('active');
        } else {
            toggleGridBtn.classList.remove('active');
        }
        window.localStorage.setItem('showGrid', showGrid);

        clearTimeout(updateTimeout);
        updateView();
    }


    function toggleHemisphere() {
        showSouth = !showSouth;
        if (showSouth) {
            toggleHemisphereBtn.classList.add('active');
        } else {
            toggleHemisphereBtn.classList.remove('active');
        }
        window.localStorage.setItem('showSouth', showSouth);

        clearTimeout(updateTimeout);
        updateView();
    }

    return {
        init: init
    };
});
@@ -187,24 +187,322 @@
 on init() %7B%0A
+        toggleGridBtn = document.querySelector('#toggle-grid-button');%0A        toggleHemisphereBtn = document.querySelector('#toggle-hemisphere-button');%0A%0A        canvas = document.querySelector('canvas');%0A        ctx = canvas.getContext('2d');%0A%0A        moon = document.querySelector('img#moon');%0A%0A
         init
@@ -544,30 +544,8 @@
 ();%0A
-        initCanvas();%0A
     
@@ -632,153 +632,91 @@
     
-toggleGridBtn = document.querySelector('#toggle-grid-button');%0A        toggleHemisphereBtn = document.querySelector('#toggle-hemisphere-button');
+/*%0A            Store preferences in window.localStorage across sessions.%0A        */
 %0A%0A  
@@ -1335,17 +1335,18 @@
 ion 
-initCanva
+updateSize
 s() 
@@ -1359,177 +1359,94 @@
     
-canvas = document.querySelector('canvas');%0A        ctx = canvas.getContext('2d');%0A        moon = document.querySelector('img#moon');%0A    %7D%0A%0A%0A    function updateSizes() %7B
+/*%0A            Dynamically resize elements as and when the window resizes.%0A        */%0A
 %0A   
@@ -2225,24 +2225,70 @@
 ateView() %7B%0A
+        /*%0A            Draw moon.%0A        */%0A%0A
         ctx.
@@ -2608,24 +2608,81 @@
 steners() %7B%0A
+        /*%0A            Bind event-listeners.%0A        */%0A%0A
         wind
@@ -3397,24 +3397,116 @@
 isphere() %7B%0A
+        /*%0A            Rotate moon image to represent southern-hemisphere view.%0A        */%0A%0A
         show

add comments to explain functions