/**
 * @author mmikkola
 */
$(document).ready(function() {
    return;
    var assets = [
        THEME_URL+"/images/header/1.png",
        THEME_URL+"/images/header/2.png",
        THEME_URL+"/images/header/3.png",
        THEME_URL+"/images/header/4.png"
    ];
    var images = [];
    var travelData = [
        120,
        70,
        40,
        20
    ];
    var posData = [
    {
        x: 385, 
        y:3
    },

    {
        x: 0, 
        y:12
    },

    {
        x: 14, 
        y:30
    },

    {
        x: 0, 
        y:30
    }
    ];
    var headerImage = $("#header-image");
    var canvas = $('<canvas id="g" width="'+(headerImage.width()+20)+'" height="'+headerImage.height()+'" style="margin-left:-10px;"></canvas>');
    if(canvas[0].getContext) {
        // shim layer with setTimeout fallback
        window.requestAnimFrame = (function(){
          return  window.requestAnimationFrame       || 
                  window.webkitRequestAnimationFrame || 
                  window.mozRequestAnimationFrame    || 
                  window.oRequestAnimationFrame      || 
                  window.msRequestAnimationFrame     || 
                  function(/* function */ callback, /* DOMElement */ element){
                    window.setTimeout(callback, 1000 / 60);
                  };
        })();
        //
        headerImage
            .empty()
            .append(canvas);
        var context = canvas[0].getContext("2d");
        var win = $(document.body);
        var parallaxWindow = win;
        var mouseX = null;
        var parallaxWindowOffset = parallaxWindow.offset()
        var left = parallaxWindowOffset.left;
        var wid = parallaxWindow.width();
        //
        win.mousemove(function(event) {
            //            console.log(event)
            mouseX = event.clientX;
            mouseY = event.clientY;
        });
        // inittialize stuff
        loadAssets();
    }
    function loadAssets() {
        var image = new Image();
        image.onload = assetLoaded;
        image.src = assets.shift();
    }
    function assetLoaded() {
        var index = images.length;
        images.push({
            ox: posData[index].x, 
            oy: posData[index].y, 
            x: posData[index].x, 
            y: posData[index].y, 
            image: this, 
            travel: travelData[index], 
            width: parseInt(this.width), 
            height: parseInt(this.height)
        });
        console.log(images[index])
        //
        if( assets.length == 0 ) {
            start();
        } else {
            loadAssets();
        }
    }
    function start() {
//        setInterval(draw, 1000/20);
        requestAnimFrame(draw);
    }
    function draw() {
        //                    context.fillStyle = "#eff";
        //                    context.fillRect(0, 0, canvas.width(), canvas.height());
        context.clearRect(0, 0, canvas.width(), canvas.height());
        //
        if( mouseX == null) {
            mouseX = (wid/2);
        }
        var x = mouseX - left - wid/2;
        var d = x/(wid/2) || 0;
        //
        //                    layers.each(function(index, domElement) {
        //                        layer = $(this);
        //                        posX = layer.data("positionX");
        //                        travelX = parseInt(layer.data("travel"));
        //                        if( posX == undefined ) {
        //                            posX = parseInt( layer.css("left") );
        //                            layer.data("positionX", posX);
        //                        }
        //                        layer.css("left", (posX+travelX*-d)+"px");
        //                    })
        var c = images.length;
        var i = c;
        var img;
        //
        //                    for( i = 0; i<c; i++ ) {
        while(i) {
            img = images[i-1];
            img.x = img.ox + img.travel*-d;
            context.drawImage(img.image, img.x, img.y, img.width, img.height);
            //
            i--;
        }
        //
        requestAnimFrame(draw);
    }
});