<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script src="{{static_url("jquery-2.1.0.min.js")}}" type="text/javascript"></script>
    <script src="{{static_url("astropyp.js")}}" type="text/javascript"></script>
    <title id="myTitle">Scroll Table</title>
</head>
<style>
.myTable{
    width:100%;
}
#heading{
    font-weight:bold;
}
#tblDiv{
    overflow-y: scroll;
    overflow-x: scroll;
}
</style>
<body>
    <table id="tblHeader" class="myTable">
        <colgroup id="colHeader">
        </colgroup>
        <thead>
            <tr id="heading">
            </tr>
        </thead>
    </table>
    <div id="tblDiv">
        <table id="dataTable" class="myTable">
            <colgroup id="colTable">
            </colgroup>        
        </table>
    </div>
    <script>
    window.onload=function(){
        var params=window.opener.tblParams;
        document.getElementById("myTitle").innerHTML=params.title;
        Astropyp.Utils.buildInteractiveTable(params.data,document.getElementById("dataTable"));
        console.log(params.data);
        if(params.hasOwnProperty('header')){
            for(var i=0;i<params.header.length;i++){
                var colHeader=document.getElementById("colHeader");
                var colTable=document.getElementById("colTable");
                var heading=document.getElementById("heading");
                var newCol=addElement(colHeader,'col',[["span",1]]);
                if(params.header[i].hasOwnProperty('attributes')){
                    var element=params.header[i];
                    for(var j=0;j<element.attributes.length;j++){
                        newCol.setAttribute(element.attributes[j].property,element.attributes[j].value);
                    }
                };
                colTable.appendChild(newCol.cloneNode());
                var cell=heading.insertCell(i);
                cell.innerHTML=params.header[i].title;
            }
        };
        if(params.hasOwnProperty('attributes')){
            for(var i=0;i<params.attributes.length;i++){
                var element=document.getElementById(params.attributes[i].element);
                element.setAttribute(params.attributes[i].property,params.attributes[i].value);
            }
        };
        if(params.hasOwnProperty('css')){
            for(var i=0;i<params.css.length;i++){
                $(params.css[i].className).css(params.css[i].properties);
            }
        };
    };
    /*
    
    Below is an example of how to open a new scroll table from another HTML document
    
    tblParams={
        title:"Header",
        header:[
            {title:"Heading1",attributes:[{property:'width',value:'10%'}]},
            {title:"Heading1",attributes:[{property:'width',value:'30%'}]},
            {title:"Heading1",attributes:[{property:'width',value:'70%'}]},
        ],
        data:[['a','b','c'],['d','e','f'],['h','i','j'],['k','l','m'],['n','o','p'],['q','r','s']],
        attributes:[
            {element:"tblDiv",property:"height",value:"50px"}
        ],
        css:[
            {className:".myTable",properties:{width:"50%"}},
            {className:"#tblDiv",properties:{height:"50px"}}
        ]
    };
    window.open("scrollTable");*/
    </script>
</body>
</html>