var allDate;
var aexDatumDiv;
var tblDatum;
var tblDiv;

function dateCalendar(){

        var myTable, windowWidth;
        var date=new Array(), company=new Array(), eventType=new Array();
        var i, index;
        var months;
        var tempMon=new Array();
        var regions;
        var tempStr1, tempStr2;
        var tdy = new Date();
        
        writeStatus("Calculating, please wait...");
        region=getRegion();
        months=region.months;
        allDate=getAllDates(tdy);
        //i create a blank table with 3 column the row is depend the allDate length

        myTable=createBlankTable(allDate.length,2);
        for(i=0;i<allDate.length;i++){
                //i collect all the information of allDate array
                //and tranfers to the other array
                date[i]=shortDate(allDate[i].date);
                company[i]=allDate[i].companyName;
                eventType[i]=allDate[i].eventType;
        }
        //insert the value to our table
        insertColumn(myTable, 0, date);
        insertColumn(myTable, 1, company);
        insertColumn(myTable, 2, eventType);

        for(i=0;i<myTable.rows.length;i++){
                //i extend the cell object
                //i set the date to true
                //so that i can determine later that this cell is content date
                //what ever may insert later if the date is undefined
                myTable.rows[i].cells[0].date=true;
        }

        //set the index to zero
        index=0;
        //this part is use to know where we are going to insert the title month on the table
        for(i=0;i<allDate.length;i++){
                //we have to compare the month now
                if(i<allDate.length-1 && allDate[i].date.getMonth()!= allDate[i+1].date.getMonth()){

                        tempMon[index]=new Object();
                        tempMon[index].rowNo=i+index+1;
                        tempMon[index].month=allDate[i+1].date.getMonth()+1;
                        tempMon[index].year=allDate[i+1].date.getFullYear();
                        index++;
                }
        }
        //end locating

        //now we have to insert the data that we gather
        // on the previous block of code
        //this block is use to insert the header
        for(i=0;i<tempMon.length;i++){
        var tempTable;
        var cell;
                myTable.insertRow(tempMon[i].rowNo);
                tempTable=myTable.rows[tempMon[i].rowNo];
                myTable.rows[tempMon[i].rowNo].style.verticalAlign="bottom";
                cell=tempTable.insertCell(0);
                tempStr1=months[tempMon[i].month-1]+" "+tempMon[i].year;
                tempStr2=tempStr1.slice(1);
                tempStr1=tempStr1.charAt(0).toUpperCase()+tempStr2;
                cell.innerHTML=tempStr1;
                cell=tempTable.insertCell(1);
                cell=tempTable.insertCell(2);
        }//end loop

        //now we insert on the first row
        myTable.insertRow(0);
        tempTable=myTable.rows[0];
        cell=tempTable.insertCell(0);
        tempStr1=months[allDate[0].date.getMonth()]+" "+allDate[0].date.getFullYear();
        tempStr2=tempStr1.slice(1);
        tempStr1=tempStr1.charAt(0).toUpperCase()+tempStr2;
        cell.innerHTML=tempStr1;
        tempTable.style.backgroundColor=tableGrey;
        cell=tempTable.insertCell(1);
        cell=tempTable.insertCell(2);

        //this part is use to insert the blank cell in the table
        //before the month header
        windowWidth=getWindowWidth();
        //var x=0;
        var count=0; // better move declarations to the front of the function
        for(i=0;i<myTable.rows.length;i++){

                if(typeof(myTable.rows[i].cells[0].date)=="undefined"){

                                //use to prevent for the first row to insert the cell
                                if(i!=0){
                                        var tempTable;
                                        var cell;
                                        myTable.insertRow(i);
                                        tempTable=myTable.rows[i];
                                        //we have to insert cell for the indent porpuse
                                        cell=tempTable.insertCell(0);
                                        cell.style.height=Math.round(windowWidth/40) + "px";
                                        //this will determine that this cell is blank
                                        cell.blank=true;
                                        cell=tempTable.insertCell(1);
                                        cell=tempTable.insertCell(2);

                                        //for the header of month group        background color and fontsize
                                        myTable.rows[i+1].cells[0].style.backgroundColor=tableGrey;
                                        myTable.rows[i+1].cells[0].style.fontSize=tableTextFont;
                                        myTable.rows[i+1].cells[1].style.backgroundColor=tableGrey;
                                        myTable.rows[i+1].cells[2].style.backgroundColor=tableGrey;

                                        i=i+2;
                                        x=0;
                                }//end if
                }//end if
                else{

                        if(i>1){
                                //this part is put the same color if the date is equal
                                if(myTable.rows[i].cells[0].innerHTML==myTable.rows[i-1].cells[0].innerHTML){

                                        for(var index=0;index<3; index++){
                                                myTable.rows[i].cells[index].style.backgroundColor=myTable.rows[i-1].cells[0].style.backgroundColor
                                        }//end loop

                                }
                                else{
                                        if(x==1){
                                                myTable.rows[i].cells[0].style.backgroundColor="#FFFFFF";
                                                x=0;

                                        }
                                        else{

                                                for(var index=0;index<3;index++){
                                                        myTable.rows[i].cells[index].style.backgroundColor=tableGrey;

                                                }//end loop
                                                x=1;
                                        }//end if

                                }//end if
                        }//end if

                }//end if
        }//end loop
        (myTable);
        var allFriday;
        var allFriday1 = new Array();
        allFriday=getThirdFriday();

        //we have to sort our array and delete the pass day
        allFriday=sortDateArray(allFriday);
        for(i=0;i<allFriday.length;i++){
                //convert our object to string
                //so that we can determine if our date is equal any of those cell value
                allFriday1[i]=toDateString(allFriday[i].date);

        }

        for(i=2;i<myTable.rows.length;i++){

                if(myTable.rows[i].cells[0].style.backgroundColor==myTable.rows[i-1].cells[0].style.backgroundColor){

                        myTable.rows[i].cells[0].innerHTML="";

                }

                for(index=0;index<allFriday1.length;index++){
                        //we have to check if it is a friday make the cell bold
                        if(myTable.rows[i].cells[0].innerHTML==allFriday1[index]){

                                myTable.rows[i].cells[0].style.fontWeight="bold";
                        }

                }
        }
        myTable.className="myTable";

		writeStatus("Done");

        return myTable;

}

function dateCalendarPage(){

        //create basic div element
        aexDatumDiv=createBasicDiv();
        (aexDatumDiv);
        aexDatumDiv.style.overflowX="hidden";
        aexDatumDiv.className="aexDatumDiv";
        document.body.appendChild(aexDatumDiv);

       	//tblCaption.innerHTML="Kalendar op Datum"
        //advanceText.innerHTML="\(in bewerking\)";

        //gather all date
        //the tbAexDatum will return a table with all date it is already a table
        tblDatum=dateCalendar();
        aexDatumDiv.resize=resizeDateCalendarPage;
        aexDatumDiv.appendChild(tblDatum);
//        aexDatumDiv.div=false;

        return aexDatumDiv;
}

function resizeDateCalendarPage(){
var windowWidth, i, j, tempTable,cell, tableHeaderFont, tableTextFont, windowHeight;
        windowWidth=getWindowWidth();
        windowHeight=getWindowHeight();

        if(!browserSnipper()){

                windowHeight=window.innerHeight;
        }
//        tblDiv=document.getElementById("tblDiv");
        //this block of code is use to design our table in datum
        tableHeaderFont=Math.round(windowWidth/60) + "px";
        tableTextFont=Math.round(windowWidth/80) + "px";
        (tblDatum);
        if(typeof(aexDatumDiv)=="object" && typeof(tblDatum)=="object"){
                //aexDatumDiv style
                aexDatumDiv.style.left=Math.round(leftBack.offsetLeft+ leftBack.offsetWidth ) + "px";
                aexDatumDiv.style.width=blueBar.offsetWidth + "px";//Math.round(windowWidth - (leftBack.offsetWidth + leftBack.offsetLeft))+ "px";
                aexDatumDiv.style.top=Math.round(blueBar.offsetTop + blueBar.offsetHeight) + "px";
                aexDatumDiv.style.height=Math.round(windowHeight - Math.round(blueBar.offsetTop + blueBar.offsetHeight)) + "px";

                //for our table style

                        tblDatum.style.fontSize=tableTextFont;
                        tblDatum.style.left=aexDatumDiv.offsetLeft + "px";
                        tblDatum.style.top=Math.round(blueBar.offsetTop + blueBar.offsetHeight) + "px";//table.offsetTop + "px";
                        tblDatum.style.width=Math.round(windowWidth - Math.round(leftBack.offsetLeft + leftBack.offsetWidth)) - Math.round(windowWidth/80) + "px";
                        tblDatum.style.fontFamily="Trebuchet Ms";
                //        tblDatum.style.color="#cccccc"
                for(i=0;i<tblDatum.rows.length;i++){

                        //this will design the header of the month group
                        //to stay the fontsize bigger than the other
                        if(typeof(tblDatum.rows[i].cells[0].date)=="undefined"){

                                        tblDatum.rows[i].cells[0].style.fontSize=tableHeaderFont;
                                        if(tblDatum.rows[i].cells[0].blank){
                                                //this is use the height for the blank table
                                                tblDatum.rows[i].cells[0].style.height=Math.round(windowWidth/40) + "px";
                                        }//end if
                        }//end if
                }//end loop




        }//end if


        return true;
}