function GetMaxValue(arr) {
    var curr, max;
    max = -1;
    for (var i = 0; i < arr.length; i++) {
        curr = parseInt(arr[i]);
        if (curr > max)
            max = curr;
    }
    return max;
}
function GetCurrHeight(iGraphHeight, iMaxValue, iCurrValue) {
    return ((iCurrValue / iMaxValue) * (iGraphHeight - 77));
}
function GetOneColumnWidth(iGraphWidth, iBarsCount, iValues) {
    return iGraphWidth / (iValues * iBarsCount);
}
function GetClassName(valueid, arr) {
    var iSum = 0;
    iCurrSet = 0;
    while (iSum < valueid && iCurrSet < arr.length) {
        iSum += arr[iCurrSet];
        iCurrSet++;
    }
    return (iSum == valueid&&iSum!=0) ? "FirstInGroup" : "";
}

function WriteGraph(width, height,
            labelsAndGroups,//[[party_name,party_id,party_group_id],...]
            values,//[value1,value2,...]
            aGroupsLabels,//[({id:group_id,name:group_name}),...]
            sLinkStart) 
{
    var iItemsCount = labelsAndGroups.length;
    iSeparatorWidth = parseInt(width / iItemsCount * (values.length) / 8);
    //var iTdWidth = parseInt((width - ((iItemsCount - 1) * iSeparatorWidth)) / (iItemsCount));
    var aHtml = new Array();
    var arrUsedGroups = new Array();
    var arrAllValues = new Array();
    for (var i = 0; i < values.length; i++) {
        arrAllValues = arrAllValues.concat(values[i]);
    }
    var sStart = '<table class="graph" style="width:' + width + 'px;">';
    var iMaxValue = GetMaxValue(arrAllValues);
    var iLastGroup = -1;
    var iLastStart = 0;
    var GroupLength = new Array();
    var aBody = new Array();
    var aFoot = new Array();
    aHtml[aHtml.length] = '<tbody><tr>';
    iLastGroup = 0;
    i = 0;

   /* if (labelsAndGroups[0][1] == aGroupsLabels[i].id) {
        arrUsedGroups[arrUsedGroups.length] = aGroupsLabels[iLastGroup];
    }*/
    do {
        if (labelsAndGroups[0][1] == aGroupsLabels[i].id) {
            iLastGroup = i;
            arrUsedGroups[arrUsedGroups.length] = aGroupsLabels[iLastGroup];
        } else {
            i++;
        }
    }
    while (labelsAndGroups[0][1] != aGroupsLabels[i].id && i < aGroupsLabels.length);
    
    for (i = 0; i < values[0].length; i++) {
        var className = '';
        if (labelsAndGroups[i][1] != aGroupsLabels[iLastGroup].id) {
            //if (iLastStart >= 0) {
                className = 'FirstInGroup';
                GroupLength[GroupLength.length] = i - iLastStart;
            //}
            iLastStart = i;

            while (labelsAndGroups[i][1] !=aGroupsLabels[iLastGroup].id && iLastGroup<aGroupsLabels.length) {
                iLastGroup++;
            }
             //iLastGroup = labelsAndGroups[i][1];
            arrUsedGroups[arrUsedGroups.length] = aGroupsLabels[iLastGroup];
        }
        var iOneColumnWidth = GetOneColumnWidth(width, values.length, values[0].length);
        for (var iCurrValueSet = 0; iCurrValueSet < values.length; iCurrValueSet++) {
            
            var iCurrValue = parseInt(values[iCurrValueSet][i]);
            var iBarHeight = GetCurrHeight(height, iMaxValue, iCurrValue);

            if (isNaN( iCurrValue)) {
                aHtml[aHtml.length] = '<td class="' + className + ' Bar Bar' + iCurrValueSet + '" style="width:' + iOneColumnWidth + 'px">&nbsp;</td>';
            }
            else {
                aHtml[aHtml.length] = '<td class="Bar ' + className + ' Bar' + iCurrValueSet + '" style="vertical-align:bottom;text-align:center;height:' + (height - 52) + 'px;width:' + iOneColumnWidth + 'px">' + iCurrValue + '<div style="height:' + iBarHeight + 'px;font-size:1pt;">&nbsp;</div></td>';
            }
            className = "";
        }
    } if (GroupLength.length > 0) {
        GroupLength[GroupLength.length] = i - iLastStart;
    }
    aHtml[aHtml.length] = "</tr></tbody><tfoot><tr class=\"set_labels\">";
    for (var i = 0; i < labelsAndGroups.length; i++) {
        var label;
        if (labelsAndGroups[i][1] || labelsAndGroups[i][1] === 0) {
            label = labelsAndGroups[i][0];
        }
        else { label = labelsAndGroups[i]; }
        className = GetClassName(i, GroupLength);
        aHtml[aHtml.length] = '<td class="GraphLabels ' + className + '" style="height:18px;text-align:center;" colspan="' + values.length + '">';
        if (!sLinkStart) {sLinkStart = "";}
        if (sLinkStart.length) {
            aHtml[aHtml.length] = '<a href="'+sLinkStart+labelsAndGroups[i][2]+ '">';
        }
        aHtml[aHtml.length] = label;
        if (sLinkStart.length) {
            aHtml[aHtml.length] = '</a>';
        }        
        aHtml[aHtml.length] = '</td>';

    }
    aHtml[aHtml.length] = '</tr><tr class="GroupLabels">';
    for (i = 0; i < GroupLength.length; i++) {
        var sClassName = '';
        if (i == 0) { sClassName = "first"; }
        else if (i == (GroupLength.length - 1)) { sClassName = "last"; }
        aHtml[aHtml.length] = '<td class="' + sClassName + '" colspan="' + GroupLength[i] * values.length + '">' + arrUsedGroups[i].name + '</td>';
        sStart += '<colgroup class="' + sClassName + '" span="' + values.length * GroupLength[i] + '"></colgroup>';
    }
    aHtml[aHtml.length] = "</tr></tfoot></table>";
    document.getElementById("grph").innerHTML = sStart + aHtml.join("");
}