function Controller(canvas1, canvas2)
{
    var self = this;
    
    this.patternCanvas = [ new PatternCanvas(canvas1), new PatternCanvas(canvas2) ];

    var container = document.getElementById('controller');
    if (document.createTouch) {
        container.addEventListener('touchstart',    function(e) { return self.onTouchStart(e); }, false);
        container.addEventListener('touchmove',     function(e) { e.preventDefault(); return true; }, false);
        container.addEventListener('touchend',      function(e) { e.preventDefault(); return true; }, false);
        container.addEventListener('touchcancel',   function(e) { e.preventDefault(); return true; }, false);
    } else
        container.addEventListener('click', function(e) { e.preventDefault(); self.toggleCanvas(); return true; }, false);
    
    this.patternCanvas[0].draw();
    this.patternCanvas[1].draw();
}

Controller.prototype = {
    toggleCanvas : function()
    {
        var self = this;
        
        var canvas1Showing = this.patternCanvas[0].element.className=='pattern show';
        
        if (canvas1Showing) {
            this.patternCanvas[0].element.className='pattern hide';
            this.patternCanvas[1].element.className='pattern show';
            setTimeout(function() { self.patternCanvas[0].draw(); }, 1500);
        } else {
            this.patternCanvas[0].element.className='pattern show';
            this.patternCanvas[1].element.className='pattern hide';
            setTimeout(function() { self.patternCanvas[1].draw(); }, 1500);
        }
    },
    
    onTouchStart : function(e)
    {
        e.preventDefault();
        
        if (e.targetTouches.length != 1)
            return false;
        
        this.toggleCanvas();
        
        return true;
    }
}

function loaded()
{
    var patterns = [];
    
    if (document.querySelectorAll)
        patterns = document.querySelectorAll(".pattern");
    else {
        patterns.push(document.getElementById("patternA"));
        patterns.push(document.getElementById("patternB"));
    }

    if (patterns.length == 0)
        return;

    if (!patterns[0].getContext)
        return;

    if (!patterns[1].getContext)
        return;

    var controller = new Controller(patterns[0], patterns[1]);
    
    setTimeout(function(){window.scrollTo(0, 1);}, 100);
}
window.addEventListener('load', loaded, true);