Multi-color Gradient

define([
    'dat/gui/GUI',
    'extras/gui/addTColor',
    'toxi/internals',
    'toxi/color/ColorGradient',
    'toxi/color/TColor',
    'toxi/color/theory/colorTheoryRegistry',
    'toxi/util/datatypes/FloatRange'
], function( DatGui, addTColor, internals, ColorGradient, TColor, colorTheoryRegistry, FloatRange ){

    var each = internals.each,
        mixin = internals.mixin,
        buildGui,
        createGradient,
        toLinearGradientCSS,
        last;


    last = function( arr ){ return arr[arr.length-1]; };

    createGradient = function(){
        var container = document.getElementById('example-container'),
            canvas = document.createElement('canvas'),
            ctx = canvas.getContext('2d'),
            gradientFromStrategy,
            cssGradientEl,
            gradient,
            posComparator,
            drawOnCanvas,
            range,
            exports = {};

        canvas.width = window.innerWidth;
        canvas.style.width = canvas.width + 'px';

        canvas.height = 1;
        canvas.style.height = '500px';

        if( window.devicePixelRatio >= 2 ){
            canvas.style.width = canvas.width + 'px';
            canvas.width *= 2;
        }

        range = new FloatRange(0, canvas.width);

        gradientFromStrategy = function gradientFromStrategy(strategy, positions){
            var gradient = new ColorGradient();
            strategy
                .createListFromColor(TColor.newRandom().setSaturation(0.8))
                .each(function(color,i){
                    gradient.addColorAt(range.getAt(positions[i]), color);
                });
            return gradient;
        };

        gradient = gradientFromStrategy(colorTheoryRegistry.SPLIT_COMPLEMENTARY, [0,0.35,0.6,0.75,0.85,1.0]);

        cssGradientEl = document.createElement('div');
        cssGradientEl.innerHTML = "CSS linear-gradient";
        mixin( cssGradientEl.style, {
            width: '200px',
            height: '75px',
            position: 'absolute',
            boxShadow: '4px 4px 8px rgba(0,0,0,0.5)',
            top: '40px',
            left: '20px',
            paddingLeft: "4px",
            border: '4px solid white',
            color: 'black',
            fontWeight: 'bold',
            fontSize: '14px',
            fontFamily: 'Helvetica, Arial, sans-serif',
            color: 'white'
        });

        posComparator = function(a,b){
            return internals.numberComparator(a.getPosition(),b.getPosition());
        };

        drawOnCanvas = function(){
            var imageData = ctx.createImageData(canvas.width,1);

            var list = gradient.calcGradient(0,canvas.width);
            for( var i=0, l = list.size(); i<l; i++ ){

                list.colors[i].toRGBADecimalArray(imageData.data, 4*i);
            }
            ctx.putImageData(imageData,0,0);
        };

        exports.render = function(){
            gradient.getGradientPoints().sort(posComparator);
            cssGradientEl.style.backgroundImage = toLinearGradientCSS( gradient, canvas.width );
            drawOnCanvas();
        };

        container.appendChild( canvas );
        container.appendChild( cssGradientEl );

        exports.range = range;
        exports.gradient = gradient;
        exports.render();

        return exports;
    };

    toLinearGradientCSS = (function(){

        var prefix = (function(){
            var styles = window.getComputedStyle(document.documentElement, '');
            return (Array.prototype.slice.call(styles)
                .join('')
                .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
            )[1];
        })();

        return function toCSS( grad, width, angle ){
            angle = angle || "left";
            var stops = [];

            each(grad.getGradientPoints(), function(gradPoint){
                stops.push(gradPoint.getColor().toRGBACSS() +' '+Math.round((gradPoint.getPosition()/width)*100)+'%');
            });

            return '-'+prefix+'-linear-gradient(' +angle+ ', ' +stops.toString()+ ')';
        };
    })();

    buildGui = function( app ){
        var exports = {},
            gui = new DatGui(),
            addGradientPoint,
            createUI;

        addGradientPoint = function(){
            app.gradient.addColorAt(Math.floor(Math.random()*255), TColor.newRandom());
            return last(app.gradient.getGradientPoints());
        };

        createUI = (function(){
            var i = 0;
            return function(gradPoint){
                var folder = gui.addFolder('Color '+((i++)+1));
                addTColor(folder,gradPoint,'color').onChange(app.onChange);
                folder.add(gradPoint.getColor(),'_alpha',0,1.0).step(0.01).name('alpha').onChange(app.onChange);
                folder.add(gradPoint,'pos',app.range.getAt(0),app.range.getAt(1)).name('pixel pos').onChange(app.onChange);
                folder.open();
            };
        })();


        exports.addColor = function(){
            createUI( addGradientPoint() );
            app.onChange();
        };
        gui.add( exports, 'addColor' ).name('Add A Color');

        each(app.gradient.getGradientPoints(), createUI);
        return exports;
    };


    return function(){
        var sketch = createGradient();
        buildGui({
            gradient: sketch.gradient,
            range: sketch.range,
            onChange: sketch.render
        });
    };
});