Rotator Billboard Interstitial

by khrome

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/1.5.25/jquery.isotope.js"></script>
<div id="grid"></div>

CSS

.item{
    min-height :50px;
    min-width :50px;
    background-color : green;
    display: block;
    margin: 10px;
}

body{min-height:100%;}

JavaScript

function forceID(element){ // get or generate a domID on an element
    var id;
    if(typeof element == 'string'){ // sometimes it's convenient to passthru a selector
        id = element;
    }else if(!(id = element.attr('id'))){
        id = UUID.v4();
        element.attr('id', id);
    }
    return id;
}

function Grid(element, options){
    this.element = $(element);
    this.items = [];
    this.options = options || {};
    if(!this.options.itemHeight) this.options.itemHeight = this.options.itemSize || 100;
    if(!this.options.itemWidth) this.options.itemWidth = this.options.itemSize || 100;
    if(!this.options.gutterSize) this.options.gutterSize = 10;
    if(!this.options.buildItem) this.options.buildItem = function(data){
        return '<div><h2>'+data.name+'</h2><p>'+data.description+'</p></div>';
    }
    this.build(element);
    var ob = this;
    var win = $(window);
    if(this.options.reorient) win.on( 'orientationchange', this.options.reorient);
}

Grid.prototype.add = function(item){
    if(typeof item == 'array'){
        var ob = this;
        item.forEach(function(child){
            ob.add(child);
        });
        return true;
    }
    this.items.push(item);
    if(this.built){
        this.built[item.id] = this.options.buildItem(item, this);
        this.element.isotope('insert', this.built[item.id]);
        if(!this.mainStage) this.mainStage = this.built[item.id];
    }
};

Grid.prototype.build = function(container){
    var id = forceID(container);
    //todo: check to make sure it's in the DOM
    this.isotope = this.element.isotope({
        itemSelector : '.item',
        //filter: '*',
        //layoutMode : 'fitRows',
        masonry: {
            columnWidth: (($(window).width()-30)/3),
            gutterWidth: this.options.gutterSize
        }
    });
    this.built = {};
    if(this.options.reorient) this.options.reorient(this);
}

Grid.prototype.empty = function(callback){
    this.items.slice(0).forEach(function(item){...