//-----------------------------------------------------------//
//------------------ Constants ------------------------------//
//-----------------------------------------------------------//

//var domainHost = "http://skgsoftware.com/twitter/";
var domainHost = "http://esnube.com/";
//var domainHost = "http://localhost:58009/"
var keyword5URL = domainHost + "tweethandler/twittertrend.aspx?callback=processKeyword&duration=5&&trendtype=keyword";
var keyword300URL = domainHost + "tweethandler/twittertrend.aspx?callback=processKeyword&duration=300&&trendtype=keyword";
var keyword21600URL = domainHost + "tweethandler/twittertrend.aspx?callback=processKeyword&duration=2160&trendtype=keyword";

var keyword5URL2 = domainHost + "tweethandler/twittertrend.aspx?callback=processKeyword2&duration=5&&trendtype=keyword";
var keyword21600URL2 = domainHost + "tweethandler/twittertrend.aspx?callback=processKeyword2&duration=2160&trendtype=keyword";

var user1440URL = domainHost + "tweethandler/twittertrend.aspx?callback=processUser&duration=20160&trendtype=usauser&word=";
var states1440URL = domainHost + "tweethandler/twittertrend.aspx?callback=fillUserDropDown&duration=20160&trendtype=usastates";

var userCity1440URL = domainHost + "tweethandler/twittertrend.aspx?callback=processUserUSACity&duration=20160&trendtype=usacityuser&word=";
var cities1440URL = domainHost + "tweethandler/twittertrend.aspx?callback=fillUserUSACityDropDown&duration=20160&trendtype=usacities";

var userCountry1440URL = domainHost + "tweethandler/twittertrend.aspx?callback=processUserCountry&duration=20160&trendtype=countryuser&word=";
var country1440URL = domainHost + "tweethandler/twittertrend.aspx?callback=fillUserCountryDropDown&duration=20160&trendtype=countries";

var userCountryCity1440URL = domainHost + "tweethandler/twittertrend.aspx?callback=processUserCountryCity&duration=20160&trendtype=countrycityuser&word=";
var countryCity1440URL = domainHost + "tweethandler/twittertrend.aspx?callback=fillUserCountryCityDropDown&duration=20160&trendtype=countrycities";


var trendImg1URL = domainHost + "tweethandler/image/twitter1.jpg";
var trendImg2URL = domainHost + "tweethandler/image/twitter2.jpg";
var trendLogoURL = domainHost + "tweethandler/image/TweetFind.jpg";




//-----------------------------------------------------------//
//------------------ Common Functions -----------------------//
//-----------------------------------------------------------//

function init_Trend() {
    //load keyword pie charts
    if (document.getElementById('keywordTrend') != null && document.getElementById('keywordSpinner') != null) {
        renderKeywordUI();
        loadJSON(keyword5URL);
        //loadJSON(keyword300URL);
        loadJSON(keyword21600URL);

    }

    //load keyword 2 pie charts
    if (document.getElementById('keywordTrend2') != null && document.getElementById('keywordSpinner2') != null) {
        renderKeyword2UI();
        loadJSON(keyword5URL2);
        loadJSON(keyword21600URL2);

    }

    //load top 20 user's trend
    if (document.getElementById('userTrend') != null && document.getElementById('userSpinner') != null) {        
        renderUserUI();
        loadJSON(states1440URL);

    }

    //load top 20 country user's trend
    if (document.getElementById('userCountryTrend') != null && document.getElementById('userCountrySpinner') != null) {
        renderUserCountryUI();
        loadJSON(country1440URL);

    }

    //load top 20 user's USA city trend
    if (document.getElementById('userUSACityTrend') != null && document.getElementById('userUSACitySpinner') != null) {

        renderUserUSACityUI();
        loadJSON(cities1440URL);

    }

    //load top 20 country user's trend
    if (document.getElementById('userCountryCityTrend') != null && document.getElementById('userCountryCitySpinner') != null) {
        renderUserCountryCityUI();
        loadJSON(countryCity1440URL);

    }

        

}

function loadJSON(url) {

    var headID = document.getElementsByTagName("head")[0];
    var newScript = document.createElement('script');
    newScript.type = 'text/javascript';
    newScript.src = url;
    headID.appendChild(newScript);

}


//--------------------------------------------------------------//
//------------------ User Trend Functions ----------------------//
//--------------------------------------------------------------//
function renderUserUI() {

    btnLoad = document.getElementById('userSpinner')
    btnLoad.onload = "";
    btnLoad.style.display = "none";

    divObj = document.getElementById('userTrend')
    divObj.innerHTML = "<table border='0' width='500px' cellspacing='1' ><tr><td align='left'><select id='twitterUserSelect' onchange='drawGraph()'></td></tr><tr><td class='twitterUserHeader'><div id='twitterUserHead'/></td></tr><tr><td><div id='twitterUserTable'/></td></tr></table>";

}

function drawGraph() {
    divHead = document.getElementById('twitterUserHead')
    divHead.innerHTML = "Loading.."
    
    divObj = document.getElementById('twitterUserSelect')
    loadJSON(user1440URL + divObj[divObj.selectedIndex].value);          

}

function fillUserDropDown(feed, selection) {

    divObj = document.getElementById('twitterUserSelect')

    for (i = 0; i < feed.length; i++) {
        var optn = document.createElement("OPTION");
        optn.text = feed[i];
        optn.value = feed[i].toLowerCase();
        divObj.options.add(optn);
    }

    divObj.options[selection].selected = true;
    loadJSON(user1440URL + divObj[divObj.selectedIndex].value);   
    
}

function processUser(feed, word) {

    divObj = document.getElementById('twitterUserTable')
    divHead = document.getElementById('twitterUserHead')
    divHead.innerHTML = "";

    var tableText = "<table id='tbl_Trend' border='1' cellpadding='4' class='twitterUserTable' ><tr><td><div class='section_header'>Top Twitters in " + word.toUpperCase() + " the last 24 Hours</div></td></tr>";    
     
    for (i = 0; i < feed.user.length; i++) {

        var rank = i + 1;
        if (i % 2 == 0)
            className = 'twitterUserHd'
        else
            className = 'twitterUserHdAlt'

        var rwcnt = rank;

        tableText = tableText + "<tr><td style='cursor:hand' onclick=javascript:window.open('http://twitter.com/" + feed.user[i].screen_name + "','','') class='" + className + "'><table width='750px' ><tr><td width='10px' valign='center'><span class='twitterUserRank' valign='top'>#" + rank + "</span></td>";
        tableText = tableText + "<td width='50px' align'left' valign='top'><img  height='49px' width='49px' src='" + feed.user[i].profile_image_url + "' /></td>";
        tableText = tableText + "<td align='left' width='400px'>";
        tableText = tableText + "<span class='twitterUserName' >" + feed.user[i].screen_name + "</span></br>";
        tableText = tableText + "</td><td valign='top'  align='right' width='300px'><div class='twitterUserFollowersBtn' id='follow-placeholder_" + i + "'>Follow @" + feed.user[i].screen_name + "</br><div style='font-size:9px;color: gray;'>- Move Mouse Cursor above to Follow -</div> </div></td></tr><tr><td><td></td></td><td align='left' >";
        tableText = tableText + "<span class='twitterUserBio'><b>Bio:</b> " + feed.user[i].bio + "</span><br/>";
        tableText = tableText + "<span class='twitterUserFollowers'>Location: " + feed.user[i].location + "</span><br />";
        tableText = tableText + "<span class='twitterUserFollowers'>" + feed.user[i].followers_count + " Followers</span>";
        tableText = tableText + "</td></tr></table></td></tr>";
        
    }

    tableText = tableText ;
    divObj.innerHTML = tableText;
    follow_users(feed);
}


//--------------------------------------------------------------//
//------------------ User USA City Trend Functions ----------------------//
//--------------------------------------------------------------//
function renderUserUSACityUI() {

    btnLoad = document.getElementById('userUSACitySpinner')
    btnLoad.onload = "";
    btnLoad.style.display = "none";

    divObj = document.getElementById('userUSACityTrend')
    divObj.innerHTML = "<table border='0' width='500px' cellspacing='1' ><tr><td align='left'><select id='twitterUserUSACitySelect' onchange='drawUSACityGraph()'></td></tr><tr><td class='twitterUserHeader'><div id='twitterUserUSACityHead'/></td></tr><tr><td><div id='twitterUserUSACityTable'/></td></tr></table>";

}

function drawUSACityGraph() {
    divHead = document.getElementById('twitterUserUSACityHead')
    divHead.innerHTML = "Loading.."

    divObj = document.getElementById('twitterUserUSACitySelect')
    loadJSON(userCity1440URL + divObj[divObj.selectedIndex].value);

}

function fillUserUSACityDropDown(feed, selection) {

    divObj = document.getElementById('twitterUserUSACitySelect')

    for (i = 0; i < feed.length; i++) {
        var optn = document.createElement("OPTION");
        optn.text = feed[i];
        optn.value = feed[i].toLowerCase();
        divObj.options.add(optn);
    }

    divObj.options[selection].selected = true;
    loadJSON(userCity1440URL + divObj[divObj.selectedIndex].value);

}

function processUserUSACity(feed, word) {

    divObj = document.getElementById('twitterUserUSACityTable')
    divHead = document.getElementById('twitterUserUSACityHead')
    divHead.innerHTML = "";

    var tableText = "<table id='tbl_Trend' border='1' cellpadding='4' class='twitterUserUSACityTable' ><tr><td><div class='section_header'>Top Twitters in " + word.toUpperCase() + " the last 24 Hours</div></td></tr>";

    for (i = 0; i < feed.user.length; i++) {

        var rank = i + 1;
        if (i % 2 == 0)
            className = 'twitterUserHd'
        else
            className = 'twitterUserHdAlt'

        var rwcnt = rank;

        tableText = tableText + "<tr><td style='cursor:hand' onclick=javascript:window.open('http://twitter.com/" + feed.user[i].screen_name + "','','') class='" + className + "'><table width='750px' ><tr><td width='10px' valign='center'><span class='twitterUserRank' valign='top'>#" + rank + "</span></td>";
        tableText = tableText + "<td width='50px' align'left' valign='top'><img  height='49px' width='49px' src='" + feed.user[i].profile_image_url + "' /></td>";
        tableText = tableText + "<td align='left' width='400px'>";
        tableText = tableText + "<span class='twitterUserName' >" + feed.user[i].screen_name + "</span></br>";
        tableText = tableText + "</td><td valign='top'  align='right' width='300px'><div class='twitterUserFollowersBtn' id='follow-placeholder_" + i + "'>Follow @" + feed.user[i].screen_name + "</br><div style='font-size:9px;color: gray;'>- Move Mouse Cursor above to Follow -</div> </div></td></tr><tr><td><td></td></td><td align='left' >";
        tableText = tableText + "<span class='twitterUserBio'><b>Bio:</b> " + feed.user[i].bio + "</span><br/>";
        tableText = tableText + "<span class='twitterUserFollowers'>Location: " + feed.user[i].location + "</span><br />";
        tableText = tableText + "<span class='twitterUserFollowers'>" + feed.user[i].followers_count + " Followers</span>";
        tableText = tableText + "</td></tr></table></td></tr>";
    }

    tableText = tableText + "</table>";
    divObj.innerHTML = tableText;
    follow_users(feed);
}



//--------------------------------------------------------------//
//------------------ User Country Trend Functions ----------------------//
//--------------------------------------------------------------//
function renderUserCountryUI() {

    btnLoad = document.getElementById('userCountrySpinner')
    btnLoad.onload = "";
    btnLoad.style.display = "none";

    divObj = document.getElementById('userCountryTrend')
    divObj.innerHTML = "<table border='0' width='500px' cellspacing='1' ><tr><td align='left'><select id='twitterUserCountrySelect' onchange='drawCountryGraph()'></td></tr><tr><td class='twitterUserHeader'><div id='twitterUserCountryHead'/></td></tr><tr><td><div id='twitterUserCountryTable'/></td></tr></table>";

}

function drawCountryGraph() {
    divHead = document.getElementById('twitterUserCountryHead')
    divHead.innerHTML = "Loading.."

    divObj = document.getElementById('twitterUserCountrySelect')
    loadJSON(userCountry1440URL + divObj[divObj.selectedIndex].value);

}

function fillUserCountryDropDown(feed, selection) {

    divObj = document.getElementById('twitterUserCountrySelect')

    for (i = 0; i < feed.length; i++) {
        var optn = document.createElement("OPTION");
        optn.text = feed[i];
        optn.value = feed[i].toLowerCase();
        divObj.options.add(optn);
    }

    divObj.options[selection].selected = true;
    loadJSON(userCountry1440URL + divObj[divObj.selectedIndex].value);

}

function processUserCountry(feed, word) {

    divObj = document.getElementById('twitterUserCountryTable')
    divHead = document.getElementById('twitterUserCountryHead')
    divHead.innerHTML = "";
    var tableText = "<table id='tbl_Trend' border='1' cellpadding='4' class='twitterUserTable'><tr><td><div class='section_header'>Top Twitters in " + word.toUpperCase() + " the last 24 Hours</div></td></tr>";

    for (i = 0; i < feed.user.length; i++) {

        var rank = i + 1;
        if (i % 2 == 0)
            className = 'twitterUserHd'
        else
            className = 'twitterUserHdAlt'

        var rwcnt =  rank;
        tableText = tableText + "<tr><td style='cursor:hand' onclick=javascript:window.open('http://twitter.com/" + feed.user[i].screen_name + "','','') class='" + className + "'><table width='750px' ><tr><td width='10px' valign='center'><span class='twitterUserRank' valign='top'>#" + rank + "</span></td>";
        tableText = tableText + "<td width='50px' align'left' valign='top'><img  height='49px' width='49px' src='" + feed.user[i].profile_image_url + "' /></td>";
        tableText = tableText + "<td align='left' width='400px'>";
        tableText = tableText + "<span class='twitterUserName' >" + feed.user[i].screen_name + "</span></br>";
        tableText = tableText + "</td><td valign='top'  align='right' width='300px'><div class='twitterUserFollowersBtn' id='follow-placeholder_" + i + "'>Follow @" + feed.user[i].screen_name + "</br><div style='font-size:9px;color: gray;'>- Move Mouse Cursor above to Follow -</div> </div></td></tr><tr><td><td></td></td><td align='left' >";
        tableText = tableText + "<span class='twitterUserBio'><b>Bio:</b> " + feed.user[i].bio + "</span><br/>";
        tableText = tableText + "<span class='twitterUserFollowers'>Location: " + feed.user[i].location + "</span><br />";
        tableText = tableText + "<span class='twitterUserFollowers'>" + feed.user[i].followers_count + " Followers</span>";
        tableText = tableText + "</td></tr></table></td></tr>";

    }

    tableText = tableText + "</table>";
    divObj.innerHTML = tableText;
    follow_users(feed);
}


//--------------------------------------------------------------//
//------------------ User Country City Trend Functions ----------------------//
//--------------------------------------------------------------//
function renderUserCountryCityUI() {

    btnLoad = document.getElementById('userCountryCitySpinner')
    btnLoad.onload = "";
    btnLoad.style.display = "none";

    divObj = document.getElementById('userCountryCityTrend')
    divObj.innerHTML = "<table border='0' width='500px' cellspacing='1' ><tr><td align='left'><select id='twitterUserCountryCitySelect' onchange='drawCountryCityGraph()'></td></tr><tr><td class='twitterUserHeader'><div id='twitterUserCountryCityHead'/></td></tr><tr><td><div id='twitterUserCountryCityTable'/></td></tr></table>";

}

function drawCountryCityGraph() {
    divHead = document.getElementById('twitterUserCountryCityHead')
    divHead.innerHTML = "Loading.."

    divObj = document.getElementById('twitterUserCountryCitySelect')
    loadJSON(userCountryCity1440URL + divObj[divObj.selectedIndex].value);

}

function fillUserCountryCityDropDown(feed, selection) {

    divObj = document.getElementById('twitterUserCountryCitySelect')

    for (i = 0; i < feed.length; i++) {
        var optn = document.createElement("OPTION");
        optn.text = feed[i];
        optn.value = feed[i].toLowerCase();
        divObj.options.add(optn);
    }

    divObj.options[selection].selected = true;
    loadJSON(userCountryCity1440URL + divObj[divObj.selectedIndex].value);

}

function processUserCountryCity(feed, word) {

    divObj = document.getElementById('twitterUserCountryCityTable')
    divHead = document.getElementById('twitterUserCountryCityHead')
    divHead.innerHTML = "";
    
    var tableText = "<table id='tbl_Trend' border='1' cellpadding='4' class='twitterUserTable'><tr><td><div class='section_header'>Top Twitters in " + word.toUpperCase() + " the last 24 Hours</div></td></tr>";

    for (i = 0; i < feed.user.length; i++) {

        var rank = i + 1;
        if (i % 2 == 0)
            className = 'twitterUserHd'
        else
            className = 'twitterUserHdAlt'

        var rwcnt = rank;
        tableText = tableText + "<tr><td style='cursor:hand' onclick=javascript:window.open('http://twitter.com/" + feed.user[i].screen_name + "','','') class='" + className + "'><table width='750px' ><tr><td width='10px' valign='center'><span class='twitterUserRank' valign='top'>#" + rank + "</span></td>";
        tableText = tableText + "<td width='50px' align'left' valign='top'><img  height='49px' width='49px' src='" + feed.user[i].profile_image_url + "' /></td>";
        tableText = tableText + "<td align='left' width='400px'>";
        tableText = tableText + "<span class='twitterUserName' >" + feed.user[i].screen_name + "</span></br>";
        tableText = tableText + "</td><td valign='top'  align='right' width='300px'><div class='twitterUserFollowersBtn' id='follow-placeholder_" + i + "'>Follow @" + feed.user[i].screen_name + "</br><div style='font-size:9px;color: gray;'>- Move Mouse Cursor above to Follow -</div> </div></td></tr><tr><td><td></td></td><td align='left' >";
        tableText = tableText + "<span class='twitterUserBio'><b>Bio:</b> " + feed.user[i].bio + "</span><br/>";
        tableText = tableText + "<span class='twitterUserFollowers'>Location: " + feed.user[i].location + "</span><br />";
        tableText = tableText + "<span class='twitterUserFollowers'>" + feed.user[i].followers_count + " Followers</span>";
        tableText = tableText + "</td></tr></table></td></tr>";

    }

    tableText = tableText + "</table>";
    divObj.innerHTML = tableText;
    follow_users(feed);
}

function follow_users(feed) {
    twttr.anywhere(function(T) {        
            T("#tbl_Trend").hovercards();        
    });
}


//-----------------------------------------------------------//
//------------------ Keyword Functions ----------------------//
//-----------------------------------------------------------//
function renderKeywordUI() {

    btnLoad = document.getElementById('keywordSpinner')
    btnLoad.onload = "";
    btnLoad.style.display = "none";

    divObj = document.getElementById('keywordTrend')
    divObj.innerHTML = "<table border='0' width='750px' class='twitterKeywordTable' cellspacing='1' ><tr><td class='twitterKeywordHd'>Top 10 Twitter Trends last 5 min</td><td class='twitterKeywordHd'>Top 10 Twitter Trends past 24 hours</td></tr><tr><td align='center'><div id='pieCanvas5' style='position:relative;height:200px;' align='center'></div></td><td align='center'><div id='pieCanvas2160' style='position:relative;height:200px;' align='center'></div></td></tr></table>";

    divLoad = document.getElementById('pieCanvas5');
    divLoad.innerHTML = "<span style='font-family: Verdana; font-size: 18px'>Loading Graphs...</span>"

}

function processKeyword(feed, type) {
    if (type == 5) {
        divLoad = document.getElementById('pieCanvas5');
        divLoad.innerHTML = ""
    }

    var p = new pie();

    for (i = 0; i < feed.trends.length; i++) {
        p.add('<span onclick=javascript:window.open(\'' + feed.trends[i].url + '\') style=\'cursor:hand; \'>' + feed.trends[i].name + '</span>', feed.trends[i].count);
    }

    p.render("pieCanvas" + type, "Pie Graph" + type)

}

//-----------------------------------------------------------//
//------------------ Keyword 2 Functions ----------------------//
//-----------------------------------------------------------//
function renderKeyword2UI() {

    btnLoad = document.getElementById('keywordSpinner2')
    btnLoad.onload = "";
    btnLoad.style.display = "none";

    divObj = document.getElementById('keywordTrend2')
    divObj.innerHTML = "<table border='0' width='350px' class='twitterKeywordTable' cellspacing='1' ><tr><td class='twitterKeywordHd'>Top 10 Twitter Trends last 5 min</td></tr><tr><td align='center'><div id='pieCanvas5_2' style='position:relative;height:200px;'></div></td></tr><tr><td height='75px'></td></tr><tr><td class='twitterKeywordHd'>Top 10 Twitter Trends past 24 hours</td></tr><tr><td align='center'><div id='pieCanvas2160_2' style='position:relative;height:200px;'></div></td></tr></table>";

    divLoad = document.getElementById('pieCanvas5_2');
    divLoad.innerHTML = "<span style='font-family: Verdana; font-size: 18px'>Loading Graphs...</span>"

}

function processKeyword2(feed, type) {
    if (type == 5) {
        divLoad = document.getElementById('pieCanvas5_2');
        divLoad.innerHTML = ""
    }

    var p = new pie();

    for (i = 0; i < feed.trends.length; i++) {
        p.add('<span onclick=javascript:window.open(\'' + feed.trends[i].url + '\') style=\'cursor:hand; \'>' + feed.trends[i].name + '</span>', feed.trends[i].count);
    }

    p.render("pieCanvas" + type + "_2", "Pie Graph" + type)

}





//---------------------------------------------------------//
//------------------ Helper Function ----------------------//
//---------------------------------------------------------//

//Load script dynamically
function loadjscssfile(filename, filetype) {
    if (filetype == "js") { //if filename is a external JavaScript file
        var fileref = document.createElement('script')
        fileref.setAttribute("type", "text/javascript")
        fileref.setAttribute("src", filename)
    }
    else if (filetype == "css") { //if filename is an external CSS file
        var fileref = document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    if (typeof fileref != "undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref)
}

function getRandomNumber() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
}



/*Pie creation js*/

hD = "0123456789ABCDEF";

function d2h(d) {
    var h = hD.substr(d & 15, 1);
    while (d > 15) { d >>= 4; h = hD.substr(d & 15, 1) + h; }
    return h;
}

function h2d(h) {
    return parseInt(h, 16);
}

function pie() {
    this.ct = 0;

    this.data = new Array();
    this.x_name = new Array();
    this.max = 0;

    this.c_array = new Array();
    this.c_array[0] = new Array("002DB3");
    this.c_array[1] = new Array("003CF0");
    this.c_array[2] = new Array("B32D00");
    this.c_array[3] = new Array("00B32D");
    this.c_array[4] = new Array("CC7A00");
    this.c_array[5] = new Array("FF4747");
    this.c_array[6] = new Array("FFC20A");
    this.c_array[7] = new Array("006666");
    this.c_array[8] = new Array("FFFF3D");
    this.c_array[9] = new Array("26E600");
    this.c_array[10] = new Array("003399");


    this.getColor = function() {
        if (this.ct >= (this.c_array.length - 1))
            this.ct = 0;
        else
            this.ct++;

        return "#" + this.c_array[this.ct][0];
    }


    this.add = function(x_name, value) {
        this.x_name.push(x_name);
        this.data.push(parseInt(value, 10));

        this.max += parseInt(value, 10);
    }

    this.fillArc = function(x, y, r, st_a, en_a, jg) {
        //var number_of_steps = Math.round(2.1 * Math.PI * r );
        var number_of_steps = en_a - st_a;
        var angle_increment = 2 * Math.PI / number_of_steps;

        var xc = new Array();
        var yc = new Array();

        st_r = st_a * Math.PI / 180;
        en_r = en_a * Math.PI / 180;


        for (angle = st_r; angle <= en_r; angle += angle_increment) {
            if (en_r < angle + angle_increment)
                angle = en_r;

            var y2 = Math.sin(angle) * r;
            var x2 = Math.cos(angle) * r;

            xc.push(x + x2);
            yc.push(y - y2);
            //jg.drawLine(x+x2, y-y2, x+x2, y-y2);
        }
        xc.push(x);
        yc.push(y);
        jg.fillPolygon(xc, yc);
        //jg.setColor("black");
        //jg.drawLine(x, y, x+ln_x, y-ln_y);
    }

    this.render = function(canvas, title) {
        var jg = new jsGraphics(canvas);

        var r = 55;
        var sx = 150;
        var sy = 150;
        var hyp = 85;
        var fnt = 10;

        // shadow
        jg.setColor("gray");
        //this.fillArc(sx+5, sy+5, r, 0, 360, jg);
        jg.fillEllipse(sx + 5 - r, sy + 5 - r, 2 * r, 2 * r);

        var st_angle = 0;
        for (i = 0; i < this.data.length; i++) {
            var angle = Math.round(this.data[i] / this.max * 360);
            var pc = Math.round(this.data[i] / this.max * 100);
            jg.setColor(this.getColor());
            this.fillArc(sx, sy, r, st_angle, st_angle + angle, jg);


            var ang_rads = (st_angle + (angle / 2)) * 2 * Math.PI / 360;
            var my = Math.sin(ang_rads) * hyp;
            var mx = Math.cos(ang_rads) * hyp;

            st_angle += angle;

            mxa = (mx < 0 ? 50 : 0);
            jg.setColor("black");
            jg.drawString(this.x_name[i] + "(" + pc + "%" + ")", sx + mx - mxa, sy - my);
        }


        jg.setColor("black");
        jg.drawEllipse(sx - r, sy - r, 2 * r, 2 * r);
        jg.paint();
    }

}





/* This notice must be untouched at all times.

/*Graph creation js*/

var jg_ihtm, jg_ie, jg_fast, jg_dom, jg_moz,
jg_n4 = (document.layers && typeof document.classes != "undefined");


function chkDHTM(x, i) {
    x = document.body || null;
    jg_ie = x && typeof x.insertAdjacentHTML != "undefined";
    jg_dom = (x && !jg_ie &&
		typeof x.appendChild != "undefined" &&
		typeof document.createRange != "undefined" &&
		typeof (i = document.createRange()).setStartBefore != "undefined" &&
		typeof i.createContextualFragment != "undefined");
    jg_ihtm = !jg_ie && !jg_dom && x && typeof x.innerHTML != "undefined";
    jg_fast = jg_ie && document.all && !window.opera;
    jg_moz = jg_dom && typeof x.style.MozOpacity != "undefined";
}


function pntDoc() {
    this.wnd.document.write(jg_fast ? this.htmRpc() : this.htm);
    this.htm = '';
}


function pntCnvDom() {
    var x = document.createRange();
    x.setStartBefore(this.cnv);
    x = x.createContextualFragment(jg_fast ? this.htmRpc() : this.htm);
    this.cnv.appendChild(x);
    this.htm = '';
}


function pntCnvIe() {
    this.cnv.insertAdjacentHTML("BeforeEnd", jg_fast ? this.htmRpc() : this.htm);
    this.htm = '';
}


function pntCnvIhtm() {
    this.cnv.innerHTML += this.htm;
    this.htm = '';
}


function pntCnv() {
    this.htm = '';
}


function mkDiv(x, y, w, h) {
    this.htm += '<div style="position:absolute;' +
		'left:' + x + 'px;' +
		'top:' + y + 'px;' +
		'width:' + w + 'px;' +
		'height:' + h + 'px;' +
		'clip:rect(0,' + w + 'px,' + h + 'px,0);' +
		'background-color:' + this.color +
		(!jg_moz ? ';overflow:hidden' : '') +
		';"><\/div>';
}


function mkDivIe(x, y, w, h) {
    this.htm += '%%' + this.color + ';' + x + ';' + y + ';' + w + ';' + h + ';';
}


function mkDivPrt(x, y, w, h) {
    this.htm += '<div style="position:absolute;' +
		'border-left:' + w + 'px solid ' + this.color + ';' +
		'left:' + x + 'px;' +
		'top:' + y + 'px;' +
		'width:0px;' +
		'height:' + h + 'px;' +
		'clip:rect(0,' + w + 'px,' + h + 'px,0);' +
		'background-color:' + this.color +
		(!jg_moz ? ';overflow:hidden' : '') +
		';"><\/div>';
}


function mkLyr(x, y, w, h) {
    this.htm += '<layer ' +
		'left="' + x + '" ' +
		'top="' + y + '" ' +
		'width="' + w + '" ' +
		'height="' + h + '" ' +
		'bgcolor="' + this.color + '"><\/layer>\n';
}


var regex = /%%([^;]+);([^;]+);([^;]+);([^;]+);([^;]+);/g;
function htmRpc() {
    return this.htm.replace(
		regex,
		'<div style="overflow:hidden;position:absolute;background-color:' +
		'$1;left:$2;top:$3;width:$4;height:$5"></div>\n');
}


function htmPrtRpc() {
    return this.htm.replace(
		regex,
		'<div style="overflow:hidden;position:absolute;background-color:' +
		'$1;left:$2;top:$3;width:$4;height:$5;border-left:$4px solid $1"></div>\n');
}


function mkLin(x1, y1, x2, y2) {
    if (x1 > x2) {
        var _x2 = x2;
        var _y2 = y2;
        x2 = x1;
        y2 = y1;
        x1 = _x2;
        y1 = _y2;
    }
    var dx = x2 - x1, dy = Math.abs(y2 - y1),
	x = x1, y = y1,
	yIncr = (y1 > y2) ? -1 : 1;

    if (dx >= dy) {
        var pr = dy << 1,
		pru = pr - (dx << 1),
		p = pr - dx,
		ox = x;
        while ((dx--) > 0) {
            ++x;
            if (p > 0) {
                this.mkDiv(ox, y, x - ox, 1);
                y += yIncr;
                p += pru;
                ox = x;
            }
            else p += pr;
        }
        this.mkDiv(ox, y, x2 - ox + 1, 1);
    }

    else {
        var pr = dx << 1,
		pru = pr - (dy << 1),
		p = pr - dy,
		oy = y;
        if (y2 <= y1) {
            while ((dy--) > 0) {
                if (p > 0) {
                    this.mkDiv(x++, y, 1, oy - y + 1);
                    y += yIncr;
                    p += pru;
                    oy = y;
                }
                else {
                    y += yIncr;
                    p += pr;
                }
            }
            this.mkDiv(x2, y2, 1, oy - y2 + 1);
        }
        else {
            while ((dy--) > 0) {
                y += yIncr;
                if (p > 0) {
                    this.mkDiv(x++, oy, 1, y - oy);
                    p += pru;
                    oy = y;
                }
                else p += pr;
            }
            this.mkDiv(x2, oy, 1, y2 - oy + 1);
        }
    }
}


function mkLin2D(x1, y1, x2, y2) {
    if (x1 > x2) {
        var _x2 = x2;
        var _y2 = y2;
        x2 = x1;
        y2 = y1;
        x1 = _x2;
        y1 = _y2;
    }
    var dx = x2 - x1, dy = Math.abs(y2 - y1),
	x = x1, y = y1,
	yIncr = (y1 > y2) ? -1 : 1;

    var s = this.stroke;
    if (dx >= dy) {
        if (dx > 0 && s - 3 > 0) {
            var _s = (s * dx * Math.sqrt(1 + dy * dy / (dx * dx)) - dx - (s >> 1) * dy) / dx;
            _s = (!(s - 4) ? Math.ceil(_s) : Math.round(_s)) + 1;
        }
        else var _s = s;
        var ad = Math.ceil(s / 2);

        var pr = dy << 1,
		pru = pr - (dx << 1),
		p = pr - dx,
		ox = x;
        while ((dx--) > 0) {
            ++x;
            if (p > 0) {
                this.mkDiv(ox, y, x - ox + ad, _s);
                y += yIncr;
                p += pru;
                ox = x;
            }
            else p += pr;
        }
        this.mkDiv(ox, y, x2 - ox + ad + 1, _s);
    }

    else {
        if (s - 3 > 0) {
            var _s = (s * dy * Math.sqrt(1 + dx * dx / (dy * dy)) - (s >> 1) * dx - dy) / dy;
            _s = (!(s - 4) ? Math.ceil(_s) : Math.round(_s)) + 1;
        }
        else var _s = s;
        var ad = Math.round(s / 2);

        var pr = dx << 1,
		pru = pr - (dy << 1),
		p = pr - dy,
		oy = y;
        if (y2 <= y1) {
            ++ad;
            while ((dy--) > 0) {
                if (p > 0) {
                    this.mkDiv(x++, y, _s, oy - y + ad);
                    y += yIncr;
                    p += pru;
                    oy = y;
                }
                else {
                    y += yIncr;
                    p += pr;
                }
            }
            this.mkDiv(x2, y2, _s, oy - y2 + ad);
        }
        else {
            while ((dy--) > 0) {
                y += yIncr;
                if (p > 0) {
                    this.mkDiv(x++, oy, _s, y - oy + ad);
                    p += pru;
                    oy = y;
                }
                else p += pr;
            }
            this.mkDiv(x2, oy, _s, y2 - oy + ad + 1);
        }
    }
}


function mkLinDott(x1, y1, x2, y2) {
    if (x1 > x2) {
        var _x2 = x2;
        var _y2 = y2;
        x2 = x1;
        y2 = y1;
        x1 = _x2;
        y1 = _y2;
    }
    var dx = x2 - x1, dy = Math.abs(y2 - y1),
	x = x1, y = y1,
	yIncr = (y1 > y2) ? -1 : 1,
	drw = true;
    if (dx >= dy) {
        var pr = dy << 1,
		pru = pr - (dx << 1),
		p = pr - dx;
        while ((dx--) > 0) {
            if (drw) this.mkDiv(x, y, 1, 1);
            drw = !drw;
            if (p > 0) {
                y += yIncr;
                p += pru;
            }
            else p += pr;
            ++x;
        }
        if (drw) this.mkDiv(x, y, 1, 1);
    }

    else {
        var pr = dx << 1,
		pru = pr - (dy << 1),
		p = pr - dy;
        while ((dy--) > 0) {
            if (drw) this.mkDiv(x, y, 1, 1);
            drw = !drw;
            y += yIncr;
            if (p > 0) {
                ++x;
                p += pru;
            }
            else p += pr;
        }
        if (drw) this.mkDiv(x, y, 1, 1);
    }
}


function mkOv(left, top, width, height) {
    var a = width >> 1, b = height >> 1,
	wod = width & 1, hod = (height & 1) + 1,
	cx = left + a, cy = top + b,
	x = 0, y = b,
	ox = 0, oy = b,
	aa = (a * a) << 1, bb = (b * b) << 1,
	st = (aa >> 1) * (1 - (b << 1)) + bb,
	tt = (bb >> 1) - aa * ((b << 1) - 1),
	w, h;
    while (y > 0) {
        if (st < 0) {
            st += bb * ((x << 1) + 3);
            tt += (bb << 1) * (++x);
        }
        else if (tt < 0) {
            st += bb * ((x << 1) + 3) - (aa << 1) * (y - 1);
            tt += (bb << 1) * (++x) - aa * (((y--) << 1) - 3);
            w = x - ox;
            h = oy - y;
            if (w & 2 && h & 2) {
                this.mkOvQds(cx, cy, -x + 2, ox + wod, -oy, oy - 1 + hod, 1, 1);
                this.mkOvQds(cx, cy, -x + 1, x - 1 + wod, -y - 1, y + hod, 1, 1);
            }
            else this.mkOvQds(cx, cy, -x + 1, ox + wod, -oy, oy - h + hod, w, h);
            ox = x;
            oy = y;
        }
        else {
            tt -= aa * ((y << 1) - 3);
            st -= (aa << 1) * (--y);
        }
    }
    this.mkDiv(cx - a, cy - oy, a - ox + 1, (oy << 1) + hod);
    this.mkDiv(cx + ox + wod, cy - oy, a - ox + 1, (oy << 1) + hod);
}


function mkOv2D(left, top, width, height) {
    var s = this.stroke;
    width += s - 1;
    height += s - 1;
    var a = width >> 1, b = height >> 1,
	wod = width & 1, hod = (height & 1) + 1,
	cx = left + a, cy = top + b,
	x = 0, y = b,
	aa = (a * a) << 1, bb = (b * b) << 1,
	st = (aa >> 1) * (1 - (b << 1)) + bb,
	tt = (bb >> 1) - aa * ((b << 1) - 1);

    if (s - 4 < 0 && (!(s - 2) || width - 51 > 0 && height - 51 > 0)) {
        var ox = 0, oy = b,
		w, h,
		pxl, pxr, pxt, pxb, pxw;
        while (y > 0) {
            if (st < 0) {
                st += bb * ((x << 1) + 3);
                tt += (bb << 1) * (++x);
            }
            else if (tt < 0) {
                st += bb * ((x << 1) + 3) - (aa << 1) * (y - 1);
                tt += (bb << 1) * (++x) - aa * (((y--) << 1) - 3);
                w = x - ox;
                h = oy - y;

                if (w - 1) {
                    pxw = w + 1 + (s & 1);
                    h = s;
                }
                else if (h - 1) {
                    pxw = s;
                    h += 1 + (s & 1);
                }
                else pxw = h = s;
                this.mkOvQds(cx, cy, -x + 1, ox - pxw + w + wod, -oy, -h + oy + hod, pxw, h);
                ox = x;
                oy = y;
            }
            else {
                tt -= aa * ((y << 1) - 3);
                st -= (aa << 1) * (--y);
            }
        }
        this.mkDiv(cx - a, cy - oy, s, (oy << 1) + hod);
        this.mkDiv(cx + a + wod - s + 1, cy - oy, s, (oy << 1) + hod);
    }

    else {
        var _a = (width - ((s - 1) << 1)) >> 1,
		_b = (height - ((s - 1) << 1)) >> 1,
		_x = 0, _y = _b,
		_aa = (_a * _a) << 1, _bb = (_b * _b) << 1,
		_st = (_aa >> 1) * (1 - (_b << 1)) + _bb,
		_tt = (_bb >> 1) - _aa * ((_b << 1) - 1),

		pxl = new Array(),
		pxt = new Array(),
		_pxb = new Array();
        pxl[0] = 0;
        pxt[0] = b;
        _pxb[0] = _b - 1;
        while (y > 0) {
            if (st < 0) {
                st += bb * ((x << 1) + 3);
                tt += (bb << 1) * (++x);
                pxl[pxl.length] = x;
                pxt[pxt.length] = y;
            }
            else if (tt < 0) {
                st += bb * ((x << 1) + 3) - (aa << 1) * (y - 1);
                tt += (bb << 1) * (++x) - aa * (((y--) << 1) - 3);
                pxl[pxl.length] = x;
                pxt[pxt.length] = y;
            }
            else {
                tt -= aa * ((y << 1) - 3);
                st -= (aa << 1) * (--y);
            }

            if (_y > 0) {
                if (_st < 0) {
                    _st += _bb * ((_x << 1) + 3);
                    _tt += (_bb << 1) * (++_x);
                    _pxb[_pxb.length] = _y - 1;
                }
                else if (_tt < 0) {
                    _st += _bb * ((_x << 1) + 3) - (_aa << 1) * (_y - 1);
                    _tt += (_bb << 1) * (++_x) - _aa * (((_y--) << 1) - 3);
                    _pxb[_pxb.length] = _y - 1;
                }
                else {
                    _tt -= _aa * ((_y << 1) - 3);
                    _st -= (_aa << 1) * (--_y);
                    _pxb[_pxb.length - 1]--;
                }
            }
        }

        var ox = 0, oy = b,
		_oy = _pxb[0],
		l = pxl.length,
		w, h;
        for (var i = 0; i < l; i++) {
            if (typeof _pxb[i] != "undefined") {
                if (_pxb[i] < _oy || pxt[i] < oy) {
                    x = pxl[i];
                    this.mkOvQds(cx, cy, -x + 1, ox + wod, -oy, _oy + hod, x - ox, oy - _oy);
                    ox = x;
                    oy = pxt[i];
                    _oy = _pxb[i];
                }
            }
            else {
                x = pxl[i];
                this.mkDiv(cx - x + 1, cy - oy, 1, (oy << 1) + hod);
                this.mkDiv(cx + ox + wod, cy - oy, 1, (oy << 1) + hod);
                ox = x;
                oy = pxt[i];
            }
        }
        this.mkDiv(cx - a, cy - oy, 1, (oy << 1) + hod);
        this.mkDiv(cx + ox + wod, cy - oy, 1, (oy << 1) + hod);
    }
}


function mkOvDott(left, top, width, height) {
    var a = width >> 1, b = height >> 1,
	wod = width & 1, hod = height & 1,
	cx = left + a, cy = top + b,
	x = 0, y = b,
	aa2 = (a * a) << 1, aa4 = aa2 << 1, bb = (b * b) << 1,
	st = (aa2 >> 1) * (1 - (b << 1)) + bb,
	tt = (bb >> 1) - aa2 * ((b << 1) - 1),
	drw = true;
    while (y > 0) {
        if (st < 0) {
            st += bb * ((x << 1) + 3);
            tt += (bb << 1) * (++x);
        }
        else if (tt < 0) {
            st += bb * ((x << 1) + 3) - aa4 * (y - 1);
            tt += (bb << 1) * (++x) - aa2 * (((y--) << 1) - 3);
        }
        else {
            tt -= aa2 * ((y << 1) - 3);
            st -= aa4 * (--y);
        }
        if (drw) this.mkOvQds(cx, cy, -x, x + wod, -y, y + hod, 1, 1);
        drw = !drw;
    }
}


function mkRect(x, y, w, h) {
    var s = this.stroke;
    this.mkDiv(x, y, w, s);
    this.mkDiv(x + w, y, s, h);
    this.mkDiv(x, y + h, w + s, s);
    this.mkDiv(x, y + s, s, h - s);
}


function mkRectDott(x, y, w, h) {
    this.drawLine(x, y, x + w, y);
    this.drawLine(x + w, y, x + w, y + h);
    this.drawLine(x, y + h, x + w, y + h);
    this.drawLine(x, y, x, y + h);
}


function jsgFont() {
    this.PLAIN = 'font-weight:normal;';
    this.BOLD = 'font-weight:bold;';
    this.ITALIC = 'font-style:italic;';
    this.ITALIC_BOLD = this.ITALIC + this.BOLD;
    this.BOLD_ITALIC = this.ITALIC_BOLD;
}
var Font = new jsgFont();


function jsgStroke() {
    this.DOTTED = -1;
}
var Stroke = new jsgStroke();


function jsGraphics(id, wnd) {
    this.setColor = new Function('arg', 'this.color = arg.toLowerCase();');

    this.setStroke = function(x) {
        this.stroke = x;
        if (!(x + 1)) {
            this.drawLine = mkLinDott;
            this.mkOv = mkOvDott;
            this.drawRect = mkRectDott;
        }
        else if (x - 1 > 0) {
            this.drawLine = mkLin2D;
            this.mkOv = mkOv2D;
            this.drawRect = mkRect;
        }
        else {
            this.drawLine = mkLin;
            this.mkOv = mkOv;
            this.drawRect = mkRect;
        }
    };


    this.setPrintable = function(arg) {
        this.printable = arg;
        if (jg_fast) {
            this.mkDiv = mkDivIe;
            this.htmRpc = arg ? htmPrtRpc : htmRpc;
        }
        else this.mkDiv = jg_n4 ? mkLyr : arg ? mkDivPrt : mkDiv;
    };


    this.setFont = function(fam, sz, sty) {
        this.ftFam = fam;
        this.ftSz = sz;
        this.ftSty = sty || Font.PLAIN;
    };


    this.drawPolyline = this.drawPolyLine = function(x, y, s) {
        for (var i = 0; i < x.length - 1; i++)
            this.drawLine(x[i], y[i], x[i + 1], y[i + 1]);
    };


    this.fillRect = function(x, y, w, h) {
        this.mkDiv(x, y, w, h);
    };


    this.drawPolygon = function(x, y) {
        this.drawPolyline(x, y);
        this.drawLine(x[x.length - 1], y[x.length - 1], x[0], y[0]);
    };


    this.drawEllipse = this.drawOval = function(x, y, w, h) {
        this.mkOv(x, y, w, h);
    };


    this.fillEllipse = this.fillOval = function(left, top, w, h) {
        var a = (w -= 1) >> 1, b = (h -= 1) >> 1,
		wod = (w & 1) + 1, hod = (h & 1) + 1,
		cx = left + a, cy = top + b,
		x = 0, y = b,
		ox = 0, oy = b,
		aa2 = (a * a) << 1, aa4 = aa2 << 1, bb = (b * b) << 1,
		st = (aa2 >> 1) * (1 - (b << 1)) + bb,
		tt = (bb >> 1) - aa2 * ((b << 1) - 1),
		pxl, dw, dh;
        if (w + 1) while (y > 0) {
            if (st < 0) {
                st += bb * ((x << 1) + 3);
                tt += (bb << 1) * (++x);
            }
            else if (tt < 0) {
                st += bb * ((x << 1) + 3) - aa4 * (y - 1);
                pxl = cx - x;
                dw = (x << 1) + wod;
                tt += (bb << 1) * (++x) - aa2 * (((y--) << 1) - 3);
                dh = oy - y;
                this.mkDiv(pxl, cy - oy, dw, dh);
                this.mkDiv(pxl, cy + y + hod, dw, dh);
                ox = x;
                oy = y;
            }
            else {
                tt -= aa2 * ((y << 1) - 3);
                st -= aa4 * (--y);
            }
        }
        this.mkDiv(cx - a, cy - oy, w + 1, (oy << 1) + hod);
    };


    /* fillPolygon method, implemented by Matthieu Haller.
    This javascript function is an adaptation of the gdImageFilledPolygon for Walter Zorn lib.
    C source of GD 1.8.4 found at http://www.boutell.com/gd/

THANKS to Kirsten Schulz for the polygon fixes!

The intersection finding technique of this code could be improved
    by remembering the previous intertersection, and by using the slope.
    That could help to adjust intersections to produce a nice
    interior_extrema. */
    this.fillPolygon = function(array_x, array_y) {
        var i;
        var y;
        var miny, maxy;
        var x1, y1;
        var x2, y2;
        var ind1, ind2;
        var ints;

        var n = array_x.length;

        if (!n) return;


        miny = array_y[0];
        maxy = array_y[0];
        for (i = 1; i < n; i++) {
            if (array_y[i] < miny)
                miny = array_y[i];

            if (array_y[i] > maxy)
                maxy = array_y[i];
        }
        for (y = miny; y <= maxy; y++) {
            var polyInts = new Array();
            ints = 0;
            for (i = 0; i < n; i++) {
                if (!i) {
                    ind1 = n - 1;
                    ind2 = 0;
                }
                else {
                    ind1 = i - 1;
                    ind2 = i;
                }
                y1 = array_y[ind1];
                y2 = array_y[ind2];
                if (y1 < y2) {
                    x1 = array_x[ind1];
                    x2 = array_x[ind2];
                }
                else if (y1 > y2) {
                    y2 = array_y[ind1];
                    y1 = array_y[ind2];
                    x2 = array_x[ind1];
                    x1 = array_x[ind2];
                }
                else continue;

                // modified 11. 2. 2004 Walter Zorn
                if ((y >= y1) && (y < y2))
                    polyInts[ints++] = Math.round((y - y1) * (x2 - x1) / (y2 - y1) + x1);

                else if ((y == maxy) && (y > y1) && (y <= y2))
                    polyInts[ints++] = Math.round((y - y1) * (x2 - x1) / (y2 - y1) + x1);
            }
            polyInts.sort(integer_compare);
            for (i = 0; i < ints; i += 2)
                this.mkDiv(polyInts[i], y, polyInts[i + 1] - polyInts[i] + 1, 1);
        }
    };


    this.drawString = function(txt, x, y) {
        this.htm += '<div style="position:absolute;white-space:nowrap;' +
			'left:' + x + 'px;' +
			'top:' + y + 'px;' +
			'font-family:' + this.ftFam + ';' +
			'font-size:' + this.ftSz + ';' +
			'color:' + this.color + ';' + this.ftSty + '">' +
			txt +
			'<\/div>';
    };


    /* drawStringRect() added by Rick Blommers.
    Allows to specify the size of the text rectangle and to align the
    text both horizontally (e.g. right) and vertically within that rectangle */
    this.drawStringRect = function(txt, x, y, width, halign) {
        this.htm += '<div style="position:absolute;overflow:hidden;' +
			'left:' + x + 'px;' +
			'top:' + y + 'px;' +
			'width:' + width + 'px;' +
			'text-align:' + halign + ';' +
			'font-family:' + this.ftFam + ';' +
			'font-size:' + this.ftSz + ';' +
			'color:' + this.color + ';' + this.ftSty + '">' +
			txt +
			'<\/div>';
    };


    this.drawImage = function(imgSrc, x, y, w, h, a) {
        this.htm += '<div style="position:absolute;' +
			'left:' + x + 'px;' +
			'top:' + y + 'px;' +
			'width:' + w + ';' +
			'height:' + h + ';">' +
			'<img src="' + imgSrc + '" width="' + w + '" height="' + h + '"' + (a ? (' ' + a) : '') + '>' +
			'<\/div>';
    };


    this.clear = function() {
        this.htm = "";
        if (this.cnv) this.cnv.innerHTML = this.defhtm;
    };


    this.mkOvQds = function(cx, cy, xl, xr, yt, yb, w, h) {
        this.mkDiv(xr + cx, yt + cy, w, h);
        this.mkDiv(xr + cx, yb + cy, w, h);
        this.mkDiv(xl + cx, yb + cy, w, h);
        this.mkDiv(xl + cx, yt + cy, w, h);
    };

    this.setStroke(1);
    this.setFont('verdana,geneva,helvetica,sans-serif', 10, Font.PLAIN);
    this.color = '#000000';
    this.htm = '';
    this.wnd = wnd || window;

    if (!(jg_ie || jg_dom || jg_ihtm)) chkDHTM();
    if (typeof id != 'string' || !id) this.paint = pntDoc;
    else {
        this.cnv = document.all ? (this.wnd.document.all[id] || null)
			: document.getElementById ? (this.wnd.document.getElementById(id) || null)
			: null;
        this.defhtm = (this.cnv && this.cnv.innerHTML) ? this.cnv.innerHTML : '';
        this.paint = jg_dom ? pntCnvDom : jg_ie ? pntCnvIe : jg_ihtm ? pntCnvIhtm : pntCnv;
    }

    this.setPrintable(false);
}



function integer_compare(x, y) {
    return (x < y) ? -1 : ((x > y) * 1);
}