function drawTriangles(opacities) {
    var stage = new Kinetic.Stage({
            container: "triangles",
            width: 960,
            height: 395
        }),
        datacolors = $j('.slide.current').data('colors'),
        colors = datacolors.split(',');

    var layer = new Kinetic.Layer(),
        opacities = [0, 0, 0, 0, 0, 0, 0, 1.0, .8, .5, .2, .1],
        movement = [
            {x: 34, y: 66},
            {x: -34, y: -66}
        ],
        coordsUp = [43, 67, 74,130, 13,130],
        coordsDown = [43,130, 74,67, 13,67];

    // Make 6 Rows
    for(var n = 0; n < 6; n++) {
        // Vertical offset per row
        var coory = n * 66,
            offsetx = 0;

        // Every other row
        if(n % 2) {
            offsetx = -34;
        }

        // Each row with 26 triangles
        for(var i = 0; i < 28; i++) {
            var coorx = (i * 34) + offsetx,
                coords = coordsUp,
                myopacity = opacities[Math.floor(Math.random() * opacities.length)],
                myname = '';

            if(myopacity < .6) {myname = 'tri';}

            // Every other triangle, flip it
            if(i % 2) {
                coords = coordsDown;
            }

            // Don't place triangles in the text zone
            if(coorx < 440 && n < 4) {
                continue;
            }

            if(coorx < 280 && n < 5) {
                continue;
            }

            if(coorx < 180 && n < 6) {
                continue;
            }

            if(myopacity > .25) {
                var poly = new Kinetic.Polygon({
                    x: coorx,
                    y: coory,
                    points: coords,
                    alpha: 0,
                    fill: colors[Math.floor(Math.random() * colors.length)],
                    name: myname
                });

                // add the shape to the layer
                layer.add(poly);
            }
        }
    }
    stage.add(layer);

    return layer;
}

function fadeShapes(layer, movementOut, opacity) {
    var shapes = layer.getChildren();

    for(var n = 0; n < shapes.length; n++) {
        var shape = layer.getChildren()[n];

        shape.transitionTo({
            alpha: opacity,
            offset: movementOut[Math.floor(Math.random() * movementOut.length)],
            duration: 1.0
        });
    }
}

function setColor(layer) {
    var shapes = layer.getChildren(),
        datacolors = $j('.slide.current').data('colors'),
        colors = datacolors.split(',');

    for(var n = 0; n < shapes.length; n++) {
        var shape = layer.getChildren()[n];
        shape.setFill(colors[Math.floor(Math.random() * colors.length)]);
    }
}

$j(window).load(function(){
    var $slide = $j('.slide'),
        $first = $slide.first(),
        $items = $j('.scrollable .items'),
        opacities = [0, 0, 0, 0, 0, 0, 0, 0, 0, 1.0, .8, .5, .2, .1],
        opacity = (opacities[Math.floor(Math.random() * opacities.length)] * 1.5) + .7,
        movementIn = [
            {x: 34, y: 66},
            {x: -34, y: -66}
        ],
        movementOut = [
            {x: -76, y: -132},
            {x: 76, y: 132}
        ],
        layer = drawTriangles(opacities),
        $next,
        nextIndex;

    fadeShapes(layer, movementIn, opacity);

    // Trans class used for slides using a transparent png… places triangles behind image
    if($first.hasClass('trans')) {
        $items.addClass('trans');
    }

    // Change slides every 6 seconds
    setInterval(function(){
        var $current = $slide.filter('.current');

        $next = $current.next('.slide');

        if($next.length == 0) {$next = $first;}

        nextIndex = $next.index();

        fadeShapes(layer, movementOut, 0);

        setTimeout(function(){
            $items.removeClass('trans');

            opacity = (opacities[Math.floor(Math.random() * opacities.length)] * 1.5) + .7;

            $slide.removeClass('current');
            $next.addClass('current');

            setColor(layer);
            fadeShapes(layer, movementIn, opacity);

            if($next.hasClass('trans')) {
                $items.addClass('trans');
            }
        }, 1250);
    }, 5000);


    $j('.banner').aviaSlider({
        autorotationSpeed: 4.0,
        animationSpeed: 1000,
        betweenBlockDelay:0,
        transition: 'fade',
        slides:".slide",
        showText: false
    });

});