materio-base-d7/sites/all/themes/gui/materiobasetheme/js/script.js

// @koala-prepend "gui_ck_fw/gui.js"
// @codekit-prepend "gui.js"

(function($) {


  Drupal.behaviors.init_theme = {};
  Drupal.behaviors.init_theme.attach = function (context) {
    // Growl-style system messages
    $('#messages-and-help > div.messages:not(.processed)')
      .addClass('processed')
      .each(function() {
        // If a message meets these criteria, we don't autoclose
        // - contains a link
        // - is an error or warning
        // - contains a lenghthy amount of text
        if ($('a', this).size() || $(this).is('.error') || $(this).is('.warning') || $(this).text().length > 100) {
          $(this).prepend("<span class='close'>X</span>");
          $('span.close', this).click(function() {
            $(this).parent().slideUp('fast');
          });
        }
        else {
          // This essentially adds a 3 second pause before hiding the message.
          $(this).animate({opacity:1}, 5000, 'linear', function() {
            $(this).slideUp('fast');
          });
        }
      });
  };

  Drupal.behaviors.materio = {};
  Drupal.behaviors.materio.attach = function(context) {};

  MaterioBaseTheme = function(){
    var _settings = Drupal.settings,
        _themeSettings = _settings.materiobasetheme,
        _strings = _themeSettings.strings,
        _History = window.History,
        _this = this,
        _$content = $('#content'),
        _jsp,
        _$tooltip = $('<div id="tooltip" class="op-hidden">').appendTo('body'),
        _$homeUtilities, _$homeBlockDidactique, _hoverHomeDidactique = false, _homeTimeInterval,
        _touch = $('html').is('.touch'),
        _statePushed = false,
        // touch scroll
        position = {x:null,y:null},
        translate3d_content = 0,
        _isLoggedIn = !$('body').is('.not-logged-in'),
        _isFrontNotLogged = $('body').is('.front.not-logged-in'),
        _isMembershipForm = $('body').is('.page-node-11186'), //$('body').is('.page-node-11187') || ,
        // _isBreveMateriauNodePage = $('body').is('.node-type-breve') || $('body').is('.node-type-materiau');
        _isBreveMateriauNodePage = _themeSettings.page_callback == 'node_page_view' && (_themeSettings.node_type == 'materiau' || _themeSettings.node_type == 'breve'),
        _resizeTimer,
        _max_480 = function(){ return (viewport().width < 479); },
        _480_768 = function(){ return ( !_max_480() && _max_768() ); },
        _max_768 = function(){ return (viewport().width < 767); },
        _768_980 = function(){ return ( !_max_768() && _max_980() ); },
        _max_980 = function(){ return (viewport().width < 979); },
        _980_1200 = function(){ return ( !_max_980() && _max_1200() ); },
        _max_1200 = function(){ return (viewport().width < 1199); },
        _previewIsOpen = false,
        _viewmodes = {
          bookmark : 50,
          cardsmall :    100,
          cardmedium :   210,
          cardbig :      425,
          cardfull :     850
        };

    // DEV
    var v1, v2, v3, v4, v5; // generic variable used in many cases to avoid to create new memory block with new vars

    function init(){
      // trace('init MaterioBaseTheme');

      checkIE();
      initHistoryNav();
      if(_isFrontNotLogged)
        initHome();

      if(_isMembershipForm)
        initMembershipForm();

      initForms();

      initLayout();
      initInfinitScroller();
      initEvents();
      initKeyboardShortcuts();

      initViewmodes();

      if(_isBreveMateriauNodePage)
        $.event.trigger({ type : 'resultschanged', container : '#content>.inner-content'});

      setTimeout(function(){
        $.event.trigger({ type : 'theme-ready' });
      },100);
    };

    /**
    * checkIE
    *
    */
    function checkIE(){
      // alert('check ie');
      if($('.oldie body').size() && !readCookie('oldie_checked')){
        setTimeout(function(){
          createCookie('oldie_checked', 1);
          alert('Afin de profiter pleinement des fonctionalités de materio.com, nous vous invitons a mettre a jour votre navigateur dans ça denière version. Celui ci n\'étant pas compatible avec les technologie employer par materio.com, vous risquer de rencontrer des difficulter de navigation.');
        }, 4000);
      }
    };

    /**
    * history navigation
    */
    function initHistoryNav(){
      var state = _History.getState();
      // _History.log('initial:', state.data, state.title, state.url);
      _History.Adapter.bind(window,'statechange',onHistoryStateChange);
      $(document).bind('new-history-page', onNewHistoryPage);
    };

    function onNewHistoryPage(event){
      //trace('theme :: onNewHistoryPage', event);

      var title = event.title.replace(/<(?:.|\n)*?>/gm, '')  + ' | ' + _strings.site_name;
      // trace('MaterioBaseTheme :: onNewHistoryPage : title', title);

      _statePushed = true;

      _History.pushState({content:event.content, pagetitle:event.title}, title, event.path);
    };

    function onHistoryStateChange(event){
      // trace('theme :: onHistoryStateChange', event);
      var state = _History.getState();
      // _History.log('statechange:', state.data, state.title, state.url);

      // google analytics
      $.event.trigger({
        type : 'record-stat',
        path : state.url
      });

      // TODO:  History : empty content if we go back to the homepage

      // change the current url for feedbacks
      $('input[name=location]','#feedback-form').attr('value', state.url);

      $.event.trigger({
        type:'materio-page-title-refresh-block',
        title : state.data.pagetitle
      });

      // this condition is to avoid retriggering probleme when a module pushState and then is retriggered by state-changed
      if(!_statePushed){
        _statePushed = false;

        $('.inner-content',_$content).html(state.data.content);

        $.event.trigger('history-state-change');
      }
    };

    /**
    * home
    */
    function initHome(){
      $('img.lazy', '#block-materio-didactique-materio-didactique-home').each(function(){
        var $img = $(this);
        $img.attr('src', $img.attr('data-original'));
      });

      if(_max_768()){
        initHomeDidactiqueMobile();
      }else{
        initHomeDidactiqueDesktop();
      }
    };

    function initHomeDidactiqueMobile(){
      // trace('initHomeDidactiqueMobile');
      _$homeBlockDidactique = $('#block-materio-didactique-materio-didactique-home');
      $('.node-didactique', _$homeBlockDidactique)
        .find('.field-name-title-field')
          .bind('click', clickOnHomeDidactiqueTitle);
    };

    function clickOnHomeDidactiqueTitle(e){
      // trace('clickOnHomeDidactiqueTitle');
      var $node = $(this).parent('.node-didactique');
      if($node.is('.opened')){
        $node.removeClass('opened');//.slideUp();
      }else{
        $('.node-didactique', _$homeBlockDidactique).removeClass('opened');//.slideUp();
        $node.addClass('opened');//.slideDown();

        $('html,body').animate({scrollTop: $node.offset().top - $('#header').h()});
      }
    };

    function initHomeDidactiqueDesktop(){
      // trace("initHomeDidactiqueDesktop");
      _$homeUtilities = $('#utilities');
      _$homeBlockDidactique = $('#block-materio-didactique-materio-didactique-home')
        .append('<div class="slides"/>')
        .append('<div class="tabs"/>')
        // .append('<i class="icon-circle-arrow-up"/><i class="icon-circle-arrow-down"/>')
        .bind('mouseenter', function(event) { _hoverHomeDidactique = true; })
        .bind('mouseleave', function(event) { _hoverHomeDidactique = false; });


      $('.node-didactique',_$homeBlockDidactique).each(function(index) {
        if(index){
          $(this).addClass('op-hidden');
        }else{
          $(this).addClass('op-visible');
        }
        $('.field-name-title-field', this)
          .clone()
          .addClass(index ? '' : 'active')
          .click(function(event){
            $(this).addClass('active').siblings().removeClass('active');
            _$homeBlockDidactique.find('.node-didactique').removeClass('op-visible').addClass('op-hidden').eq(index).removeClass('op-hidden').addClass('op-visible');
          })
          .appendTo($('.tabs', _$homeBlockDidactique));
      }).appendTo($('.slides', _$homeBlockDidactique));

      if(!_touch){
        $(document).bind('scroll', function(event){
          if($(window).scrollTop() == 0) {
            if(_$homeUtilities.is('.closed')){
              _$homeUtilities.removeClass('closed');//.removeClass('scroll-closed');
              launchHomeDidactiqueInterval();
              initLayout();
            }
          }else{
            if(!_$homeUtilities.is('.closed')){
              _$homeUtilities.addClass('closed');//.addClass('scroll-closed');
              clearInterval(_homeTimeInterval);
              initLayout();
            }
          }
        });
      }
      // launchHomeDidactiqueInterval();

      $(document)
        .bind('cbox_complete', function(){ clearInterval(_homeTimeInterval); })
        .bind('cbox_closed', function(){ launchHomeDidactiqueInterval(); });

      $('.side.oops a').click(function(event) {
        event.preventDefault();
      //   $(document).scrollTop(0);
      //   $('#edit-mail', "#block-materio-user-user-register").focus();
        window.location.href = $(this).attr('href');
        return false;
      });
    };

    function launchHomeDidactiqueInterval(){
      _homeTimeInterval = setInterval(function(){
        if(!_hoverHomeDidactique){
          var $next = $('.tabs .active', _$homeBlockDidactique).next();
          if(!$next.length)
              $next = $('.tabs .active', _$homeBlockDidactique).siblings().eq(0);

          $next.trigger('click');
        }
      }, 15000);
    };

    /**
    * layout
    */
    function initLayout(){
      if(!_max_768()){
        var height = $('#header').h() + $('#tasks').h();

        if(!_max_480() && !_touch ){
          height += $('#utilities').h()+15;
        }

        //$('#main').css('margin-top', height+15);
        // $('#container').css('padding-top', height+15);

        if(!$('html').is(".ie8")){
          $('#container').animate({'padding-top':height}, 300);
        }
      }
    };

    /**
    * infinit scroll
    */
    function initInfinitScroller(){
      // trace("initInfinitScroller");
      $.event.trigger({
        type : 'init-scroller-pager',
        pager : $('ul.pager', '#content')
      });

      $(document).bind('scroll', function(event){
        // trace('scroll event binded');
        checkInfinitScroller();
      });
    };

    function checkInfinitScroller(){
      // trace('checkInfinitScroller');
      // if(!_touch){
      // }else{
        if($(window).scrollTop() + $(window).height() > getDocHeight() - 200) {
          infinitScrollPager();
        }
      // }
    };

    function infinitScrollPager(){
      // trace('MaterioBaseTheme :: infinitScrollPager');
      if($('ul.pager', '#content').length){
        var $nextpage = $('ul.pager .pager-current', '#content').next(),
            href = $('a', $nextpage).attr('href');

        if(href){
          $.event.trigger({ type : 'record-stat', path : href }); // google analytics
          $.event.trigger({ type : 'load-scroller-pager', href : href });
        }
      }
    };

    /**
    * events
    */
    function initEvents(){
      //trace('MaterioBaseTheme :: initEvents');

      $(document)
        .bind('init-layout', initLayout)
        .bind('loading-content', onLoadingContent)
        .bind('loaded-content', onLoadedContent)
        .bind('resultschanged', onResultsChanged)
        .bind('resultscompleted', onResultsCompleted)
        .bind('mybookmarks-block-updated', onMybookmarksBlockUpdate)
        .bind('mylists-block-builded', onMyListsBlockBuilded)
        .bind('mylists-block-updated', onMyListsBlockUpdate)
        .bind('flagGlobalAfterLinkUpdate', onAfterFlaging)
        .bind('record-stat', onRecordStat)
        .bind('view-mode-changed', onViewModeChanged)
        .bind('ajax-register-block-loaded', onAjaxRegisterBlockLoaded);

      $(window)
        .bind('resize', onResizeWindow);

      initFlagsEvent();

      $('#block-user-login h2, #block-menu-menu-top-menu h2').bind('click', function(event) {
        event.preventDefault();
        $(this).parent('.block').toggleClass('hovered');
        $('.hovered').not($(this).parent('.block')).removeClass('hovered');
        return false;
      });

      $('#block-materio-search-api-materio-search-api-viewmode .viewmode-link').bind('vm-clicked-active', function(event) {
        $(this).parents('.block').toggleClass('hovered');
        $('.hovered').not($(this).parents('.block')).removeClass('hovered');
      });

      $('#block-materio-search-api-materio-search-api-viewmode .viewmode-link').bind('vm-clicked', function(event) {
        $(this).parents('.block').removeClass('hovered');
        $('.hovered').not($(this).parents('.block')).removeClass('hovered');
      });
    };

    function onLoadingContent(event){
      _$content.addClass('faded');
      $('#materio-search-api-search-form').addClass('loading');
    };

    function onLoadedContent(event){
      // trace('MaterioBaseTheme :: onLoadedContent',event);
      _$content.removeClass('faded');
      $('#materio-search-api-search-form').removeClass('loading');
    };

    function onResultsChanged(event){
      // trace('MaterioBaseTheme :: onResultsChanged',event);
      $(document).scrollTop(0);

      focusCard($('#content .search-results, #content .actuality-items').children('.node:first-child'));

      onResultsCompleted(event);
    };

    function onResultsCompleted(event){
      // trace('theme :: onResultsCompleted', event);
      checkInfinitScroller();
      if(event.container != undefined){
        // trace('theme :: container is ok : '+event.container)
        setTimeout(function(){ // why this time out ?
          initCards(event.container);
          setUpGrid(event.container);
        }, 100);
      }
    };

    function initCards(container){
      //TODO : refactore this function, to much features in there

      //trace('theme :: initCards', container);
      var $container = $(container);
      $container.children('.node:not(.listened)')
        .bind('mouseenter focused mousemove click mouseleave', onCardEventDispatcher)
        .each(function(i){
          protectFigures(this);
          if(_isLoggedIn){
            if(!$container.is('.modal-content')){
              // do not add preview btn if we are already on a preview
              initPreview(this);
            }else{
              // if we are on preview mode add a close btn (only for associated materials)
              if(!$(this).is(":first-child")){
                var $closebtn = $('<section><i class="icon-remove"></i></section>');
                $closebtn.bind('click', function(){
                  $(this).parents('.node-materiau').remove();
                });
                $('nav.nav', this).append($closebtn);
              }
            }
          }
        })
        .addClass('listened');
    };

    function setUpGrid(container){
      var $card, top, old_top, col = 0, line = 0;
      $(container).children('.node')
        .each(function(i){
          $card = $(this);

          top = $card.offset().top;
          if(old_top != top){
            line ++;
            old_top = top;
            col = 0;
          }

          col ++;

          $card.attr('column', col).attr('line', line);

        });
    };

    function onViewModeChanged(event){
      if(_isBreveMateriauNodePage){
        // if(!_isloadingresults){
          $.event.trigger('loading-content');
          var url = _settings.basePath+_settings.pathPrefix+'materio_search_api_ajax/node/'+_themeSettings.node_nid;
          $.getJSON(url,
            function(json){
              //trace('json', json);
              $.event.trigger('loaded-content');
              $('#content>.inner-content').html(json.node);
              $.event.trigger({ type : 'resultschanged', container : '#content>.inner-content'});
          });
        // }
      }
    };

    /**
    * CARDS
    */
    function onCardEventDispatcher(event){
      // trace('onCardEvent', event);
      var vmode = event.currentTarget.className.match(/vm-([a-z|A-Z]+)/);
      var cf = 'on_'+event.type+'_card';
      var f = 'on_'+event.type+'_'+vmode[1];

      if(typeof _this[cf] == 'function')
        _this[cf].call(this, event);

      if(typeof _this[f] == 'function')
        _this[f].call(this, event);
    };

    // function initLayoutCardDispatcher($card){
    //   // trace('$card', $card);
    //   var vmode = $card.attr('class').match(/vm-([a-z|A-Z]+)/);
    //   var f = 'init_layout_'+vmode[1];

    //   if(typeof _this[f] == 'function')
    //     _this[f].call(this, $card);
    // };

    /**
    * commons Cards
    */

    // MaterioBaseTheme.prototype.init_layout_card = function($card){
    //   trace('initLayoutCardBig');
    // };

    // MaterioBaseTheme.prototype.on_mouseenter_card = function(event){
    //   //trace('MaterioBaseTheme :: on_mouseenter_card', event);
    // };

    MaterioBaseTheme.prototype.on_mousemove_card = function(event){
      //trace('on_mousemove_Card', event);
      focusCard($(this));
    };

    // MaterioBaseTheme.prototype.on_click_card = function(event){
    //   trace('on_click_card', event);
    // };

    // MaterioBaseTheme.prototype.on_mouseleave_card = function(event){
    //   // trace('on_mouseleave_Card', event);
    // };


    /**
    * cards small
    */
    // MaterioBaseTheme.prototype.init_layout_cardsmall = function($card){
    //   trace('initLayoutCardBig');
    // };

    MaterioBaseTheme.prototype.on_mouseenter_cardsmall = function(event){
      //trace('MaterioBaseTheme :: on_mouseenter_cardsmall', event);
      showLazyLoadedImages(event.currentTarget);
    };

    MaterioBaseTheme.prototype.on_focused_cardsmall = function(event){
      // trace('theme :: on_focused_cardsmall',event);
      v1 = $(this);
      v2 = v1.offset();
      _$tooltip
        .html($('.group-header', this).clone().addClass('smallcard'))
        .css({
          top:v2.top,//- event.layerY,
          left:v2.left + 5 + ($(this).w())// - event.layerX
        })
        .removeClass('op-hidden').addClass('op-visible');
    };

    MaterioBaseTheme.prototype.on_mousemove_cardsmall = function(event){
      // trace('on_mousemove_Card', event);
      horiHoverImagesSwitcher(event);

      _$tooltip
        .css({
          top:event.pageY - _$tooltip.h() -5,// - event.layerY,
          left:event.pageX + 5 + ($(this).w() - event.layerX)
        });
    };

    // MaterioBaseTheme.prototype.on_click_cardsmall = function(event){
    //   trace('on_click_cardsmall', event);
    // };

    MaterioBaseTheme.prototype.on_mouseleave_cardsmall = function(event){
      // trace('on_mouseleave_Card', event);
      $('.images img.op-visible', this)
        .removeClass('op-visible').addClass('op-hidden')
          .eq(0)
            .removeClass('op-hidden').addClass('op-visible');

      if($(this).is('.focused'))
        _$tooltip.removeClass('op-visible').addClass('op-hidden');
    };

    /**
    * cards medium
    */
    // MaterioBaseTheme.prototype.init_layout_cardmedium = function($card){
      // trace('initLayoutCardMedium');
      // var ch = $card.h() - $('.group-header', $card).h() -30;
      // columnsPage($('.field-name-field-description, .field-name-body', $card), 210, ch);
    // };

    MaterioBaseTheme.prototype.on_mouseenter_cardmedium = function(event){
      // trace('on_mouseenter_cardmedium');

      // show lazy images
      showLazyLoadedImages(event.currentTarget);

      // columnize texts
      $card = $(event.currentTarget);
      if(!$('.columnized', $card).size() && !$('body').is('.role-7', 'role-2') ){
        var ch = $card.h() - $('.group-header', $card).h() -30;
        columnsPage($('.field-name-field-description, .field-name-body', $card), 210, ch);
        $('.group-side-4', $card).wrapInner('<div class="column-wrapper">').find('.field-item').addClass('dontsplit');
        columnsPage($('.group-side-4 .column-wrapper', $card), 210, ch);
      }

      // add associated materials links
      prepareAssociatedMaterials(event.currentTarget);
    };

    MaterioBaseTheme.prototype.on_mousemove_cardmedium = function(event){
      //trace('on_mousemove_cardmedium');
      horiHoverImagesSwitcher(event);
    };

    MaterioBaseTheme.prototype.on_click_cardmedium = function(event){
      // trace('on_click_cardmedium', event);
      if(!$(event.target).is('.flag') && !$(event.target).parent().is('.flag'))
        sideSwitcher(event);
    };

    MaterioBaseTheme.prototype.on_mouseleave_cardmedium = function(event){
      v1 = $('.side.op-visible');
      if(v1.is('.oops','.upgrade') || $('.upgrade', v1).size()){
        sideSwitcher(event, 0);
      }
    };

    /**
    * cards Big
    */
    // MaterioBaseTheme.prototype.init_layout_cardbig = function($card){
      //trace('initLayoutCardBig');
      // columnsPage($('.field-name-field-description, .field-name-body', $card), 425, 270);
    // };

    MaterioBaseTheme.prototype.on_mouseenter_cardbig = function(event){
      // trace('on_mouseenter_cardbig');
      showLazyLoadedImages(event.currentTarget);

      if(!$('.columnized', event.currentTarget).size()){
        columnsPage($('.field-name-field-description, .field-name-body', event.currentTarget), 425, 270);
        $('.group-4', event.currentTarget).wrapInner('<div class="column-wrapper">').find('.field-item').addClass('dontsplit');
        columnsPage($('.group-4 .column-wrapper', event.currentTarget), 425, 270);
      }

      // add associated materials links
      prepareAssociatedMaterials(event.currentTarget);
    };

    MaterioBaseTheme.prototype.on_mousemove_cardbig = function(event){
      // trace('on_mousemove_cardbig');
      horiHoverImagesSwitcher(event);
    };

    MaterioBaseTheme.prototype.on_click_cardbig = function(event){
      //trace('on_click_cardbig');
      sideSwitcher(event);
    };

    MaterioBaseTheme.prototype.on_mouseleave_cardbig = function(event){
      if($('.side.op-visible').is('.oops') || $('.side.op-visible').is('.upgrade')){
        sideSwitcher(event, 0);
      }
    };

    /**
    * cards Full
    */
    // MaterioBaseTheme.prototype.init_layout_cardfull = function($card){
    //   trace('initLayoutCardFull');

    // };

    MaterioBaseTheme.prototype.on_mouseenter_cardfull = function(event){
      // trace('on_mouseenter_cardfull');
      showLazyLoadedImages(event.currentTarget);

      // add associated materials links
      prepareAssociatedMaterials(event.currentTarget);
    };

    MaterioBaseTheme.prototype.on_mousemove_cardfull = function(event){
      // trace('on_mousemove_cardfull');
      horiHoverImagesSwitcher(event);
    };

    // MaterioBaseTheme.prototype.on_click_cardfull = function(event){
    //   trace('on_click_cardfull');
    // };

    // MaterioBaseTheme.prototype.on_mouseleave_cardfull = function(event){
    //   trace('on_mouseleave_cardfull');
    // };

    /**
    * horiHoverImagesSwitcher
    */
    function horiHoverImagesSwitcher(event){
      // trace('horiHoverImagesSwitcher', event);
      var $curtar = $(event.currentTarget);
      // TODO : event.layerX doesn't exists in IE8 so we have to calculate the mouse position from offsetX, pageY, etc
      // var layerX = event.layerX ? event.layerX : event.clientX - event.currentTarget.offsetLeft;
      var layerX = event.clientX - event.currentTarget.offsetLeft;
      // trace("layerX", layerX);
      if(layerX && $curtar.is('.image-ready')  ){ // && !$curtar.is('.image-buged')
        var $imgs = $('.group-images figure', event.currentTarget);
        if($(event.target).parents('.group-images').length){
          var imgw = $imgs.eq(0).w(),
              rapport = imgw/$imgs.length,
              mx = layerX > imgw ? imgw-1 : layerX,
              rapport_pos = Math.floor(mx / rapport);
          // trace('rapport_pos = '+rapport_pos+' | event.layerX = '+event.layerX);
          rapport_pos = rapport_pos < 0 ? 0 : ( rapport_pos > ($imgs.length - 1) ? $imgs.length - 1 : rapport_pos);

          if(!$imgs.eq(rapport_pos).is('.op-visible')){
            // google analytics
            $.event.trigger({
              type : 'record-stat',
              categorie : 'Card event',
              action : 'image slide switch',
              label : rapport_pos
            });

            $imgs
            .removeClass('op-visible').addClass('op-hidden')
            .eq(rapport_pos)
              .removeClass('op-hidden').addClass('op-visible');
          }
        }else{
          // $curtar.addClass('image-buged');
          $imgs.removeClass('op-visible').addClass('op-hidden');
          $imgs.eq(0).removeClass('op-hidden').addClass('op-visible');
        }

      }
    };

    /**
    * protectImages
    */
    function protectFigures(context){
      // trace('protectFigures');
      context = context == null ? 'body' : context;
      $('figure:not(.protected)', context)
        .append('<img class="blank" src="'+_settings.basePath+_themeSettings.themePath+'/img/blank.gif" />')
        .addClass('protected')
        .bind("contextmenu", function(e){
          alert("Cette image est soumise au droit d'auteur.");
          return false;
        });
    };

    /**
    * initPreview
    */
    function initPreview(node){
      $('nav.nav', node).append($('<section class="preview"><i class="fi-eye"></i></section>').bind('click', onClickPreviewCardBtn));
    };

    function onClickPreviewCardBtn(event){
      // trace('theme :: onClickPreviewCardBtn', event);
      event.preventDefault();
      //trace('Theme :: previewCard', event);
      previewCard($(this).parents('.node'));
      return false;
    };

    function previewCard($card){
      // trace('theme :: previewCard',$card);

      // get the nid from card class
      var matches = $card.attr('class').match(/\bnode-(\d+)\b/);

      // select viewmode regarding the window size
      var viewmode = false;
      var cur_vm = getCurrentViewmode();
      for(var vm in _viewmodes)
        if(vm != cur_vm && _viewmodes[vm] > _viewmodes[cur_vm] && _viewmodes[vm] < $(window).width())
          viewmode = vm;

      // ajax load card's node
      if(typeof matches[1] !== undefined && viewmode){
        $.event.trigger('loading-content');

        $.getJSON(_settings.basePath+_settings.pathPrefix+'materio_search_api_ajax/node/'+matches[1],
          {viewmode:viewmode},
          function(json){
            //trace('json', json);
            $.event.trigger('loaded-content');
            previewLoaded(json);
        });
      }
    };

    function previewLoaded(json){
      var $modal = $('<div>').addClass('modal-content').append(json.node);
      var $modal_wrapper = $('.modal-wrapper');

      if(!$modal_wrapper.size())
        $modal_wrapper = $('<div>').addClass('modal-wrapper').append($('<div>').addClass('modal-bg')).appendTo('body');

      $modal_wrapper
        .append($modal)
        .bind('click', function(event) {
          _previewIsOpen = false;
          $(this).remove();
        });

      $modal.bind('click', function(event) {
       event.stopPropagation();
      });

      _previewIsOpen = true;

      initCards('.modal-content');
      $.event.trigger({ type : 'previewloaded', container : '.modal-content'});
    };

    /**
    * GRID
    */
    function moveGridFocus(event, side){
      var $old_focused = $('#content .search-results, #content .actuality-items')
            .children('.node.focused').first();
      var $new_focused;
      switch(side){
        case 'r':
          $new_focused = $old_focused.next();
          break;
        case 'l':
          $new_focused = $old_focused.prev();
          break;
        case 'u':
        case 'd':
          var dir = side == "d" ? 1 : -1;
          var column = $old_focused.attr('column');
          while( ($new_focused == undefined || !$new_focused.size()) && column > 0){
            $new_focused = $('.node[column='+column+'][line='+(parseInt($old_focused.attr('line'))+dir)+']');
            column --;
          }
          break;
      }

      focusCard($new_focused);
      docScrollTo($new_focused);
    };

    function focusCard($card){
      // trace('theme :: focusCard', $card);
      if(!$card.size() || $card.is('.focused') || $card.parents('.modal-content').size())
        return;

      $('#content .search-results, #content .actuality-items')
        .children('.node.focused')
        .removeClass('focused');

      $card.addClass('focused');

      if(_previewIsOpen){
        previewCard($card);
      }

      $card.trigger('focused');
    };

    /**
    * lazyloadimages
    */

    // function initLazyLoad(context){
      // $('figure:first-child img.lazy', context).lazyload();//{
        // container:'#content'
      // });

      // TODO:  propage this event to the card near it to anticipate the mouseenter
      // $(context).bind('mousemove', showLazyLoadedImages);
    // };

    function showLazyLoadedImages(context){
      //trace('MaterioBaseTheme :: initLazyLoad : mouseenter', this);
      var $this = $(context);

      if( !$this.is('.lazy-processed') ){
        $this
          .addClass('lazy-processed')
          // .find('figure img.lazy')
          .find('img.lazy')
            .each(function(index){
              var $img = $(this);
              $img.attr('src', $img.attr('data-original')).removeAttr('data-original');
            });

        setTimeout(function(){
          $this.addClass('image-ready');
        }, 300);
      }
    };

    /**
    * prepareAssociatedMaterials
    */
    function prepareAssociatedMaterials(card){
      // trace('prepareAssociatedMaterials', card);

      $('.field-name-field-materiau-ref a:not(.prepared)', card).addClass("prepared").bind('click', onClickAssociatedMaterial);
    };

    /**
    * onClickAssociatedMaterial
    */
    function onClickAssociatedMaterial(event){
      // trace("onClickAssociatedMaterial");
      event.preventDefault();

      var $this = $(this);

      // trace('href', $(this).attr('href'));
      var nid = $this.attr('href').match(/^\/(fr|en)\/node\/(\d+)$/)[2];
      // trace("nid", nid);

      var $prt = $this.parents('.node-materiau');
      if($prt.parent().is('.modal-content')){
        // if we are on preview mode
        // remove already loaded associated
        $prt.parent().find('.node-'+nid+'.associated').remove();
        loadAssociatedNode($prt, nid);
      }else{
        // if we are on normal grid mode
        var $n = $prt.nextUntil('.node-materiau:not(.associated)').filter('.node-'+nid);
        // trace('n', $n);
        if($n.size()){
          // trace('focus', nid);
          // focus on already loaded node
          focusCard($n);
          // docScrollTo($isnodeexisting);
        }else{
          // trace('load associated', nid);
          loadAssociatedNode($prt, nid);
        }
      }

      return false;
    };

    function loadAssociatedNode($prt, nid){
      // console.log('loadAssociatedNode | nid = '+nid);
      var viewmode = $prt.attr('class').match(/vm-([^\s]+)/);
      // trace('viewmode match', viewmode);

      // if(!_isloadingresults){
        $.event.trigger('loading-content');
        var url = _settings.basePath+_settings.pathPrefix+'materio_search_api_ajax/node/'+nid;
        $.getJSON(url,
          {viewmode:viewmode[1]},
          function(json){
            //trace('json', json);
            $.event.trigger('loaded-content');

            displayAssociated($prt, $(json.node));

            $.event.trigger({
              type : 'resultscompleted',
              container : '#content .actuality-items, #content .search-results'
            });
        });
      // }
    };

    function displayAssociated($prt, $n){

      $n.addClass('associated').addClass('just-added');
      $prt.after($n);
      initCards($prt.parent());

      (function($n){
        setTimeout(function(){
          $n.removeClass('just-added');
          focusCard($n);
        }, 100);
      }($n));
    };

    /**
    * sideSwitcher
    */
    function sideSwitcher(event, delta){
      var $sides = $('.side', event.currentTarget);
      if($sides.length > 1){
        if( typeof delta == 'undefined'){
          var delta = 0;
          $sides.each(function(i) {
            if($(this).is('.op-visible')){
              delta = i+1;
              return false;
            }
          });

          delta = delta == 0 ? 1 : (delta == $sides.length ? 0 : delta);
        }

        // google analytics
        $.event.trigger({
          type : 'record-stat',
          categorie : 'Card event',
          action : 'side switch',
          label : delta
        });

        $sides.addClass('op-hidden').removeClass('op-visible')
          .eq(delta).removeClass('op-hidden').addClass('op-visible');
      }
    };

    /**
    * columnsPage
    */
    function columnsPage($elmt, cw, ch){
      // trace('columnsPage');
      var cls = Math.ceil($elmt.h()/ch);
      $elmt
        .addClass('columnized')
        .width(cw*cls)
        .columnize({
          width:cw,
          height:ch,
          lastNeverTallest:true
        });

      if(cls > 1){

        $elmt.find('.column').each(function(index) {
          var $this = $(this);
          if(!$this.find('*').length){
            $this.prev().addClass('last');
            $this.remove();
            return true;
          }
        });

        $elmt.find('.column').each(function(index) {
          var $this = $(this);

          if(!$this.is('.first'))
            $this.children('*:first-child').prepend('<span cw="'+cw+'" col="'+(index-1)+'" class="column-switcher prev-column">‹</span> ...');

          if(!$this.is('.last'))
            $this.children('*:last-child').append('... <span cw="'+cw+'" col="'+(index+1)+'" class="column-switcher next-column">›</span>');
        });

        $('.column-switcher', $elmt).bind('click', onColumnSwitcherClick);


      }
    };

    function onColumnSwitcherClick(event){
      event.preventDefault();
      //trace('onColumnSwitcherClick', event);

      var $this = $(event.currentTarget),
          $columnized = $this.parents('.columnized');

      // google analytics
      $.event.trigger({
        type : 'record-stat',
        categorie : 'Card event',
        action : 'column switch',
        label : $this.attr('col')
      });

      $columnized.css({
        marginLeft : -1 * $this.attr('cw') * $this.attr('col') +'px'
      });

      return false;
    }

    /**
    * initViewmodes
    */
    function initViewmodes(){
      checkViewmodesResponsive();
    };

    function checkViewmodesResponsive(){
      if(_480_768()){
        if($('.viewmode-link.active').is('.viewmode-cardfull')){
          $('.viewmode-cardbig').trigger('click');
        }
      }else if(_max_480()){
        if($('.viewmode-link.active').is('.viewmode-cardbig, .viewmode-cardfull')){
          $('.viewmode-cardmedium').trigger('click');
        }
      }
    };

    function getCurrentViewmode(){
      for(var vm in _viewmodes)
        if($('.viewmode-link.active.viewmode-'+vm).size())
          return vm;
    };

    /**
    * FLAGS
    */
    function initFlagsEvent(){
      $('.bookmarks, .mylists .flaged').children('.node:not(.listened)')
        .bind('mouseenter mousemove click mouseleave', onCardEventDispatcher)
        // .each(function(event){ initLayoutCardDispatcher($(this)); })
        .addClass('listened');
    };

    function onAfterFlaging(event){
      //trace('MaterioBaseTheme :: onAfterFlaging', event);
      // WARNING to use event variables i had to hack flag.js from flag module (change the event declaration)
      var $target = $(event.link).parents('article.node');
      if(event.flagStatus == 'flag'){
        $target.addClass('flaged');
      }else if(event.flagStatus == 'unflag'){

        if($('.flag-lists-entity-links a.unflag-action', $target).length == 0)
          $target.removeClass('flaged');

      }
    };

    function onMybookmarksBlockUpdate(event){
      initFlagsEvent();
      initLayout();
    };

    function onClickList(event){
      //trace('onClickList', event);
      var $link = $(event.currentTarget).addClass('active'),
          name = $link.attr('name'),
          $block = $link.parents('.block'),
          $flaged = $('.flaged.'+name, $block).addClass('active');

      $link.siblings().removeClass('active');
      $flaged.siblings().removeClass('active');

      createCookie('materiomyflaglistsopened', name, 1);

      $flaged.parents('.mylists').height($flaged.h());
      initLayout();
    };

    function onMyListsBlockUpdate(event){
      //trace('MaterioBaseTheme :: onMyListsBlockUpdate', event);
      initFlagsEvent();
      // initLazyLoad(this);
      // TODO:  refresh contents (search results) to see new flaglist links.
      initLayout();
    };

    function onMyListsBlockBuilded(event){
      //trace('MaterioBaseTheme :: onMyListsBlockBuilded', event);
      // initLazyLoad(event.block);
      showLazyLoadedImages(event.block);
    };
    /**
    * cards bookmark
    */
    // MaterioBaseTheme.prototype.init_layout_bookmark = function($card){
    //   trace('initLayoutCardBig');

    // };

    MaterioBaseTheme.prototype.on_mouseenter_bookmark = function(event){
      //trace('on_mouseenter_bookmark', event);
      _$tooltip
        .html($('.group-header', this).clone())
        .css({
          top:event.pageY - _$tooltip.h() -5,//- event.layerY,
          left:event.pageX + 5 + ($(this).w() - event.layerX)
        })
        .removeClass('op-hidden').addClass('op-visible');
    };

    MaterioBaseTheme.prototype.on_mousemove_bookmark = function(event){
      // trace('on_mousemove_Card', event);
      // if(event.layerX)
      //   horiHoverImagesSwitcher(event);

      _$tooltip
        .css({
          top:event.pageY - _$tooltip.h() -5,// - event.layerY,
          left:event.pageX + 5 + ($(this).w() - event.layerX)
        });
    };

    // MaterioBaseTheme.prototype.on_click_bookmark = function(event){
    //   trace('on_click_bookmark', event);
    // };

    MaterioBaseTheme.prototype.on_mouseleave_bookmark = function(event){
      // trace('on_mouseleave_Card', event);
      $('.images img.op-visible', this)
        .removeClass('op-visible').addClass('op-hidden')
          .eq(0)
            .removeClass('op-hidden').addClass('op-visible');

      _$tooltip.removeClass('op-visible').addClass('op-hidden');
    };

    /**
    * keyboradshortcuts
    */
    function initKeyboardShortcuts(){

      $(document)
        .bind('keydown', 'Shift+:',shortcut_focusSearchField)
        .bind('keydown', '/',shortcut_focusSearchField)
        .bind('keydown', 'Alt+1',shortcut_viewmodeSmall)
        .bind('keydown', 'Alt+2',shortcut_viewmodeMedium)
        .bind('keydown', 'Alt+3',shortcut_viewmodeBig)
        .bind('keydown', 'Alt+4',shortcut_viewmodeFull)
        .bind('keydown', 'space',shortcut_togglePreview)
        .bind('keydown', 'esc',shortcut_closeModaleContent)
        .bind('keydown', 'up',shortcut_onUpArrow)
        .bind('keydown', 'right',shortcut_onRightArrow)
        .bind('keydown', 'down',shortcut_onDownArrow)
        .bind('keydown', 'left',shortcut_onLeftArrow);
    };

    function shortcut_focusSearchField(e){
      // trace("focusSearchField");
      if($('#edit-searchfield').size()){
        var stat_event = { type : 'record-stat', categorie : 'Shortcuts'};
        stat_event.action = 'slash';
        stat_event.label = 'Focus on search text field';
        $.event.trigger(stat_event);

        $('#edit-searchfield').focus();

        e.stopPropagation();
        e.preventDefault();
        return false;
      }
    };

    function shortcut_viewmodeSmall(e){
      if($('a.viewmode-link.viewmode-cardsmall').size()){
        var stat_event = { type : 'record-stat', categorie : 'Shortcuts'};
        stat_event.action = 'Alt+1';
        stat_event.label = 'Change view mode : card small';
        $.event.trigger(stat_event);

        $('a.viewmode-link.viewmode-cardsmall').click();

        return false;
      }
    };

    function shortcut_viewmodeMedium(e){
      if($('a.viewmode-link.viewmode-cardmedium').size()){
        var stat_event = { type : 'record-stat', categorie : 'Shortcuts'};
        stat_event.action = 'Alt+2';
        stat_event.label = 'Change view mode : card medium';
        $.event.trigger(stat_event);

        $('a.viewmode-link.viewmode-cardmedium').click();

        return false;
      }
    };

    function shortcut_viewmodeBig(e){
      if($('a.viewmode-link.viewmode-cardbig').size()){
        var stat_event = { type : 'record-stat', categorie : 'Shortcuts'};
        stat_event.action = 'Alt+3';
        stat_event.label = 'Change view mode : card big';
        $.event.trigger(stat_event);

        $('a.viewmode-link.viewmode-cardbig').click();

        return false;
      }
    };

    function shortcut_viewmodeFull(e){
      if($('a.viewmode-link.viewmode-cardfull').size()){
        var stat_event = { type : 'record-stat', categorie : 'Shortcuts'};
        stat_event.action = 'Alt+4';
        stat_event.label = 'Change view mode : card full';
        $.event.trigger(stat_event);

        $('a.viewmode-link.viewmode-cardfull').click();

        return false;
      }
    };

    function shortcut_togglePreview(e){
      // trace('theme :: shortcut_togglePreview', e);
      $.event.trigger({
        type : 'record-stat',
        categorie : 'Shortcuts',
        action : 'Space',
        label : 'Space toggle preview'
      });

      if(_previewIsOpen){
        if($('body>.modal-wrapper').size()){
          $('body>.modal-wrapper').click();
          _previewIsOpen = false;
          return false;
        }
      }else{
        previewCard($('#content .search-results, #content .actuality-items').children('.node.focused:first'));
      }
    };

    function shortcut_closeModaleContent(e){
      if($('body>.modal-wrapper').size()){
        $.event.trigger({
          type : 'record-stat',
          categorie : 'Shortcuts',
          action : 'Esc',
          label : 'Esc from modal content'
        });

        $('body>.modal-wrapper').click();
        _previewIsOpen = false;
        return false;
      }
    };

    function shortcut_onUpArrow(e){
      // trace('theme :: shortcut_onTopArrow', e);
      moveGridFocus(e, 'u');
    };

    function shortcut_onRightArrow(e){
      // trace('theme :: shortcut_onRightArrow', e);
      moveGridFocus(e, 'r');
    };

    function shortcut_onDownArrow(e){
      // trace('theme :: shortcut_onDownArrow', e);
      moveGridFocus(e, 'd');
    };

    function shortcut_onLeftArrow(e){
      // trace('theme :: shortcut_onLeftArrow', e);
      moveGridFocus(e, "l");
    };

    /**
    * Misc
    */
    function onResizeWindow(e){
      clearInterval(_resizeTimer);
      _resizeTimer = setTimeout(function(){
        initLayout();
        checkViewmodesResponsive();
        setUpGrid("#content .actuality-items, #content .search-results");
      }, 200);
    };

    /**
    * Statics
    */
    function initMembershipForm() {

      switch(window.location.hash){
        case '#flocon':
          $('#edit-submitted-column-left-membership-options-1').attr('checked', 'checked');
          // $options.trigger('change');
          break;
        case '#etoile':
          $('#edit-submitted-column-left-membership-options-2').attr('checked', 'checked');
          break;
        case '#4etoiles':
          $('#edit-submitted-column-left-membership-options-3').attr('checked', 'checked');
          break;
        // default:
        //   switchMembershipShipFormFields($options);
        //   break
      }

      $('#webform-component-column-left--membership-options')
        .change(function(event){
          //trace('changed');
          if( $('input[type="radio"]:checked', this).is('#edit-submitted-column-left-membership-options-3') ){
            $('#webform-component-column-right--collaborators').show();
          }else{
            $('#webform-component-column-right--collaborators').hide();
          }
          $('div.form-item.selected', this).removeClass('selected');
          $('input[type="radio"]:checked', this).parents('div.form-item').addClass('selected');
        })
        .trigger('change');


      // $('#webform-component-column-left--membership-options input[checked="checked"]').parents('div.form-item').addClass('selected');
    };

    /** helpers */

    $.fn.h = function(){
      if(this.css('height') == undefined)
        return 0;

      return parseInt(this.css('height')) + parseInt(this.css('padding-top')) + parseInt(this.css('padding-bottom'));
    };

    $.fn.w = function(){
      if(this.css('width') == undefined)
        return 0;

      return parseInt(this.css('width')) + parseInt(this.css('padding-left')) + parseInt(this.css('padding-right'));
    };

    function getDocHeight() {
        var D = document;
        return Math.max(
            Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
            Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
            Math.max(D.body.clientHeight, D.documentElement.clientHeight)
        );
    };

    // http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
    function viewport() {
      var e = window, a = 'inner';
      if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
      }
      return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
    };

    /**
    * Forms
    */
    function initForms(){

      $('#edit-searchfield:not(.processed)')
        .bind('focus', function(event) {
          var $this = $(this);
          //$this.attr('value', 'test');
          // trace('value', $this.val());
          // trace('default', $this.attr('default'));
          if($this.val() == $this.attr('default'))
            $this.val('');
        })
        .bind('focusout', function(event) {
          var $this = $(this);
          if($this.val() == "")
            $this.val($this.attr('default'));
        })
        .addClass('processed');

        hideLabelsFromRegisterForm();
    };

    function hideLabelsFromRegisterForm () {
      var $this, id,label, description;
      $('input.form-text', '#block-user-login, #block-materio-user-user-register, , #block-materio-user-user-createaccount').each(function(i) {
        $this = $(this);
        id = $this.attr('id');
        label = $('label[for='+id+']').hide().text();
        description = $this.parent().find('.description').hide().text();
        if($this.attr('placeholder') == '')
          $this.attr('placeholder',label);

        $this.attr('title',description);
      });
    };

    function onAjaxRegisterBlockLoaded (event) {
      // console.log('onAjaxRegisterBlockLoaded');
      hideLabelsFromRegisterForm();
    };

    /**
    * cookies
    */
    function createCookie(name,value,days) {
      if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
      }
      else var expires = "";
      document.cookie = name+"="+value+expires+"; path=/";
    };

    function readCookie(name) {
      var nameEQ = name + "=";
      var ca = document.cookie.split(';');
      for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
      }
      return null;
    };

    function eraseCookie(name) {
      createCookie(name,"",-1);
    };

    /**
    * google analytics
    */
    function onRecordStat(event){
      //trace('onRecordStat', event);
      // path, category, action, opt_label, opt_value
      if(typeof _gaq !== 'undefined'){
        if(event.path){
          _gaq.push(['_trackPageview', event.path]);
        }else{
          _gaq.push(['_trackEvent', event.categorie, event.action, event.label, event.value]);
        }
      }
    };

    /**
    * docScrollTo
    */
    function docScrollTo($e){
      // $(document).scrollTop($e.offset().top);
      if($e.size())
        $('html,body').animate({
          scrollTop: $e.offset().top - $(window).height()*0.5 + $e.height()*0.5
        }, 500);
    };

    init();
  };

  $(document).ready(function() {
    var materiobasetheme = new MaterioBaseTheme();
  });

  /**
 * Attach collapse behavior to the feedback form block.
 */
  Drupal.behaviors.feedbackForm = {
    attach: function (context) {
      $('#block-feedback-form', context).once('feedback', function () {
        var $block = $(this);
        $block.find('span.feedback-link')
          .prepend('<span id="feedback-form-toggle">feedback</span> ')
          .css('cursor', 'pointer')
          .toggle(function () {
              Drupal.feedbackFormToggle($block, false);
            },
            function() {
              Drupal.feedbackFormToggle($block, true);
            }
          );
        $block.find('form').hide();
        $block.show();
      });
    }
  };

  /**
   * Collapse or uncollapse the feedback form block.
   */
  Drupal.feedbackFormToggle = function ($block, enable) {
    $block.find('form').slideToggle('medium');
    if (enable) {
      $('#feedback-form-toggle', $block).html('feedback');
    }
    else {
      $('#feedback-form-toggle', $block).html('feedback (close)');
    }
  };

})(jQuery);