/*Last Change: Robert , September 3, 2005:
        1. Add some comments
        2. solve the scrolling problem it looks ok now


*/
// Last change: Guus Ellenkamp, August 31, 2005: Just added some comments

// Robert worked on this: made better datatable

// Change: Guus Ellenkamp, August 2, 2005
// removed creation of fields (moved to getFieldInfo() in Data.js

var titles;
var tableDiv;
var table;
var tempTable;
var tblNames= new Array();
var pElement = new Array();
var div;
var columnText= new Array()
var firstDivCol;

function createTable(tableType) {

var codeTable, names;
                firstColDiv=createBasicDiv();
                // Try next line, almost does the trick, just add something below the last line
                firstColDiv.style.overflow="hidden";
        //        firstColDiv.style.backgroundColor=tableGrey
                tableDiv=createBasicDiv();

                elementDiv=createBasicDiv();
                elementDiv.onscroll=onScroll;
                tableDiv.appendChild(elementDiv);
                tableDiv.style.overflow="hidden";
        //        tableDiv.style.backgroundColor=tableGrey;
                colDiv=createBasicDiv(); // this is use for tha column elements
                colDiv.style.overflow="hidden";
                tableDiv.appendChild(colDiv);

                document.body.appendChild(firstColDiv);
                //the event when the user scroll
                //tableDiv.onmousewheel=onMouseWheel;
                names=new Array();
                codeTable=getFundCodes(tableType);

                l=codeTable.length;

                for (i=0;i<l;i++) {
                        names[i]=new Object();
                        names[i].id=codeTable[i];
                        names[i].text=getFundName(codeTable[i]);
                        if (names[i]==null)
                                names[i]="unknown";
                }

                        tempTable=createDataTable(names, titles);

                // i pass the column value so that i can easily acces later

                for(i=0;i<tempTable[0].length;i++){
                        //for the Column Header
                        columnText[i]=document.createElement("span");
                        columnText[i].style.position="absolute";
                        columnText[i].style.backgroundColor=tableGrey;
                        columnText[i].innerHTML=tempTable[0][i].header;
                        clearMargins(columnText[i]);
                        colDiv.appendChild(columnText[i]);
                }

                //this now for the content we append into our div element
                i=0;
                while(i<tempTable.length){

                        j=1;

                        while(j<tempTable[0].length){
                                tempTable[i][j].content.style.position="absolute";
                                elementDiv.appendChild(tempTable[i][j].content);
                        j++;
                        }
                i++;
                }

                //this is the Name column
        //        firstColDiv.appendChild(columnText[0]);
                //for the first column
                for(i=0;i<tempTable.length;i++){
                        tempTable[i][0].content.style.position="absolute";
                        firstColDiv.appendChild(tempTable[i][0].content);
                }
                //now we have to resize the table according to what we want
                resizeTable();

                tableDiv.resize=resizeTable;
                tableDiv.div=true;
        return tableDiv;
}

function resizeTable(){

        var windowWidth, windowHeight;
        var left=0, i;

        windowWidth=getWindowWidth();
        windowHeight=getWindowHeight();

        //create the div element
                tableDiv.style.left=Math.round(leftBack.offsetLeft+ leftBack.offsetWidth*2)+ "px";
                tableDiv.style.width=Math.round(windowWidth - (leftBack.offsetWidth*2 + leftBack.offsetLeft)) + "px";
                tableDiv.style.top=Math.round(blueBar.offsetTop + blueBar.offsetHeight) + "px";
                tableDiv.style.height=Math.round(windowHeight - Math.round(blueBar.offsetTop + blueBar.offsetHeight)) + "px";

                i=1;
                //initialize variable may be use later
                width=leftBack.offsetWidth ; //the width of our cell
                height=Math.round(windowWidth/20);//the height of our cell
                left=Math.round(windowWidth/200);//the starting left
                distance=Math.round(windowWidth/200);//the distance or margin of our cell
                // i store it firstinot the variable coz i encourted weird problem hte dame with the height
                wdt=Math.round(windowWidth - (leftBack.offsetWidth*2+ leftBack.offsetLeft)) ;
                elementDiv.style.left="0px";
                //alert(wdt);
                elementDiv.style.width=wdt + "px";//Math.round(windowWidth*2)//Math.round(windowWidth - (leftBack.offsetWidth*2+ leftBack.offsetLeft)) + "px";
                //elementDiv.style.height=Math.round(windowHeight - Math.round(blueBar.offsetTop + blueBar.offsetHeight)) + "px";

                //now we design first the header
                while(i<columnText.length){
                        //setting some property
                        columnText[i].style.fontSize=tableHeaderFont;
                        columnText[i].style.backgroundColor=tableGrey;
                        columnText[i].style.fontFamily=fontFamily;
                        columnText[i].style.width=width + "px";
                        columnText[i].style.height=height + "px";
                        columnText[i].style.left=left + "px";
                        left=left+width + distance;
                        i++;
                }//end header

                elementDiv.style.top=Math.round(windowWidth/20) + "px";//columnText[1].offsetHeight + "px";
                hgt=(windowHeight - (blueBar.offsetTop + blueBar.offsetHeight)) - Math.round(windowWidth/20)
                elementDiv.style.height=(windowHeight - (blueBar.offsetTop + blueBar.offsetHeight)) - Math.round(windowWidth/20) + "px";

                colDiv.style.left="0px";
                colDiv.style.height=Math.round(windowWidth/20) + "px";
                colDiv.style.width=wdt - 20 + "px";
                colDiv.style.top="0px";

                //document.title=colDiv.offsetWidth
                //now the data
                xtop=0;
                height=Math.round(windowWidth/55);
                i=0;
                while(i<tempTable.length){
                        j=1;
                        left=distance;
                        while(j<tempTable[i].length){
                                //position the data on page
                                tempTable[i][j].content.style.left=left + "px";
                                tempTable[i][j].content.style.top=xtop + "px";
                                tempTable[i][j].content.style.width = width + "px";
                                tempTable[i][j].content.style.height=height + "px";
                                tempTable[i][j].content.style.fontSize=tableTextFont;
                                //this block of if condition is use to color the background
                                //it have a alternate color so that i conditioned the Modulus Division
                                if((i%2)==0){
                                        tempTable[i][j].content.style.backgroundColor="#FFFFFF";
                                }
                                else{
                                        tempTable[i][j].content.style.backgroundColor=tableGrey
                                }
                                //for the left
                                left=left+width + distance;
                        j++;
                        }
                        //for our top
                        xtop=xtop + height ;
                i++;
                }//end data

                //now for the fisrtColDiv element Or the Name column
                firstColDiv.style.left=leftBack.offsetLeft + leftBack.offsetWidth + "px";
                firstColDiv.style.top=Math.round(windowWidth/20) + blueBar.offsetTop + blueBar.offsetHeight+ "px";
                firstColDiv.style.height=Math.abs(hgt - 20) + "px";//Math.round(windowHeight - firstColDiv.offsetTop) - 20 + "px"; //its solve the scrolling problem i just minus 20
                firstColDiv.style.width = leftBack.offsetWidth + "px";

                //the header Name
//                columnText[0].style.left=distance + "px";
                columnText[0].style.fontSize=tableHeaderFont;
                columnText[0].style.fontFamily=fontFamily;
                columnText[0].style.width=width-distance + "px";
                columnText[0].style.height=Math.round(windowWidth/20) + "px";

                //since the measurement of IE and Mozilla is different
        /*        if(navigator.appName=="Microsoft Internet Explorer"){

                        xtop=Math.round(windowWidth/20);
                }
                else{
                        xtop=Math.round(windowWidth/20) + Math.round(windowWidth/80);
                }*/
                xtop=0;
                // the data of the first row
                for(i=0;i<tempTable.length;i++){
                        tempTable[i][0].content.style.fontSize=tableTextFont;
                        tempTable[i][0].content.style.left=distance + "px";
                        tempTable[i][0].content.style.width=width  - distance + "px";
                        tempTable[i][0].content.style.height=height + "px";
                        tempTable[i][0].content.style.top=xtop+ "px";
                        tempTable[i][0].content.style.textDecoration="underline";
                        tempTable[i][0].content.style.color="blue";
                        tempTable[i][0].content.onmouseover=mouseOver//r//changeCursor1;
                //now the color so that it will look the same like the first div
                        if((i%2)==0){
                                tempTable[i][0].content.style.backgroundColor="#FFFFFF";
                        }
                        else{
                                tempTable[i][0].content.style.backgroundColor=tableGrey
                        }

                        //for the top value
                        xtop=xtop + height;
                }


        return true;

}
function tableElement(str){
var i;
        fillCodeAndNameTable();
        titles=getFieldInfo();
        table1=createTable(str);
        resizeFunc();
        return table1;
}
     /*
function changeCursor1(){

        changeCursor2(this);
}

function changeCursor2(obj){
var myObj;
        if(typeof(obj)=="undefined"){

                myObj=this;
        }
        else{
                myObj=obj;

        }
//        alert(myObj);

        if(!browserSnipper()){

                myObj.style.cursor="pointer";
        }
        else{
                myObj.style.cursor="hand";
        }
        //alert("D");
}       */

function onScroll(){
        //its call when the user scroll our div element
        //the two div element must be equal
        colDiv.scrollLeft=elementDiv.scrollLeft;
        firstColDiv.scrollTop=elementDiv.scrollTop;// + firstColDiv.offsetHeight;
}

function onMouseWheel(){

        alert("onMouseWheel Fires");
}