function buildRiskMatrix(container, productsArr)
{
    $(container).innerHTML = '';
    var dataArr = [];
    for(var x = 0; x < productsArr.length; x++)
    {
        dataArr.push(riskMatrixDataRow(productsArr[x]));
    }
    var linkArr = riskMatrixLinksList(productsArr);
    var bgColor = '#eee';
    $(container).style.height = (dataArr.length * 20).toString() + 'px';
    var featuresArr = riskMatrixFeatureNameList();
    var colorArr = riskMatrixProductColorList(productsArr);
    //alert(productsArr + '\n\n' + linkArr + '\n\n' + colorArr );
    for(var i = 0; i < dataArr.length; i++)
    {
        var tempStr = '';
        var whichFeaturesArr = dataArr[i].split('-');
        tempStr += '<div id="pName' + i.toString() + '" style="position: absolute; top: ' + (i*20).toString() + 'px;  left: -14px; width: 150px; height: 20px; padding-right: 5px; text-align: right; cursor: pointer; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; z-index: 2; background: #fff;" onmouseover="fadecolor(\'pRow' + i.toString() + '\', \'' + colorArr[i] + '\'); fadecolor(\'pName' + i.toString() + '\', \'' + colorArr[i] + '\');" onmouseout="fadecolor(\'pRow' + i.toString() + '\', \'' + bgColor + '\'); fadecolor(\'pName' + i.toString() + '\', \'#fff\');" onclick="productChosen(\'' + linkArr[i] + '\')">';
        tempStr += '<span style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; font-size:20pt; overflow: hidden;"><pre>                        </pre></span>';
        tempStr += '<span style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; font-size:10pt; overflow: hidden;">';
        tempStr += '<span style="position: relative; right: 3px; top: 2px;">' + productsArr[i] + '</span>';
        tempStr += '</span>';
        tempStr += '</div>';
        tempStr += '<div id="pRow' + i.toString() + '" style="position: absolute; top: ' + (i*20).toString() + 'px;  left: 141px; width: 721px; height: 21px; background: ' + bgColor + ';" class="riskMatrixProduct" onmouseover="fadecolor(\'pRow' + i.toString() + '\', \'' + colorArr[i] + '\', 250); fadecolor(\'pName' + i.toString() + '\', \'' + colorArr[i] + '\', 250);" onmouseout="fadecolor(\'pRow' + i.toString() + '\', \'' + bgColor + '\', 500); fadecolor(\'pName' + i.toString() + '\', \'#fff\', 500);" onclick="productChosen(\'' + linkArr[i] + '\')">';
        for(var x = 0; x < featuresArr.length; x++)
        {
            tempStr += '<div id="' + x.toString() + '-' + i.toString() + '" style="position: absolute; top: 0px;  left: ' + ((x)*45).toString() + 'px; width: 45px; height: 20px; border: 1px solid #ccc; text-align: center;"><span style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; font-size: 16px;"><pre>         </pre></span><span style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; font-weight: bold; color: #111; font-size: 14pt;">' + whichFeaturesArr[x] + '</span></div>';
        }
        tempStr += '</div>';
        $(container).innerHTML += tempStr;
    }
}

function fadecolor(el, newColor, fxDuration)
{
   // $(el).tween('background', newColor);
    $(el).style.background = newColor;
}

function setupQuestionaire(container)
{
    var categoryArr = getQuestionCategoriesList();
    var tempStr = '';
    tempStr += '<div class="questionaireQuestion" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 30px; text-align: center;">';
    tempStr += 'Select a category: ';
    tempStr += '<select id="questionaireSel" style="position: relative; top: 3px; height: 25px; width: 200px;" onchange="questionaireCatChosen(this.value);">';
    tempStr += '<option value="">None</option>';
    for(var i = 0; i < categoryArr.length; i++)
    {
        tempStr += '<option value="';
        tempStr += categoryArr[i];
        tempStr += '">';
        tempStr += categoryArr[i];
        tempStr += '</option>';
    }
    tempStr += '</select>';
    tempStr += '</div>';
    tempStr += '<div style="position:absolute; left: 50%; top: 35px; width: 700px; height: 250px; margin-left: -350px; font-family: verdana; overflow: auto;">';
    tempStr +=  '<div id="questionaireQuestionDiv" style="position:absolute; left: 0px; top: 0px; width: 450px; height: 100%; overflow: visible; text-align: right;">';
    tempStr +=  '</div>';
    tempStr += '</div>';
    tempStr +=  '<div style="position: absolute; left: 50%; top: 292px; width: 700px; height: 25px; margin-left: -350px; text-align: center;">';
    tempStr +=   '<input id="submitQuestionaireButton" type="button" value="Submit" style="position: absolute; left: 310px; top: 0px; width: 80px; visibility: hidden;" onclick="submitQuestionaire();" />';
    tempStr +=  '</div>';
    $(container).innerHTML += tempStr;
   // alert(getQuestionQuestions('medical'));
}

function questionaireCatChosen(category)
{
    container = $('questionaireQuestionDiv');
    container.innerHTML = '';
    if(category != '')
    {
        $('submitQuestionaireButton').style.visibility = 'visible';
        var questionsArr = getQuestionQuestions(category);
        for(var x = 0; x < questionsArr.length; x++)
        {
            var tempArr = questionsArr[x].split('|');
            var questionText = tempArr[0];
            var yesOrNo = tempArr[2];
            var tempStr = '';
            tempStr += '<div style="position: absolute; left: 0px; top: ' + (x*20).toString() + 'px; width: 100%; height: 20px; font-size: 11pt; cursor: default;">';
            tempStr +=  '<div>';
            tempStr += questionText;
            tempStr +=  '</div>';
            tempStr +=  '<div style="position: absolute; left: 100%; top: 0px; width: 150px; height: 100%; text-align: left;">';
            tempStr += '<span style="position: relative; left: 20px;">';
            if(yesOrNo.indexOf('yes') > -1)
            {
                tempStr +=   '<input id="radioYes' + x.toString() + '" type="radio" name="question' + x.toString() + '" value="' + tempArr[1] + '" /> Yes <input type="radio" name="question' + x.toString() + '" value="" checked />No';
            }
            else
            {
                tempStr +=   '<input id="radioYes' + x.toString() + '" type="radio" name="question' + x.toString() + '" value="' + tempArr[1] + '" /> No <input type="radio" name="question' + x.toString() + '" value="" checked style="position:relative; left: 5px;" /> Yes';
            }
            tempStr += '</span>';
            tempStr +=  '</div>';
            tempStr += '</div>';
            container.innerHTML += tempStr;
        }
    }
    else
    {
        $('submitQuestionaireButton').style.visibility = 'hidden';
    }
}

function productChosen(link)
{
    window.location.href = link;
}

function submitQuestionaire()
{
    var questionaireSel = $('questionaireSel');
    var questionsArr = getQuestionQuestions(questionaireSel.value);
    var resultingProductArr = [];
    for(var x = 0; x < questionsArr.length; x++)
    {
        var radioID = 'radioYes' + x.toString();
        var checkRadio = $(radioID); // question[x]
        if(checkRadio.checked)
        {
            var thisCheckProducts = checkRadio.value.split('¬');
            for(var z = 0; z < thisCheckProducts.length; z++)
            {
                var isHere = false;
                for(var i = 0; i < resultingProductArr.length; i++)
                {
                    if(thisCheckProducts[z] == resultingProductArr[i])
                    {
                        isHere = true;
                    }
                }
                if(!(isHere))
                {
                    resultingProductArr.push(thisCheckProducts[z]);
                }
            }
        }
    }
    if(resultingProductArr.length > 0)
    {  
        riskQuestionaireOver();
        var myFunction = function(){
                riskMatrixOver(resultingProductArr, true, '<span style="position:relative;top:-5px;">Here is the RiskSecure product suite that will meet your requirements.</span>');
        }.delay(750);
    };
}