/////////////////////////////////
///// SCPPJBT APPLICATION
/////////////////////////////////

// Depends on :
//   mootools Core (1.3)

// Namespace
var SCPPJBT = {
  version:"1.0.0",
  config:{}
};

SCPPJBT.components={};

////////////////////////////////////////////////////////////////////////////////
///// INIT APPLICATION
////////////////////////////////////////////////////////////////////////////////

// Load 
// Init HTML5+PNG Compatibility for IE6, IE7, IE8
if(Browser.ie6 || Browser.ie7 || Browser.ie8) {

  document.createElement("header"); 
  document.createElement("footer"); 
  document.createElement("section"); 
  document.createElement("aside"); 
  document.createElement("nav"); 
  document.createElement("article");
  
  // Init support of pngfix
  if(Browser.ie6) {
    var myScript = Asset.javascript('/js/pngfix.js', {
      id: 'pngfix',
      onLoad: function() {}
    });
  } 
}


// Dowready : init Classes
SCPPJBT.initApplication = function() {

  // Init  Signature (id="form_ajax")
  new SCPPJBT.components.Signature({});
  // Init  FormAjax (id="form_ajax")
  if($('form_ajax')) { new SCPPJBT.components.FormAjax({}); };
  // Init  Slide Effect (id="slide")
  if($('slide')) { if(!Browser.ie6) { new SCPPJBT.components.SlideEffect({}); } };
  // Init  Map (id="map")
  //if($('map')) { new SCPPJBT.components.Map({}); };
  
  
  if($('api-beta')) { new SCPPJBT.components.dentisteGuard({}); };

  
};

////// DOMREADY
window.addEvent('domready', SCPPJBT.initApplication);


////////////////////////////////////////////////////////////////////////////////
///// CLASS COMPONENTS
////////////////////////////////////////////////////////////////////////////////

//---------------------------------------------------
// Class component Signature
SCPPJBT.components.Signature = new Class({
    initialize: function(){
      if(!Browser.ie6) { console.log('by Escale Digitale'); }
    }
});

//---------------------------------------------------
// Class component FormAjax
SCPPJBT.components.FormAjax = new Class({
    initialize: function(config){
        var _component = this ; // this = Class instance    
        $('form_ajax').addEvent('submit', this.submit);
        
        $$('*[class*="required"]').each(function(el){
            el.addEvent('focus', _component.focus);
            el.addEvent('blur',  _component.blur);
        });

    }, // initialize
    focus: function(e){
        if(this.hasClass('error')) {
            this.removeClass('error');
        }
    },
    blur: function(e){
        if(this.get('value')=='') {
            this.addClass('error');
        }
    },
    submit: function(e){
        // Stop other actions
        new Event(e).stop();
        new SCPPJBT.components.SendFormAjax({});
    } // submit 
});



//---------------------------------------------------
// Class component SendFormAjax
SCPPJBT.components.SendFormAjax = new Class({
  initialize: function(config){
      var _component = this ; // this = Class instance
      this.submit();
  }, // initialize

submit: function(e){
  
  // Check the required input (with class="required")
  var check_required = null;
  $$('*[class*="required"]').each(function(el){
    if(el.get('value')==''){
      el.addClass('error');
      check_required = 1 ;
    } else {
      el.removeClass('error');
    }
  });
  
  // Submit form if required input are submitted
  if(check_required == null){

    // Config Ajax request from form (url = action)
    $('form_ajax').set('send', { 
      onRequest: function(response) {
        $('log').setStyle('opacity', '1').removeClass('log_validated').removeClass('log_error').addClass('log_load').empty().set('html','Transaction en cours');  
      },
      onComplete: function(response) {
        if(response=="Votre message a bien été envoyé. <br />Nous vous répondrons dès que possible.") { 
          $('log').addClass('log_validated').set('html',response+'<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />');
          $('fields').set('html','');
          $$('#form_ajax input[type="submit"]').each(function(el){
            el.destroy();
          });
        }
        else {
        $('log').removeClass('log_load').addClass('log_error').set('html',response);
        }
      },
      onFailure: function(response) { 
        $('log').removeClass('log_load').addClass('log_error').empty().set('html','Le serveur ne répond pas.');
      }  
    });
    // Send Ajax
    $('form_ajax').send();

  }
  } // submit  
});



//---------------------------------------------------
// Class component Slide Effect
SCPPJBT.components.SlideEffect = new Class({
    initialize: function(config){
        this.id = config.id?config.id:"";
        this.name = config.name?config.name:"";
        var timing = 3000;
        var slideDiv = $('slide');
        
        var start = 1;
        
        // Count the number of images
        function node_counter(parentNode) {
            var countNode = null ;
            var node = parentNode.getFirst('div');
            while (node!=null) {
                countNode++;
                node = node.getNext('div');
            }
            if(countNode==null) { return countNode = 0 ; }
            if(countNode!=null) { return countNode ; }
        }
        var countNode = node_counter(slideDiv);
        
        // Fx for the last image
        function showFxOut(image) {
            var myEffect = new Fx.Morph($(image), {duration: '1000', transition: Fx.Transitions.Sine.easeIn});
            myEffect.start({
                'opacity': 0
            });
        }   
        
        // Slide all images once
        var slide = function() {
            // Init the first and the last div of the slide
            this.nodeTarget = slideDiv.getFirst('div');
            nodeLast = slideDiv.getLast('div');     
            this.nodeTarget.setStyle('opacity', 1); 
            //nodeLast.setStyle('opacity', 0);
            
            // Create an ids list of images
            var list = [];
            var listIndex = 0;
            while(this.nodeTarget!=null)
            {
                listIndex++;
                list.include(this.nodeTarget.id);
                this.nodeTarget=this.nodeTarget.getNext('div');
                // Init Style for all next div of the slide
                if(this.nodeTarget!=null) { 
                    if(start==1 || listIndex<(countNode-1)) {
                    this.nodeTarget.setStyle('opacity', 0); 
                    }
                    if(start==0 && listIndex==(countNode-1)) { showFxOut(this.nodeTarget.id) ; }
                }
                // First node still always visible
                if(list.indexOf(this.nodeTarget)==0) { this.nodeTarget.setStyle('opacity', 1); }
            }
            var first = list[0];
            var last = list.getLast();
            
            start=0;
            
            // Effect to apply to the image
            var showFx = function(image) {
                var myEffect = new Fx.Morph($(image), {duration: '1000', transition: Fx.Transitions.Sine.easeOut});
                myEffect.start({
                    'opacity': 1
                });
            };

            // Launch the effect of image with a period
            var myChain = new Chain();
            list.each(function(image) { myChain.chain( 
                function(){ 
                    if(image!=first) { showFx(image); }
                    // Deleting the periodical timer
                    if(image==last) { /*clear(timer);*/ }  
                } 
            ); });

            var runChain = function() { myChain.callChain(); }
            var timer = runChain.periodical(timing);        
        };
    
    // Lunch the first slide (no waiting the periodical)
    slide();
    // Lunch the slide
    slide.periodical((countNode+1)*timing);
    
    
        
    } // initialize
});


// function gmap() {
//   var myLatlng = new google.maps.LatLng(47.191302,-1.550617);
//   var myOptions = {
//     zoom: 12,
//     center: myLatlng,
//     mapTypeId: google.maps.MapTypeId.ROADMAP
//   }
//   var map = new google.maps.Map(document.getElementById("map"), myOptions);
//   // Nantes
//   var nantes = new google.maps.LatLng(47.190728,-1.550682);
//   var markerNantes = new google.maps.Marker({
//     position: nantes, 
//     map: map,
//     title:"Cabinet Dentaire Rezé"
//   });
// }

//---------------------------------------------------
//Class component Evitement
// SCPPJBT.components.Map = new Class({
//   initialize: function(){  
//     function loadScript() {
//       var script = document.createElement("script");
//       script.type = "text/javascript";
//       script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=gmap&region=FR&key=ABQIAAAAs694SHeeqm5mF-3IOMP0wBRPsmcIBdhhh-ihO1nm9ypFljuR1xRBSkMQ5-LdU6awlKt0MQ79Nflx2w";
//       document.body.appendChild(script);
//     }
//     loadScript();
//   }
// });


//---------------------------------------------------
//Class component dentisteGuard API
SCPPJBT.components.dentisteGuard = new Class({
  initialize: function(){ 
  
    // Check Tweets
    var myJSONP = new Request.JSONP({
      url: 'http://www.dentistedegarde.net/ga/action/index.php',
      data: {
        service: 'next_guard'
      },
      onComplete: function(response){
          var data = response.data;
          Locale.use('fr-FR');
          var date = Date.parse(data.garde_date);
          date = new Date(date).format('%A %d %B %Y');
        var html = '<span style="color:red;font-weight:bold">+</span> Prochain dentiste de garde le :<br /> <br /> '+date+' de 9h à 12h<br /><br />';
          html = html+'<strong>'+data.dentiste_prenom+' '+data.dentiste_nom+'</strong><br />';
          html = html+''+data.dentiste_adresse+'<br /> '+data.dentiste_codep+' '+data.ville_name+'<br />';
          html = html+''+data.dentiste_tel.match(new RegExp(".{0,2}", "g")).join(' ');+'<br />';
          $('garde').set('html',html)
      }
    }).send();
  }
});