$(document).ready(function() {

    var diagramCount = 0; //increments for each diagram drawn

    /* For each spiderDiagram (class) div on the page */
    $('.spiderDiagram').each(function() {
        spiderDiagram = this; //this diagram
        diagramCount++; //increment diagram count (if there's more than one per page)

        //get radius of a main and child node
        var childNodeRadius = ($(spiderDiagram).find('.nodes li:not(:first)').width() + 6) / 2;
        var mainNodeRadius = ($(spiderDiagram).find('.nodes li:first').width() + 6) / 2;

        var s_top = $(spiderDiagram).height() / 2; //vertical center of container div
        var s_left = $(spiderDiagram).width() / 2; //horizontal center of container div
        //work out max radius of diagram depending on size of container div
        var radius = (s_top <= s_left ? (s_top - childNodeRadius) : (s_left - childNodeRadius));

        /* Set main node top and left */
        $(spiderDiagram).find('.nodes li:first').css("top", s_top - mainNodeRadius);
        $(spiderDiagram).find('.nodes li:first').css("left", s_left - mainNodeRadius);

        /* Find amount of degrees per node */
        var childNodecount = $(spiderDiagram).find('.nodes li:not(:first)').length;
        var deg = 360 / childNodecount;

        var t_deg = 0; //degree count - when reaches 90 it gets reset to 0. Used in each segment
        var total_deg = 0; //total degree count - doesn't get reset.
        var seg = 1; // There are 4 segments in the circle
        var c_nodes = 0; //count nodes as we run through each of them (used for id)
        var bottomNodeTopVal = 0; //records the "Top" value for the most southernly node to calculate resize

        var first; var firstTop; var firstLeft;
        /* For each spiderDiagram child node within the diagram */
        $(spiderDiagram).find('.nodes li:not(:first)').each(function() {
            if (seg == 1 || seg == 3) {
                var b_deg = Math.abs(t_deg - 90) * Math.PI / 180;
            }
            else {
                var b_deg = t_deg * Math.PI / 180;
            }

            var top = Math.sin(b_deg) * radius; //calculate Oposite side (Sine - SOH)
            var left = Math.sqrt((radius * radius) - (top * top)); //calulate Adjacent side

            /* Set top and left depending on which segment we're in */
            if (seg == 1) {
                $(this).css("left", s_left + left - childNodeRadius);
                $(this).css("top", s_top - top - childNodeRadius);
            }
            else if (seg == 2) {
                $(this).css("top", s_top + top - childNodeRadius);
                $(this).css("left", s_left + left - childNodeRadius);
                //record "Top" value if this is the most southernly node
                bottomNodeTopVal < (s_top + top) ? bottomNodeTopVal = (s_top + top) : null;
            }
            else if (seg == 3) {
                $(this).css("top", s_top + top - childNodeRadius);
                $(this).css("left", s_left - left - childNodeRadius);
                //record "Top" value if this is the most southernly node
                bottomNodeTopVal < (s_top + top) ? bottomNodeTopVal = (s_top + top) : null;
            }
            else if (seg == 4) {
                $(this).css("left", s_left - left - childNodeRadius);
                $(this).css("top", s_top - top - childNodeRadius);
            }

            //Draw and rotate line for this node.
            $(spiderDiagram).append('<div class="lineOuter" id="lineOuter' + c_nodes + 'Dia' + diagramCount + '"><div class="line"></div></div>');
            $('#lineOuter' + c_nodes + 'Dia' + diagramCount).css("height", radius * 2);
            $('#lineOuter' + c_nodes + 'Dia' + diagramCount).rotate(total_deg);

            //increment degree counters
            total_deg += deg;
            t_deg += deg;

            //reset t_deg if we've gone past 90 and also incrememnt which segment we're in
            if (t_deg >= 90) {
                t_deg -= 90;
                seg++;
            }

            c_nodes++; //increment for id
        });

        /* position the line divs in center of container div */
        $(spiderDiagram).find('.lineOuter').css("top", s_top - radius);
        $(spiderDiagram).find('.lineOuter').css("left", s_left - ($('.line').width() / 2));

        /* Resize height of container div */
        if (bottomNodeTopVal > s_top) {
            $(spiderDiagram).css('height', bottomNodeTopVal + childNodeRadius + 25);
        }
        else {
            $(spiderDiagram).css('height', s_top + mainNodeRadius + 25);
        }

    });



    (function(d) { d.each(["backgroundColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "outlineColor"], function(f, e) { d.fx.step[e] = function(g) { if (!g.colorInit) { g.start = c(g.elem, e); g.end = b(g.end); g.colorInit = true } g.elem.style[e] = "rgb(" + [Math.max(Math.min(parseInt((g.pos * (g.end[0] - g.start[0])) + g.start[0]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[1] - g.start[1])) + g.start[1]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[2] - g.start[2])) + g.start[2]), 255), 0)].join(",") + ")" } }); function b(f) { var e; if (f && f.constructor == Array && f.length == 3) { return f } if (e = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)) { return [parseInt(e[1]), parseInt(e[2]), parseInt(e[3])] } if (e = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)) { return [parseFloat(e[1]) * 2.55, parseFloat(e[2]) * 2.55, parseFloat(e[3]) * 2.55] } if (e = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)) { return [parseInt(e[1], 16), parseInt(e[2], 16), parseInt(e[3], 16)] } if (e = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)) { return [parseInt(e[1] + e[1], 16), parseInt(e[2] + e[2], 16), parseInt(e[3] + e[3], 16)] } if (e = /rgba\(0, 0, 0, 0\)/.exec(f)) { return a.transparent } return a[d.trim(f).toLowerCase()] } function c(g, e) { var f; do { f = d.curCSS(g, e); if (f != "" && f != "transparent" || d.nodeName(g, "body")) { break } e = "backgroundColor" } while (g = g.parentNode); return b(f) } var a = { aqua: [0, 255, 255], azure: [240, 255, 255], beige: [245, 245, 220], black: [0, 0, 0], blue: [0, 0, 255], brown: [165, 42, 42], cyan: [0, 255, 255], darkblue: [0, 0, 139], darkcyan: [0, 139, 139], darkgrey: [169, 169, 169], darkgreen: [0, 100, 0], darkkhaki: [189, 183, 107], darkmagenta: [139, 0, 139], darkolivegreen: [85, 107, 47], darkorange: [255, 140, 0], darkorchid: [153, 50, 204], darkred: [139, 0, 0], darksalmon: [233, 150, 122], darkviolet: [148, 0, 211], fuchsia: [255, 0, 255], gold: [255, 215, 0], green: [0, 128, 0], indigo: [75, 0, 130], khaki: [240, 230, 140], lightblue: [173, 216, 230], lightcyan: [224, 255, 255], lightgreen: [144, 238, 144], lightgrey: [211, 211, 211], lightpink: [255, 182, 193], lightyellow: [255, 255, 224], lime: [0, 255, 0], magenta: [255, 0, 255], maroon: [128, 0, 0], navy: [0, 0, 128], olive: [128, 128, 0], orange: [255, 165, 0], pink: [255, 192, 203], purple: [128, 0, 128], violet: [128, 0, 128], red: [255, 0, 0], silver: [192, 192, 192], white: [255, 255, 255], yellow: [255, 255, 0], transparent: [255, 255, 255]} })(jQuery);


    /* Change background colour for  */
    var darkColor = "";
    var lightColor = "";

    $(".nodes a li").hover(
      function() {
          darkColor = $(this).parent().parent().parent().attr("rel");
          if (darkColor != undefined) {
              lightColor = $(this).parent().parent().parent().attr("rev");
              if ($(this).css('background-color') == "transparent") {
                  $(this).css('background-color', lightColor);
              }
              $(this).stop(true, false).animate({ backgroundColor: darkColor }, 800);
          }
      },
      function() {
          if (darkColor != undefined) {
              $(this).stop(true, false).animate({ backgroundColor: lightColor }, 800);
          }
      }
    );



});