/*
  jquery magic to create page from DOM values
*/


// Size and color data
var dataExtra = {
    '1': {
        'size': 10,
        'color': '#afb0b3'
    },
    '2': {
        'size': 4,
        'color': '#9b9ca0'
    },
    '3': {
        'size': 6,
        'color': '#c5c6c7'
    },
    '4': {
        'size': 8,
        'color': '#afb0b3'
    },
    '5': {
        'size': 10,
        'color': '#9b9ca0'
    },
    '6': {
        'size': 3,
        'color': '#afb0b3'
    },
    '7': {
        'size': 6,
        'color': '#9b9ca0'
    },
    '8': {
        'size': 3,
        'color': '#929397'
    },
    '9': {
        'size': 8,
        'color': '#898b8d'
    },
    '10': {
        'size': 4,
        'color': '#929397'
    },
    '11': {
        'size': 5,
        'color': '#898b8d'
    },
    '12': {
        'size': 5,
        'color': '#7f8083'
    },
    '13': {
        'size': 5,
        'color': '#929397'
    },
    '14': {
        'size': 8,
        'color': '#7f8083'
    },
    '15': {
        'size': 4,
        'color': '#9b9ca0'
    }
};

// Loop disk items to create an object literal
var diskContent = $j('.diskItem');
var diskData = {};
$j('.diskItem').each(function(i,el) {
    var $el = $j(el);
    diskData[ i+1 ] = {
            text: $j(el).children('h3').text(),
            desc: $j(el).children('p').text(),
            size: dataExtra[ i+1 ].size,
            color: dataExtra[ i+1 ].color
    };
});

// detach all inner content before creating disk
//$j('.diskItem').hide();

/* Simple JavaScript Inheritance
 * By John Resig http://ejohn.org/
 * MIT Licensed.
*/
// Inspired by base2 and Prototype
(function(){
    var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
    // The base Class implementation (does nothing)
    this.Class = function(){};
    
    // Create a new Class that inherits from this class
    Class.extend = function(prop) {
        var _super = this.prototype;
        
        // Instantiate a base class (but only create the instance,
        // don't run the init constructor)
        initializing = true;
        var prototype = new this();
        initializing = false;

        // Copy the properties over onto the new prototype
        for (var name in prop) {
            // Check if we're overwriting an existing function
            prototype[name] = typeof prop[name] == "function" && 
            typeof _super[name] == "function" && fnTest.test(prop[name]) ?
            (function(name, fn){
                return function() {
                    var tmp = this._super;

                    // Add a new ._super() method that is the same method
                    // but on the super-class
                    this._super = _super[name];

                    // The method only need to be bound temporarily, so we
                    // remove it when we're done executing
                    var ret = fn.apply(this, arguments);        
                    this._super = tmp;
                    
                    return ret;
                };
            })(name, prop[name]) :
            prop[name];
        }

        // The dummy class constructor
        function Class() {
            // All construction is actually done in the init method
            if ( !initializing && this.init )
                this.init.apply(this, arguments);
        }
        
        // Populate our constructed prototype object
        Class.prototype = prototype;
        
        // Enforce the constructor to be what we expect
        Class.prototype.constructor = Class;
    
        // And make this class extendable
        Class.extend = arguments.callee;

        return Class;
    };
})();

/*
To-Do:
- Highlight proper nav item on starting up 2nd phase
- Text typewriter setup
- add blue background on 2nd phase
- 2nd phase nav click events
- mini nav graph
*/
var sidebar;

var Infographic = Class.extend({
    /* ----- Default Values ----- */
    maxWidth: 940,
    maxHeight: 590,
    container: document.getElementById("mimicDisk"),
    
    /* ----- Colors ----- */
    cTextOn: '#fff',
    cTextOff: '#555',
    cSidebarOff: '#d0d1d2',
    cSidebarOn: '#8fc4ec',
    cHighlight: '#2ea6e1',
    
    /* ----- Timing ----- */
    timerHover: 300,
    
    /* ----- Utilities ----- */
    setSize: function() {
        // Setup width
        this.width = window.innerWidth;
        if (this.width > this.maxWidth) this.width = this.maxWidth;
        
        // Setup height by aspect ratio
        this.widthPer = this.width / this.maxWidth;
        this.height = this.widthPer * this.maxHeight;
    },
    
    /* ----- Data Storage ----- */
    data: {
        '1': {
            'text': 'Maintain Compliance',
            'desc': 'Donec molestie pretium justo eget blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis semper dignissim tincidunt. Integer varius iaculis lacus, eu fermentum orci dapibus sed. Curabitur aliquet lobortis molestie. Integer vulputate volutpat eros vel aliquet. Integer arcu mauris, porttitor in ullamcorper quis, suscipit accumsan nibh. Mauris vitae diam eros, eu vestibulum lorem.',
            'size': 10,
            'color': '#afb0b3'
        },
        '2': {
            'text': 'lorem ipsum',
            'desc': 'Donec molestie pretium justo eget blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis semper dignissim tincidunt. Integer varius iaculis lacus, eu fermentum orci dapibus sed. Curabitur aliquet lobortis molestie. Integer vulputate volutpat eros vel aliquet. Integer arcu mauris, porttitor in ullamcorper quis, suscipit accumsan nibh. Mauris vitae diam eros, eu vestibulum lorem.',
            'size': 4,
            'color': '#9b9ca0'
        },
        '3': {
            'text': 'lorem ipsum',
            'desc': 'Donec molestie pretium justo eget blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis semper dignissim tincidunt. Integer varius iaculis lacus, eu fermentum orci dapibus sed. Curabitur aliquet lobortis molestie. Integer vulputate volutpat eros vel aliquet. Integer arcu mauris, porttitor in ullamcorper quis, suscipit accumsan nibh. Mauris vitae diam eros, eu vestibulum lorem.',
            'size': 6,
            'color': '#c5c6c7'
        },
        '4': {
            'text': 'lorem ipsum',
            'desc': 'Donec molestie pretium justo eget blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis semper dignissim tincidunt. Integer varius iaculis lacus, eu fermentum orci dapibus sed. Curabitur aliquet lobortis molestie. Integer vulputate volutpat eros vel aliquet. Integer arcu mauris, porttitor in ullamcorper quis, suscipit accumsan nibh. Mauris vitae diam eros, eu vestibulum lorem.',
            'size': 8,
            'color': '#afb0b3'
        },
        '5': {
            'text': 'lorem ipsum',
            'desc': 'Donec molestie pretium justo eget blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis semper dignissim tincidunt. Integer varius iaculis lacus, eu fermentum orci dapibus sed. Curabitur aliquet lobortis molestie. Integer vulputate volutpat eros vel aliquet. Integer arcu mauris, porttitor in ullamcorper quis, suscipit accumsan nibh. Mauris vitae diam eros, eu vestibulum lorem.',
            'size': 10,
            'color': '#9b9ca0'
        },
        '6': {
            'text': 'lorem ipsum',
            'desc': 'Donec molestie pretium justo eget blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis semper dignissim tincidunt. Integer varius iaculis lacus, eu fermentum orci dapibus sed. Curabitur aliquet lobortis molestie. Integer vulputate volutpat eros vel aliquet. Integer arcu mauris, porttitor in ullamcorper quis, suscipit accumsan nibh. Mauris vitae diam eros, eu vestibulum lorem.',
            'size': 3,
            'color': '#afb0b3'
        },
        '7': {
            'text': 'lorem ipsum',
            'desc': 'Donec molestie pretium justo eget blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis semper dignissim tincidunt. Integer varius iaculis lacus, eu fermentum orci dapibus sed. Curabitur aliquet lobortis molestie. Integer vulputate volutpat eros vel aliquet. Integer arcu mauris, porttitor in ullamcorper quis, suscipit accumsan nibh. Mauris vitae diam eros, eu vestibulum lorem.',
            'size': 6,
            'color': '#9b9ca0'
        },
        '8': {
            'text': 'lorem ipsum',
            'desc': 'Donec molestie pretium justo eget blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis semper dignissim tincidunt. Integer varius iaculis lacus, eu fermentum orci dapibus sed. Curabitur aliquet lobortis molestie. Integer vulputate volutpat eros vel aliquet. Integer arcu mauris, porttitor in ullamcorper quis, suscipit accumsan nibh. Mauris vitae diam eros, eu vestibulum lorem.',
            'size': 3,
            'color': '#929397'
        },
        '9': {
            'text': 'lorem ipsum',
            'desc': 'Donec molestie pretium justo eget blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis semper dignissim tincidunt. Integer varius iaculis lacus, eu fermentum orci dapibus sed. Curabitur aliquet lobortis molestie. Integer vulputate volutpat eros vel aliquet. Integer arcu mauris, porttitor in ullamcorper quis, suscipit accumsan nibh. Mauris vitae diam eros, eu vestibulum lorem.',
            'size': 4,
            'color': '#898b8d'
        },
        '10': {
            'text': 'lorem ipsum',
            'desc': 'Donec molestie pretium justo eget blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis semper dignissim tincidunt. Integer varius iaculis lacus, eu fermentum orci dapibus sed. Curabitur aliquet lobortis molestie. Integer vulputate volutpat eros vel aliquet. Integer arcu mauris, porttitor in ullamcorper quis, suscipit accumsan nibh. Mauris vitae diam eros, eu vestibulum lorem.',
            'size': 8,
            'color': '#929397'
        },
        '11': {
            'text': 'lorem ipsum',
            'desc': 'Donec molestie pretium justo eget blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis semper dignissim tincidunt. Integer varius iaculis lacus, eu fermentum orci dapibus sed. Curabitur aliquet lobortis molestie. Integer vulputate volutpat eros vel aliquet. Integer arcu mauris, porttitor in ullamcorper quis, suscipit accumsan nibh. Mauris vitae diam eros, eu vestibulum lorem.',
            'size': 5,
            'color': '#898b8d'
        },
        '12': {
            'text': 'lorem ipsum',
            'desc': 'Donec molestie pretium justo eget blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis semper dignissim tincidunt. Integer varius iaculis lacus, eu fermentum orci dapibus sed. Curabitur aliquet lobortis molestie. Integer vulputate volutpat eros vel aliquet. Integer arcu mauris, porttitor in ullamcorper quis, suscipit accumsan nibh. Mauris vitae diam eros, eu vestibulum lorem.',
            'size': 3,
            'color': '#7f8083'
        },
        '13': {
            'text': 'lorem ipsum',
            'desc': 'Donec molestie pretium justo eget blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis semper dignissim tincidunt. Integer varius iaculis lacus, eu fermentum orci dapibus sed. Curabitur aliquet lobortis molestie. Integer vulputate volutpat eros vel aliquet. Integer arcu mauris, porttitor in ullamcorper quis, suscipit accumsan nibh. Mauris vitae diam eros, eu vestibulum lorem.',
            'size': 4,
            'color': '#929397'
        },
        '14': {
            'text': 'lorem ipsum',
            'desc': 'Donec molestie pretium justo eget blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis semper dignissim tincidunt. Integer varius iaculis lacus, eu fermentum orci dapibus sed. Curabitur aliquet lobortis molestie. Integer vulputate volutpat eros vel aliquet. Integer arcu mauris, porttitor in ullamcorper quis, suscipit accumsan nibh. Mauris vitae diam eros, eu vestibulum lorem.',
            'size': 8,
            'color': '#7f8083'
        },
        '15': {
            'text': 'lorem ipsum',
            'desc': 'Donec molestie pretium justo eget blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis semper dignissim tincidunt. Integer varius iaculis lacus, eu fermentum orci dapibus sed. Curabitur aliquet lobortis molestie. Integer vulputate volutpat eros vel aliquet. Integer arcu mauris, porttitor in ullamcorper quis, suscipit accumsan nibh. Mauris vitae diam eros, eu vestibulum lorem.',
            'size': 4,
            'color': '#9b9ca0'
        }
    },
    
    /* ----- Core ----- */
    setup: function() {
        this.setSize();
        this.paper = Raphael(this.container, this.width, this.height);
        this.paper.setViewBox(0, 0, this.maxWidth, this.maxHeight, true);
        
        this.setupPie();
        this.setupSidebar();
    },
    setupPie: function() {
        // attributes
        cX = 624;
        cY = 299;
        pieSize = new Array;
        pieColor = new Array;
        circleAnimR = Raphael.animation({transform: 'r' + 360}, 100000, 'linear',
            // Animation callback
            function() {
                this.attr({rotation: 0});
            }
        );
        circleAnimL = Raphael.animation({transform: 'r' + -360}, 100000, 'linear',
            // Animation callback
            function() {
                this.attr({rotation: 0});
            }
        );
        
        // Create oramental outside circles
        var circle = this.paper.circle(cX, cY, 290);
        circle.attr({'fill': false, 'stroke': '#ddd', 'stroke-dasharray': '--', 'stroke-width': '1'});
        //circle.attr({rotation: 0}).animate({transform: "r" + 360}, 100000, 'linear');
        circle.animate(circleAnimR.repeat('Infinity'));
        
        var circle = this.paper.circle(cX, cY, 272);
        circle.attr({'fill': false, 'stroke': '#ddd', 'stroke-dasharray': '--', 'stroke-width': '1'});
        circle.animate(circleAnimL.repeat('Infinity'));
        
        var circle = this.paper.circle(cX, cY, 254);
        circle.attr({'fill': false, 'stroke': '#ddd', 'stroke-dasharray': '--', 'stroke-width': '1'});
        circle.animate(circleAnimR.repeat('Infinity'));
    
        // Get pie chart sizes from storage
        for (var key in diskData) {
            var obj = diskData[key];
            pieSize.push(obj['size']);
            pieColor.push(obj['color']);
        }
    
        // Create pie chart
        this.pie = this.paper.piechart(cX, cY, 230, pieSize, {colors: pieColor});
        this.pie.attr({'stroke': false});
    },
    pieHover: function() {
        var onHoverPie = function() {
            document.body.style.cursor = 'pointer';
            item1 = this.sector.store[0];
            item2 = this.sector.store[1];
            item3 = this.sector.store[2];
            item4 = this.sector.store[3];
            
            // Animate sector
            item1.animate({'fill': BackOn}, ms, "linear");
            item2.animate({'fill': BackOn}, ms, "linear");
            item3.animate({'fill': TextOn}, ms, "linear");
            item4.animate({'fill': TextOn}, ms, "linear");
            
            // Animate pie
            // Can this be stored in a function somewhere else and have the variable passed?
            // Current problem is you can't reference a this function here, hover would need to be re-written to do so
            this.sector.stop();
            
            if (this.sector.attrs.fillO == null) this.sector.attrs.fillO = this.sector.attrs.fill;
            
            var popangle = this.sector.mangle;
            
            var xShiftTo = distance*Math.cos(-popangle * rad);
            var yShiftTo = distance*Math.sin(-popangle * rad);
            this.sector.animate({transform: "t" + xShiftTo + " " + yShiftTo, 'fill': '#2ea6e1'}, 300, "linear");
        }
        
        var offHoverPie = function() {
            document.body.style.cursor = '';
            item1.animate({'fill': BackOff}, ms, "linear");
            item2.animate({'fill': BackOff}, ms, "linear");
            item3.animate({'fill': TextOff}, ms, "linear");
            item4.animate({'fill': TextOff}, ms, "linear");
            this.sector.animate({transform: '', 'fill': this.sector.attrs.fillO}, 300, "linear");
        }
        
        this.pie.hover(onHoverPie, offHoverPie);

    },
    pieClick: function() {
        pieHolder = this.pie;
        
        this.pie.click(function () {

            document.body.style.cursor = '';
            
            this.sector.toFront();
            sidebar.toFront();
            
            //this.sector.unmouseout(offHoverPie);
            //this.sector.events[0] = '1';
            this.sector.mouseover = '';
            //this.sector.unhover(onHoverPie,offHoverPie);
            //pieHolder.unhover(onHoverPie,offHoverPie);
            //this.sector.store[4].unhover(onHover,offHover);
            
            this.sector.stop();
            this.sector.attr({transform: ''});
            this.sector.animate({transform: 's100 100 ' + this.sector.cX + this.sector.cY}, 1000, 'linear', function() {
                this.paper.clear();
                svgGraph.setupSidebar2();
            });
            
        });
    },
    // Primary interface
    setupSidebar: function() {
        // sidebar storage setup
        sidebar = this.paper.set();
        sidebar.push(this.paper.rect(0,0,305,this.maxHeight).attr({stroke: 0, fill: '#fff'}));
        
        for (var key in diskData) {
            var obj = diskData[key];
            
            // Creates object and stores it inside sibebar for each line item
            obj['sidebar'] = this.setupBox(key,obj['text']);
        }
        
        // Pie hover placed here to prevent conflicts with being dumped into the DOM multiple times
        //this.pieHover();
        //this.pieClick();
    },
    // Secondary interface
    setupSidebar2: function() {
        this.sidebar = [];
        sidbar = this.paper.set();
        this.paper.rect(0,0,305,this.maxHeight).attr({stroke: 0, fill: '#fff'});
        
        for (var key in diskData) {
            
            var obj = diskData[key];
            // Creates object and stores it inside sibebar for each line item
            this.setupBox2(key,obj['text']);
        }
    },
    setupBox2: function(num,text) {
        blockW1 = 48;
        blockW2 = 228;
        height = 27;
        
        // Setup y value
        if (num === '01') y = 0; // if ! counter = 1 then calculate height w gap and numbers
        else y = (parseFloat(num) - 1) * 13 + (parseFloat(num) - 1) * height;
        
        if (num.length < 2) num = '0' + num;
        
        // create group
        var store = this.paper.set();
        
        store.push(
            this.paper.rect(0, y, blockW1, height).attr({'fill': this.cSidebarOff, 'stroke': false}), // Left box
            this.paper.rect(53, y, blockW2, height).attr({'fill': this.cSidebarOff, 'stroke': false}), // Right box
            this.paper.text(24, y+14, num).attr({ 'font-size': 24, 'font-family': 'Arial, Helvetica, sans-serif', 'fill': this.cTextOff }), // Number
            this.paper.text(67, y+14, text).attr({ 'font-size': 12, 'font-weight': 'bold', 'font-family': 'Arial, Helvetica, sans-serif', 'fill': this.cTextOff, 'text-anchor': 'start' }), // Text
            this.pie[0][(parseFloat(num) - 1)]
        );
        
        sidebar.push(store[0],store[1],store[2],store[3]);
        this.sidebar.push(store);
        
        // Infographic hover
        BackOn = this.cSidebarOn;
        BackOff = this.cSidebarOff;
        TextOn = this.cTextOn;
        TextOff = this.cTextOff;
        ms = this.timerHover;
        rad = Math.PI / 180;
        distance = 45;
        
        // Default hover
        var onHover = function() {
            if (store[0].attrs['fill'] != '#2ea6e1') {
                document.body.style.cursor = 'pointer';
                        
                // Animate sector
                store[0].animate({'fill': BackOn}, ms, "linear");
                store[1].animate({'fill': BackOn}, ms, "linear");
                store[2].animate({'fill': TextOn}, ms, "linear");
                store[3].animate({'fill': TextOn}, ms, "linear");
            }
        }
        
        var offHover = function(store0,store1,store2,store3,store4) {
            document.body.style.cursor = '';
            if (store[0].attrs['fill'] != '#2ea6e1') {
                store[0].animate({'fill': BackOff}, ms, "linear");
                store[1].animate({'fill': BackOff}, ms, "linear");
                store[2].animate({'fill': TextOff}, ms, "linear");
                store[3].animate({'fill': TextOff}, ms, "linear");
            }
        }
        
        store.hover(onHover, offHover);
        
        // Click setup
        store.click(function () {
            document.body.style.cursor = '';
            
            //sidebar.toFront();
            store.unhover(onHover,offHover);
            
            this.paper.clear();
            this.paper.rect(0,-1,1000,1000).attr({fill: '#2ea6e1'});
            svgGraph.setupSidebar2();
            number = parseFloat(num) - 1;
            svgGraph.selectSidebar(number);
            svgGraph.pieNavs();
        });
    },
    setupBox: function(num,text) {
        
        // Set values, should be in top of object
        blockW1 = 48;
        blockW2 = 228;
        height = 27;
        
        // Setup y value
        if (num === '1') y = 0; // if ! counter = 1 then calculate height w gap and numbers
        else y = (parseFloat(num) - 1) * 13 + (parseFloat(num) - 1) * height;
        
        if (num.length < 2) num = '0' + num;
        
        // create group
        var store = this.paper.set();
        
        store.push(
            this.paper.rect(0, y, blockW1, height).attr({'fill': this.cSidebarOff, 'stroke': false}), // Left box
            this.paper.rect(53, y, blockW2, height).attr({'fill': this.cSidebarOff, 'stroke': false}), // Right box
            this.paper.text(24, y+14, num).attr({ 'font-size': 24, 'font-family': 'Arial, Helvetica, sans-serif', 'fill': this.cTextOff }), // Number
            this.paper.text(67, y+14, text).attr({ 'font-size': 12, 'font-weight': 'bold', 'font-family': 'Arial, Helvetica, sans-serif', 'fill': this.cTextOff, 'text-anchor': 'start' }), // Text
            this.pie[0][(parseFloat(num) - 1)]
        );
        
        sidebar.push(store[0],store[1],store[2],store[3]);
        
        // Store object group for usage later in pie sector
        this.pie[0][(parseFloat(num) - 1)].store = store;
        
        // Infographic hover
        BackOn = this.cSidebarOn;
        BackOff = this.cSidebarOff;
        TextOn = this.cTextOn;
        TextOff = this.cTextOff;
        ms = this.timerHover;
        rad = Math.PI / 180;
        distance = 45;
        
        // Default hover
        var onHover = function() {
            document.body.style.cursor = 'pointer';
                    
            // Animate sector
            store[0].animate({'fill': BackOn}, ms, "linear");
            store[1].animate({'fill': BackOn}, ms, "linear");
            store[2].animate({'fill': TextOn}, ms, "linear");
            store[3].animate({'fill': TextOn}, ms, "linear");
            
            // Animate pie
            // Can this be stored in a function somewhere else and have the variable passed?
            // Current problem is you can't reference a this function here, hover would need to be re-written to do so
            store[4].stop();
            
            if (store[4].attrs.fillO == null) store[4].attrs.fillO = store[4].attrs.fill;
            
            var rad = Math.PI / 180;
            var distance = 45;
            var popangle = store[4].mangle;
            store[4].oX = store[4].cx;
            store[4].oY = store[4].cy;
            
            var xShiftTo = distance*Math.cos(-popangle * rad);
            var yShiftTo = distance*Math.sin(-popangle * rad);
            store[4].animate({transform: "t" + xShiftTo + " " + yShiftTo, 'fill': '#2ea6e1'}, 300, "linear");
        }
        
        var offHover = function(store0,store1,store2,store3,store4) {
            document.body.style.cursor = '';
            store[0].animate({'fill': BackOff}, ms, "linear");
            store[1].animate({'fill': BackOff}, ms, "linear");
            store[2].animate({'fill': TextOff}, ms, "linear");
            store[3].animate({'fill': TextOff}, ms, "linear");
            store[4].animate({transform: '', 'fill': store[4].attrs.fillO}, 300, "linear");
        }
        
        store.hover(onHover, offHover);
        
        // Click setup
        store.click(function () {
            document.body.style.cursor = '';
            
            store[4].toFront();
            sidebar.toFront();
            store.unhover(onHover,offHover);
            
            store[4].attr({transform: ''});
            store[4].animate({transform: 's100 100 ' + store[4].cX + store[4].cY}, 1000, 'linear', function() {
                this.paper.clear();
                this.paper.rect(0,-1,1000,1000).attr({fill: '#2ea6e1'});
                
                svgGraph.setupSidebar2();
                number = parseFloat(num) - 1;
                
                svgGraph.selectSidebar(number);
                svgGraph.pieNavs();
            });
        });
    
        return store;
    },
    selectSidebar: function(num) {
        
        // Exception handeling
        count = -1;
        for (var l in diskData) {
            count += 1;
        }
        
        if (num < 0) {
            num = count;
        }
        else if (num > count) {
            num = 0;
        }
        
        // set current num reference
        this.current = num;
        
        // startup new
        this.sidebar[num][0].attr({'fill': '#2ea6e1'});
        this.sidebar[num][1].attr({'fill': '#2ea6e1'});
        this.sidebar[num][2].attr({'fill': '#fff'});
        this.sidebar[num][3].attr({'fill': '#fff'});
        
        this.textOutput(num);
    },
    
    pieNavs: function() {
        // create background image to wrap around pie
        this.paper.circle(800,450,100).attr({'fill': '#fff', 'stroke': '', 'opacity': .2});
        
        // create pie with 3 sectors
        this.pieNav = this.paper.piechart(800, 450, 80, [18, 17, 65], {colors: ['#d8e9f8','#8fc4ec','#30a5e0']});
        this.pieNav.attr({'stroke': false});
        
        // Add text and merge into a group with its title
        prev = this.paper.set();
        next = this.paper.set();
        other = this.paper.set();
        
        prev.push(
            this.paper.text(783, 400, 'prev').attr({'fill': '#999', 'stroke': false, 'text-anchor': 'start', 'font-size': '16px'}).toFront(),
            this.paper.getById(this.pieNav[0][0].id)
        );
        next.push(
            this.paper.text(830, 430, 'next').attr({'fill': '#fff', 'stroke': false, 'text-anchor': 'start', 'font-size': '16px'}).toFront(),
            this.paper.getById(this.pieNav[0][1].id)
        );
        other.push(
            this.paper.text(760, 475, 'close').attr({'fill': '#fff', 'stroke': false, 'text-anchor': 'start', 'font-size': '16px'}).toFront(),
            this.paper.getById(this.pieNav[0][2].id)
        );
        
        // Attach hover events
        var pieOn = function() {
            document.body.style.cursor = 'pointer';
            if (! this.sector.color) this.sector.color = this.sector.attrs.fill;
            this.sector.animate({'fill': '#333'},300);
        }
        var pieOut = function() {
            document.body.style.cursor = '';
            this.sector.animate({'fill': this.sector.color},300);
        }
        this.pieNav.hover(pieOn, pieOut);
        
        var prevOn = function() {
            document.body.style.cursor = 'pointer';
            if (! prev[1].color) prev[1].color = prev[1].attrs.fill;
            prev[1].animate({'fill': '#333'},300);
        }
        var prevOut = function() {
            document.body.style.cursor = '';
            prev[1].animate({'fill': prev[1].color},300);
        }
        prev.hover(prevOn, prevOut);
        
        var nextOn = function() {
            document.body.style.cursor = 'pointer';
            if (! next[1].color) next[1].color = next[1].attrs.fill;
            next[1].animate({'fill': '#333'},300);
        }
        var nextOut = function() {
            document.body.style.cursor = '';
            next[1].animate({'fill': next[1].color},300);
        }
        next.hover(nextOn, nextOut);
        
        var closeOn = function() {
            document.body.style.cursor = 'pointer';
            if (! other[1].color) next[1].color = other[1].attrs.fill;
            other[1].animate({'fill': '#333'},300);
        }
        var closeOut = function() {
            document.body.style.cursor = '';
            other[1].animate({'fill': other[1].color},300);
        }
        other.hover(closeOn, closeOut);
        

                // Run basic setup to restart everything
        prev.click(function() {
            svgGraph.paper.clear();
            svgGraph.paper.rect(0,-1,1000,1000).attr({fill: '#2ea6e1'});
            svgGraph.setupSidebar2();
            svgGraph.current -= 1;
            svgGraph.selectSidebar(svgGraph.current);
            svgGraph.pieNavs();
        });
        next.click(function() {
            svgGraph.paper.clear();
            svgGraph.paper.rect(0,-1,1000,1000).attr({fill: '#2ea6e1'});
            svgGraph.setupSidebar2();
            svgGraph.current += 1;
            svgGraph.selectSidebar(svgGraph.current);
            svgGraph.pieNavs();
        });
        other.click(function() {
            svgGraph.paper.clear();
            svgGraph.setupPie();
            svgGraph.setupSidebar();
        });
        this.pieNav.click(function() {
            if(this.sector == prev[1]) {
                svgGraph.paper.clear();
                svgGraph.paper.rect(0,-1,1000,1000).attr({fill: '#2ea6e1'});
                svgGraph.setupSidebar2();
                svgGraph.current -= 1;
                svgGraph.selectSidebar(svgGraph.current);
                svgGraph.pieNavs();
            }
            if(this.sector == next[1]) {
                svgGraph.paper.clear();
                svgGraph.paper.rect(0,-1,1000,1000).attr({fill: '#2ea6e1'});
                svgGraph.setupSidebar2();
                svgGraph.current += 1;
                svgGraph.selectSidebar(svgGraph.current);
                svgGraph.pieNavs();
            }
            if(this.sector == other[1]) {
                svgGraph.paper.clear();
                svgGraph.setupPie();
                svgGraph.setupSidebar();
            }
        });
    },
    textOutput: function(num) {
        // Setup variables
        num += 1;
        this.textX = 330;
        this.textY = 40;
        this.textY1 = this.textY + 30;
        this.textY2 = this.textY1 + 30;
        
        // Insert SVG elements and store in a group
        if(this.text) this.text.clear();
        this.text = this.paper.set();
        this.text.push(
            this.paper.text(this.textX, this.textY, diskData[num].text.toUpperCase()).attr({'font-weight': 'bold', 'fill': '#fff', 'stroke': false, 'text-anchor': 'start', 'font-size': '25px', 'opacity': 0}), // header
            this.paper.rect(this.textX, this.textY1, 580, 1).attr({'fill': '#fff', 'stroke': '', 'opacity': 0}) // divider
        );
        
        // Break text into 60 character lines
        this.maxChar = 60;
        // Store each word in an array
        this.textStrings = diskData[num].desc.split(' ');
        this.textDump = '';
        
        // For each array element
        countTotal = (this.textStrings).length;
        countText = 0;
        for (var word in this.textStrings) {
            if (countText + 1 == countTotal) {
                this.textDump += ' ' + this.textStrings[word];
                this.text.push(
                    this.paper.text(this.textX, this.textY2, this.textDump).attr({'fill': '#fff', 'stroke': false, 'text-anchor': 'start', 'font-size': '18px', 'opacity': 0})
                );
            }
            else if ( this.textStrings[word].length + this.textDump.length > this.maxChar ) {
                this.textDump += ' ' + this.textStrings[word];
                this.text.push(
                    this.paper.text(this.textX, this.textY2, this.textDump).attr({'fill': '#fff', 'stroke': false, 'text-anchor': 'start', 'font-size': '18px', 'opacity': 0})
                );
                this.textDump = '';
                this.textY2 += 27;
            }
            else {
                this.textDump += ' ' + this.textStrings[word];
            }
            countText++;
        };
        
        this.text.animate({'opacity': 1},300);
    }
});


var svgGraph;
window.onload = function() {
    //var prev;
    //var next;
    //var close;
    if( !navigator.userAgent.match(/Android/i) ||
    !navigator.userAgent.match(/webOS/i) ||
    !navigator.userAgent.match(/iPhone/i) ||
    !navigator.userAgent.match(/iPod/i) ||
    !navigator.userAgent.match(/BlackBerry/)
    ){
        $j('#mimicDisk .assistive-text').hide();
        svgGraph = new Infographic();
        svgGraph.setup();
        
        if (window.innerWidth > 900) {
            $j('#mimicDisk svg').show();
            $j('.diskItem').hide();
        }
        else {
            $j('#mimicDisk svg').hide();
            $j('.diskItem').show();
        }
    }

    
    // Add additional logic to resize SVG image on window resize
    window.onresize = function(event) {
        if (window.innerWidth > 1110) {
            $j('#mimicDisk svg').show();
            $j('.diskItem').hide();
            
            // Setup width
            svgGraph.width = window.innerWidth;
            if (svgGraph.width > svgGraph.maxWidth) svgGraph.width = svgGraph.maxWidth;
            
            // Setup height by aspect ratio
            svgGraph.widthPer = svgGraph.width / svgGraph.maxWidth;
            svgGraph.height = svgGraph.widthPer * svgGraph.maxHeight;
            
            svgGraph.paper.setSize(svgGraph.width,svgGraph.height);
        }
        else {
            $j('#mimicDisk svg').hide();
            $j('.diskItem').show();
        }
    }
    
}