var WS = {
    pageX: 0,
    pageY: 0,
    tooltipVisible: false,

    relight: function(event) {
        if (WS.tooltipVisible) {
            WS.tooltip.offset({left: event.pageX - 150, top: event.pageY + 30});
            WS.tooltip.css('visibility', 'visible');
        } else {
            WS.tooltip.css('visibility', 'hidden');
        }

        //var offset = $(WS.paper.canvas).offset();
        var offset = $(WS.container).offset();
        var dx = (WS.paper.width / 2 + offset.left) - event.pageX;
        var dy = (WS.paper.height / 2 + offset.top) - event.pageY;
        var ndy = event.pageY - (WS.paper.height / 2 + offset.top);
        var angle = (Math.PI + Math.atan2(ndy, dx)) % (Math.PI * 2);
        //$('#subhead').text(Math.random());
        //element = core.items[0];
        for (var i = 0; i < 6; i++) {
            var orientation = (480 - (i * 60)) % 360;
            var delta = Math.abs(Raphael.rad(orientation) - angle);
            delta = Math.min(Math.PI * 2 - delta, delta);
            var distance = Math.min(Math.sqrt(dx * dx + dy * dy), 1000);
            //console.log(distance);
            var brightness = 0.9 - ((delta / Math.PI) / 3) - (distance / 5000);
            //console.log(brightness);
            triangle_gradient = [
                orientation,
                Raphael.hsb(0, 0, brightness + 0.1),
                Raphael.hsb(0, 0, brightness - 0.2)
            ];
            WS.triangles.items[i].attr('fill', triangle_gradient.join('-'));
            var hue = ((360 + 150 - i * 60) % 360) / 360;
            quadrangle_gradient = [
                orientation,
                Raphael.hsb(hue, 0.5, brightness + 0.1),
                Raphael.hsb(hue, 0.5, brightness - 0.2)
            ];
            WS.quadrangles.items[i].attr('fill', quadrangle_gradient.join('-'));
        }
    },

    getPointAtDistance: function(point, distance, angle) {
        var x = point[0] + Math.cos(Raphael.rad(angle)) * distance;
        var y = point[1] - Math.sin(Raphael.rad(angle)) * distance;
        return [x, y];
    },

    showTooltip: function(event) {
        WS.tooltip.text($('#content section p')[this.index].innerHTML);
        WS.quadrangles.items[this.index].currentGlow.show();
        WS.tooltipVisible = true;
    },

    hideTooltip: function(event) {
        WS.quadrangles.items[this.index].currentGlow.hide();
        WS.tooltipVisible = false;
    },

    init: function() {
        var container = document.getElementById('canvas');
        WS.container = container;
        WS.tooltip = $(document.getElementById('tooltip'));
        var paper = Raphael(container, $(container).width(), $(container).height());
        WS.paper = paper;
        var size = paper.width;
        var center = [paper.width / 2, paper.height / 2];
        WS.triangles = paper.set();
        WS.quadrangles = paper.set();

        var farDirection = +1;
        var nearDirection = -1;

        var labels = $('#content h3 a');
        var labelRotations = [-15, -45, 45, 15, -75, 75];

        for (var i = 0; i < 6; i++) {
            var angle = (480 - (i * 60)) % 360;

            /* TRIANGLES */

            var medianLength = ((size / 3) * Math.sqrt(3)) / 2;
            var farPoint = WS.getPointAtDistance(center, medianLength / 1.5, angle + 30 * farDirection);
            var nearPoint = WS.getPointAtDistance(farPoint, size / 6, angle + 120 * nearDirection);
            var path = [
                'M' + center.join(),
                'L' + farPoint.join(),
                'L' + nearPoint.join(),
                'Z'
            ];
            var triangle = paper.path(path.join(' '));
            triangle.attr({stroke: 'none'});
            WS.triangles.push(triangle);

            /* QUADRANGLES */

            path = [
                'M' + WS.getPointAtDistance(farPoint, size / 50, angle + 0 * farDirection).join(),
                'L' + WS.getPointAtDistance(farPoint, (size - size / 50) / 3, angle + 0 * farDirection).join(),
                'L' + WS.getPointAtDistance(nearPoint, size / 10.5, angle + 30 * nearDirection).join(),
                'L' + WS.getPointAtDistance(nearPoint, size / 50, angle + 30 * nearDirection).join(),
                'Z'
            ];
            var quadrangle = paper.path(path.join(' '));
            quadrangle.attr({
                'stroke': 'none',
                'cursor': 'pointer',
                'href': labels[i].href
            });
            var hue = ((360 + 150 - i * 60) % 360) / 360;
            quadrangle.currentGlow = quadrangle.glow({
                    'width': 20,
                    'color': Raphael.hsb(hue, 0.75, 1)
            });
            quadrangle.currentGlow.hide();
            quadrangle.index = i;
            quadrangle.mouseover(WS.showTooltip);
            quadrangle.mouseout(WS.hideTooltip);
            WS.quadrangles.push(quadrangle);

            /* LABELS */

            var labelPoint = WS.getPointAtDistance(center, size / 3.9, angle + 5 * farDirection);
            var labelText = $.trim($(labels[i]).text());
            var label = paper.text(labelPoint[0], labelPoint[1], labelText.toUpperCase()).toFront();
            label.attr({
                'font-family': 'TitilliumText25L400wt',
                //'fill': 'none',
                'cursor': 'pointer',
                'font-weight': 'bold',
                'font-size': size / 37,
                'fill-opacity': 0.6,
                'href': labels[i].href
            });
            label.rotate(labelRotations[angle / 60]);
            label.index = i;
            label.mouseover(WS.showTooltip);
            label.mouseout(WS.hideTooltip);

            farDirection = -farDirection;
            nearDirection = -nearDirection;
        }

        /* CENTER TRIANGLE */
        path = [
            'M' + WS.getPointAtDistance(center, medianLength / 1.5, 30).join(),
            'L' + WS.getPointAtDistance(center, medianLength / 1.5, 150).join(),
            'L' + WS.getPointAtDistance(center, medianLength / 1.5, 270).join(),
            'Z'
        ];
        var centerTriangle = paper.path(path.join(' '));
        centerTriangle.attr({
            'stroke': 'none',
            'fill': '#fff',
            'opacity': 0,
            'href': labels[6].href
        });
        centerTriangle.toFront();
        centerTriangle.currentGlow = centerTriangle.glow({
            'width': 20,
            'color': Raphael.hsb(0, 0, 1)
        });
        centerTriangle.currentGlow.hide();
        centerTriangle.index = 6;
        centerTriangle.mouseover(WS.showTooltip);
        centerTriangle.mouseout(WS.hideTooltip);
        WS.quadrangles.push(centerTriangle);

        /* CENTER LABEL */

        var core = $('#content h3 a:last');
        var centerLabelText = core.text().toUpperCase();
        centerLabel = paper.text(center[0], center[1], centerLabelText);
        centerLabel.attr({
            'font-family': 'TitilliumText25L400wt',
            //'stroke': '#000',
            //'cursor': 'pointer',
            'href': core.attr('href'),
            'font-weight': 'bold',
            'font-size': size / 25,
            'fill-opacity': 0.6
        });
        centerLabel.index = 6;
        centerLabel.mouseover(WS.showTooltip);
        centerLabel.mouseout(WS.hideTooltip);

        /* SECTIONS */

        sections = $('#content h2');
        var sectionRotations = [0, -60, 60];

        for (var i = 0; i < 3; i++) {
            angle = (450 - 120 * i) % 360;
            var sectionPoint = WS.getPointAtDistance(center, size / 2.5, angle * farDirection);
            var sectionText = $.trim($(sections[i]).text());
            var section = paper.text(sectionPoint[0], sectionPoint[1], sectionText.toUpperCase()).toFront();
            section.attr({
                'font-family': 'TitilliumText25L1wt',
                'fill': '#ffffff',
                'font-size': size / 37,
                'fill-opacity': 0.5
            });
            section.rotate(sectionRotations[i]);
        }

        /* */

        $(document).mousemove(function(event) {
            WS.relight(event);
        });

        WS.relight({pageX: 0, pageY: 0});
        //setInterval(WS.relight, 10);
    }

};