$(function () {
    var appliedBindings = false;
    var totdagen = 365;
	var projStartM;
	var projEindM;
  	function MaakGanttAchtergrond(){
                  var self = ls.ModelMensen;

                  $("#bgTable2").remove();
                  $("#bgTable3").remove();
                  var Today = new Date();
                  var graphStart;
                  if (Today.getTime() < projStartM.getTime()) {
                      graphStart = new Date (Today.getFullYear(), Today.getMonth(), Today.getDate());
                  }
                  else {
                     graphStart   = new Date(projStartM.getFullYear(), projStartM.getMonth(), 1);
                  }
                  var AddToEind = 1;
                  if (self.schuifwidth >=  66){AddToEind= 12};
                  dagen = GetDagen( projEindM.getMonth() + AddToEind, projEindM.getFullYear());
                  var graphEind = new Date(projEindM.getFullYear() + 1, projEindM.getMonth() + AddToEind,dagen);
                  GanttStartDateXX = graphStart;
                  var t1='';
                  var t2='';
                  var t3='';
                  var i=new Date(graphStart.getFullYear(), graphStart.getMonth(), graphStart.getDate());
 
                  var maand = 0;
                  var jaar = 0;
                  var lbl='';
                  var colcounter =0;
                  var colspan = 0;
                  var colspandagen = 0;
                   totdagen = 0;   
                  var bgColH = "#975796";
                  var bgColM = "#e9dce9";     
                  while (i < graphEind){
            switch (self.periode())
            {     case 1:
                        maand =  i.getMonth();
                        lbl=maandArray[maand] + " " + i.getFullYear();
                        colspan = GetDagen((maand+ 1), i.getFullYear())  ;
                        totdagen += colspan;
                        colcounter += colspan;
                        
                         t1 +="<td  class='gColHeader3' " + 
                                  "style='width: " + (colspan * self.dagwidth()) + "px' " +
                                  "coldagen = " + colspan +
                                  " colspan='" +  colspan    + "'>" + lbl +"</td> ";
                        testdate=new Date(i);
                        for (var j=1; j<=colspan;j++){
                               testdate.setDate(j);
                               if (bgColH == "#975796") { 
                                      bgColH ="#b669b5";
                                      bgColM = "#f5eff5";
                                }
                                else {
                                      bgColH = "#975796";
                                      bgColM =  "#e9dce9";
                                }

                               if (testdate.getDay() == 0 ||  testdate.getDay() ==6) {
                                     t2 += "<td class='gCellM  gColHeader4' style=' width:" +  self.dagwidth() +"px; background-color: " + bgColH + "' dagen=1 >" + j +"</td>";
                                     t3 += "<td class='gCellM holy' dagen=1  style='width:" + self.dagwidth()  +"px;background-color: " + bgColM + "' > </td>";
                               }
                               else {
                               t2 += "<td class='gCellM gColHeader4' style='  width:" + self.dagwidth()  +"px;background-color: " + bgColH + "' dagen =1>" + j +"</td>";
                               t3 += "<td class='gCellM' dagen=1 style='width:" + self.dagwidth()  +"px;background-color: " + bgColM + "'  > </td>"  ;
                              };
                         };
                        i.setMonth(i.getMonth() + 1);
                        break; // einde case 1
                  case 2:
                        var colspan2 = 0;
                        var colspan = 0;
                        var colspandagen = 0;
                        maand =  i.getMonth() + 1;
                         lbl= i.getFullYear();

                        for (var j=maand; j<=12;j++){
                               dagen = GetDagen(j, i.getFullYear());
                               totdagen  += dagen;
                               colspandagen += dagen;
                               colspan += 1;
                               colcounter += 1;
                              if (bgColH == "#975796") { 
                                      bgColH ="#b669b5";
                                      bgColM = "#f5eff5";
                                }
                                else {
                                      bgColH = "#975796";
                                      bgColM =  "#e9dce9";
                                }
                                t2 += "<td  class='gCellM gColHeader4'  style=' width:"  + (dagen * self.dagwidth())+  "px; background-color: " + bgColH + "' dagen=" + dagen+ "  >" + maandArray2[(j - 1)] +"</td>";              
                                t3 += "<td class='gCellM' dagen=" + dagen + " style='width:" + (dagen * self.dagwidth() ) +"px; background-color: " + bgColM + "' > </td>"  ;                
                            };
                          t1 +="<td  class='gColHeader3' " +
                                        "  style='width:" + (colspandagen * self.dagwidth()  ) +"px'  " +
                                        "  coldagen = " + colspandagen +
                                        "  colspan    ='" +  colspan    + "'>" + lbl +"</td> ";
                          i.setMonth (i.getMonth() + (12 - maand ) + 1);
                        break; // einde case 2
                   case 3:
                         colspandagen = 0;
                        colcounter += 1;
                        dagen=GetDagen(2,i.getFullYear());
                        dagen =337 + dagen;
                        colspandagen += dagen;
                        totdagen += dagen;
                          if (bgColH == "#975796") { 
                                      bgColH ="#b669b5";
                                      bgColM = "#f5eff5";
                                }
                                else {
                                      bgColH = "#975796";
                                      bgColM =  "#e9dce9";
                                }
                        t1 +="<td class='gColHeader3' " +
                                       " style='width:" + (colspandagen * self.dagwidth() ) +"px' "+
                                       " coldagen =" + dagen +
                                       " dagen=" + dagen+ " > &nbsp; " + "</td> ";
                        t2 += "<td class='gCellM gColHeader4'  dagen=" + dagen + " style=' width:"+ (dagen * self.dagwidth)+ " px ; background-color: " + bgColH + "'>" + i.getFullYear() +"</td>";
                        t3 += "<td class='gCellM' dagen=" +dagen + " style='width:" + (dagen * self.dagwidth())  +"px; background-color: " + bgColM + "'> </td>"  ;
                        i.setMonth (i.getMonth() + (12 - maand ) + 1);
                        break;
                   case 4:   lbl= i.getFullYear();
                        t1 +="<td class='gColHeader3'>" + lbl +"</td> ";
                         i.setMonth (i.getMonth() + 12);
                        break;
                   default: i = graphEind;
            }
      } // einde while

         var wTabel = self.dagwidth() * totdagen;
         var tr1 = $("<tr>");
         tr1.html(t1);
         var tr2=$("<tr>");
         tr2.html(t2);
        var gTHead1=$("<thead>").append(tr1).append(tr2);
     
      var table=$("<table class='gTable' id='bgTable2' cellspacing=0 cellpadding= 0  cols='" +  colcounter + "'>");
       table.css({width:   wTabel + "px"});

      table.append(gTHead1);
      $(table).insertAfter('#putheaderhere');
    
      var matrix = '';
      var rows =13;
      for (i=0; i<rows;i++){
           matrix +='<tr>' + t3 + "</tr>";
          }
      table=$("<table class='gTable' id='bgTable3' cellspacing=0 cellpadding= 0  cols='" +  colcounter + "'>");
      table.css({width:   wTabel + "px"});
 
      table.append(matrix);
      $(table).insertAfter('#puttablehere2');
      $("#puttablehere2").css({width:  wTabel + "px"});

      $(".scroller3").width((totdagen * self.dagwidth() ));
      $(".lijnstuk").each(function(index){
               $(this).width( $(this).attr('dagen') * self.dagwidth()  );
       });
       CoordinatesToday(self.periode());
   };
   
        function CoordinatesToday(periode){
              var self = ls.ModelMensen;
              var inDag = new Date()
              var startdag = new Date(projStartM.getFullYear(), projStartM.getMonth(),1);
              var vLeft = 0;
              dagen= Math.ceil((inDag.getTime() - startdag.getTime()) / MSdag );
               vLeft= (dagen - 0.5) * self.dagwidth() ;
               $('#todayLineM').css('left', vLeft);
               $('#todayLineM').css('height', 430);
               $("#todayLineM").attr("dagen",(dagen - 0.5) );
               if (inDag.getTime() > startdag.getTime() && inDag.getTime() < projEindM.getTime()){
                     $('#scroller2').scrollLeft((vLeft - 20) );
                } ;
        };  
        $("#scroller2").scroll(function() {
               $('#scroller1').scrollLeft($( "#scroller2") .scrollLeft()) ;
              $(".holder3").scrollLeft($("#scroller2").scrollLeft());
            });
         $("#scroller1").scroll(function() {
               $('#scroller2').scrollLeft($( "#scroller1") .scrollLeft()) ;
               $(".holder3").scrollLeft($("#scroller1").scrollLeft());
            });
      
            fNewMens = function (m){
                      var self= this;
                      this.id    = m.id;
                      this.naam = m.fullname;
                      this.takenC = ko.observableArray();
                      $.each(m.takenC, function(i,t){
                              self.takenC.push(t);
                      })
                      this.takenU = ko.observableArray();
                      $.each(m.takenU, function(i,t){
                              self.takenU.push(t);
                      })
                      
                      var nums = new Array();
                      var dat1 = new Date(projStartM.getTime());
                      dat1.setDate(1);
                      var dat2 = new Date(projEindM.getTime());
           
                    //  var i = 0;
                      while (dat1.getTime() <=dat2.getTime()){
                          var actcounter = 0;
                          var vacties = '';
                          var uacties ='';
                          $.each(m.takenC, function(i,t){
                                var datstart = new Date(t.start.substring(0,4), parseInt(t.start.substring(5,7) ,10)-1, t.start.substring(8,10));
                                var dateind =new Date(t.eind.substring(0,4), parseInt(t.eind.substring(5,7) ,10)-1, t.eind.substring(8,10));
                                if (dat1.getTime() >= datstart .getTime()  &&
                                    dat1.getTime() <= dateind.getTime() ) {
                                    actcounter ++;
                                    vacties  += t.naam + ";";
                                }
                          }); // each
                          $.each(m.takenU, function(i,t){
                                var datstart = new Date(t.start.substring(0,4), parseInt(t.start.substring(5,7),10 )-1, t.start.substring(8,10));
                                var dateind =new Date(t.eind.substring(0,4), parseInt(t.eind.substring(5,7) ,10)-1, t.eind.substring(8,10));
                                if (dat1.getTime() >= datstart .getTime()  &&
                                    dat1.getTime() <= dateind.getTime() ) {
                                    actcounter ++;
                                  uacties += t.naam + ";" ;
                                }
                          }); // each
                     
                          nums.push({counter  : actcounter,
                                                vacts       : vacties,
                                                uacts       : uacties});
                          dat1.setDate(dat1.getDate() + 1);
                          i++;
                      }        
                      this.html= "<div class='mensregel' id='m" + this.id + "' >"+
                                 "<div style='float:left; width: 243px; overflow-x:hidden;'>" + this.naam+"</div>" +
                                 "<div class='upholder3' style='float:left; height :15px; overflow-y:hidden; overflow-x:hidden' >" +
                                 "<div class ='holder3' style='width: 680px;height:32px; overflow-y:hidden'>" +
                                 "<div class='scroller3'  style='width:1200px'   >  " ;
                                                 
                      var dikte = 0;
                      if (nums[0] !==undefined) {dikte= nums[0].counter;};
                      var dagen = 0;
                      var self=this;
                      var colarray = ['576297', '576297','576297','576297','576297','576297','576297','576297','576297','576297'];
                     $.each(nums, function(i,n){

                            if (n.counter != dikte){
                                   if (dikte > 10) {dikte = 10};
                                   self.html +=    "<div class='lijnstuk' " +
                                                                    "style='float:left;background-color: #" + colarray[(dikte-1)] + " ; height: " + (dikte * 2) + "px; margin-top:" + (10 - (dikte * 2)) + "px;width:" + (dagen * ls.ModelMensen.dagwidth() ) + "px;' " +
                                                                     "title='dagen: " + dagen + "  verantwoordelijk:" + vacts + " uitvoerende: " + uacts +"' " +
                                                                    " dagen= " + dagen + "> </div>" ;
                                   dagen = 1;
                                   dikte = n.counter;
                                    vacts = n.vacts;
                                    uacts = n.uacts;
                            }
                            else {dagen = dagen + 1;
                                      vacts = n.vacts;
                                      uacts = n.uacts;}
                      })              
                      if (dikte > 0){
                            this.html +=   "<div class='lijnstuk' " +
                                                            "style='float:left;background-color:#" + colarray[(dikte-1)] + "; height: " + (dikte * 2) + "px; margin-top:" + (10 - (dikte * 2)) + "px;width:" + (dagen * ls.ModelMensen.dagwidth() ) + "px;' " +
                                                            " dagen= " + dagen + "> </div>" ;
                     }
                      this.html +=  "</div></div></div></div>  <div class=clearfix></div>"   
            };

            $(document).on("click", ".mensregel", function () {
                  var sID = $(this).attr('id').substring(1);
                  var self= ls.ModelMensen;
                   $.each(self.mensen(), function(i,p){
                          if (p.id ==sID){
                               self.selectedMens(p);
                               return;
                          }; // if
                   }) ; //each
                  if (  $('#lsOverlay').css('display')  == 'none'  ) { $("#lsOverlay").fadeIn() };
                  $("#lsOverlay").css({'z-index': 500});
                  setDrag("#popMensActiviteiten")
                  $('#popMensActiviteiten').fadeIn();
                  $('#popMensActiviteiten').css({'z-index': 550});
            });


 ls.initMensen = function(){
		if (ls.ModelMensen !== undefined) {
                        ls.ModelMensen.InitValues();
		} 
              else {
                              
		    ls.ModelMensen = {
                                 schuifwidth        : ko.observable(),
                                 periode                : ko.observable(2),
                                 mensen               : ko.observableArray([]),
                                 selectedMens     : ko.observable(),
                                 deletable              : ko.observable(true),   // mag  de gebruiker activiteiten bij gebruikers weghalen

                                 InitValues :    function(){
                                    var self = ls.ModelMensen;
                                    $('.mensregel').remove();
                                    $('#periodeslider').slider();
                                    $("#periodeslider").slider("option","animate","fast");
                                    $("#periodeslider").slider("option", "value", 40);
                                    self.schuifwidth(33.1);
                                    $.post('index.php/ijkpartituur/partituur/getActievePartituur', function(data){
                                              projStartM=  new Date(data.partituur_start.substring(0,4), (data.partituur_start.substring(5,7)-1), data.partituur_start.substring(8,10));
                                              
                                              projEindM=  new Date(data.partituur_eind.substring(0,4), (data.partituur_eind.substring(5,7)-1), data.partituur_eind.substring(8,10));
                                               MaakGanttAchtergrond();
                                                                     
	                                    $.post("index.php/ijkpartituur/mensen/getMensen", function(data){
	                                          self.mensen.removeAll();
	                                                                               
	                                          $.each(data, function(i,p){
	                                                self.mensen.push(new fNewMens(p))
	                                          }) ; // for each
	           
	                                          $.each(self.mensen(), function(i,m){
	                                               regel=m.html;
	                                                $(regel).insertAfter('#mensholder');
	                                                $("#m"+ m.id).css({top:  ((i * 33) + 10) + "px"});                              
	                                          });
	                                    }, 'json');  
                                    },'json');
                                 
                                },
                                fDeleteVer : function(pID){
                                    var self= ls.ModelMensen;
                                    var VID = this.id;
                                    var MID = pID;
                                    var deze = this;
                                    apprise("Weet u zeker dat u de koppeling van verantwoordelijke bij " + this.naam + "  wilt verwijderen?", {verify: true, textYes: 'ja', textNo:'nee'}, function(ans){
                                          if (ans){ 
                                              $.post("index.php/ijkpartituur/mensen/deleteVer/" + VID + '/' + MID, function(data){
                                                      $.each(self.mensen(), function(i,p){
                                                            if (p.id == MID) { 
                                                               var vtop = $("#m"+MID).css("top");
                                                              self.selectedMens().takenC.remove(deze);
                                                              self.mensen.remove(p);        
                                                              $("#m" + MID).remove();
                                                              self.mensen.push(new  fNewMens(data));
                                                              var Indexwaarde = self.mensen().length - 1;
                                                              regel=self.mensen()[Indexwaarde].html;                        
                                                              $(regel).insertAfter('#mensholder');
                                                              $("#m"+ MID).css('top', vtop);     
                                                              return false;
                                                            }
                                                      })
                                              },'json');
                                          } // if
                                     } ); // apprise
                                },
                                fDeleteUit : function(pID){
                                    var self= ls.ModelMensen;
                                    var UID = this.id;
                                    var MID = pID;
                                    var deze = this;
                                    apprise("Weet u zeker dat u de koppeling van uitvoerende bij " + this.naam + "  wilt verwijderen?", {verify: true, textYes: 'ja', textNo:'nee'}, function(ans){
                                          if (ans){ 
                                              $.post("index.php/ijkpartituur/mensen/deleteUit/" + UID + '/' + MID, function(data){
                                                      $.each(self.mensen(), function(i,p){
                                                            if (p.id == MID) { 
                                                               var vtop = $("#m"+MID).css("top");
                                                              self.selectedMens().takenU.remove(deze);
                                                              self.mensen.remove(p);        
                                                              $("#m" + MID).remove();
                                                              self.mensen.push(new  fNewMens(data));
                                                              var Indexwaarde = self.mensen().length - 1;
                                                              regel=self.mensen()[Indexwaarde].html;                        
                                                              $(regel).insertAfter('#mensholder');
                                                              $("#m"+ MID).css('top', vtop);     
                                                              return false;
                                                            }
                                                      })
                                              },'json');
                                          } // if
                                     } ); // apprise
                                }
                             };// einde model definitie

                            $("#periodeslider").slider({ stop: function(event,ui){
                                       var self= ls.ModelMensen;
                                       var dagen = 0;
                                       var wijd = 0;
                                       self.schuifwidth( ui.value );
                                       if (self.schuifwidth() < 5) {self.schuifwidth(5)};

                                       if (self.schuifwidth() < 33 && (self.periode() != 1)) {
                                                self.periode(1);
                                                MaakGanttAchtergrond();
                                                return ;
                                       };
                                       if (self.schuifwidth() >= 33  && self.schuifwidth() <= 66 && self.periode() != 2) {
                                                self.periode(2); 
                                                MaakGanttAchtergrond();
                                                return ;
                                       };
                                       if (self.schuifwidth() >66 && self.periode() != 3) {
                                          self.periode(3); 
                                          MaakGanttAchtergrond();
                                          return ;
                                       }; 
                                       $(".gColHeader4").each(function (i, p){
                                             dagen = $(p).attr("dagen");
                                             wijd= (dagen * self.dagwidth() );
                                             $(p).width(wijd) ;
                                       });
                                       $(".gColHeader3").each(function(i,r){
                                            wijd=(parseInt($(r).attr("coldagen") ,10   )   * self.dagwidth()   ) ;
                                            $(r).width(wijd);
                                       });
                                       $(".gCellM").each(function(i,q){
                                             dagen = $(q).attr("dagen");
                                             wijd= (dagen * self.dagwidth() );
                                             $(q).width(wijd) ;
                                       });
                                   
                                       $("#bgTable2").width((totdagen * self.dagwidth() ));
                                       $("#bgTable3").width((totdagen * self.dagwidth() ));
                                       $(".scroller3").width((totdagen * self.dagwidth() ));
                                       $(".lijnstuk").each(function(index){
                                               $(this).width( $(this).attr('dagen') * self.dagwidth()  );
                                       });
                                       $("#todayLineM").css({left:  ($("#todayLineM").attr('dagen') * self.dagwidth()   )});
                                    }
                             });
                             ls.ModelMensen.dagwidth =ko.computed(function(){
                                    var self=ls.ModelMensen;
                                     if (self.schuifwidth() < 33) {
                                          return self.schuifwidth(); };
                                     if (self.schuifwidth() >= 33 && self.schuifwidth() < 66) {        
                                           return  self.schuifwidth() / 30 ;};
                                    if (self.schuifwidth() >= 66) {                                 
                                          return self.schuifwidth()/365 ;};                             
                            });

                            ls.ModelMensen.InitValues();
                            ko.applyBindings(ls.ModelMensen, document.getElementById("mensen-pagina"));
                            appliedBindings = true;     
                            }; // else
              }; //init   

});