//document ready
jQuery(function () {

    /***** array to create timeline - first index in is the timeline label, second show/hide state on load, 
    third is the section that the individual box belongs to on the timeline(0 = savings, 1 = planning, 2 = paying, 
    3 = managing) *****/
    var tl_array = [
    /* ["BIRTH", true, 0],
    ["START\n SAVING", true, 0],
    ["", false, 0],
    ["", false, 0],
    ["", false, 1],
    ["PLAN FOR\n COLLEGE", true, 1],
    ["", false, 1],
    ["GRADUATE FROM\n HIGH SCHOOL", true, 1],
    ["", false, 2],
    ["", false, 2],
    ["", false, 2],
    ["", false, 2],
    ["GRADUATE\n FROM COLLEGE", true, 3],
    ["", false, 3],
    ["", false, 3],
    ["FURTHER\n EDUCATION", true, 3] */
		];
    var currentBox;
    var rectLabel;
    var showLabel;
    var boxLink;
    var showTT;
    var showMsg;
    var box;

    //build out the timeline array pulling in values from dom
    $('div.box').each(function (index, value) {
        var idx = index;
        currentBox = $(this).attr('id');
        rectLabel = $('#' + currentBox + ' .label_text').html();
        //rectLabel = rectLabel.replace('<br>','\n');
        showLabel = $('#' + currentBox + ' .label_show').html();
        boxLink = $('#' + currentBox + ' .box_link').html();
        showTT = $('#' + currentBox + ' .tooltip_show').html();
        showMsg = $('#' + currentBox + ' .label_msg').html();
        box = [rectLabel, showLabel, boxLink, showTT, showMsg];
        //alert(currentBox);
        tl_array.push(box);
        //alert(tl_array[0][4]);
        //console.log(index + ':' + rectLabel + ':' + boxLink);
    });

    var items = tl_array.length;
    var tooltipFlip = items - 2;
    var section = 0;
    var paper = Raphael("timeline", 940, 70);
    var start = 0;
    //var rect = 232 / items;
    var rect = 232.5 / 4;
    var counter = 0;
    var sectionPad = 0;
    var currentSection = 0;
    var section = 'section' + currentSection;
    var i = 0;
    //var currentSection = tl_array[i][2];
    var prevSection;
    var section = 0;
    var section1 = 0;
    var section2 = 0;
    var section3 = 0;

    //loop through each index in the array and create timeline
    jQuery.each(tl_array, function () {

        TimelineSection(tl_array, paper, rect, 940, counter, rectLabel, showMsg);
        //console.log(counter);
        counter++;
    });

    //Creates a single section on the timeline(individual box, markers, labels, and tooltip)
    function TimelineSection(array, paper, rect, width, counter, rectLabel, showMsg) {

        var offset = 1;
        var rectOffsetY = 55;
        var tickOffsetY = 54;
        var tickPad = (rect - 2) / 6;
        var tickColor = "999999";
        var rectCenter = rect / 2;
        var paperWidth = width;
        var formatTicks = (((paperWidth * start) + 1.1) + (counter * rect));
        var formatCircles = (((paperWidth * start) + 1.1) + ((counter * rect) + 28.5));
        var textOffestY = 12;
        var textOffsetX = (paperWidth * start) + (rect * counter) + rectCenter;
        var ttOffsetX = (paperWidth * start) + ((rect * counter) + (rectCenter - 1));
        var ttFlipOffsetX = (paperWidth * start) + ((rect * counter) + (rectCenter - 101));
        var ttLabelOffsetY = (paperWidth * start) + (rect * counter) + (rectCenter + 50);
        var ttLabelOffsetX = 22;
        var rectLabel = array[counter][0];
        rectLabel = rectLabel.replace(('<BR>'), '\n');
        rectLabel = rectLabel.replace(('<br>'), '\n');
        rectLabel = rectLabel.toUpperCase();
        var showLabel = array[counter][1];
        var target = array[counter][2];
        var tooltipShow = array[counter][3];
        var showMsg = array[counter][4];
        var rectLabelMsg = array[counter][4];
        rectLabelMsg = rectLabelMsg.replace(('<BR>'), '\n');
        rectLabelMsg = rectLabelMsg.replace(('<br>'), '\n');
        var ttText = rectLabelMsg;
        var extraPad = 0;
        var rectOffsetX = paperWidth * start;

        if (counter >= 4) {
            rectOffsetX = (paperWidth * .25) - 231.4;
            formatTicks = (((paperWidth * .25) + offset) + (counter * rect) - 231.4);
            formatCircles = (((paperWidth * .25) + offset) + ((counter * rect) + 28.5) - 231.4);
            textOffsetX = (paperWidth * .25) + (rect * counter) + (rectCenter - 231.4);
            ttOffsetX = ttOffsetX + 4;
            ttLabelOffsetY = ttLabelOffsetY + 4;
        }
        if (counter >= 8) {
            rectOffsetX = (paperWidth * .50) - ((231 * 2) + offset);
            formatTicks = (((paperWidth * .50) + offset) + (counter * rect) - (231 * 2) - offset);
            formatCircles = (((paperWidth * .50) + 1.1) + ((counter * rect) + 28.5) - (231 * 2) - offset);
            textOffsetX = (paperWidth * .50) + (rect * counter) + (rectCenter - (231 * 2) - offset);
            ttOffsetX = ttOffsetX + 4;
            ttLabelOffsetY = ttLabelOffsetY + 4;
        }
        if (counter >= 12) {
            rectOffsetX = (paperWidth * .75) - ((230.8 * 3) + (offset + 1));
            formatTicks = (((paperWidth * .75) + offset) + (counter * rect) - (230.8 * 3) - (offset + 1));
            formatCircles = (((paperWidth * .75) + 1.1) + ((counter * rect) + 28.5) - (230.8 * 3) - (offset + 1));
            textOffsetX = (paperWidth * .75) + (rect * counter) + (rectCenter - (230.8 * 3) - (offset + 1));
            ttOffsetX = ttOffsetX + 4;
            ttLabelOffsetY = ttLabelOffsetY + 4;
            ttFlipOffsetX = ttFlipOffsetX + 8;
        }

        //create box with and without an anchor link
        if (target != "") {
            //Timeline box
            var box = paper.rect(rectOffsetX + ((rect) * counter) + offset, rectOffsetY, rect - (offset * 2), 11).attr({
                //'gradient':         '90-#0083be-#fff',
                'stroke-width': .6
				, 'stroke': '#2e9dcb'
				, 'fill': '90-#0083be-#fff'
				, 'href': target
				, 'fill-opacity': 1.0,
                'cy': 20
            });
        } else {
            //Timeline box
            var box = paper.rect(rectOffsetX + ((rect) * counter) + offset, rectOffsetY, rect - (offset * 2), 11).attr({
                //'gradient':         '90-#0083be-#fff',
                'stroke-width': .6
				, 'stroke': '#2e9dcb'
				, 'fill': '90-#0083be-#fff'
				, 'fill-opacity': 1.0,
                'cy': 20
            });

        }
        //Timeline labels
        var label = paper.text(textOffsetX, textOffestY, rectLabel).attr({
            //'fill': '#b3c6c4',  //grey
            'fill': '#3d737d', //blue
            'font-size': 11,
            //'font-family': 'EngschriftDIND'
            'font-family': 'arial narrow'
        });

        if (showLabel == 0) {
            label.hide();
        }

        //Circle under label
        var dot = paper.circle(formatCircles, 33, 2).attr({
            'stroke-width': .4,
            'stroke': tickColor
        });
        dot.hide();

        if (showLabel == 1) {
            dot.show();
        }

        //First tick
        var tick1 = paper.path("M " + formatTicks + " " + tickOffsetY + " l 0 -8 V").attr({
            'stroke-width': .2,
            'stroke': tickColor
        });

        //Second tick
        var tick2 = paper.path("M " + (formatTicks + tickPad) + " " + tickOffsetY + " l 0 -4 V").attr({
            'stroke-width': .2,
            'stroke': tickColor
        });

        //Third tick
        var tick3 = paper.path("M " + (formatTicks + (tickPad * 2)) + " " + tickOffsetY + " l 0 -4 V").attr({
            'stroke-width': .2,
            'stroke': tickColor
        });

        //Center Tick
        var tick4 = paper.path("M " + (formatTicks + ((tickPad * 3) + 0.5)) + " " + tickOffsetY + " l 0 -20").attr({
            'stroke-width': .2,
            'stroke': tickColor
        });

        //Fourth tick
        var tick5 = paper.path("M " + (formatTicks + (tickPad * 4)) + " " + tickOffsetY + " l 0 -4 V").attr({
            'stroke-width': .2,
            'stroke': tickColor
        });

        //Fifth tick
        var tick6 = paper.path("M " + (formatTicks + (tickPad * 5)) + " " + tickOffsetY + " l 0 -4 V").attr({
            'stroke-width': .2,
            'stroke': tickColor
        });

        //last tick
        var tick7 = paper.path("M " + (formatTicks + (tickPad * 6) - .5) + " " + tickOffsetY + " l 0 -8 V").attr({
            'stroke-width': .2,
            'stroke': tickColor
        });

        var tt_label = paper.text(ttLabelOffsetY, ttLabelOffsetX, ttText).attr({
            //'fill': '#b3c6c4',  //grey
            'fill': '#3d737d', //blue
            'font-size': 11,
            //'font-family': 'EngschriftDIND'
            'font-family': 'arial narrow',
            'width': 90,
            'text-anchor': 'middle'
        });

        /*label.hide();*/
        tt_label.hide();

        if (counter == tooltipFlip || counter > tooltipFlip) {
            tt_label = paper.text(ttLabelOffsetY - 103, ttLabelOffsetX, ttText).attr({
                //'fill': '#b3c6c4',  //grey
                'fill': '#3d737d', //blue
                'font-size': 11,
                'font-family': 'arial narrow',
                'width': 90,
                'text-anchor': 'middle'
            });

            tt_label.hide();
        }

        //tooltip
        var tooltip = paper.image('assets/images/tooltip_body.png', ttOffsetX, 5, 103, 34);
        var tooltip_tab = paper.image('assets/images/tooltip_tab.png', ttOffsetX, 39, 7, 5);

        tooltip_tab.hide();
        tooltip.hide();

        //adjust for tooltips on the right side of timeline
        if (counter == tooltipFlip || counter > tooltipFlip) {
            var tooltip = paper.image('assets/images/tooltip_body2.png', ttFlipOffsetX, 5, 103, 34);
            var tooltip_tab = paper.image('assets/images/tooltip_tab2.png', ttOffsetX - 8, 39, 7, 5);
            tooltip.hide();
            tooltip_tab.hide();
        }




        //hide
        //if(showLabel == 'hide'){
        //label.hide();
        /* tooltip_tab.hide();
        tooltip.hide();
        tt_label.hide();
        dot.hide(); */
        //}



        function rectHover() {

            this.animate({ fill: '#a4c332', height: 19, y: 47 }).attr({
                'cursor': "pointer",
                'opacity': 100
            });
            //if(showLabel == 'show'){
            tooltip.show();
            tooltip.toFront();
            tt_label.show();
            tt_label.toFront();
            tooltip_tab.show();
            //}
            if (tooltipShow == 0) {
                tooltip.hide();
                tooltip.toBack();
                tt_label.hide();
                tt_label.toBack();
                tooltip_tab.hide();
            }
            tick1.hide();
            tick2.hide();
            tick3.hide();
            tick4.hide();
            tick5.hide();
            tick6.hide();
            tick7.hide();
            dot.hide();
            label.hide();
        }

        function rectUnHover() {
            this.animate({ fill: '90-#0083be-#fff', height: 11, y: 55 }).attr({

            });

            /* label = paper.text(textOffsetX,textOffestY, rectLabel).attr({
            //'fill': '#b3c6c4',  //grey
            'fill': '#3d737d', //blue
            'font-size': 11,
            //'font-family': 'EngschriftDIND'
            'font-family': 'arial narrow'
            }); */
            label.show();
            tick1.show();
            tick2.show();
            tick3.show();
            tick4.show();
            tick5.show();
            tick6.show();
            tick7.show();
            tooltip.hide();
            tt_label.hide();
            tooltip_tab.hide();

            if (showLabel == 0) {
                label.hide();
                tt_label.hide();
                //dot.hide();
            }
            if (showLabel == 1) {
                dot.show();
            }
        }
        //shows and hides on hover of each box
        box.hover(rectHover, rectUnHover)
    };



});