header-slider.js

/*jslint nomen: true, debug: true, evil: true, vars: true, browser: true,
  devel: true */
/*global */

var HeaderSlider = function(){
    this.base64EncodeImages();
};

HeaderSlider.prototype = {

    url_images: [
        'header_slider.jpeg',
        'header_slider_2.jpg',
        'header_slider_3.jpg'
    ],

    prefix_url: "/static/images/",
    current_index: 0,
    bottom_margin: 77,

    startSlider: function(){
        this.headerSlider = document.getElementById('header_slider');
        this.setHeightHandler();
        window.addEventListener('resize', this.setHeightHandler.bind(this), false);
        this.changeImage();
        setInterval(this.changeImage.bind(this), 4000);
    },

    base64EncodeImages: function(){
        var img;
        for (var i=0; i<this.url_images.length; i++) {
            img = new Image();
            img.setAttribute('index', i);
            img.addEventListener('load', _.bind(this.saveEncode, this), false);
            img.src = this.prefix_url + this.url_images[i];
        }
    },

    saveEncode: function(e){
        var img = e.path[0];
        var index = img.getAttribute('index');
        var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        var context = canvas.getContext('2d');

        context.drawImage(img, 10, 10);
        var data = canvas.toDataURL();
        this.url_images[index] = data;

        if (_.last(this.url_images) === data) {
            this.startSlider();
        }
    },

    getCumputedHeight: function(){
        var height = document.documentElement.clientHeight;
        return height - this.bottom_margin;
    },

    setHeightHandler: function(){
        this.headerSlider.style.height = this.getCumputedHeight() + "px";
    },

    changeImage: function(){
        ++this.current_index;

        if (this.current_index >= this.url_images.length) {
            this.current_index = 0;
        }

        this.headerSlider.style.backgroundImage = "url(" +
            this.url_images[this.current_index] +
            ")";
    }
};