// PARALLAX BG EFFECTS
function calcParallax(tileheight, speedratio, scrollposition) {
  return ((tileheight) - (Math.floor(scrollposition / speedratio) % (tileheight+1)));
}

window.onload = function() {

  window.onscroll = function() {
    var posX = (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : window.pageXOffset;
    var posY = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;
    
    var bg = document.getElementById('bg');
    var bgparallax = calcParallax(53, 8, posY);
    bg.style.backgroundPosition = "50% " + bgparallax + "px"; 

    var fg = document.getElementById('fg');
    var fgparallax = calcParallax(400, 2, posY);
    fg.style.backgroundPosition = "47% " + fgparallax + "px"; 
  }
}


var Mosaic = new Class({

    Implements: Options,
    Implements: Events,

    target: null,
    levels: 1,
    data: null,
    previous_tile: null,
    element_class: 'artist',
    spinner: null,

    initialize: function(target, levels, data, options) {
        //this.setOptions(options);
        this.data = data;
        this.target = target;
        this.spinner = new Spinner(target);
        this.spinner.show();
        
        $(target).empty();
        
        this._preloadImages(data);

        this.addEvent('imagesLoaded', function() {        
            var i = 0;
            while ((levels - 1) >= i) {
                var tile_data = data.getRandom();
                data.erase(tile_data);
                var tile = this._createTile(tile_data, i);
                tile.setStyle('opacity', 0);
                tile.inject(target);
                tile.fade('in')
                i++;
            }
            this.spinner.destroy();
            (function() {
                this._pickRandomTile();
            }.bind(this)).periodical(3000);
        });

    },

    _createTile: function(data, level) {
        var obj = this;
        var tile = new Element('a', {
            'href': data['url'],
            'class': this.element_class +' '+ this.element_class+'-'+level,
            'styles': {
                'background-image': 'url('+data['images'][level]+')'
            }
        });
        var text = new Element('span', {
            'class': data['class'],
            'text': data['text']   
        });
        text.injectInside(tile);
        tile.store('level', level);
        tile.store('data', data);
        
        return tile;
    },

    _pickRandomTile: function() {
        var tiles = $(this.target).getChildren();
        var old_tile = tiles.getRandom();
        while (old_tile.retrieve('level') == this.previous_tile) {
            old_tile = tiles.getRandom();
        }
        this.previous_tile = old_tile.retrieve('level');
        var tile_data = this.data.getRandom();
        this._changeTile(old_tile, old_tile.retrieve('level'), tile_data);
    },

    _changeTile: function(old_tile, level, data) {
        old_tile.setStyles({
            'z-index': '2' 
        });
        var tile = this._createTile(data, level).inject(this.target);
        old_tile.fade('out');
        (function() {
            old_tile.destroy();
        }).delay(1200);
        this.data.erase(data);
        this.data.include(old_tile.retrieve('data'));
        return tile;
    },

    _preloadImages: function(data) {
        images = new Array();
        var i = 0;
        while (data.length > i) {
            images.append(data[i]['images']);
            i++;
        }
        Asset.images(images, {
            onComplete: function() {
                (function() {
                    this.fireEvent('imagesLoaded');
                    this.spinner.destroy();
                }.bind(this)).delay(300);
            }.bind(this)
        });

    }


});





window.addEvent('domready', function() {
    
    var spinner = new Spinner('artists');
    if ($('artists')) {
        $('artists').empty();
        var data = new Request({
            url: '/artister/json/', 
            method: 'get',
            onSuccess: function(data, asd) {
                var a = JSON.decode(data);
                new Mosaic('artists', 5, a.artister, {});
            },
            onFailure: function(xhr){
                alert(xhr.status);
            }
        }).send();
    }

    
});