/***************************************
 * GENERAL FUNCTIONS
 **************************************/
 
//show pers planner
var clicked=false;
function showPlanner(){
  if(clicked==false){  
    clicked=true;
    $("#cboxOverlay").show();      
    $("#cboxOverlay").addClass("planbg");  
    $("#full_wrap").show();  
    $("#middlewrap").addClass("fixed");
  
    url = BASEURL + "mijnprogramma";
    $.post(url, {ajax:1}, function(data){ $("#full_wrap").html(data); clicked=false; });
  }
  return false;
}

//show pers planner
function hidePlanner(){
  $("#cboxOverlay").hide();
  $("#cboxOverlay").removeClass("planbg");  
  $("#full_wrap").hide();
  $("#middlewrap").removeClass("fixed");
  return false;
}




/***************************************
 * DOCUMENT READY
 **************************************/

$(document).ready(function(){
    //round hover images
    $("img.hover").live("mouseover", function(){
      src = $(this).attr("src");
      on = $(this).attr("on");
      $(this).attr("off",src);
      $(this).attr("src",on);
    });
    
    $("img.hover").live("mouseout", function(){
      off = $(this).attr("off");
      on = $(this).attr("on");
      $(this).attr("src",off);
    });
  
  
    //init black and white images
     $('.bwWrapper').BlackAndWhite();
  
    //landing page peter meter slide
    $(".pmslide").cycle({
      fx: 'fade' 
    });
        
    //init colorboxes
    $(".pic a, .article_l a").colorbox();
    
    //persoonlijk planner open/close btn
    $("a.close").live("click", function(){ return hidePlanner(); });
    $("a.details").live("click", function(){ return showPlanner(); });
    
    //close on bg click
    $("#cboxOverlay.planbg").click( function(){
      hidePlanner();
      return false;
    });
    
    
    //ajax submit filter on change
    $("#filter_form select").change(function(){
      $("#filter_form").submit();
    });
    $("#filter_form").submit(function(){
      action = $(this).attr("action");
      data = $(this).serialize();
      $.post(action, data, function(data){ $("#prog_wrap").html(data); });
      return false;
    });
    
    //add programma to planner
    $(".prog_add").live("click", function(){
       url = $(this).attr("href");
       id = $(this).attr("rel");
       $(".prog_actions[rel="+id+"] .addlink").hide();
       $(".prog_actions[rel="+id+"] .dellink").show();
       $.post(url, function(data){ $(".plan_content").replaceWith(data); });
       return false;
    });    
    
    //remove programma from planner
    $(".prog_del").live("click", function(){
       url = $(this).attr("href");
       id = $(this).attr("rel");
       $(".prog_actions[rel="+id+"] .addlink").show();
       $(".prog_actions[rel="+id+"] .dellink").hide();
       $.post(url, function(data){ $(".plan_content").replaceWith(data); });
       return false;
    });        
    
    //remove programma from planner popup
    $(".prog_delhide").live("click", function(){
       url = $(this).attr("href");
       id = $(this).attr("rel");
       $(".mijnprog tr[rel="+id+"]").remove();
       $(".prog_actions[rel="+id+"] .addlink").show();
       $(".prog_actions[rel="+id+"] .dellink").hide();
       $.post(url, function(data){ showPlanner(); });
       return false;
    });        
    
    
    //init special dropboxes
    $("select#sel_loc").selectbox();
    $("select#sel_time").selectbox();
    $("select#sel_thema").selectbox();
    
    if ($('#map').length != 0) {
    
    
    
    $('#map').gmap3(
      //PLAN ROUTE ----------------------------------------------------
     /* {action:'getRoute',
        options:{
          origin: {lat: 51.228751, lng: 4.40476}, //MAS
          destination: {lat: 51.228751, lng: 4.40476}, //MAS
          waypoints: waypts,
          optimizeWaypoints: true,
          travelMode: google.maps.DirectionsTravelMode.WALKING,
          region: "BE"
        },
        callback: function(results){
          if (!results) { alert("lol"); return; }
          //alert(results);
          console.log(results.routes[0].waypoint_order);
          $(this).gmap3(
            { action:'init', 
              zoom: 16, 
              center: [51.230188, 4.405003],              
              mapTypeId: google.maps.MapTypeId.SATELLITE,
              disableDefaultUI: true,
              zoomControl: true,
              zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL, position:  google.maps.ControlPosition.TOP_RIGHT },
              streetViewControl: false,
              navigationControl: false,
              scrollwheel: true,
            
            },
            { action:'addDirectionsRenderer',
              options:{
                preserveViewport: true,
                draggable: false,
                suppressMarkers: true,
                directions:results,
                polylineOptions: { strokeColor: '#ff0080', strokeOpacity: 0.5, strokeWeight: 3 }
              }
        }, */
        
        //INIT THE MAP ----------------------------------------------------
        { action:'init', 
              zoom: 16, 
              center: [51.230188, 4.405003],              
              mapTypeId: google.maps.MapTypeId.SATELLITE,
              disableDefaultUI: true,
              zoomControl: true,
              zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL, position:  google.maps.ControlPosition.TOP_RIGHT },
              streetViewControl: false,
              navigationControl: false,
              scrollwheel: true            
        },        
        
        //ADD ROUTE ON MAP ----------------------------------------------------
        { action: 'addPolyline',
          options:{
            strokeColor: "#ff0080",
            strokeOpacity: 0.5,
            strokeWeight: 3
          },
          path: polyLine          
        },        

      
        //ADD MARKERS ON MAP ----------------------------------------------------
        { action: 'addMarkers',
              markers: dkoMarkers,
              marker:{
                options:{
                  draggable: false
                },
                events:{
                  click: function (marker, event, data){
                     //add to DOM
                     $("#none").html(data);
                     id = $("#none .infoWindow").attr("rel");
                     window.location.href= BASEURL + "programma/filter/" + id;
                  },
                  mouseover: function(marker, event, data){
                    var map = $(this).gmap3('get'),
                        infowindow = $(this).gmap3({action:'get', name:'infowindow'});
                    if (infowindow){
                      infowindow.open(map, marker);
                      infowindow.setContent(data);
                    } else {
                      $(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: data, zIndex: 30}});
                    }
                  },
                  mouseout: function(){
                    var infowindow = $(this).gmap3({action:'get', name:'infowindow'});
                    if (infowindow){
                      infowindow.close();
                    }
                  }
                }
              }
            }    
          
          );
      /*  }
      }
    );*/
    
    
    
  }
  
            

 
});