var map = null;

// callback function for JSONP results
function getHaircuts(option_tree) {
  var options;
  
  options = {
    choose: 'Choisir...',
    show_multiple: 10, // show multiple values (if true takes number of items as size, or number (eg. 12) to show fixed size)
    select_class: 'span4 test_1'
  };
    
  $('input[name=haircut_id]').optionTree(option_tree, options);
}

$(function() {
  
  // internal navigation and scrolling
  $('a[href*="#"]').live('click', function() {
    $.bbq.pushState( '#/' + this.hash.slice(1) );
    return false;
  });
  
  $(window).bind('hashchange', function(event) {
    if (location.hash) {
      var tgt = location.hash.replace(/#\//,'');
    } else {
      var tgt = '#top';
    }
    $.smoothScroll({scrollTarget: '#' + tgt, speed:1000, easing: 'swing'});
  });
  $(window).trigger('hashchange');
  
  
  // booking form
  
  // display step 2
  $('#show_dispo').click(function(){
    var hairdresser,
        haircut_id;
    
    // validate input
    if(!$('input[name="hairdresser_id"]:checked').val() || !$('input[name="haircut_id"]').val()) {
      alert('Veuillez sélectionner une coupe et une coiffeuse');
      
      return;
    }
    
    hairdresser = $('input[name="hairdresser_id"]:checked').val();
    haircut_id  = $('input[name="haircut_id"]').val();
    $('#loader').show();
    $.smoothScroll({scrollTarget: '#book', speed:500, easing: 'swing'});
    $.ajax({
      url: "/step2", // @TODO: put this in config or template
      data: {
        haircut_id: haircut_id,
        hairdresser_id: hairdresser
      },
      success: function(data){
        $('#step_1').hide();
        $('#step_2').append(data).show();
      },
      error: function(xhr, statusText) {
        alert("Impossible d'afficher les disponibilités");
      },
      complete: function() {
        $('#loader').hide();
      }
    });
   });

   // update hairdresser to correct value
   $("input[type=radio][name=requested_date]").live('click', function(e){
     var hairdresser = $(this).attr('data-hairdresser');
     $("input[type=radio][name=hairdresser_id]").removeAttr('checked').filter("[value='"+hairdresser+"']").attr('checked', true);
   });
   
   
   // submit form
   $('#booking_form').validate({
      errorElement: "span",
      errorPlacement: function(error, element) {
          var $parent = element.parents("div.clearfix");
          if($parent.find("span.help-inline").size()) {
              $parent.find("span.help-inline").html(error.html());
          } else {
              error.addClass('help-inline').insertAfter(element);
          }
      },
      // success: function(label) {
      //     label.addClass("valid");
      //     label.parents("div.clearfix").removeClass("error");
      // },
      highlight: function(element, errorClass, validClass) {
          if (element.type === 'radio') {
              this.findByName(element.name).addClass(errorClass).removeClass(validClass)
                .parents("div.clearfix").addClass("error");
          } else {
              $(element).addClass(errorClass).removeClass(validClass)
                .parents("div.clearfix").addClass("error");
          }
      },
      unhighlight: function(element, errorClass, validClass) {
           if (element.type === 'radio') {
               this.findByName(element.name).removeClass(errorClass).addClass(validClass)
                 .parents("div.clearfix").removeClass("error");
           } else {
               $(element).removeClass(errorClass).addClass(validClass)
                 .parents("div.clearfix").removeClass("error");
           }
      },
      submitHandler: function(form) {
         if(!$('#dispo_table').find('input:checked').val()) {
             alert('Veuillez sélectionner une date de rendez-vous');
             $.smoothScroll({scrollTarget: '#book', speed:100, easing: 'swing'});
             return false;
         }
          
         $('#loader').show();
         $.smoothScroll({scrollTarget: '#book', speed:500, easing: 'swing'});
         $(form).ajaxSubmit({
            success: function (response, textStatus, xhr, $form) {
                $("#step_2").hide();
                $("#step_success").show();
            },
            error: function (xhr, textStatus) {
                alert("Une erreur est survenue, impossible de finaliser votre réservation. Merci de nous contacter par téléphone.");
            },
            complete: function () {
                $('#loader').hide();
            }
         });
      }
  });
  
  // NOTE: or use .live
  $(document).delegate("#back_step1", "click", function(){
    $('#step_2').empty();
    $('#step_1').show();
    $.smoothScroll({scrollTarget: '#book', speed:500, easing: 'swing'});
  });


  initialize();

  $('#show_map_bt').click(function(e){
    map.setMapTypeId('roadmap');
    map.setZoom(16);
    $(this).hide();
    $('#show_photo_bt').show();
    return false;
  });
  $('#show_photo_bt').click(function(e){
    map.setMapTypeId('satellite');
    map.setZoom(18);
    $(this).hide();
    $('#show_map_bt').show();
    return false;
  });

  // CG
  $('#modal_conditions').modal('toggle')

});

// google maps
function initialize() {
  var myLatlng = new google.maps.LatLng(46.52018607974501, 6.638043522834778);
  var myOptions = {
    zoom: 18,
    center: myLatlng,
    panControl: false,
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL,
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    scaleControl: false,
    scrollZoom:false,
    scrollwheel: false,
    disableDoubleClickZoom: true,      
    mapTypeId: google.maps.MapTypeId.SATELLITE
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var marker = new google.maps.Marker({
      position: myLatlng, 
      map: map,
      title:""
  }); 
}