/// <reference path="jquery-1.3.2.min.js" />

var _age;
var _queryStringParams = {};
var _muscleHealthMOA = 'ensure_hd_083111';

$(function() {
    PopulateQueryStringParams();

    if (_queryStringParams["splash"] == "false") {
        QuickHideStep2Splash();
    }
    else {
        $("#screen-2-loading").show();
        setTimeout(HideStep2Splash, 5000);
    }

    draw();
});

function PopulateQueryStringParams() {
    var e,
        d = function(s) { return decodeURIComponent(s.replace(/\+/g, " ")); },
        q = window.location.search.substring(1),
        r = /([^&=]+)=?([^&]*)/g;

    while (e = r.exec(q))
        _queryStringParams[d(e[1])] = d(e[2]);
}

function ValidateCalloutAge() {
    _age = $("#muscle-health-rotator-age").val();

    var regex = new RegExp("^\\d+$");
    
    if (_age == undefined || _age == null || !regex.test(_age) || _age <= 0) {
        $("#muscle-health-rotator-error").show();
    }
    else {
        $("#muscle-health-rotator-error").hide();

        $.fancybox({
            scrolling: "no",
            height: 505,
            width: 856,
            padding: 0,
            margin: 0,
            type: "iframe",
            overlayShadow: true,
            overlayOpacity: 0.7,
            hideOnOverlayClick: false,
            autoScale: false,
            centerOnScroll: true,
            href: "/muscle-health-tool/screen-2.aspx?age=" + _age,
            onClosed: FancyboxClose
        });
    }
    
    return false;
}

function ShowMuscleHealthStep1() {
    $.fancybox({
        scrolling: "no",
        height: 505,
        width: 856,
        padding: 0,
        margin: 0,
        type: "iframe",
        overlayShadow: true,
        overlayOpacity: 0.7,
        hideOnOverlayClick: false,
        autoScale: false,
        centerOnScroll: true,
        href: "/muscle-health-tool/screen-1.aspx",
        onClosed: FancyboxClose
    });

    return false;
}

function FancyboxClose() {
    if ($("#player").length > 0 && ($.browser.safari || $.browser.webkit)) {
        PlayVideo(_muscleHealthMOA);
    }
}

function ValidateToolAge() {
    _age = $("input.start-age").get(0).value;

    var regex = new RegExp("^\\d+$");
    
    if (_age == undefined || _age == null || !regex.test(_age) || _age <= 0) {
        $("#start-error").show();
        return false;
    }
    else {
        $("#start-error").hide();
        return true;
    }

    return false;
}

function HideStep2Splash() {
    $("#screen-2-loading").fadeOut("slow");

    if ($.browser.msie && $.browser.version.substring(0, 1) == "8") {
        $("#loading-background").fadeOut("slow");
        $("#screen-2-load-text").fadeOut("slow");
        $("#screen-2-loader").fadeOut("slow");
        $("#screen-2-content").css({ 'z-index': '1' });
        $("#graph").css({ 'z-index': '1' });
        $("#revigor-callout").fadeIn("slow");
        $("#coupon-callout").fadeIn("slow");
        $(".restart-tool").fadeIn("slow");
        $("#screen-2-left-pane").fadeIn("slow");
        $("#graph-canvas").width("535");
    }
    else {
        $("#loading-background").fadeOut("slow");
        $("#screen-2-load-text").fadeOut("slow");
        $("#screen-2-loader").fadeOut("slow");
        $("#screen-2-content").fadeIn("slow");
    }
}

function QuickHideStep2Splash() {
    $("#screen-2-content").show();
}

/************************************
*       Graph Canvas Code           *
************************************/
var ageOfIncreaseInLoss = 30;
var lineColor = '#ffbc48';
var lineWidth = 3;
var lineOutlineColor = '#ffffff';
var graphBackgroundColor = 'rgba(255,255,255,0)';
var graphOutlineColor = 'rgba(100,0,100,0)';
var graphPointImageSource = '/images/muscle-health-tool/age-circle.png';
var pointTextFont = 'bold 14px Arial';
var pointTextColor = '#ffbc48';
var labelFont = 'bold 12px Arial';
var labelColor = 'white';
var shadowColor = 'rgba(108,33,98,0.15)'; //'#A74099'; //'#b0b0b0';

function calcPercentForAge(age) {
    var percent;
    age = age / 1;
    if (age > 70) {
        percent = ((3 / 2) * age) - 80;
    } else {
        percent = ((2 / 3) * age) - (65 / 3);
    }

    return percent;
}

function draw() {
    var age = _queryStringParams["age"];
    var canvas = $('#graph-canvas')[0];
    if (canvas && canvas.getContext) {
        var pointImage = new Image();
        pointImage.onload = function() {
            var context = canvas.getContext('2d');

            var canvasRect = new Rectangle(0, 0, canvas.width, canvas.height, graphOutlineColor);

            context.clearRect(canvasRect.xPos, canvasRect.yPos, canvasRect.width, canvasRect.height);
            fillRectangle(context, canvasRect);

            var graphRectX = 63.5;
            var graphRectY = 12;
            var graphRect = new Rectangle(graphRectX, graphRectY, 450, 182, graphBackgroundColor);
            fillRectangle(context, graphRect);

            drawStaticLine(context, graphRect);
            drawShadowLine(context, graphRect);
            drawXLabels(context, graphRect);
            drawYLabels(context, graphRect);

            if (age > 39 && age < 81) {
                var imageX = convertAgeToCoord(age, graphRect) - (pointImage.width / 2);
                var percentLoss = calcPercentForAge(age);
                var imageY = findYCoord(percentLoss, graphRect) - (pointImage.height / 2);
                context.drawImage(pointImage, imageX, imageY);

                context.font = pointTextFont;
                context.fillStyle = pointTextColor;
                context.fillText(age, imageX + (pointImage.width / 2) - 9, imageY + (pointImage.height / 2) + 3);
            }

        };
        pointImage.src = graphPointImageSource;
    }    
}

function Rectangle(xPos, yPos, width, height, color) {
    this.xPos = xPos;
    this.yPos = yPos;
    this.width = width;
    this.height = height;
    this.color = color;
}

function drawRectangle(context, rectangle) {
    context.strokeStyle = rectangle.color;
    context.strokeRect(rectangle.xPos, rectangle.yPos, rectangle.width, rectangle.height);
}

function fillRectangle(context, rectangle) {
    context.fillStyle = rectangle.color;
    context.fillRect(rectangle.xPos, rectangle.yPos, rectangle.width, rectangle.height);
}

function drawStaticLine(context, graphRect) {
    context.beginPath();

    var startX = convertAgeToCoord(36, graphRect);
    var startLoss = calcPercentForAge(36);
    var startY = findYCoord(startLoss, graphRect);
    context.moveTo(startX, startY);
    var nextX = convertAgeToCoord(70, graphRect);
    var percentLoss = calcPercentForAge(70);
    var nextY = findYCoord(percentLoss, graphRect);
    context.lineTo(nextX, nextY);

    var lastX = convertAgeToCoord(95, graphRect);
    percentLoss = calcPercentForAge(95);
    var lastY = findYCoord(percentLoss, graphRect);
    context.lineTo(lastX, lastY);

    //change to increase the amount of outline
    context.lineWidth = lineWidth + 4;
    context.lineCap = 'round';
    context.strokeStyle = lineOutlineColor;
    context.stroke();

    context.lineWidth = lineWidth;
    context.lineCap = 'round';
    context.strokeStyle = lineColor;
    context.stroke();

    context.closePath();
}

function drawShadowLine(context, graphRect) {
    context.beginPath();

    var startX = convertAgeToCoord(36, graphRect);
    var startLoss = calcPercentForAge(36);
    var startY = findYCoord(startLoss, graphRect) + 10;
    context.moveTo(startX, startY);
    
    var nextX = convertAgeToCoord(70, graphRect);
    var percentLoss = calcPercentForAge(70);
    var nextY = findYCoord(percentLoss, graphRect) + 10;
    context.lineTo(nextX, nextY);

    var lastX = convertAgeToCoord(94, graphRect);
    percentLoss = calcPercentForAge(94);
    var lastY = findYCoord(percentLoss, graphRect) + 10;
    context.lineTo(lastX, lastY);

    context.lineWidth = lineWidth;
    context.lineCap = 'round';
    context.strokeStyle = shadowColor;
    context.stroke();

    context.closePath(); 
}

function convertAgeToCoord(age, rectangle) {
    var maxAge = 95;
    var minAge = 35;
    var diff = maxAge - minAge;

    var pixelsPerYear = rectangle.width / diff;
    var xCoord = pixelsPerYear * (age - minAge) + rectangle.xPos;

    return xCoord;
}

function findYCoord(yVal, rectangle) {
    var maxPercent = 65;
    var minPercent = 0;

    var diff = maxPercent - minPercent;
    var pixelsPer = rectangle.height / diff;
    var yCoord = pixelsPer * (yVal - minPercent) + rectangle.yPos;

    return yCoord;
}

function drawXLabels(context, rectangle) {
    context.font = labelFont;
    context.fillStyle = labelColor;

    for (var i = 40; i <= 90; i += 10) {
        context.fillText("" + i, convertAgeToCoord(i, rectangle) - 6, 218);
    }
}

function drawYLabels(context, rectangle) {
    context.font = labelFont;
    context.fillStyle = labelColor;
    var numberOfLabels = 5;
    var labelInterval = rectangle.height / numberOfLabels;

    for (var i = 5; i <= 55; i+=10) {
        context.fillText("" + i, 35, findYCoord(i, rectangle) + 4);
    }
}


/************************************
*           MOA Video Code          *
************************************/

function PlayVideo(video) {
    if (video != null) {
        var adsPage = false;

        if (window.location.pathname.indexOf("-ads") != -1) {
            adsPage = true;
        }
    
        $f("player",
            {
                src: "/flash/flowplayer.commercial-3.1.5.swf",
                wmode: 'opaque',              
                onFail: function() {
                    var flashMessage = '<div id="flash_message">' +
                                       '<h2>Flash is required to view this video</h2><br /><br />' +
                                       '<h3>You have no Flash plugin installed</h3><br /><br /> ' +
                                       '<p>Download latest version from <a id="adobe_link" href="" onclick="warnOnLeave(\'http://get.adobe.com/flashplayer/\'); return false;">here</a></p>' +
                                       '</div>';

                    document.getElementById("player").innerHTML = flashMessage;
                }
            },
            {
                key: "#@b74e28155063a20def5",
                clip: {
                    autoPlay: adsPage,
                    url: video,
                    provider: 'rtmp',
                    onStart: function() { if (video == _muscleHealthMOA) { Video_OnStart('MOA'); } },
                    onFinish: function() { if (video == _muscleHealthMOA){ Video_OnEnd('MOA'); } }
                },

                plugins: {
                    rtmp: {
                        url: '/flash/flowplayer.rtmp-3.1.3.swf',
                        netConnectionUrl: 'rtmpt://abbott.fcod.llnwd.net/a1915/o18/Ensure/'
                    }
                }
            });
    }
}

function Video_OnStart(videoTitle) {
    var iframes = $('body').children('iframe');

    if (iframes.length % 2 == 0) {
        /*
        Start of DoubleClick Floodlight Tag: Please do not remove
        Activity name of this tag: MOA Video Play Button
        URL of the webpage where the tag is expected to be placed: http://ensure.com/products/how-revigor-works
        This tag must be placed between the <body> and </body> tags, as close as possible to the opening tag.
        Creation Date: 08/17/2010
        */

        var axel = Math.random() + "";
        var a = axel * 10000000000000;
        $('body').append('<iframe src="http://fls.doubleclick.net/activityi;src=2644366;type=ensur520;cat=moavi069;ord=' + a + '?" width="1" height="1" frameborder="0"></iframe>');

        /*
        End DoubleClick Floodlight Tag
        */

        if (window.location.pathname == '/products/how-revigor-works') {
            _gaq.push(['_trackEvent', 'MuscleHealth', 'MOA Video Play']);
        }
        else {
            _gaq.push(['_trackEvent', 'MuscleHealth', 'MOA Video Page #1 Play']);
        }
    }
}

function Video_OnEnd(videoTitle) {
    /*
    Start of DoubleClick Floodlight Tag: Please do not remove
    Activity name of this tag: MOA Video End
    URL of the webpage where the tag is expected to be placed: http://ensure.com/products/how-revigor-works
    This tag must be placed between the <body> and </body> tags, as close as possible to the opening tag.
    Creation Date: 09/08/2010
    */
    
    var axel = Math.random() + "";
    var a = axel * 10000000000000;
    $('body').append('<iframe src="http://fls.doubleclick.net/activityi;src=2644366;type=ensur520;cat=moavi226;ord=' + a + '?" width="1" height="1" frameborder="0"></iframe>');

    /*
    End DoubleClick Floodlight Tag
    */

    if (window.location.pathname == '/products/how-revigor-works') {
        _gaq.push(['_trackEvent', 'MuscleHealth', 'MOA Video Viewing Complete']);
    }
    else {
        _gaq.push(['_trackEvent', 'MuscleHealth', 'MOA Video Page #1 Viewing Complete']);
    }
}