refresh_size.js

//Require Underscore.js http://underscorejs.org/
/*
Large part of this should be done using only CSS, I don't have
the power to impose it.
*/
var runned = false, refreshSizeRuntime = function(){

  strict;

  if(runned){
    return runned;
  }else{
    runned = true

    /**
     * Drop-in replacement for addEventListener compat for IE6+
     */
    Element.prototype.addEvent = function(type, eventHandle) {
      if ( this.addEventListener ) {
          this.addEventListener( type, eventHandle, false );
      } else if ( this.attachEvent ) {
          this.attachEvent( "on" + type, eventHandle );
      } else {
          this["on"+type]=eventHandle;
      }
    };


    /**
     * @class refreshSizes
     * @constructor
     */
//\\==========================================================================//\\
    var refreshSizes = function(options){
      this.options = _.extend(options, refreshSizes.prototype.defaults);
      this
        .fetchSizes(this.options.baseElements)
      ;
    };

    refreshSizes.prototype = {

      defaults: {
        baseElements: {
          num:       document['keyword-search'],
          container: document['container'],
          triangle:  document.getElementsByClassName('col-left')[0],
          desc:      document.getElementsByClassName('search-city')[0]
        }
      },

      /**
       * @chainable
       */
      setSizes : function(dom){
        var 
          num         = dom.num.width,
          size        = (num - 315)/2,
          container   = dom.container.width,
          inscription = container-390,
          triangle    = dom.triangle.width,
          desc        = dom.desc.width,
          description = desc-200
        ;

        document.getElementsByClassName('triangle')[0].style['border-width'] =
          '100px ' + triangle/2 + 'px 0px ' + triangle/2 + 'px';
        document.where.style.width                                           =
          size + 'px'
        document.area.style.width                                            =
          size + 'px';
        document['ins-cont'].style.width                                     =
          inscription + 'px';
        document.getElementsByClassName('Description')[0].style['max-width'] =
          description + 'px';

        return this;
      },

      /**
       * @chainable
       */
      update: function(){
        this.setSizes(this.options.baseElements);
        return this;
      }

    };
//\\==========================================================================//\\


    var resizer = new refreshSizes();
    //Debounce is a main feature to avoid performances issues !
    window.addEvent('resize',  _.debounce(resizer.update,300) );


  }
};

document.addEvent('DOMContentLoaded', refreshSizeRuntime);
//IE8 Compat, the `runned` act as a semaphore to avoid double execution.
document.addEvent('readystatechange', refreshSizeRuntime);